@lightsparkdev/ui 1.0.8 → 1.0.9

package/dist/chunk-62UAIR5O.cjs

@@ -0,0 +1,462 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkNROZVENVcjs = require('./chunk-NROZVENV.cjs');
+
+
+var _chunkSFTKSNEKcjs = require('./chunk-SFTKSNEK.cjs');
+
+
+var _chunkKM26ZJYZcjs = require('./chunk-KM26ZJYZ.cjs');
+
+
+var _chunkFRXVOBFVcjs = require('./chunk-FRXVOBFV.cjs');
+
+
+var _chunkGFKY6YX2cjs = require('./chunk-GFKY6YX2.cjs');
+
+
+var _chunkVSBIQ3WKcjs = require('./chunk-VSBIQ3WK.cjs');
+
+
+
+var _chunkNVVAOGNLcjs = require('./chunk-NVVAOGNL.cjs');
+
+
+var _chunkAJP3GW6Dcjs = require('./chunk-AJP3GW6D.cjs');
+
+
+var _chunkZO52GP5Zcjs = require('./chunk-ZO52GP5Z.cjs');
+
+
+var _chunk3XWROTDTcjs = require('./chunk-3XWROTDT.cjs');
+
+
+var _chunkST3UQPZYcjs = require('./chunk-ST3UQPZY.cjs');
+
+
+var _chunkM72EXGIScjs = require('./chunk-M72EXGIS.cjs');
+
+
+var _chunkVZEYA2KHcjs = require('./chunk-VZEYA2KH.cjs');
+
+
+var _chunkLHXL6GOOcjs = require('./chunk-LHXL6GOO.cjs');
+
+
+var _chunk4WKQPWLIcjs = require('./chunk-4WKQPWLI.cjs');
+
+
+
+
+
+
+var _chunk23NA5VW6cjs = require('./chunk-23NA5VW6.cjs');
+
+
+var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
+
+
+var _chunkYDTPEU32cjs = require('./chunk-YDTPEU32.cjs');
+
+
+var _chunkO7USIZI6cjs = require('./chunk-O7USIZI6.cjs');
+
+// src/components/CardForm/CardForm.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 descriptionTypography = {
+  primary: {
+    text: {
+      type: "Body Strong",
+      size: "Small",
+      color: "mcNeutral"
+    },
+    link: {
+      type: "Body Strong",
+      size: "Small",
+      color: "text"
+    }
+  },
+  secondary: {
+    text: {
+      type: "Body Strong",
+      size: "Small",
+      color: "mcNeutral"
+    },
+    link: {
+      type: "Body Strong",
+      size: "Small",
+      color: "text"
+    }
+  },
+  tertiary: {
+    text: {
+      type: "Body",
+      size: "Large",
+      color: "mcNeutral"
+    },
+    link: {
+      type: "Body",
+      size: "Large",
+      color: "text"
+    }
+  }
+};
+function resolveProps(args) {
+  const isPrimary = args.kind === "primary";
+  const isSecondary = args.kind === "secondary";
+  const isTertiary = args.kind === "tertiary";
+  const paddingY = isPrimary || isTertiary ? 56 : 40;
+  const paddingX = isSecondary || isTertiary ? 40 : 56;
+  const textAlign = args.textAlign || "left";
+  const shadow = isPrimary ? "soft" : isTertiary ? "hard" : "none";
+  const borderRadius = isSecondary ? 8 : 24;
+  const border = isSecondary;
+  return {
+    paddingY,
+    paddingX,
+    shadow,
+    borderRadius,
+    border,
+    textAlign
+  };
+}
+function CardForm({
+  children,
+  disabled,
+  topContent = null,
+  title,
+  description,
+  onSubmit,
+  titleRightIcon,
+  /* In some cases eg third party libs we can't avoid the need for child forms, so the
+     top level element must be a div. Avoid using this prop generally except when necessary: */
+  hasChildForm,
+  wide = false,
+  kind = "primary",
+  textAlign: textAlignProp,
+  belowFormContent
+}) {
+  const { paddingY, paddingX, shadow, borderRadius, border, textAlign } = resolveProps({ kind, textAlign: textAlignProp });
+  const onSubmitForm = _react3.useCallback.call(void 0, 
+    (e) => {
+      e.preventDefault();
+      if (disabled) {
+        return;
+      }
+      if (onSubmit) {
+        onSubmit(e);
+      }
+    },
+    [onSubmit, disabled]
+  );
+  const formattedDescription = description ? _chunkVZEYA2KHcjs.toReactNodesWithTypographyMap.call(void 0, description, descriptionTypography[kind]) : null;
+  const belowFormContentNodes = belowFormContent ? _chunkLHXL6GOOcjs.toReactNodes.call(void 0, belowFormContent) : null;
+  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CardFormContent, { children: [
+    topContent,
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardHeadline, { hasTopContent: Boolean(topContent), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkSFTKSNEKcjs.Headline,
+      {
+        content: [
+          title,
+          ...titleRightIcon ? [_chunk4WKQPWLIcjs.icon.call(void 0, { name: titleRightIcon.name, ml: 4 })] : []
+        ],
+        display: "inline-flex"
+      }
+    ) }),
+    formattedDescription && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormSubtitle, { children: formattedDescription }),
+    children
+  ] });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CardFormContainer, { children: [
+    hasChildForm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StyledCardFormDiv,
+      {
+        wide,
+        shadow,
+        borderRadius,
+        border,
+        textAlign,
+        paddingY,
+        paddingX,
+        children: content
+      }
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StyledCardForm,
+      {
+        wide,
+        onSubmit: onSubmitForm,
+        shadow,
+        borderRadius,
+        border,
+        textAlign,
+        paddingY,
+        paddingX,
+        noValidate: true,
+        children: content
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BelowCardFormContent, { children: belowFormContentNodes })
+  ] });
+}
+var CardFormContainer = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+
+  ${_chunkKW3JYLRIcjs.bp.sm(`
+    height: 100%;
+  `)}
+`;
+var CardFormContent = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+`;
+var BelowCardFormContent = _styled2.default.div`
+  text-align: center;
+  margin-top: 32px;
+
+  ${_chunkKW3JYLRIcjs.bp.sm(`
+    margin-bottom: 32px;
+  `)}
+`;
+var CardFormSubtitle = _styled2.default.div``;
+var CardFormButtonRow = _styled2.default.div`
+  display: flex;
+  justify-content: ${({ justify }) => (
+  /* Default left */
+  justify === "center" ? "center" : "left"
+)};
+  margin-top: 32px;
+  ${_chunk3XWROTDTcjs.ButtonSelector.call(void 0, "* + ")} {
+    margin-left: 10px;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 32px;
+  }
+`;
+var fieldLabelMarginPx = 12;
+var CardFormFieldLabel = _styled2.default.label`
+  display: block;
+  margin-top: ${_chunkNVVAOGNLcjs.inputSpacingPx}px;
+  color: ${({ theme }) => theme.text};
+  font-size: ${_chunkZO52GP5Zcjs.pxToRems.call(void 0, 14)};
+  font-weight: 700;
+  & + * {
+    margin-top: ${fieldLabelMarginPx}px;
+  }
+`;
+function CardFormDataFieldValue({ text }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDataFieldValue, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFRXVOBFVcjs.ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
+}
+var StyledCardFormDataFieldValue = _styled2.default.div`
+  margin-top: 4px;
+  color: ${({ theme }) => theme.mcNeutral};
+`;
+var CardFormFullWidth = _styled2.default.div``;
+var CardFormFullTopContent = _styled2.default.div`
+  ${_chunkKW3JYLRIcjs.bp.minSm(`
+    border-radius: 16px 16px 0 0;
+    overflow: hidden;
+  `)}
+`;
+var StyledCardFormCheckboxParagraph = _styled2.default.div`
+  display: flex;
+  color: ${({ theme }) => theme.mcNeutral};
+`;
+var formInset = ({ wide, paddingX, paddingY }) => _react.css`
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  padding-right: ${paddingX}px;
+  padding-left: ${paddingX}px;
+  padding-top: ${paddingY}px;
+  padding-bottom: ${paddingY}px;
+
+  ${_chunkKW3JYLRIcjs.bp.minSm(`
+    width: ${wide ? 700 : 505}px;
+  `)}
+
+  ${_chunkKW3JYLRIcjs.bp.sm(`
+    padding: 0;
+  `)}
+
+  ${_chunk23NA5VW6cjs.standardContentInset.smCSS}
+
+  & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
+    ${_chunkKW3JYLRIcjs.bp.sm(`
+      width: calc(100% + ${_chunk23NA5VW6cjs.standardContentInset.smPx * 2}px);
+      margin-left: -${_chunk23NA5VW6cjs.standardContentInset.smPx}px;
+    `)}
+
+    ${_chunkKW3JYLRIcjs.bp.minSm(`
+      width: calc(100% + ${paddingX * 2}px);
+      margin-left: -${paddingX}px;
+    `)}
+  }
+
+  & ${CardFormFullTopContent} {
+    ${_chunkKW3JYLRIcjs.bp.minSm(`
+      margin-top: -${paddingY}px;
+    `)}
+  }
+`;
+var StyledCardFormStyle = ({
+  theme,
+  wide,
+  shadow,
+  borderRadius,
+  border,
+  textAlign,
+  paddingX,
+  paddingY
+}) => {
+  return _react.css`
+    ${formInset({ wide, paddingX, paddingY })}
+    ${shadow === "soft" ? _chunk23NA5VW6cjs.standardCardShadow : shadow === "hard" ? _chunk23NA5VW6cjs.standardCardShadowHard : ""}
+
+    background-color: ${theme.bg};
+    position: relative;
+    height: 100%;
+    ${border ? `border: 1px solid ${theme.vlcNeutral};` : ""}
+
+    ${_chunkKW3JYLRIcjs.bp.sm(`
+      box-shadow: none;
+    `)}
+
+    ${_chunkKW3JYLRIcjs.bp.minSm(`
+      border-radius: ${borderRadius}px;
+    `)}
+
+    ${CardHeadline}, ${CardFormSubtitle} {
+      text-align: ${textAlign};
+    }
+
+    ${CardFormSubtitle} + * {
+      margin-top: 40px !important;
+    }
+
+    ${CardFormButtonRow}, ${_chunkAJP3GW6Dcjs.StyledButtonRow} {
+      ${_chunk3XWROTDTcjs.ButtonSelector.call(void 0, )} {
+        margin-top: 0;
+      }
+    }
+
+    ${_chunkNROZVENVcjs.StyledSelect}, ${_chunkVSBIQ3WKcjs.ToggleContainer} {
+      margin-top: ${_chunkNVVAOGNLcjs.inputSpacingPx}px;
+    }
+
+    ${CardFormFieldLabel} {
+      margin-top: ${_chunkNVVAOGNLcjs.inputSpacingPx}px;
+
+      & + ${_chunkNROZVENVcjs.StyledSelect} {
+        margin-top: ${fieldLabelMarginPx}px;
+      }
+    }
+
+    ${_chunkGFKY6YX2cjs.TextInputHalfRow} > ${_chunkNROZVENVcjs.StyledSelect} {
+      margin-top: 0;
+    }
+
+    ${_chunkST3UQPZYcjs.LoadingWrapper} {
+      margin: 32px 0;
+      * + * {
+        margin-top: 0;
+      }
+    }
+
+    ${_chunk3XWROTDTcjs.ButtonSelector.call(void 0, )} ${_chunkST3UQPZYcjs.LoadingWrapper} {
+      margin: 0;
+    }
+
+    ${_chunkKM26ZJYZcjs.StyledFileInput} {
+      margin-top: 16px;
+    }
+
+    ${CardFormContent} {
+      & > ${StyledCardFormCheckboxParagraph} {
+        margin-top: 24px;
+      }
+
+      & > ${_chunk3XWROTDTcjs.ButtonSelector.call(void 0, )} {
+        ${_chunkNVVAOGNLcjs.formButtonTopMarginStyle}
+      }
+    }
+  `;
+};
+var StyledCardForm = _styled2.default.form(StyledCardFormStyle);
+var StyledCardFormDiv = _styled2.default.div(StyledCardFormStyle);
+var CardHeadline = _styled2.default.div`
+  ${({ hasTopContent }) => hasTopContent ? "margin-top: 32px;" : ""}
+
+  & + *:not(${CardFormSubtitle}) {
+    margin-top: 40px;
+  }
+
+  & + ${CardFormSubtitle} {
+    margin-top: 12px;
+  }
+`;
+function CardFormTextWithLink({
+  text,
+  toText,
+  to
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: { marginTop: "16px", fontWeight: "600" }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: _chunk23NA5VW6cjs.mcBold, children: text }),
+    " ",
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYDTPEU32cjs.Link, { to, children: toText })
+  ] });
+}
+function CardFormCheckboxParagraph({
+  children,
+  onChange,
+  checked
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCardFormCheckboxParagraph, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM72EXGIScjs.Checkbox, { checked, onChange, alignItems: "flex-start" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormCheckboxParagraphText, { onClick: () => onChange(!checked), children })
+  ] });
+}
+var CardFormCheckboxParagraphText = _styled2.default.span`
+  margin-left: 12px;
+  max-width: 350px;
+  cursor: pointer;
+`;
+var CardFormOption = ({
+  label,
+  description,
+  onClick,
+  selected = false
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCardFormOption, { onClick, selected, children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormOptionLabel, { children: label }),
+  description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormOptionDescription, { children: description }) : null
+] });
+var StyledCardFormOption = _styled2.default.div`
+  border: ${({ theme, selected }) => `${selected ? `2px solid ${theme.info}` : `1px solid ${theme.c1Neutral}`}`};
+  ${_chunk23NA5VW6cjs.standardBorderRadius.call(void 0, 8)}
+  cursor: pointer;
+  margin-top: 10px;
+  padding: ${({ selected }) => selected ? "15px" : "16px"};
+`;
+var CardFormOptionLabel = _styled2.default.div`
+  font-weight: bold;
+`;
+var CardFormOptionDescription = _styled2.default.p`
+  color: ${_chunkO7USIZI6cjs.colors.gray40};
+  margin: 6px 0 0;
+`;
+
+
+
+
+
+
+
+
+
+
+
+exports.CardForm = CardForm; exports.CardFormButtonRow = CardFormButtonRow; exports.CardFormFieldLabel = CardFormFieldLabel; exports.CardFormDataFieldValue = CardFormDataFieldValue; exports.CardFormFullWidth = CardFormFullWidth; exports.CardFormFullTopContent = CardFormFullTopContent; exports.CardFormTextWithLink = CardFormTextWithLink; exports.CardFormCheckboxParagraph = CardFormCheckboxParagraph; exports.CardFormOption = CardFormOption;

