@lightsparkdev/ui 1.0.6 → 1.0.8

package/dist/chunk-JWWKSKXB.cjs

@@ -0,0 +1,425 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkGSYM5JMBcjs = require('./chunk-GSYM5JMB.cjs');
+
+
+var _chunkMHOXWPRAcjs = require('./chunk-MHOXWPRA.cjs');
+
+
+var _chunkLIVPDWXDcjs = require('./chunk-LIVPDWXD.cjs');
+
+
+var _chunk6LHW62FGcjs = require('./chunk-6LHW62FG.cjs');
+
+
+var _chunkGCE3EVF6cjs = require('./chunk-GCE3EVF6.cjs');
+
+
+
+var _chunkHTFKWW4Scjs = require('./chunk-HTFKWW4S.cjs');
+
+
+var _chunkSEJXEWOJcjs = require('./chunk-SEJXEWOJ.cjs');
+
+
+
+var _chunkLLVW7HU4cjs = require('./chunk-LLVW7HU4.cjs');
+
+
+var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
+
+
+var _chunkBOBYW7PPcjs = require('./chunk-BOBYW7PP.cjs');
+
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+
+
+var _chunk4P7RPU32cjs = require('./chunk-4P7RPU32.cjs');
+
+
+var _chunkBY47I7ZPcjs = require('./chunk-BY47I7ZP.cjs');
+
+
+
+
+
+var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
+
+
+var _chunkTMTEVKSDcjs = require('./chunk-TMTEVKSD.cjs');
+
+
+
+var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
+
+
+
+var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+
+// src/components/Modal.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function isSubmitLinkWithHref(submitLink) {
+  return Boolean(submitLink && "href" in submitLink);
+}
+function Modal({
+  visible,
+  topContent,
+  title,
+  description,
+  children,
+  onClose,
+  onCancel,
+  cancelDisabled,
+  cancelHidden,
+  ghost,
+  onSubmit,
+  submitDisabled,
+  submitLoading,
+  submitLoadingKind,
+  submitText,
+  submitLink,
+  cancelText = "Cancel",
+  firstFocusRef,
+  smKind = "default",
+  top,
+  nonDismissable = false,
+  autoFocus = true,
+  width = 460,
+  progressBar,
+  buttonLayout = "horizontal",
+  extraActions,
+  handleBack,
+  appendToElement
+}) {
+  const visibleChangedRef = _react.useRef.call(void 0, false);
+  const nodeRef = _react.useRef.call(void 0, null);
+  const [defaultFirstFocusRef, defaultFirstFocusRefCb] = _chunkGSYM5JMBcjs.useLiveRef.call(void 0, );
+  const ref = firstFocusRef || defaultFirstFocusRef;
+  const [nodeReady, setNodeReady] = _react2.default.useState(false);
+  const overlayRef = _react.useRef.call(void 0, null);
+  const prevFocusedElement = _react.useRef.call(void 0, );
+  const modalContainerRef = _react.useRef.call(void 0, null);
+  const bp2 = _chunkKW3JYLRIcjs.useBreakpoints.call(void 0, );
+  const isSm = bp2.current("sm" /* sm */);
+  _react.useEffect.call(void 0, () => {
+    if (visible !== visibleChangedRef.current) {
+      visibleChangedRef.current = visible;
+    }
+  }, [visible]);
+  const visibleChanged = visible !== visibleChangedRef.current;
+  _react.useEffect.call(void 0, () => {
+    prevFocusedElement.current = document.activeElement;
+    const elementToAppendTo = appendToElement != null ? appendToElement : document.body;
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      elementToAppendTo.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        elementToAppendTo.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, [appendToElement]);
+  _react.useEffect.call(void 0, () => {
+    const handleOutsideClick = (event) => {
+      if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (visible && event.key === "Escape" && !nonDismissable) {
+        onClose();
+      }
+    };
+    if (visible) {
+      if (modalContainerRef.current) {
+        modalContainerRef.current.addEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRef.current) {
+        overlayRef.current.addEventListener("click", handleOutsideClick);
+      }
+    } else {
+      if (modalContainerRef.current) {
+        modalContainerRef.current.removeEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRef.current) {
+        overlayRef.current.removeEventListener("click", handleOutsideClick);
+      }
+    }
+    const containerRef = modalContainerRef.current;
+    const overlayRefVar = overlayRef.current;
+    return () => {
+      if (containerRef) {
+        containerRef.removeEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRefVar) {
+        overlayRefVar.removeEventListener("click", handleOutsideClick);
+      }
+    };
+  }, [onClose, visible, nonDismissable]);
+  _react.useLayoutEffect.call(void 0, () => {
+    if (visible) {
+      if (visibleChanged) {
+        prevFocusedElement.current = document.activeElement;
+      }
+      if (typeof ref === "object" && (ref == null ? void 0 : ref.current) && autoFocus) {
+        ref.current.focus();
+      }
+    } else if (visibleChanged && prevFocusedElement.current) {
+      prevFocusedElement.current.focus();
+    }
+  }, [visible, visibleChanged, ref, autoFocus]);
+  function onClickCloseButton(event) {
+    event == null ? void 0 : event.stopPropagation();
+    onClose();
+  }
+  function onSubmitForm(e) {
+    e.preventDefault();
+    if (!submitDisabled && onSubmit) {
+      onSubmit();
+    }
+  }
+  function onClickCancel() {
+    if (onCancel) {
+      onCancel();
+    } else {
+      onClose();
+    }
+  }
+  const linkIsHref = isSubmitLinkWithHref(submitLink);
+  const linkIsRoute = !linkIsHref && submitLink;
+  const buttonContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
+      var _b = _a, { placement, text } = _b, rest = _chunkLKKJVJCGcjs.__objRest.call(void 0, _b, ["placement", "text"]);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHTFKWW4Scjs.Button, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+    }),
+    !isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkHTFKWW4Scjs.Button,
+      {
+        disabled: cancelDisabled,
+        onClick: onClickCancel,
+        text: cancelText
+      }
+    ),
+    (onSubmit || submitLink) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkHTFKWW4Scjs.Button,
+      {
+        kind: "primary",
+        disabled: submitDisabled,
+        text: submitText != null ? submitText : "Continue",
+        loading: submitLoading,
+        loadingKind: submitLoadingKind,
+        to: linkIsRoute ? submitLink.to : void 0,
+        externalLink: linkIsHref ? submitLink.href : void 0,
+        filename: linkIsHref ? submitLink.filename : void 0,
+        type: submitLink ? "button" : "submit",
+        onClick: submitLink ? onSubmit : void 0
+      }
+    ),
+    isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHTFKWW4Scjs.Button, { onClick: onClose, text: cancelText }),
+    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
+      var _d = _c, { placement, text } = _d, rest = _chunkLKKJVJCGcjs.__objRest.call(void 0, _d, ["placement", "text"]);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHTFKWW4Scjs.Button, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+    })
+  ] });
+  let titleContent = null;
+  if (title) {
+    if (typeof title === "string") {
+      titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLLVW7HU4cjs.Headline, { heading: "h4", size: _chunkTMTEVKSDcjs.TokenSize.Small, children: title });
+    } else {
+      titleContent = _chunkGCE3EVF6cjs.toReactNodes.call(void 0, title);
+    }
+  }
+  let descriptionContent = null;
+  if (description) {
+    if (typeof description === "string") {
+      descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSEJXEWOJcjs.Body, { size: "ExtraSmall", content: description }) });
+    } else {
+      descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { children: _chunkGCE3EVF6cjs.toReactNodes.call(void 0, description) });
+    }
+  }
+  let topContentNode = null;
+  if (topContent) {
+    topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLIVPDWXDcjs.IconWithCircleBackground, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, topContent)) });
+  }
+  const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+    progressBar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkMHOXWPRAcjs.ProgressBar,
+      {
+        progressPercentage: progressBar.progressPercentage,
+        isSm: progressBar.isSm
+      }
+    ) }) : null,
+    topContentNode,
+    titleContent,
+    descriptionContent,
+    children,
+    onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalButtonColumn, { children: buttonContent }) : null
+  ] });
+  let content;
+  if (smKind === "drawer" && isSm) {
+    content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk6LHW62FGcjs.Drawer,
+      {
+        onClose: () => onClickCloseButton(),
+        closeButton: true,
+        nonDismissable,
+        handleBack,
+        children: modalContent
+      }
+    );
+  } else {
+    content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+      !(smKind === "fullscreen" && bp2.isSm()) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalOverlay, { ref: overlayRef }) : null,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ModalContainer,
+        {
+          "aria-modal": true,
+          "aria-hidden": true,
+          tabIndex: -1,
+          role: "dialog",
+          ref: modalContainerRef,
+          top: top || (smKind === "default" ? _chunkPYL3O7AFcjs.standardContentInset.smPx : 0),
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalContent, { width, ghost, smKind, children: [
+            !firstFocusRef && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+            !ghost && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalNavigation, { children: [
+              handleBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBY47I7ZPcjs.Icon, { name: "ChevronLeft", width: 16 }) }),
+              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBY47I7ZPcjs.Icon, { name: "Close", width: 9 }) })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent })
+          ] })
+        }
+      )
+    ] });
+  }
+  return visible && nodeReady && nodeRef.current ? _reactdom2.default.createPortal(
+    onSubmit ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "form", { onSubmit: onSubmitForm, children: content }) : content,
+    nodeRef.current
+  ) : null;
+}
+var DefaultFocusTarget = _styled2.default.call(void 0, _chunkBOBYW7PPcjs.UnstyledButton)`
+  position: absolute;
+  top: -30px;
+  width: 0;
+  height: 0;
+`;
+var ModalOverlay = _styled2.default.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: ${_chunkZU72XWNEcjs.z.modalOverlay};
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+`;
+var ModalContainer = _styled2.default.div`
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: ${_chunkZU72XWNEcjs.z.modalContainer};
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme }) => theme.text};
+  ${(props) => `top: ${props.top}px;`}
+`;
+var contentTopMarginPx = 24;
+var Description = _styled2.default.div`
+  color: ${({ theme }) => theme.mcNeutral};
+  margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
+  & + * {
+    margin-top: ${contentTopMarginPx}px;
+  }
+`;
+var ModalButtonRow = _styled2.default.div`
+  margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.lg};
+  ${_chunkKW3JYLRIcjs.bp.minSm(`display: flex;`)}
+  gap: 10px;
+
+  ${_chunkHTFKWW4Scjs.ButtonSelector.call(void 0, )} {
+    width: 50%;
+    ${_chunkKW3JYLRIcjs.bp.sm(`
+      width: 100%;
+    `)}
+  }
+`;
+var ModalButtonColumn = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
+
+  ${_chunkHTFKWW4Scjs.ButtonSelector.call(void 0, )} {
+    width: 100%;
+  }
+
+  margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.lg};
+`;
+var ModalContent = _styled2.default.div`
+  pointer-events: auto;
+  transition: width 0.25s ease-in;
+
+  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkPYL3O7AFcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
+  ${_chunk4P7RPU32cjs.overflowAutoWithoutScrollbars}
+  ${(props) => props.smKind === "fullscreen" && _chunkKW3JYLRIcjs.bp.isSm() ? `
+    width: 100%;
+    height: 100%;
+  ` : `
+    ${props.ghost ? "" : _chunkPYL3O7AFcjs.standardBorderRadius.call(void 0, 16)}
+    ${_chunkPYL3O7AFcjs.standardContentInset.smCSS.styles}
+    width: ${props.width}px;
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+  `}
+  ${(props) => props.ghost ? "" : "padding: 16px 16px 40px;"}
+
+  ${_chunkLLVW7HU4cjs.headlineSelector.call(void 0, "h4")} { {
+    margin: 0;
+    & + *:not(${_chunk6VA4SAHQcjs.select.call(void 0, Description)}) {
+      margin-top: ${contentTopMarginPx}px;
+    }
+  }
+`;
+var ModalNavigation = _styled2.default.div`
+  display: grid;
+  grid-auto-flow: column;
+  width: 100%;
+`;
+var BackButton = _styled2.default.call(void 0, _chunkBOBYW7PPcjs.UnstyledButton)`
+  ${_chunkPYL3O7AFcjs.standardFocusOutline}
+  width: 24px;
+  height: 24px;
+  justify-self: flex-start;
+`;
+var CloseButton = _styled2.default.call(void 0, _chunkBOBYW7PPcjs.UnstyledButton)`
+  ${_chunkPYL3O7AFcjs.standardFocusOutline}
+  width: 24px;
+  height: 24px;
+  justify-self: flex-end;
+`;
+var ModalContentInner = _styled2.default.div`
+  ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
+  ${(props) => props.ghost ? "" : `${_chunkKW3JYLRIcjs.bp.sm(`
+    padding-left: 10px;
+    padding-right: 10px;
+  `)}`}
+`;
+
+
+
+exports.Modal = Modal;

