@lightsparkdev/ui 1.0.8 → 1.0.9

package/dist/chunk-7Z37LMFQ.js

@@ -0,0 +1,462 @@
+import {
+  StyledSelect
+} from "./chunk-2HIH3J6K.js";
+import {
+  Headline
+} from "./chunk-ZFXEYU7P.js";
+import {
+  StyledFileInput
+} from "./chunk-AAGIFG3R.js";
+import {
+  ClipboardTextField
+} from "./chunk-672ZI5XH.js";
+import {
+  TextInputHalfRow
+} from "./chunk-6EXTHISM.js";
+import {
+  ToggleContainer
+} from "./chunk-TBZO366T.js";
+import {
+  formButtonTopMarginStyle,
+  inputSpacingPx
+} from "./chunk-W5NH2F3D.js";
+import {
+  StyledButtonRow
+} from "./chunk-2PK3U5ML.js";
+import {
+  pxToRems
+} from "./chunk-IGZYEIQS.js";
+import {
+  ButtonSelector
+} from "./chunk-R35JXTPE.js";
+import {
+  LoadingWrapper
+} from "./chunk-QJPQJXJ2.js";
+import {
+  Checkbox
+} from "./chunk-UJ6CKXOV.js";
+import {
+  toReactNodesWithTypographyMap
+} from "./chunk-JEPHI5VC.js";
+import {
+  toReactNodes
+} from "./chunk-NXSA7WNB.js";
+import {
+  icon
+} from "./chunk-G5IVQ4O3.js";
+import {
+  mcBold,
+  standardBorderRadius,
+  standardCardShadow,
+  standardCardShadowHard,
+  standardContentInset
+} from "./chunk-ZMK4RE5I.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  Link
+} from "./chunk-ELHOJIVP.js";
+import {
+  colors
+} from "./chunk-RTRS42I3.js";
+
+// src/components/CardForm/CardForm.tsx
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useCallback } from "react";
+import { jsx, jsxs } from "@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 = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (disabled) {
+        return;
+      }
+      if (onSubmit) {
+        onSubmit(e);
+      }
+    },
+    [onSubmit, disabled]
+  );
+  const formattedDescription = description ? toReactNodesWithTypographyMap(description, descriptionTypography[kind]) : null;
+  const belowFormContentNodes = belowFormContent ? toReactNodes(belowFormContent) : null;
+  const content = /* @__PURE__ */ jsxs(CardFormContent, { children: [
+    topContent,
+    title && /* @__PURE__ */ jsx(CardHeadline, { hasTopContent: Boolean(topContent), children: /* @__PURE__ */ jsx(
+      Headline,
+      {
+        content: [
+          title,
+          ...titleRightIcon ? [icon({ name: titleRightIcon.name, ml: 4 })] : []
+        ],
+        display: "inline-flex"
+      }
+    ) }),
+    formattedDescription && /* @__PURE__ */ jsx(CardFormSubtitle, { children: formattedDescription }),
+    children
+  ] });
+  return /* @__PURE__ */ jsxs(CardFormContainer, { children: [
+    hasChildForm ? /* @__PURE__ */ jsx(
+      StyledCardFormDiv,
+      {
+        wide,
+        shadow,
+        borderRadius,
+        border,
+        textAlign,
+        paddingY,
+        paddingX,
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx(
+      StyledCardForm,
+      {
+        wide,
+        onSubmit: onSubmitForm,
+        shadow,
+        borderRadius,
+        border,
+        textAlign,
+        paddingY,
+        paddingX,
+        noValidate: true,
+        children: content
+      }
+    ),
+    /* @__PURE__ */ jsx(BelowCardFormContent, { children: belowFormContentNodes })
+  ] });
+}
+var CardFormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${bp.sm(`
+    height: 100%;
+  `)}
+`;
+var CardFormContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+`;
+var BelowCardFormContent = styled.div`
+  text-align: center;
+  margin-top: 32px;
+
+  ${bp.sm(`
+    margin-bottom: 32px;
+  `)}
+`;
+var CardFormSubtitle = styled.div``;
+var CardFormButtonRow = styled.div`
+  display: flex;
+  justify-content: ${({ justify }) => (
+  /* Default left */
+  justify === "center" ? "center" : "left"
+)};
+  margin-top: 32px;
+  ${ButtonSelector("* + ")} {
+    margin-left: 10px;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 32px;
+  }
+`;
+var fieldLabelMarginPx = 12;
+var CardFormFieldLabel = styled.label`
+  display: block;
+  margin-top: ${inputSpacingPx}px;
+  color: ${({ theme }) => theme.text};
+  font-size: ${pxToRems(14)};
+  font-weight: 700;
+  & + * {
+    margin-top: ${fieldLabelMarginPx}px;
+  }
+`;
+function CardFormDataFieldValue({ text }) {
+  return /* @__PURE__ */ jsx(StyledCardFormDataFieldValue, { children: /* @__PURE__ */ jsx(ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
+}
+var StyledCardFormDataFieldValue = styled.div`
+  margin-top: 4px;
+  color: ${({ theme }) => theme.mcNeutral};
+`;
+var CardFormFullWidth = styled.div``;
+var CardFormFullTopContent = styled.div`
+  ${bp.minSm(`
+    border-radius: 16px 16px 0 0;
+    overflow: hidden;
+  `)}
+`;
+var StyledCardFormCheckboxParagraph = styled.div`
+  display: flex;
+  color: ${({ theme }) => theme.mcNeutral};
+`;
+var formInset = ({ wide, paddingX, paddingY }) => 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;
+
+  ${bp.minSm(`
+    width: ${wide ? 700 : 505}px;
+  `)}
+
+  ${bp.sm(`
+    padding: 0;
+  `)}
+
+  ${standardContentInset.smCSS}
+
+  & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
+    ${bp.sm(`
+      width: calc(100% + ${standardContentInset.smPx * 2}px);
+      margin-left: -${standardContentInset.smPx}px;
+    `)}
+
+    ${bp.minSm(`
+      width: calc(100% + ${paddingX * 2}px);
+      margin-left: -${paddingX}px;
+    `)}
+  }
+
+  & ${CardFormFullTopContent} {
+    ${bp.minSm(`
+      margin-top: -${paddingY}px;
+    `)}
+  }
+`;
+var StyledCardFormStyle = ({
+  theme,
+  wide,
+  shadow,
+  borderRadius,
+  border,
+  textAlign,
+  paddingX,
+  paddingY
+}) => {
+  return css`
+    ${formInset({ wide, paddingX, paddingY })}
+    ${shadow === "soft" ? standardCardShadow : shadow === "hard" ? standardCardShadowHard : ""}
+
+    background-color: ${theme.bg};
+    position: relative;
+    height: 100%;
+    ${border ? `border: 1px solid ${theme.vlcNeutral};` : ""}
+
+    ${bp.sm(`
+      box-shadow: none;
+    `)}
+
+    ${bp.minSm(`
+      border-radius: ${borderRadius}px;
+    `)}
+
+    ${CardHeadline}, ${CardFormSubtitle} {
+      text-align: ${textAlign};
+    }
+
+    ${CardFormSubtitle} + * {
+      margin-top: 40px !important;
+    }
+
+    ${CardFormButtonRow}, ${StyledButtonRow} {
+      ${ButtonSelector()} {
+        margin-top: 0;
+      }
+    }
+
+    ${StyledSelect}, ${ToggleContainer} {
+      margin-top: ${inputSpacingPx}px;
+    }
+
+    ${CardFormFieldLabel} {
+      margin-top: ${inputSpacingPx}px;
+
+      & + ${StyledSelect} {
+        margin-top: ${fieldLabelMarginPx}px;
+      }
+    }
+
+    ${TextInputHalfRow} > ${StyledSelect} {
+      margin-top: 0;
+    }
+
+    ${LoadingWrapper} {
+      margin: 32px 0;
+      * + * {
+        margin-top: 0;
+      }
+    }
+
+    ${ButtonSelector()} ${LoadingWrapper} {
+      margin: 0;
+    }
+
+    ${StyledFileInput} {
+      margin-top: 16px;
+    }
+
+    ${CardFormContent} {
+      & > ${StyledCardFormCheckboxParagraph} {
+        margin-top: 24px;
+      }
+
+      & > ${ButtonSelector()} {
+        ${formButtonTopMarginStyle}
+      }
+    }
+  `;
+};
+var StyledCardForm = styled.form(StyledCardFormStyle);
+var StyledCardFormDiv = styled.div(StyledCardFormStyle);
+var CardHeadline = styled.div`
+  ${({ hasTopContent }) => hasTopContent ? "margin-top: 32px;" : ""}
+
+  & + *:not(${CardFormSubtitle}) {
+    margin-top: 40px;
+  }
+
+  & + ${CardFormSubtitle} {
+    margin-top: 12px;
+  }
+`;
+function CardFormTextWithLink({
+  text,
+  toText,
+  to
+}) {
+  return /* @__PURE__ */ jsxs("div", { css: { marginTop: "16px", fontWeight: "600" }, children: [
+    /* @__PURE__ */ jsx("span", { css: mcBold, children: text }),
+    " ",
+    /* @__PURE__ */ jsx(Link, { to, children: toText })
+  ] });
+}
+function CardFormCheckboxParagraph({
+  children,
+  onChange,
+  checked
+}) {
+  return /* @__PURE__ */ jsxs(StyledCardFormCheckboxParagraph, { children: [
+    /* @__PURE__ */ jsx(Checkbox, { checked, onChange, alignItems: "flex-start" }),
+    /* @__PURE__ */ jsx(CardFormCheckboxParagraphText, { onClick: () => onChange(!checked), children })
+  ] });
+}
+var CardFormCheckboxParagraphText = styled.span`
+  margin-left: 12px;
+  max-width: 350px;
+  cursor: pointer;
+`;
+var CardFormOption = ({
+  label,
+  description,
+  onClick,
+  selected = false
+}) => /* @__PURE__ */ jsxs(StyledCardFormOption, { onClick, selected, children: [
+  /* @__PURE__ */ jsx(CardFormOptionLabel, { children: label }),
+  description ? /* @__PURE__ */ jsx(CardFormOptionDescription, { children: description }) : null
+] });
+var StyledCardFormOption = styled.div`
+  border: ${({ theme, selected }) => `${selected ? `2px solid ${theme.info}` : `1px solid ${theme.c1Neutral}`}`};
+  ${standardBorderRadius(8)}
+  cursor: pointer;
+  margin-top: 10px;
+  padding: ${({ selected }) => selected ? "15px" : "16px"};
+`;
+var CardFormOptionLabel = styled.div`
+  font-weight: bold;
+`;
+var CardFormOptionDescription = styled.p`
+  color: ${colors.gray40};
+  margin: 6px 0 0;
+`;
+
+export {
+  CardForm,
+  CardFormButtonRow,
+  CardFormFieldLabel,
+  CardFormDataFieldValue,
+  CardFormFullWidth,
+  CardFormFullTopContent,
+  CardFormTextWithLink,
+  CardFormCheckboxParagraph,
+  CardFormOption
+};

package/dist/chunk-7ZBJZ4GA.js

@@ -0,0 +1,23 @@
+// src/components/QRReader/styles.ts
+var styles = {
+  container: {
+    width: "100%",
+    paddingTop: "100%",
+    overflow: "hidden",
+    position: "relative"
+  },
+  video: {
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    display: "block",
+    overflow: "hidden",
+    position: "absolute",
+    transform: void 0
+  }
+};
+
+export {
+  styles
+};

package/dist/{chunk-H2OQXO5Z.js → chunk-AAGIFG3R.js}

@@ -1,13 +1,13 @@
 import {
   Pill
-} from "./chunk-MBZSVLKB.js";
+} from "./chunk-O7EVPXE5.js";
 import {
   InputSubtext,
   inputBlockStyle
-} from "./chunk-RZMG2TID.js";
+} from "./chunk-W5NH2F3D.js";
 import {
   Icon
-} from "./chunk-QQTZ6DZL.js";
+} from "./chunk-K3DMPJSX.js";
 
 // src/components/FileInput.tsx
 import styled from "@emotion/styled";

package/dist/chunk-AB5PAZDV.js

@@ -0,0 +1,117 @@
+import {
+  setDefaultReactNodesTypography
+} from "./chunk-JEPHI5VC.js";
+import {
+  toReactNodes
+} from "./chunk-NXSA7WNB.js";
+import {
+  themeOrWithKey,
+  themes
+} from "./chunk-GZW6KBUI.js";
+import {
+  getLineHeightForTypographyType
+} from "./chunk-VASG2BKI.js";
+
+// src/components/PendingValue.tsx
+import { css, keyframes, ThemeProvider } from "@emotion/react";
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+var bgPosition = keyframes`
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+`;
+function PendingValue({
+  animate = true,
+  content: contentProp,
+  typography: typographyProp,
+  width,
+  forceTheme
+}) {
+  const defaultTypography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
+    size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
+    color: (typographyProp == null ? void 0 : typographyProp.color) || "text",
+    hideOverflow: true
+  };
+  const defaultTypographyMap = {
+    link: defaultTypography,
+    text: defaultTypography,
+    nextLink: defaultTypography
+  };
+  const nodesWithTypography = setDefaultReactNodesTypography(
+    contentProp,
+    defaultTypographyMap
+  );
+  const content = toReactNodes(nodesWithTypography);
+  const nodes = /* @__PURE__ */ jsxs(
+    StyledPendingValue,
+    {
+      typographyType: defaultTypography.type,
+      typographySize: defaultTypography.size,
+      widthProp: width,
+      children: [
+        /* @__PURE__ */ jsx(StyledPendingValueBg, { visible: !contentProp, animate }),
+        /* @__PURE__ */ jsx(StyledPendingValueContent, { children: content })
+      ]
+    }
+  );
+  return forceTheme ? /* @__PURE__ */ jsx(ThemeProvider, { theme: themes[forceTheme], children: nodes }) : nodes;
+}
+var StyledPendingValue = styled.div`
+  position: relative;
+  height: ${({ typographyType, typographySize, theme }) => getLineHeightForTypographyType(typographyType, typographySize, theme)};
+
+  ${({ widthProp }) => widthProp ? `width: ${widthProp}px;` : "width: 100%;"}
+  max-width: 100%;
+`;
+var StyledPendingValueContent = styled.div`
+  position: relative;
+  z-index: 1;
+`;
+var vSpacing = 2;
+var StyledPendingValueBg = styled.div`
+  z-index: 0;
+  height: calc(100% - ${vSpacing * 2}px);
+  width: 100%;
+  position: absolute;
+  top: ${vSpacing}px;
+  border-radius: 999px;
+
+  ${({ visible }) => visible ? "opacity: 1;" : "opacity: 0;"}
+  transition: opacity 0.01s ease;
+
+  background: linear-gradient(
+    90deg,
+    ${themeOrWithKey("c15Neutral", "c25Neutral")} 0%,
+    ${themeOrWithKey("c2Neutral", "c3Neutral")} 50%,
+    ${themeOrWithKey("c15Neutral", "c25Neutral")} 100%
+  );
+
+  background-size: 200% 100%;
+  background-position: 0% 0%;
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  ${({ animate }) => {
+  return animate ? css`
+          animation: ${bgPosition} 2s linear infinite;
+        ` : "";
+}}
+`;
+
+export {
+  PendingValue,
+  StyledPendingValueContent,
+  StyledPendingValueBg
+};