@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-GMBFE2Y7.js

@@ -0,0 +1,118 @@
+import {
+  UnstyledButton
+} from "./chunk-3HIDFTSK.js";
+import {
+  TextIconAligner
+} from "./chunk-N6KLO6D6.js";
+import {
+  getFocusOutline
+} from "./chunk-ANZUTQRP.js";
+import {
+  Link
+} from "./chunk-PTJ7AVLT.js";
+import {
+  elide
+} from "./chunk-HAC5YAGQ.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/components/TextButton.tsx
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function TextButton({
+  text: textProp,
+  to,
+  href,
+  toParams,
+  onClick,
+  rightIcon,
+  leftIcon,
+  elide: elideArgs,
+  disabled = false,
+  mt = 0,
+  ml = 0,
+  mr = 0,
+  padding = "0",
+  iconMatchTextColor = false,
+  typography
+}) {
+  const text = elideArgs ? elide(textProp, elideArgs) : textProp;
+  let rightIconProp = rightIcon;
+  if (typeof rightIcon === "undefined" && typeof leftIcon === "undefined") {
+    rightIconProp = {
+      name: "ArrowRight"
+    };
+  }
+  const defaultIconColor = iconMatchTextColor ? void 0 : "mcNeutral";
+  const content = /* @__PURE__ */ jsx(
+    TextIconAligner,
+    {
+      onClick,
+      leftIcon: leftIcon ? {
+        name: leftIcon.name,
+        color: leftIcon.color || defaultIconColor,
+        width: leftIcon.width
+      } : null,
+      content: text,
+      typography: __spreadValues({ size: "ExtraSmall" }, typography),
+      rightIcon: rightIconProp ? {
+        name: rightIconProp.name,
+        color: rightIconProp.color || defaultIconColor,
+        width: rightIconProp.width
+      } : null
+    }
+  );
+  const commonProps = {
+    type: "button",
+    onClick,
+    disabled,
+    padding,
+    css: {
+      marginTop: mt ? `${mt}px` : void 0,
+      marginLeft: ml ? `${ml}px` : void 0,
+      marginRight: mr ? `${mr}px` : void 0
+    }
+  };
+  if (to) {
+    return /* @__PURE__ */ jsx(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, children: content }));
+  }
+  return href ? /* @__PURE__ */ jsx(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+}
+var buttonStyle = ({
+  theme,
+  disabled,
+  padding
+}) => css`
+  display: inline-flex;
+  opacity: ${disabled ? 0.2 : 1};
+  align-items: center;
+  transition: opacity 0.2s;
+  padding: ${padding};
+
+  &:focus-visible {
+    outline: ${getFocusOutline({ theme })};
+  }
+
+  & > * {
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+    cursor: ${disabled ? "not-allowed" : "pointer"};
+  }
+`;
+var StyledButton = styled(UnstyledButton)`
+  ${(props) => buttonStyle(props)}
+`;
+var ButtonLink = styled(Link)`
+  ${(props) => buttonStyle(props)}
+`;
+var ButtonHrefLink = styled.a`
+  ${(props) => buttonStyle(props)}
+`;
+
+export {
+  TextButton
+};

