@lightsparkdev/ui 0.0.8 → 0.0.11

package/dist/chunk-P3EUPXFA.js

@@ -0,0 +1,150 @@
+import {
+  firstChild,
+  pxToRems
+} from "./chunk-FCZJILMW.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  __spreadValues
+} from "./chunk-CIGAQ47A.js";
+
+// src/styles/type.tsx
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var defaultHeadingSizes = {
+  h1: {
+    size: 32,
+    sizeSm: 21
+  },
+  h2: {
+    size: 24,
+    sizeSm: 18
+  },
+  h3: {
+    size: 21,
+    sizeSm: 18
+  },
+  h4: {
+    size: 14,
+    sizeSm: 14
+  }
+};
+var defaultHeadingMargins = {
+  h1: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h2: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h3: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h4: {
+    mt: 16,
+    mb: 16,
+    mtSm: 16,
+    mbSm: 16
+  }
+};
+var baseHeading = ({ mt, mb, mtSm, mbSm, theme }) => css`
+  line-height: 1.214em;
+
+  margin-bottom: ${mb}px;
+  margin-top: ${mt}px;
+
+  ${bp.sm(`
+    margin-top: ${mtSm}px;
+    margin-bottom: ${mbSm}px;
+  `)}
+`;
+var firstChildStyles = firstChild(`margin-top: 0;`);
+var headings = {
+  h1: styled.h1`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h1.size)};
+    font-weight: ${({ light }) => light ? 400 : 800}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h1.sizeSm)};
+    `)}
+  `,
+  h2: styled.h2`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h2.size)};
+    font-weight: ${({ light }) => light ? 400 : 700}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h2.sizeSm)};
+    `)}
+  `,
+  h3: styled.h3`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h3.size)};
+    font-weight: ${({ light }) => light ? 400 : 700}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h3.sizeSm)};
+    `)}
+  `,
+  h4: styled.h4`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h4.size)};
+    font-weight: ${({ light }) => light ? 400 : 600}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h4.sizeSm)};
+    `)}
+  `
+};
+function Heading({
+  children,
+  type = "h2",
+  id,
+  mt = defaultHeadingMargins[type].mt,
+  mb = defaultHeadingMargins[type].mb,
+  mtSm = defaultHeadingMargins[type].mtSm,
+  mbSm = defaultHeadingMargins[type].mbSm,
+  m0 = false,
+  light = false
+}) {
+  const StyledHeading = headings[type];
+  const theme = useTheme();
+  const heading = /* @__PURE__ */ jsx(
+    StyledHeading,
+    {
+      id,
+      mt: m0 ? 0 : mt,
+      mb: m0 ? 0 : mb,
+      mtSm: m0 ? 0 : mtSm,
+      mbSm: m0 ? 0 : mbSm,
+      light,
+      theme,
+      children: id ? /* @__PURE__ */ jsx("a", { href: `#${id}`, css: { color: "inherit" }, children }) : children
+    }
+  );
+  return heading;
+}
+function headingWithDefaults(defaultProps) {
+  return (props) => /* @__PURE__ */ jsx(Heading, __spreadValues(__spreadValues({}, defaultProps), props));
+}
+
+export {
+  headings,
+  Heading,
+  headingWithDefaults
+};

package/dist/chunk-PBRN7MJY.js

