@lightsparkdev/ui 1.0.5 → 1.0.7

package/dist/chunk-QQ2MHKHV.cjs

@@ -0,0 +1,239 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk3FA4RQGHcjs = require('./chunk-3FA4RQGH.cjs');
+
+
+var _chunkUEG2PUK7cjs = require('./chunk-UEG2PUK7.cjs');
+
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+
+
+var _chunkCB3IFR2Xcjs = require('./chunk-CB3IFR2X.cjs');
+
+
+var _chunkMNAZ4BDQcjs = require('./chunk-MNAZ4BDQ.cjs');
+
+
+var _chunkKSKKC6C2cjs = require('./chunk-KSKKC6C2.cjs');
+
+// src/components/Drawer.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var Drawer = (props) => {
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, true);
+  const [lastY, setLastY] = _react.useState.call(void 0, null);
+  const [totalDeltaY, setTotalDeltaY] = _react.useState.call(void 0, 0);
+  const [fractionVisible, setFractionVisible] = _react.useState.call(void 0, 1);
+  const [grabbing, setGrabbing] = _react.useState.call(void 0, false);
+  const drawerContainerRef = _react.useRef.call(void 0, null);
+  const handleClose = () => {
+    if (props.nonDismissable) {
+      return;
+    }
+    setIsOpen(false);
+    setTimeout(() => {
+      props.onClose && props.onClose();
+      setTotalDeltaY(0);
+      setLastY(null);
+    }, 300);
+  };
+  const handleTouchMove = (event) => {
+    var _a, _b;
+    if (props.nonDismissable) {
+      return;
+    }
+    if (lastY === null) {
+      setLastY(event.touches[0].clientY);
+    } else {
+      const deltaY = event.touches[0].clientY - lastY;
+      const topOfDrawer = (((_a = drawerContainerRef.current) == null ? void 0 : _a.getBoundingClientRect().top) || 0) + window.scrollY;
+      const drawerContainerHeight = ((_b = drawerContainerRef.current) == null ? void 0 : _b.getBoundingClientRect().height) || 1;
+      const newFractionVisible = Math.min(
+        1,
+        (window.innerHeight - topOfDrawer) / drawerContainerHeight
+      );
+      setFractionVisible(newFractionVisible);
+      setLastY(event.touches[0].clientY);
+      setTotalDeltaY((prev) => Math.max(prev + deltaY, 0));
+    }
+  };
+  const handleTouchStart = () => {
+    if (props.nonDismissable) {
+      return;
+    }
+    setGrabbing(true);
+  };
+  const handleTouchEnd = () => {
+    if (props.nonDismissable) {
+      return;
+    }
+    setGrabbing(false);
+    if (fractionVisible < 0.8) {
+      handleClose();
+    }
+    setTotalDeltaY(0);
+    setLastY(null);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Background,
+      {
+        isOpen,
+        fractionVisible,
+        onClick: handleClose
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      DrawerContainer,
+      {
+        isOpen,
+        onTouchMove: handleTouchMove,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        totalDeltaY,
+        grabbing,
+        ref: drawerContainerRef,
+        children: [
+          props.grabber && !props.nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Grabber, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GrabberBar, {}) }),
+          props.handleBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButtonContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk3FA4RQGHcjs.Button,
+            {
+              onClick: props.handleBack,
+              icon: "ChevronLeft",
+              kind: "ghost",
+              size: "Small"
+            }
+          ) }),
+          props.closeButton && !props.nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButtonContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCB3IFR2Xcjs.Icon, { name: "Close", width: 12 }) }) }),
+          props.children
+        ]
+      }
+    )
+  ] });
+};
+var Background = _styled2.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: ${_chunkZU72XWNEcjs.z.modalOverlay};
+
+  // Animate opacity
+  transition: opacity 0.3s ease-in-out;
+  opacity: ${(props) => props.isOpen ? props.fractionVisible : "0"};
+
+  animation: open 0.3s ease-in-out;
+
+  @keyframes open {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+var DrawerContainer = _styled2.default.div`
+  position: fixed;
+  max-height: 100dvh;
+  width: 100%;
+  background-color: ${({ theme }) => theme.bg};
+  right: 0;
+  bottom: 0;
+  transform: translateY(${(props) => `${props.totalDeltaY}px`});
+  z-index: ${_chunkZU72XWNEcjs.z.modalContainer};
+  border-radius: ${_chunkZUAO4DW3cjs.Spacing.px.lg} ${_chunkZUAO4DW3cjs.Spacing.px.lg} 0 0;
+  display: flex;
+  flex-direction: column;
+  padding: ${_chunkZUAO4DW3cjs.Spacing.px["6xl"]} ${_chunkZUAO4DW3cjs.Spacing.px.xl} ${_chunkZUAO4DW3cjs.Spacing.px["2xl"]}
+    ${_chunkZUAO4DW3cjs.Spacing.px.xl};
+  overflow-y: auto;
+
+  // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
+  ${(props) => props.grabbing && props.isOpen ? "" : "transition: transform 0.3s ease-in-out;"};
+
+  // Animate the drawer opening and closing, and make sure the the drawer stays closed.
+  animation: 0.3s ease-in-out
+    ${(props) => props.isOpen ? "openDrawer" : "closeDrawer forwards"};
+
+  @keyframes openDrawer {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0%);
+    }
+  }
+
+  @keyframes closeDrawer {
+    from {
+      transform: translateY(${(props) => `${props.totalDeltaY}px`});
+    }
+    to {
+      transform: translateY(100%);
+    }
+  }
+`;
+var Grabber = _styled2.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: ${_chunkZUAO4DW3cjs.Spacing.px.lg};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 9px;
+  cursor: pointer;
+`;
+var CloseButtonContainer = _styled2.default.div`
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  border-radius: 50%;
+  background-color: ${_chunkKSKKC6C2cjs.colors.grayBlue94};
+  padding: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+
+  * > * {
+    line-height: 14px;
+  }
+`;
+var CloseButton = _styled2.default.call(void 0, _chunkUEG2PUK7cjs.UnstyledButton)`
+  ${_chunkMNAZ4BDQcjs.standardFocusOutline}
+  width: 24px;
+  height: 24px;
+  justify-self: flex-end;
+`;
+var BackButtonContainer = _styled2.default.div`
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  border-radius: 50%;
+  padding: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+`;
+var GrabberBar = _styled2.default.div`
+  width: 36px;
+  height: 5px;
+  border-radius: 2.5px;
+  background: #c0c9d6;
+`;
+
+
+
+exports.Drawer = Drawer;

package/dist/chunk-QQKHEU6E.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Minus.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Minus() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M6.75 12H17.25",
+          stroke: "currentColor",
+          strokeWidth: "1.40621",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Minus = Minus;

package/dist/chunk-QR6XKKRK.cjs

@@ -0,0 +1,242 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkIXV57HL7cjs = require('./chunk-IXV57HL7.cjs');
+
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+
+
+var _chunkMNAZ4BDQcjs = require('./chunk-MNAZ4BDQ.cjs');
+
+
+var _chunkPDZ23BEDcjs = require('./chunk-PDZ23BED.cjs');
+
+// src/styles/fields.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');
+var maxFieldWidth = "100%";
+var fieldWidth = "100%";
+var inputSpacingPx = 24;
+var formButtonTopMargin = "32px";
+var formButtonTopMarginStyle = _react.css`
+  margin-top: ${formButtonTopMargin};
+`;
+var standardBorderColor = ({ theme }) => _react.css`
+  border-color: ${_chunkPDZ23BEDcjs.themeOr.call(void 0, theme.c1Neutral, theme.mcNeutral)({ theme })};
+`;
+var inputBlockStyle = ({
+  theme,
+  hasValue,
+  hasError
+}) => _react.css`
+  ${_chunkMNAZ4BDQcjs.subtext.call(void 0, { theme })}
+  ${standardBorderColor({ theme })}
+  ${_chunkMNAZ4BDQcjs.standardBorderRadius.call(void 0, 8)}
+  background-color: ${theme.bg};
+  border-width: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+  cursor: pointer;
+  padding: 52.5px;
+  ${hasError ? `border-style: solid; border-color: ${theme.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
+`;
+var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
+var textInputFontWeight = 600;
+var textInputBorderRadiusPx = 8;
+var textInputPaddingPx = 12;
+var textInputPadding = `${textInputPaddingPx}px`;
+var textInputBorderColor = ({ theme }) => _chunkPDZ23BEDcjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme });
+var textInputBorderColorFocused = ({ theme }) => _chunkPDZ23BEDcjs.themeOr.call(void 0, theme.hcNeutral, theme.hcNeutral)({ theme });
+var textInputActiveStyles = ({
+  theme,
+  paddingLeftPx,
+  paddingRightPx
+}) => _react.css`
+  border-color: ${textInputBorderColorFocused({ theme })};
+  border-width: 2px;
+  padding: ${textInputPaddingPx - 1}px;
+  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
+  ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+`;
+var defaultTextInputTypography = {
+  type: "Body",
+  size: "Small",
+  color: "text"
+};
+var textInputStyle = ({
+  theme,
+  active,
+  disabled,
+  hasError,
+  paddingLeftPx,
+  paddingRightPx,
+  typography
+}) => {
+  var _a;
+  return _react.css`
+  border-radius: ${textInputBorderRadiusPx}px;
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
+  cursor: ${disabled ? "not-allowed" : "auto"};
+  box-sizing: border-box;
+  font-weight: ${textInputFontWeight};
+
+  position: relative;
+  z-index: ${_chunkZU72XWNEcjs.z.textInput};
+  font-family: ${(_a = theme.typography) == null ? void 0 : _a.fontFamilies.main};
+  padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
+  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
+  ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
+  border-style: solid;
+  border-width: ${hasError ? "2" : "1"}px;
+  border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
+  line-height: 22px;
+  outline: none;
+
+  ${_chunkIXV57HL7cjs.applyTypography.call(void 0, 
+    theme,
+    (typography == null ? void 0 : typography.type) || defaultTextInputTypography.type,
+    (typography == null ? void 0 : typography.size) || defaultTextInputTypography.size,
+    (typography == null ? void 0 : typography.color) || defaultTextInputTypography.color
+  )}
+
+  width: ${fieldWidth};
+  max-width: ${maxFieldWidth};
+  text-overflow: ellipsis;
+  &:focus,
+  &:active,
+  &:has(:focus) {
+    ${textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+  }
+
+  ${active && textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+
+  &::placeholder {
+    color: ${textInputPlaceholderColor({ theme })};
+  }
+
+  &:focus::placeholder {
+    color: ${textInputPlaceholderColor({ theme })};
+  }
+`;
+};
+var FieldError = _styled2.default.div`
+  background-color: rgba(242, 239, 255, 1);
+  padding: 16px 16px 8px;
+  margin-top: -8px;
+  border-radius: 0 0 8px 8px;
+  position: relative;
+  z-index: ${_chunkZU72XWNEcjs.z.fieldError};
+`;
+var aboveFieldError = ({
+  theme,
+  hasError
+}) => _react.css`
+  ${hasError ? "border: none !important" : ""};
+  background-color: ${theme.bg};
+  position: relative;
+  z-index: ${_chunkZU72XWNEcjs.z.fieldError + 1};
+  ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
+`;
+var inputSubtextSeconds = 0.25;
+function InputSubtext({
+  text,
+  hasError = false,
+  tooltipId
+}) {
+  const timeoutRef = _react3.useRef.call(void 0, null);
+  const [subtext2, setSubtext] = _react3.useState.call(void 0, text);
+  const [visible, setVisible] = _react3.useState.call(void 0, Boolean(text));
+  _react3.useLayoutEffect.call(void 0, () => {
+    if (text) {
+      setSubtext(text);
+      setVisible(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    } else {
+      setVisible(false);
+      timeoutRef.current = setTimeout(() => {
+        setSubtext(void 0);
+      }, inputSubtextSeconds * 1e3);
+    }
+  }, [text]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledInputSubtext,
+    {
+      visible,
+      hasError,
+      cursorPointer: Boolean(tooltipId),
+      children: tooltipId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
+    }
+  );
+}
+var StyledInputSubtext = _styled2.default.div`
+  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
+  margin-left: ${({ visible }) => visible ? "8px" : "0px"};
+  font-size: 12px;
+  font-size: ${({ visible }) => visible ? "12px" : "0px"};
+  opacity: ${({ visible }) => visible ? "1" : "0"};
+  overflow: hidden;
+  transition:
+    font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
+    opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
+    margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
+  color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
+  cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
+`;
+var labelStyle = ({
+  theme,
+  hasError
+}) => _react.css`
+  color: ${hasError ? theme.danger : theme.text};
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & + * {
+    margin-top: 12px;
+  }
+  * ~ & {
+    margin-top: 40px;
+  }
+`;
+var Label = _styled2.default.label`
+  ${_chunkMNAZ4BDQcjs.subtext}
+  ${labelStyle}
+`;
+var LabelDiv = _styled2.default.div`
+  ${_chunkMNAZ4BDQcjs.subtext}
+  ${labelStyle}
+`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.maxFieldWidth = maxFieldWidth; exports.fieldWidth = fieldWidth; exports.inputSpacingPx = inputSpacingPx; exports.formButtonTopMargin = formButtonTopMargin; exports.formButtonTopMarginStyle = formButtonTopMarginStyle; exports.standardBorderColor = standardBorderColor; exports.inputBlockStyle = inputBlockStyle; exports.textInputPlaceholderColor = textInputPlaceholderColor; exports.textInputFontWeight = textInputFontWeight; exports.textInputBorderRadiusPx = textInputBorderRadiusPx; exports.textInputPaddingPx = textInputPaddingPx; exports.textInputPadding = textInputPadding; exports.textInputBorderColor = textInputBorderColor; exports.textInputBorderColorFocused = textInputBorderColorFocused; exports.defaultTextInputTypography = defaultTextInputTypography; exports.textInputStyle = textInputStyle; exports.FieldError = FieldError; exports.aboveFieldError = aboveFieldError; exports.InputSubtext = InputSubtext; exports.StyledInputSubtext = StyledInputSubtext; exports.labelStyle = labelStyle; exports.Label = Label; exports.LabelDiv = LabelDiv;

package/dist/chunk-QYJOJVJD.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/ArrowCircleTier3.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ArrowCircleTier3() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 28 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "14", cy: "14.9639", r: "14", fill: "white" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M19.7144 18.998L19.4944 10.298L10.7944 10.098L10.8144 11.998L16.6144 11.958L8.73438 19.838L9.97438 21.078L17.8344 13.218L17.7944 18.978L19.7144 18.998Z",
+            fill: "#0048F7"
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+exports.ArrowCircleTier3 = ArrowCircleTier3;

package/dist/chunk-QZ7U4QKB.cjs

@@ -0,0 +1,94 @@
+"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 _chunkCB3IFR2Xcjs = require('./chunk-CB3IFR2X.cjs');
+
+
+var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
+
+
+var _chunkKSKKC6C2cjs = require('./chunk-KSKKC6C2.cjs');
+
+// src/components/PageSection/PageSectionNav.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _core = require('@lightsparkdev/core');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var StyledPageSectionNav = _styled2.default.div`
+  display: none;
+  flex-direction: column;
+  margin-right: 32px;
+  position: relative;
+
+  ${_chunkKW3JYLRIcjs.bp.minMd(`
+    display: flex;
+    width: 150px;
+  `)}
+
+  ${_chunkKW3JYLRIcjs.bp.lg(`
+    width: 200px;
+  `)}
+`;
+var PageSectionList = _styled2.default.ul`
+  margin: 0;
+  padding: 0;
+  position: sticky;
+  top: ${({ top }) => top}px;
+`;
+var StyledPageSectionNavItem = _styled2.default.li`
+  align-items: center;
+  color: ${_chunkKSKKC6C2cjs.colors.gray40};
+  display: flex;
+  list-style: none;
+
+  ${_chunkCB3IFR2Xcjs.IconContainer}:not(:first-of-type) {
+    visibility: hidden;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.hcNeutral};
+
+    ${_chunkCB3IFR2Xcjs.IconContainer} {
+      visibility: visible;
+    }
+  }
+`;
+var PageSectionListItem = ({ leftIcon, label, sectionId }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledPageSectionNavItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _chunkCRVO2CALcjs.TextButton,
+  {
+    text: label,
+    padding: "8px 0",
+    leftIcon: { name: leftIcon },
+    onClick: () => {
+      if (sectionId) {
+        window.location.replace(`#${sectionId}`);
+      } else {
+        window.location.replace("#");
+      }
+    }
+  }
+) });
+function PageSectionNav({
+  headerOffset = 0,
+  pageSectionNavItems
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledPageSectionNav, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageSectionList, { top: headerOffset + _chunk46AVXTFOcjs.pageSectionScrollOffset, children: pageSectionNavItems.filter(_core.notNullUndefined).map((item) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      PageSectionListItem,
+      {
+        leftIcon: item.leftIcon,
+        label: item.label,
+        sectionId: item.sectionId
+      },
+      item.sectionId
+    );
+  }) }) });
+}
+
+
+
+exports.PageSectionNav = PageSectionNav;

