@lightsparkdev/ui 0.0.7 → 0.0.9

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-NH25O7PC.js → chunk-PVQCLQNA.js}

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

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

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

package/dist/{chunk-TAI352I3.js → chunk-VE7J2N47.js}

@@ -1,6 +1,6 @@
 import {
   Link
-} from "./chunk-M56R3RJ7.js";
+} from "./chunk-OGSDZTHM.js";
 
 // src/utils/toReactNodes.tsx
 import { Fragment } from "react";

package/dist/{chunk-K7D7A34K.js → chunk-XP2MX2AA.js}

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

package/dist/{chunk-23SR7TFO.js → chunk-XZR237JJ.js}

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

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

@@ -19,13 +19,13 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-UO6U7AYM.js";
+} from "./chunk-FCZJILMW.js";
 import {
   StyledContentTable
-} from "./chunk-K7D7A34K.js";
+} from "./chunk-XP2MX2AA.js";
 import {
   standardBorderRadius
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 import {
   colors
 } from "./chunk-2VBDEO6M.js";

package/dist/{chunk-SVQELXFK.js → chunk-Z5TPS2BO.js}

@@ -1,6 +1,6 @@
 import {
   z
-} from "./chunk-CLU2FRJZ.js";
+} from "./chunk-55OQPFLF.js";
 
 // src/components/LightboxImage.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-FKETYVPP.js → chunk-ZANLDY2W.js}

@@ -1,21 +1,24 @@
 import {
   Link
-} from "./chunk-M56R3RJ7.js";
+} from "./chunk-OGSDZTHM.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   Loading
-} from "./chunk-NGS4OSWT.js";
+} from "./chunk-J4FJQ3FN.js";
 import {
   UnstyledButton
-} from "./chunk-IQFU7CM5.js";
+} from "./chunk-3GS5EFXV.js";
+import {
+  LightTooltip
+} from "./chunk-3EVAP5JT.js";
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   getFocusOutline
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 import {
   colors,
   themeOr
@@ -28,6 +31,8 @@ import {
 // src/components/Button.tsx
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { uniqueId } from "lodash-es";
+import { Fragment, useRef } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 function getTextColor({ color, theme, primary, blue }) {
   if (color) {
@@ -63,12 +68,37 @@ function getBackgroundColor({
   }
   return themeOr(colors.white, theme.c1Neutral)({ theme });
 }
-function getPaddingX({ size, ghost }) {
-  return ghost ? 0 : size === "lg" ? hPaddingPx : size === "md" ? 18 : 16;
+var paddingsY = {
+  lg: 14,
+  md: 9,
+  sm: 6
+};
+var roundPaddingsX = {
+  lg: 19,
+  md: 14,
+  sm: 10
+};
+var paddingsX = {
+  lg: 24,
+  md: 18,
+  sm: 16
+};
+function getPaddingX({
+  size,
+  ghost,
+  isRound
+}) {
+  return ghost ? 0 : isRound ? roundPaddingsX[size] : paddingsX[size];
 }
-function getPadding({ iconWidth, size, ghost, iconSide }) {
-  const paddingY = ghost ? 0 : size === "lg" ? 14 : size === "md" ? 9 : 6;
-  const paddingX = getPaddingX({ size, ghost });
+function getPadding({
+  iconWidth,
+  size,
+  ghost,
+  iconSide,
+  isRound
+}) {
+  const paddingY = ghost ? 0 : paddingsY[size];
+  const paddingX = getPaddingX({ size, ghost, isRound });
   const paddingForIcon = iconWidth && !ghost ? iconWidth : 0;
   return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
@@ -117,8 +147,10 @@ function Button({
   type = "button",
   blue = false,
   newTab = false,
-  zIndex = void 0
+  zIndex = void 0,
+  tooltipText
 }) {
+  const tooltipId = useRef(uniqueId());
   const iconMarginRight = 6;
   const iconSize = size === "lg" ? 16 : 12;
   let currentIcon = null;
@@ -127,30 +159,34 @@ function Button({
   } else if (icon) {
     currentIcon = /* @__PURE__ */ jsx(ButtonIcon, { ghost, iconSide, text, size, children: /* @__PURE__ */ jsx(Icon, { name: icon, width: iconSize }) });
   }
-  const content = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      css: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: [
-        iconSide === "left" && currentIcon,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            css: {
-              textOverflow: "ellipsis",
-              overflow: "hidden"
-            },
-            children: text
-          }
-        ),
-        iconSide === "right" && currentIcon
-      ]
-    }
-  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: [
+          iconSide === "left" && currentIcon,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                textOverflow: "ellipsis",
+                overflow: "hidden"
+              },
+              children: text
+            }
+          ),
+          iconSide === "right" && currentIcon
+        ]
+      })
+    ),
+    tooltipText ? /* @__PURE__ */ jsx(LightTooltip, { id: tooltipId.current, content: tooltipText }) : null
+  ] });
+  const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
     backgroundColor,
     color,
@@ -163,6 +199,7 @@ function Button({
     fullWidth,
     blue,
     iconSide,
+    isRound: isSingleCharRoundButton,
     iconWidth: currentIcon ? iconSize + iconMarginRight : 0,
     isLoading: loading,
     disabled: disabled || loading,
@@ -179,7 +216,6 @@ function Button({
   }
   return href ? /* @__PURE__ */ jsx(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
-var hPaddingPx = 24;
 var buttonStyle = ({
   color,
   backgroundColor,
@@ -195,7 +231,8 @@ var buttonStyle = ({
   blue,
   text,
   zIndex,
-  iconSide
+  iconSide,
+  isRound
 }) => css`
   display: inline-flex;
   opacity: ${disabled && !isLoading ? 0.2 : 1};
@@ -232,8 +269,15 @@ var buttonStyle = ({
   primary,
   blue
 })};
-    border-radius: 32px;
-    padding: ${getPadding({ size, iconWidth, text, ghost, iconSide })};
+    border-radius: ${isRound ? "100%" : "32px"};
+    padding: ${getPadding({
+  size,
+  iconWidth,
+  text,
+  ghost,
+  iconSide,
+  isRound
+})};
     color: ${getTextColor({ color, theme, primary, blue })};
     transition:
       background-color 0.2s ease-out,
@@ -246,7 +290,7 @@ var buttonStyle = ({
 `;
 var ButtonIcon = styled.div`
   ${(props) => props.ghost ? "" : "position: absolute;"}
-  ${({ iconSide, ghost, text, size }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size, ghost })}px;`}
+  ${({ iconSide, ghost, text, size }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size, ghost, isRound: false })}px;`}
 `;
 var StyledButton = styled(UnstyledButton)`
   ${(props) => buttonStyle(props)}
@@ -257,9 +301,9 @@ var ButtonLink = styled(Link)`
 var ButtonHrefLink = styled.a`
   ${(props) => buttonStyle(props)}
 `;
-var ButtonSelector = (prepend = "", append = "") => `${prepend}${select(StyledButton)}${append}, ${prepend}${select(
-  ButtonLink
-)}${append}, ${prepend}${select(ButtonHrefLink)}${append}`;
+var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${select(StyledButton)}, ${select(ButtonLink)}, ${select(
+  ButtonHrefLink
+)})${append}`;
 
 export {
   Button,