package/dist/{chunk-AKGW3FMJ.js → chunk-JZJQOZEN.js}

@@ -1,6 +1,6 @@
 import {
   renderTypography
-} from "./chunk-RQLRNKOP.js";
+} from "./chunk-4IC7HDY4.js";
 import {
   isExternalLinkNode,
   isIconNode,
@@ -8,7 +8,7 @@ import {
   isNextLinkNode,
   isTextNode,
   toNonTypographicReactNodes
-} from "./chunk-HNK2KIC7.js";
+} from "./chunk-UC6SP4KJ.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/chunk-KACMKEQC.cjs

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkBY47I7ZPcjs = require('./chunk-BY47I7ZP.cjs');
+
+// src/components/ContentTable.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ContentTable({
+  columns,
+  rows
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledContentTable, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", {}),
+      columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, column.key))
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: rows.map((row, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: row.title }),
+      columns.map((column) => {
+        const value = row[column.key];
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: value === true ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBY47I7ZPcjs.Icon, { name: "CheckmarkCircleGreen", width: 16 }) : value }, column.key);
+      })
+    ] }, index)) })
+  ] });
+}
+var StyledContentTable = _styled2.default.table`
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid ${({ theme }) => theme.c1Neutral};
+  color: ${({ theme }) => theme.c6Neutral};
+
+  tr:last-child td:first-child {
+    border-bottom-left-radius: 10px;
+  }
+
+  tr:last-child td:last-child {
+    border-bottom-right-radius: 10px;
+  }
+
+  th,
+  td {
+    padding: 26px 12px;
+    border: 1px solid #e5e5e5;
+  }
+  th {
+    text-align: center;
+  }
+  td {
+    vertical-align: middle;
+    text-align: center;
+  }
+`;
+
+
+
+
+exports.ContentTable = ContentTable; exports.StyledContentTable = StyledContentTable;

package/dist/{chunk-QEZ7L6YF.js → chunk-KKK2ML75.js}

@@ -1,6 +1,6 @@
 import {
   TextInput
-} from "./chunk-M7E2PMFK.js";
+} from "./chunk-DPSSQNBK.js";
 import {
   addCommasToDigits,
   removeChars,