package/dist/chunk-R6JXXAU3.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/NodeAdd.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function NodeAdd() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M6 3.25V8.75M3.25 6H8.75M11.5 6C11.5 9.03757 9.03757 11.5 6 11.5C2.96243 11.5 0.5 9.03757 0.5 6C0.5 2.96243 2.96243 0.5 6 0.5C9.03757 0.5 11.5 2.96243 11.5 6Z",
+          stroke: "currentColor",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.NodeAdd = NodeAdd;

package/dist/chunk-RCWDQM37.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Remove.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Remove() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 17 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M11.0203 5.72973L6.47973 10.2703M11.0203 10.2703L6.47973 5.72973M15.75 8C15.75 11.866 12.616 15 8.75 15C4.88401 15 1.75 11.866 1.75 8C1.75 4.13401 4.88401 1 8.75 1C12.616 1 15.75 4.13401 15.75 8Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Remove = Remove;

package/dist/{chunk-KPAVY3UH.js → chunk-REL56P3K.js}

@@ -45,6 +45,7 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   grayBlue45: "#676F80",
   grayBlue57: "#8B8E98",
   grayBlue67: "#9BA7B9",
+  grayBlue69: "#A6A9BA",
   grayBlue80: "#C0C9D6",
   grayBlue88: "#DEDFE4",
   grayBlue94: "#EBEEF2",