@lightsparkdev/ui 0.0.8 → 0.0.11

package/dist/components/GradientCardHeader.cjs

@@ -0,0 +1,177 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/GradientCardHeader.tsx
+var GradientCardHeader_exports = {};
+__export(GradientCardHeader_exports, {
+  GradientCardHeader: () => GradientCardHeader
+});
+module.exports = __toCommonJS(GradientCardHeader_exports);
+var import_styled = __toESM(require("@emotion/styled"), 1);
+
+// src/styles/z-index.tsx
+var z = {
+  card: 1,
+  fieldError: 1,
+  textInput: 2,
+  select: 3,
+  selectFocused: 4,
+  walletActionPreviewTopGradient: 1,
+  headerContainer: 99,
+  smBanner: 99,
+  headerTop: 100,
+  navMenu: 100,
+  smNavMenu: 100,
+  navAction: 101,
+  smNavAction: 100,
+  // keep under navDropdown
+  notificationBanner: 170,
+  qrReaderVideo: 180,
+  qrReaderOverlay: 181,
+  modalOverlay: 190,
+  modalContainer: 191,
+  dropdown: 192,
+  tooltip: 193,
+  toast: 200
+};
+
+// src/components/GradientCardHeader.tsx
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+function GradientCardHeader(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeaderWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Gradients, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      props.status,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeaderTitle, { children: props.title })
+    ] }),
+    props.children
+  ] });
+}
+var CardHeaderWrapper = import_styled.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 40px 32px 24px 32px;
+  background-color: black;
+  color: white;
+  height: 264px;
+`;
+var CardHeaderTitle = import_styled.default.h3`
+  font-size: 21px;
+  font-weight: 800;
+  color: white;
+  margin: 0;
+  z-index: ${z.headerContainer} - 1;
+  position: relative;
+`;
+var Gradients = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackgroundGradients, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccentGradients, {})
+  ] });
+};
+var BackgroundGradients = import_styled.default.div`
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    margin: auto;
+    filter: blur(38.5px);
+  }
+  &:before {
+    z-index: ${z.walletActionPreviewTopGradient};
+    right: -280px;
+    top: -340px;
+    width: 704px;
+    height: 619px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      #0032ff 0%,
+      rgb(0 121 255 / 31%) 97%,
+      rgba(0, 102, 255, 0.05) 100%
+    );
+  }
+  &:after {
+    z-index: ${z.walletActionPreviewTopGradient - 1};
+    width: 636px;
+    height: 552px;
+    top: -400px;
+    right: -280px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      rgb(255 114 104) 0%,
+      rgb(191 9 255 / 14%) 90%,
+      rgb(191 9 255 / 5%) 100%
+    );
+  }
+`;
+var AccentGradients = import_styled.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  right: 0;
+  bottom: 0;
+  z-index: ${z.walletActionPreviewTopGradient - 1};
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    margin: auto;
+    filter: blur(38.5px);
+  }
+  &:before {
+    right: -70px;
+    top: -100px;
+    width: 169px;
+    height: 323px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      #ff8c28,
+      rgba(191, 9, 255, 0.1) 100%
+    );
+  }
+  &:after {
+    right: -22px;
+    top: -140px;
+    width: 225px;
+    height: 190px;
+    background: radial-gradient(
+      41.57% 62.06% at 53.1% 49.9%,
+      rgb(255 119 0),
+      rgb(255 106 9 / 55%) 100%
+    );
+  }
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GradientCardHeader
+});

package/dist/components/GradientCardHeader.d.cts

@@ -0,0 +1,10 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+
+type GradientCardHeaderProps = {
+    children: React.ReactNode;
+    status?: React.ReactNode;
+    title?: string;
+};
+declare function GradientCardHeader(props: GradientCardHeaderProps): _emotion_react_jsx_runtime.JSX.Element;
+
+export { GradientCardHeader };

package/dist/components/GradientCardHeader.d.ts

@@ -0,0 +1,10 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+
+type GradientCardHeaderProps = {
+    children: React.ReactNode;
+    status?: React.ReactNode;
+    title?: string;
+};
+declare function GradientCardHeader(props: GradientCardHeaderProps): _emotion_react_jsx_runtime.JSX.Element;
+
+export { GradientCardHeader };

package/dist/components/GradientCardHeader.js

@@ -0,0 +1,8 @@
+import {
+  GradientCardHeader
+} from "../chunk-IPAXAP6K.js";
+import "../chunk-55OQPFLF.js";
+import "../chunk-CIGAQ47A.js";
+export {
+  GradientCardHeader
+};

package/dist/components/Icon.cjs

@@ -1285,30 +1285,44 @@ function hexToRGB(hex) {
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-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}
-`;
+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 standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),

package/dist/components/Icon.js

@@ -1,9 +1,9 @@
 import {
   Icon,
   IconContainer
-} from "../chunk-VHW2KROZ.js";
+} from "../chunk-RWIZ7Q74.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HNVQIY5U.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";

package/dist/components/LightTooltip.cjs

@@ -1271,30 +1271,44 @@ function hexToRGB(hex) {
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-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}
-`;
+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 standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),

package/dist/components/LightTooltip.js

@@ -1,8 +1,8 @@
 import {
   LightTooltip
-} from "../chunk-NRXJA2PM.js";
+} from "../chunk-3EVAP5JT.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-HNVQIY5U.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";

package/dist/components/LightsparkProvider.cjs

@@ -1304,30 +1304,44 @@ var import_styled = __toESM(require("@emotion/styled"), 1);
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-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}
-`;
+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 standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),

package/dist/components/LightsparkProvider.js

@@ -1,9 +1,9 @@
 import {
   LightsparkProvider
-} from "../chunk-ZYHA6MJC.js";
-import "../chunk-ZSUX6RLD.js";
+} from "../chunk-H3RW6JSU.js";
+import "../chunk-KMR5C25B.js";
 import "../chunk-IJVWYT5G.js";
-import "../chunk-HNVQIY5U.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";

package/dist/components/Loading.cjs

@@ -1288,30 +1288,44 @@ function hexToRGB(hex) {
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-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}
-`;
+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 standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),

package/dist/components/Loading.js

@@ -1,10 +1,10 @@
 import {
   Loading,
   LoadingWrapper
-} from "../chunk-BAO4T4G5.js";
-import "../chunk-VHW2KROZ.js";
+} from "../chunk-J4FJQ3FN.js";
+import "../chunk-RWIZ7Q74.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HNVQIY5U.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";