@@ -0,0 +1,315 @@
+import {
+  Heading
+} from "./chunk-P3EUPXFA.js";
+import {
+  ButtonRowContainer
+} from "./chunk-NFSAJ5GJ.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  flexCenter,
+  overflowAutoWithoutScrollbars,
+  size
+} from "./chunk-FCZJILMW.js";
+import {
+  cardBorderRadiusPx,
+  darkGradientBg,
+  headingContentMarginPx,
+  standardBorderRadius,
+  standardCardShadow,
+  standardContentInset
+} from "./chunk-JK4BP73A.js";
+import {
+  themeOr
+} from "./chunk-2VBDEO6M.js";
+import {
+  bp,
+  useBreakpoints
+} from "./chunk-JSGRNWSB.js";
+
+// src/components/CardPage.tsx
+import styled from "@emotion/styled";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function CardPage(props) {
+  const initiallyExpanded = useRef(Boolean(props.expandRight));
+  const [wasExpanded, setWasExpanded] = useState(Boolean(props.expandRight));
+  const bp2 = useBreakpoints();
+  const header = props.title ? /* @__PURE__ */ jsx(CardPageHeader, { children: /* @__PURE__ */ jsx(Heading, { type: "h1", m0: true, children: props.title }) }) : null;
+  useEffect(() => {
+    if (props.expandRight) {
+      setWasExpanded(true);
+    }
+  }, [props.expandRight]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    CardPageContainer,
+    {
+      id: props.id,
+      bp: bp2,
+      hasRightContent: Boolean(props.rightContent),
+      wasExpanded,
+      expandRight: Boolean(props.expandRight),
+      minContentHeight: props.minContentHeight,
+      initiallyExpanded: initiallyExpanded.current,
+      children: [
+        /* @__PURE__ */ jsx("div", { css: props.minContentWidth ? overflowAutoWithoutScrollbars : null, children: /* @__PURE__ */ jsxs(
+          CardPageContent,
+          {
+            hasPreHeaderContent: Boolean(props.preHeaderContent),
+            minContentHeight: props.minContentHeight,
+            maxContentWidth: props.maxContentWidth,
+            children: [
+              props.preHeaderContent,
+              header,
+              props.children
+            ]
+          }
+        ) }),
+        props.rightContent && /* @__PURE__ */ jsx(CardPageRightContent, { children: /* @__PURE__ */ jsx(
+          CardPageRightContentInner,
+          {
+            hasRightContent: Boolean(props.rightContent),
+            children: props.rightContent
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+CardPage.defaultProps = {
+  minContentHeight: void 0,
+  minContentWidth: void 0,
+  maxContentWidth: void 0
+};
+var CardPageFullContent = styled.div``;
+var CardPageFullWidth = styled.div``;
+var CardPageRightContentInner = styled.div`
+  ${flexCenter}
+  height: 100%;
+  padding: 150px 25px;
+  ${({ hasRightContent }) => hasRightContent && `justify-content: space-evenly;`}
+`;
+var CardPageRightContent = styled.div`
+  display: flex;
+  position: relative;
+  ${CardPageRightContentInner} {
+    ${darkGradientBg};
+    position: relative;
+    height: calc(100% + 80px);
+    margin-top: -40px;
+    margin-bottom: -40px;
+    margin-right: -40px;
+    overflow: hidden;
+    width: 100%;
+
+    ${bp.minSm(`
+      ${standardBorderRadius([0, cardBorderRadiusPx, cardBorderRadiusPx, 0])};
+    `)}
+  }
+`;
+var vCardPaddingPx = 40;
+var expandTiming = `0.65s ease-in-out`;
+var CardPageContainer = styled.div`
+  ${standardContentInset.css}
+  ${({ theme }) => themeOr(`background-color: ${theme.bg}`, "transparent")({ theme })};
+  position: relative;
+  z-index: ${z.card};
+
+  ${({ minContentHeight }) => `
+    min-height: ${minContentHeight !== void 0 && minContentHeight !== null ? `${minContentHeight}px` : "250px"};
+  `}
+
+  ${bp.sm(`
+    width: 100% !important;
+  `)}
+
+  & > * {
+    ${standardContentInset.css}
+  }
+
+  & ${CardPageFullContent}, & ${CardPageFullWidth} {
+    ${bp.sm(`
+      width: calc(100% + ${standardContentInset.smPx * 2}px);
+      margin-left: -${standardContentInset.smPx}px;
+    `)}
+
+    ${bp.minSmMaxLg(`
+      width: calc(100% + ${standardContentInset.minSmMaxLgPx * 2}px);
+      margin-left: -${standardContentInset.minSmMaxLgPx}px;
+    `)}
+
+    ${bp.lg(`
+      width: calc(100% + ${standardContentInset.lgPx * 2}px);
+      margin-left: -${standardContentInset.lgPx}px;
+    `)}
+  }
+
+  & ${CardPageFullContent} {
+    & > * {
+      padding-top: ${vCardPaddingPx}px;
+      padding-bottom: ${vCardPaddingPx}px;
+      ${bp.sm(`
+        padding-top: 0;
+        padding-bottom: 0;
+      `)}
+    }
+
+    margin-top: -${vCardPaddingPx}px;
+    ${bp.sm(`margin-top: 0;`)}
+  }
+
+  ${bp.minSm(`
+    ${standardCardShadow.styles};
+    padding: ${vCardPaddingPx}px 0;
+    ${standardBorderRadius(cardBorderRadiusPx)}
+  `)}
+
+  &:not(:last-child) {
+    margin-bottom: 30px;
+  }
+
+  @keyframes rightSideExpand {
+    0% {
+      width: 50%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  @keyframes rightSideCollapse {
+    0% {
+      width: 100%;
+    }
+    100% {
+      width: 50%;
+    }
+  }
+
+  @keyframes leftSideCollapse {
+    0% {
+      width: 50%;
+      height: auto;
+      opacity: 1;
+    }
+    30% {
+      opacity: 0;
+    }
+    100% {
+      height: 0px;
+      width: 0%;
+    }
+  }
+
+  @keyframes leftSideExpand {
+    0% {
+      width: 0%;
+      opacity: 0;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      width: 50%;
+      opacity: 1;
+    }
+  }
+
+  ${({ hasRightContent }) => hasRightContent && `
+    display: flex;
+    & > * {
+      width: 50%;
+      ${bp.sm(`width: 100%;`)}
+
+      &:first-of-type > * {
+        ${bp.minSmMaxLg(`
+          width: calc(100% - ${standardContentInset.minSmMaxLgPx * 2}px);
+          margin-left: ${standardContentInset.minSmMaxLgPx}px;
+        `)}
+        ${bp.lg(`
+          width: calc(100% - ${standardContentInset.lgPx * 3}px);
+          margin-left: ${standardContentInset.lgPx}px;
+        `)}
+      }
+    }
+  `}
+
+  & > :not(${CardPageRightContent}) {
+    ${({ expandRight, wasExpanded, initiallyExpanded }) => expandRight && wasExpanded ? bp.minSm(`
+            width: 0%;
+            height: 0px;
+            ${initiallyExpanded ? "" : `animation: leftSideCollapse ${expandTiming};`}
+            overflow: hidden;
+            margin: 0%;
+            opacity: 0;
+          `) : wasExpanded ? bp.minSm(`
+            width: 50%;
+            animation: leftSideExpand ${expandTiming};
+          `) : ""}
+  }
+
+  & > ${CardPageRightContent} {
+    ${({ expandRight, wasExpanded, initiallyExpanded }) => expandRight && wasExpanded ? bp.minSm(`
+            width: 100%;
+            ${initiallyExpanded ? "" : `animation: rightSideExpand ${expandTiming};`}
+            margin: 0%;
+            & > ${CardPageRightContentInner.toString()} {
+              border-radius: ${cardBorderRadiusPx}px !important;
+            }
+          `) : wasExpanded ? bp.minSm(`
+            width: 50%;
+            animation: rightSideCollapse ${expandTiming};
+          `) : ""}
+  }
+`;
+var CardPageSubtitle = styled.p`
+  color: ${({ theme }) => theme.mcNeutral};
+  font-size: ${size.px14};
+  line-height: ${size.px18};
+  font-weight: 600;
+  margin: 0;
+`;
+var CardPageHeader = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  position: relative;
+
+  & + *:not(${CardPageSubtitle}):not(${ButtonRowContainer}) {
+    margin-top: ${headingContentMarginPx}px !important;
+  }
+
+  & + ${CardPageSubtitle} {
+    margin-top: 5px;
+  }
+
+  & + ${ButtonRowContainer} {
+    margin-top: 16px;
+  }
+`;
+var CardPageContent = styled.div`
+  ${({
+  maxContentWidth,
+  minContentHeight,
+  minContentWidth,
+  hasPreHeaderContent
+}) => `
+    max-width: ${maxContentWidth ? `${maxContentWidth}px` : "initial"};
+    min-width: ${minContentWidth ? `${minContentWidth}px` : "initial"};
+    ${CardPageHeader.toString()} {
+      margin-top: ${hasPreHeaderContent ? "25px" : "0"};
+    }
+    min-height: ${minContentHeight !== void 0 && minContentHeight !== null ? `${minContentHeight}px` : "400px"};
+  `}
+`;
+
+export {
+  CardPage,
+  CardPageFullContent,
+  CardPageFullWidth,
+  CardPageRightContentInner,
+  CardPageSubtitle,
+  CardPageContent
+};

package/dist/{chunk-CW3W2VTZ.js → chunk-PVQCLQNA.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-VHW2KROZ.js → chunk-RWIZ7Q74.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-LAMQKQU3.js";
 import {
   rootFontSizePx
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   __async
 } from "./chunk-CIGAQ47A.js";

package/dist/{chunk-744FBGRP.js → chunk-XP2MX2AA.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 
 // src/components/ContentTable.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-XAZ6NZ6I.js → chunk-XZR237JJ.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 
 // src/components/CurrencyAmount.tsx
 import { gql } from "@apollo/client";

package/dist/{chunk-FN5PM3HQ.js → chunk-Y37DCY7Y.js}

@@ -1,15 +1,15 @@
 import {
   StyledTitle
 } from "./chunk-FHNYQLMF.js";
+import {
+  StyledBody
+} from "./chunk-LD5LZXUP.js";
 import {
   StyledCode
 } from "./chunk-BCFRW7CV.js";
 import {
   displaySelector
 } from "./chunk-QGGOMPHZ.js";
-import {
-  StyledBody
-} from "./chunk-LD5LZXUP.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
@@ -19,13 +19,13 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-2YB7653N.js";
+} from "./chunk-FCZJILMW.js";
 import {
   StyledContentTable
-} from "./chunk-744FBGRP.js";
+} from "./chunk-XP2MX2AA.js";
 import {
   standardBorderRadius
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   colors
 } from "./chunk-2VBDEO6M.js";

package/dist/{chunk-76Q4BK35.js → chunk-ZANLDY2W.js}

@@ -6,19 +6,19 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   Loading
-} from "./chunk-BAO4T4G5.js";
+} from "./chunk-J4FJQ3FN.js";
 import {
   UnstyledButton
-} from "./chunk-4KWTXZRY.js";
+} from "./chunk-3GS5EFXV.js";
 import {
   LightTooltip
-} from "./chunk-NRXJA2PM.js";
+} from "./chunk-3EVAP5JT.js";
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   getFocusOutline
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   colors,
   themeOr

package/dist/components/Badge.cjs

@@ -1263,36 +1263,50 @@ var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var standardBorderRadius = (radius) => {
   const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
   return `
     border-radius: ${borderRadiusPx};
   `;
 };
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),

package/dist/components/Badge.js

@@ -1,8 +1,8 @@
 import {
   Badge,
   badgeVPadding
-} from "../chunk-U6XT5JKC.js";
-import "../chunk-HNVQIY5U.js";
+} from "../chunk-DQRN4E5G.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";