package/dist/chunk-672ZI5XH.js

@@ -0,0 +1,102 @@
+import {
+  useClipboard
+} from "./chunk-NFQP7P3D.js";
+import {
+  extend,
+  lineClamp
+} from "./chunk-IGZYEIQS.js";
+import {
+  Icon
+} from "./chunk-K3DMPJSX.js";
+import {
+  renderTypography
+} from "./chunk-5GLOHTP6.js";
+import {
+  elide
+} from "./chunk-EDN2QDCB.js";
+
+// src/components/ClipboardTextField.tsx
+import styled from "@emotion/styled";
+import { useCallback } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function ClipboardTextField({
+  value,
+  icon,
+  stopPropagation,
+  maxLines,
+  elide: elideArgs,
+  wordBreakAll = false,
+  tag = "span",
+  iconSide = "left",
+  typography,
+  clipboardCallbacks
+}) {
+  const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks);
+  const addLineClamp = maxLines && maxLines > 1;
+  const displayValue = elideArgs ? elide(value, elideArgs) : value;
+  const nodes = renderTypography((typography == null ? void 0 : typography.type) || "Body", {
+    content: displayValue,
+    size: (typography == null ? void 0 : typography.size) || "ExtraSmall",
+    color: (typography == null ? void 0 : typography.color) || "inherit"
+  });
+  const baseValueCSS = {
+    flex: 1,
+    overflow: "hidden",
+    textAlign: "left",
+    textOverflow: "ellipsis",
+    wordBreak: wordBreakAll ? "break-all" : "normal",
+    verticalAlign: "middle"
+  };
+  const valueCSS = addLineClamp ? extend(baseValueCSS, lineClamp(maxLines), { alignSelf: "baseline" }) : baseValueCSS;
+  const valueNode = /* @__PURE__ */ jsx("span", { css: valueCSS, children: nodes });
+  const onClick = useCallback(
+    (event) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      void writeTextToClipboard(value);
+    },
+    [stopPropagation, value, writeTextToClipboard]
+  );
+  function onKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      void writeTextToClipboard(value);
+    }
+  }
+  const baseContainerCSS = {
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    alignItems: "center",
+    boxSizing: "content-box",
+    cursor: "pointer"
+  };
+  const containerCSS = addLineClamp ? (
+    /* keep the icon on the same line when addLineClamp: */
+    extend(baseContainerCSS, { display: "inline-flex" })
+  ) : maxLines === 1 ? extend(baseContainerCSS, { whiteSpace: "nowrap", display: "inline-flex" }) : baseContainerCSS;
+  return canWriteToClipboard && value ? /* @__PURE__ */ jsxs(
+    StyledClipboardTextField,
+    {
+      as: tag,
+      onClick,
+      css: containerCSS,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown,
+      children: [
+        icon && iconSide === "left" ? /* @__PURE__ */ jsx(Icon, { name: "Copy", width: 16, mr: 4 }) : null,
+        valueNode,
+        icon && iconSide === "right" ? /* @__PURE__ */ jsx(Icon, { name: "Copy", width: 16, ml: 4 }) : null
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(StyledClipboardTextField, { as: tag, css: containerCSS, children: valueNode });
+}
+var StyledClipboardTextField = styled.span``;
+
+export {
+  ClipboardTextField
+};