@lightsparkdev/ui 1.0.8 → 1.0.10

package/dist/chunk-NCQUX52Z.cjs

@@ -0,0 +1,462 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkLE5UZLTMcjs = require('./chunk-LE5UZLTM.cjs');
+
+
+var _chunkDISSWFSScjs = require('./chunk-DISSWFSS.cjs');
+
+
+var _chunkKB4YCFWXcjs = require('./chunk-KB4YCFWX.cjs');
+
+
+var _chunkC5EEHCIJcjs = require('./chunk-C5EEHCIJ.cjs');
+
+
+var _chunk4CFGJROVcjs = require('./chunk-4CFGJROV.cjs');
+
+
+var _chunkXHLL5XVNcjs = require('./chunk-XHLL5XVN.cjs');
+
+
+
+var _chunkJPRA3J5Ccjs = require('./chunk-JPRA3J5C.cjs');
+
+
+var _chunkYUALIPXRcjs = require('./chunk-YUALIPXR.cjs');
+
+
+var _chunk6IU4OQOCcjs = require('./chunk-6IU4OQOC.cjs');
+
+
+var _chunk7LOKZM7Vcjs = require('./chunk-7LOKZM7V.cjs');
+
+
+var _chunkMWHLGPKOcjs = require('./chunk-MWHLGPKO.cjs');
+
+
+var _chunkKEO4UBBQcjs = require('./chunk-KEO4UBBQ.cjs');
+
+
+var _chunkNCH72LUBcjs = require('./chunk-NCH72LUB.cjs');
+
+
+var _chunkGDLQ54TNcjs = require('./chunk-GDLQ54TN.cjs');
+
+
+var _chunk4WKQPWLIcjs = require('./chunk-4WKQPWLI.cjs');
+
+
+
+
+
+
+var _chunkDIMJISMHcjs = require('./chunk-DIMJISMH.cjs');
+
+
+var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
+
+
+var _chunkQE67LKK5cjs = require('./chunk-QE67LKK5.cjs');
+
+
+var _chunkCFG65CGCcjs = require('./chunk-CFG65CGC.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 ? _chunkNCH72LUBcjs.toReactNodesWithTypographyMap.call(void 0, description, descriptionTypography[kind]) : null;
+  const belowFormContentNodes = belowFormContent ? _chunkGDLQ54TNcjs.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, 
+      _chunkDISSWFSScjs.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;
+  ${_chunk7LOKZM7Vcjs.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: ${_chunkJPRA3J5Ccjs.inputSpacingPx}px;
+  color: ${({ theme }) => theme.text};
+  font-size: ${_chunk6IU4OQOCcjs.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, _chunkC5EEHCIJcjs.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;
+  `)}
+
+  ${_chunkDIMJISMHcjs.standardContentInset.smCSS}
+
+  & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
+    ${_chunkKW3JYLRIcjs.bp.sm(`
+      width: calc(100% + ${_chunkDIMJISMHcjs.standardContentInset.smPx * 2}px);
+      margin-left: -${_chunkDIMJISMHcjs.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" ? _chunkDIMJISMHcjs.standardCardShadow : shadow === "hard" ? _chunkDIMJISMHcjs.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}, ${_chunkYUALIPXRcjs.StyledButtonRow} {
+      ${_chunk7LOKZM7Vcjs.ButtonSelector.call(void 0, )} {
+        margin-top: 0;
+      }
+    }
+
+    ${_chunkLE5UZLTMcjs.StyledSelect}, ${_chunkXHLL5XVNcjs.ToggleContainer} {
+      margin-top: ${_chunkJPRA3J5Ccjs.inputSpacingPx}px;
+    }
+
+    ${CardFormFieldLabel} {
+      margin-top: ${_chunkJPRA3J5Ccjs.inputSpacingPx}px;
+
+      & + ${_chunkLE5UZLTMcjs.StyledSelect} {
+        margin-top: ${fieldLabelMarginPx}px;
+      }
+    }
+
+    ${_chunk4CFGJROVcjs.TextInputHalfRow} > ${_chunkLE5UZLTMcjs.StyledSelect} {
+      margin-top: 0;
+    }
+
+    ${_chunkMWHLGPKOcjs.LoadingWrapper} {
+      margin: 32px 0;
+      * + * {
+        margin-top: 0;
+      }
+    }
+
+    ${_chunk7LOKZM7Vcjs.ButtonSelector.call(void 0, )} ${_chunkMWHLGPKOcjs.LoadingWrapper} {
+      margin: 0;
+    }
+
+    ${_chunkKB4YCFWXcjs.StyledFileInput} {
+      margin-top: 16px;
+    }
+
+    ${CardFormContent} {
+      & > ${StyledCardFormCheckboxParagraph} {
+        margin-top: 24px;
+      }
+
+      & > ${_chunk7LOKZM7Vcjs.ButtonSelector.call(void 0, )} {
+        ${_chunkJPRA3J5Ccjs.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: _chunkDIMJISMHcjs.mcBold, children: text }),
+    " ",
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQE67LKK5cjs.Link, { to, children: toText })
+  ] });
+}
+function CardFormCheckboxParagraph({
+  children,
+  onChange,
+  checked
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCardFormCheckboxParagraph, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKEO4UBBQcjs.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}`}`};
+  ${_chunkDIMJISMHcjs.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: ${_chunkCFG65CGCcjs.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-NFQP7P3D.js

@@ -0,0 +1,77 @@
+import {
+  __async
+} from "./chunk-CWMXXUWU.js";
+
+// src/hooks/useClipboard.tsx
+import { useCallback, useMemo, useState } from "react";
+function useClipboard(clipboardArgs) {
+  var _a, _b;
+  const { onWriteEmptyText, onWriteError, onWrite, onReadError } = useMemo(
+    () => ({
+      onWriteEmptyText: clipboardArgs == null ? void 0 : clipboardArgs.onWriteEmptyText,
+      onWriteError: clipboardArgs == null ? void 0 : clipboardArgs.onWriteError,
+      onWrite: clipboardArgs == null ? void 0 : clipboardArgs.onWrite,
+      onReadError: clipboardArgs == null ? void 0 : clipboardArgs.onReadError
+    }),
+    [clipboardArgs]
+  );
+  const [canReadFromClipboard, setCanReadFromClipboard] = useState(
+    typeof ((_a = navigator.clipboard) == null ? void 0 : _a.readText) !== "undefined"
+  );
+  const [canWriteToClipboard, setCanWriteToClipboard] = useState(
+    typeof ((_b = navigator.clipboard) == null ? void 0 : _b.writeText) !== "undefined"
+  );
+  const writeTextToClipboard = useCallback(
+    (text) => __async(this, null, function* () {
+      try {
+        if (!text.trim()) {
+          if (onWriteEmptyText) {
+            onWriteEmptyText();
+          }
+        } else {
+          yield navigator.clipboard.writeText(text);
+          if (onWrite) {
+            onWrite();
+          }
+        }
+      } catch (error) {
+        if (onWriteError) {
+          onWriteError();
+        }
+        setCanWriteToClipboard(false);
+      }
+    }),
+    [onWrite, onWriteEmptyText, onWriteError]
+  );
+  const readTextFromClipboard = useCallback(() => __async(this, null, function* () {
+    try {
+      const text = yield navigator.clipboard.readText();
+      return text;
+    } catch (error) {
+      if (onReadError) {
+        onReadError();
+      }
+      setCanReadFromClipboard(false);
+      return null;
+    }
+  }), [onReadError]);
+  const clipboard = useMemo(
+    () => ({
+      canReadFromClipboard,
+      canWriteToClipboard,
+      readTextFromClipboard,
+      writeTextToClipboard
+    }),
+    [
+      canReadFromClipboard,
+      canWriteToClipboard,
+      readTextFromClipboard,
+      writeTextToClipboard
+    ]
+  );
+  return clipboard;
+}
+
+export {
+  useClipboard
+};

package/dist/{chunk-QQTZ6DZL.js → chunk-NGSQ2OOV.js}

@@ -1,19 +1,19 @@
-import {
-  isString
-} from "./chunk-EDN2QDCB.js";
 import {
   icons_exports
-} from "./chunk-QQLUKKYZ.js";
+} from "./chunk-XYP5XYVU.js";
 import {
   invertFillColor,
   invertStrokeColor
 } from "./chunk-VI6WTKMV.js";
 import {
   rootFontSizePx
-} from "./chunk-APUV4UN4.js";
+} from "./chunk-YZM4ALKD.js";
 import {
   getFontColor
-} from "./chunk-W5I53DTZ.js";
+} from "./chunk-O42E7NAG.js";
+import {
+  isString
+} from "./chunk-EDN2QDCB.js";
 
 // src/components/Icon/Icon.tsx
 import styled from "@emotion/styled";
@@ -23,6 +23,7 @@ function Icon({
   name,
   width,
   tutorialStep,
+  id,
   mr = 0,
   ml = 0,
   color = void 0,
@@ -36,6 +37,7 @@ function Icon({
   return /* @__PURE__ */ jsx(
     IconContainer,
     {
+      id,
       className,
       w,
       mr: mrRems,