package/dist/chunk-GPRW3L26.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/ShareAndroid.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ShareAndroid({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M9.00003 10.4286L14 7.57141M9.00003 13.5714L14 16.4286M20.25 6C20.25 7.79493 18.7949 9.25 17 9.25C15.2051 9.25 13.75 7.79493 13.75 6C13.75 4.20507 15.2051 2.75 17 2.75C18.7949 2.75 20.25 4.20507 20.25 6ZM20.25 18C20.25 19.7949 18.7949 21.25 17 21.25C15.2051 21.25 13.75 19.7949 13.75 18C13.75 16.2051 15.2051 14.75 17 14.75C18.7949 14.75 20.25 16.2051 20.25 18ZM9.25 12C9.25 13.7949 7.79493 15.25 6 15.25C4.20507 15.25 2.75 13.7949 2.75 12C2.75 10.2051 4.20507 8.75 6 8.75C7.79493 8.75 9.25 10.2051 9.25 12Z",
+          stroke: "currentColor",
+          strokeWidth,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.ShareAndroid = ShareAndroid;

package/dist/chunk-GQJZNXMB.js

@@ -0,0 +1,79 @@
+// src/icons/central/TrashCan.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function TrashCan({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4.75 6.5L5.72041 20.32C5.7572 20.8439 6.19286 21.25 6.71796 21.25H17.282C17.8071 21.25 18.2428 20.8439 18.2796 20.32L19.25 6.5",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3.25 5.75H20.75",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8.52441 5.58289C8.7306 3.84652 10.2079 2.5 11.9998 2.5C13.7917 2.5 15.269 3.84652 15.4752 5.58289",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 10.5V16.25",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M14 10.5V16.25",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            vectorEffect: "non-scaling-stroke"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  TrashCan
+};

package/dist/chunk-GRC7XFET.js

@@ -0,0 +1,26 @@
+import {
+  toReactNodes
+} from "./chunk-BDL3A6DZ.js";
+import {
+  StyledTitle,
+  getPropDefaults
+} from "./chunk-CEV6D4MN.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/components/typography/Title.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Title(props) {
+  const propsWithDefaults = getPropDefaults(props);
+  let reactNodes = props.children || null;
+  if (props.content) {
+    reactNodes = toReactNodes(props.content);
+  }
+  return /* @__PURE__ */ jsx(StyledTitle, __spreadProps(__spreadValues({}, propsWithDefaults), { children: reactNodes }));
+}
+
+export {
+  Title
+};

package/dist/chunk-GSU6TJQP.js

@@ -0,0 +1,315 @@
+import {
+  Heading
+} from "./chunk-KDCMTDLB.js";
+import {
+  StyledButtonRow
+} from "./chunk-3N2BVLZJ.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  flexCenter,
+  overflowAutoWithoutScrollbars,
+  size
+} from "./chunk-KKGZ47R3.js";
+import {
+  cardBorderRadiusPx,
+  darkGradientBg,
+  headingContentMarginPx,
+  standardBorderRadius,
+  standardCardShadow,
+  standardContentInset
+} from "./chunk-ANZUTQRP.js";
+import {
+  themeOr
+} from "./chunk-33OPRYWV.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(${StyledButtonRow}) {
+    margin-top: ${headingContentMarginPx}px !important;
+  }
+
+  & + ${CardPageSubtitle} {
+    margin-top: 5px;
+  }
+
+  & + ${StyledButtonRow} {
+    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-GUJMV4XO.cjs

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/Key2.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Key2({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M15.5 14.25C18.6756 14.25 21.25 11.6756 21.25 8.5C21.25 5.32436 18.6756 2.75 15.5 2.75C12.3244 2.75 9.75 5.32436 9.75 8.5C9.75 8.98191 9.80928 9.44996 9.92095 9.89728L4.04289 15.7753C3.85536 15.9629 3.75 16.2172 3.75 16.4825V19.2501C3.75 19.8023 4.19772 20.2501 4.75 20.2501H7.5176C7.78282 20.2501 8.03717 20.1447 8.22471 19.9572L9.25 18.9319V16.2501H11.9318L14.1028 14.0791C14.5501 14.1907 15.0181 14.25 15.5 14.25Z",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M17.25 8.5C17.25 9.4665 16.4665 10.25 15.5 10.25C14.5335 10.25 13.75 9.4665 13.75 8.5C13.75 7.5335 14.5335 6.75 15.5 6.75C16.4665 6.75 17.25 7.5335 17.25 8.5Z",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap: "square",
+            vectorEffect: "non-scaling-stroke"
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+exports.Key2 = Key2;