@lightsparkdev/ui 1.0.10 → 1.0.12

package/dist/chunk-HIA3H6YK.js

@@ -0,0 +1,39 @@
+// src/icons/CreditCard.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function CreditCard({
+  strokeWidth = "1.125",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 12 13",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2.25 5.9375H9.375", stroke: "currentColor", strokeWidth: "1.125" }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "1.5",
+            y: "2.9375",
+            width: "9",
+            height: "7.125",
+            rx: "1",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin,
+            mask: "url(#path-1-inside-1_865_26901)"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  CreditCard
+};

package/dist/chunk-HIWEVNZA.js

@@ -0,0 +1,31 @@
+// src/icons/ArrowDown.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function ArrowDown({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 17 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1 9.52123L3.88111 12.4023M3.88111 12.4023L6.76222 9.52123M3.88111 12.4023L3.88111 0.8779M9.73778 9.52123",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+export {
+  ArrowDown
+};

package/dist/chunk-HLDOB52A.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkG6OCHOW7cjs = require('./chunk-G6OCHOW7.cjs');
+
+
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+
+// src/components/DataManagerTable/Filter.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var Filter = ({
+  label,
+  children
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Container, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG6OCHOW7cjs.LabelModerate, { children: `Filter by ${label}` }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterBody, { children })
+  ] });
+};
+var Container = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
+`;
+var FilterHeader = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+var FilterBody = _styled2.default.div``;
+
+
+
+exports.Filter = Filter;

package/dist/chunk-HO7LVJ3R.js

@@ -0,0 +1,137 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/styles/colors.tsx
+var neutral = {
+  black: "#000000",
+  gray5: "#0D0D0D",
+  gray10: "#1A1A1A",
+  gray15: "#262626",
+  gray20: "#333333",
+  gray25: "#404040",
+  gray30: "#4D4D4D",
+  gray40: "#666666",
+  gray50: "#808080",
+  gray60: "#999999",
+  gray70: "#B3B3B3",
+  gray75: "#BFBFBF",
+  gray80: "#CCCCCC",
+  gray85: "#D9D9D9",
+  gray90: "#E6E6E6",
+  gray91: "#171717",
+  gray95: "#F2F2F2",
+  gray98: "#F9F9F9",
+  white: "#FFFFFF"
+};
+var darkGradient = "#1d1d1d linear-gradient(180deg, #090909 63.08%, #1d1d1d 100.52%)";
+var primary = "#FFF14E";
+var baseColors = __spreadProps(__spreadValues({}, neutral), {
+  // green
+  success: "#17C27C",
+  green33: "#179257",
+  green35: "#19981E",
+  // blue
+  blue43: "#145BC6",
+  blue22: "#0E2E60",
+  blue39: "#0068C9",
+  blue37: "#21529c",
+  blue58: "#28BFFF",
+  // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
+  grayBlue9: "#16171A",
+  grayBlue12: "#2D2E34",
+  grayBlue14: "#3A3B41",
+  grayBlue18: "#21283a",
+  grayBlue32: "#4F5156",
+  grayBlue43: "#686A72",
+  grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
+  grayBlue67: "#9BA7B9",
+  grayBlue69: "#A6A9BA",
+  grayBlue80: "#C0C9D6",
+  grayBlue88: "#DEDFE4",
+  grayBlue92: "#E1EBF5",
+  grayBlue93: "#E6EEF6",
+  grayBlue94: "#EBEEF2",
+  grayBlue96: "#F2F5F7",
+  // purple
+  purple43: "#820AD1",
+  purple55: "#8B38DE",
+  // red
+  red42a10: "#D800271A",
+  red42a20: "#D800272D",
+  red42a30: "#D800273F",
+  // yellow
+  primary,
+  warning: primary,
+  // orange
+  danger: "#FD2C0F",
+  // neutral
+  secondary: neutral.black,
+  // transparent
+  transparent: "transparent",
+  transparenta02: "#00000005",
+  transparenta08: "#00000014"
+});
+var colors = baseColors;
+function isColorKey(key) {
+  return key in colors;
+}
+function hcNeutralFromBg(bgHex, defaultHex = colors.black, altHex = colors.white) {
+  const bgRGB = hexToRGB(bgHex);
+  const hcRGB = hexToRGB(defaultHex);
+  if (!bgRGB || !hcRGB) return defaultHex;
+  const c = contrast(bgRGB, hcRGB);
+  if (c < 4.5) {
+    return altHex;
+  }
+  return defaultHex;
+}
+function luminance(r, g, b) {
+  const a = [r, g, b].map(function(v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+function contrast(rgb1, rgb2) {
+  const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
+  const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+function componentToHex(c) {
+  const hex = c.toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+function rgbToHex(r, g, b) {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+function hexToRGB(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+  ] : [0, 0, 0];
+}
+function hexToRGBAStr(hex, alpha) {
+  const rgb = hexToRGB(hex);
+  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+}
+
+export {
+  darkGradient,
+  colors,
+  isColorKey,
+  hcNeutralFromBg,
+  luminance,
+  contrast,
+  componentToHex,
+  rgbToHex,
+  hexToRGB,
+  hexToRGBAStr
+};

package/dist/chunk-HRNYKB2C.js

@@ -0,0 +1,34 @@
+import {
+  LabelModerate
+} from "./chunk-UE3WNLRT.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
+
+// src/components/DataManagerTable/Filter.tsx
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+var Filter = ({
+  label,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(FilterHeader, { children: /* @__PURE__ */ jsx(LabelModerate, { children: `Filter by ${label}` }) }),
+    /* @__PURE__ */ jsx(FilterBody, { children })
+  ] });
+};
+var Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing.px.sm};
+`;
+var FilterHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+var FilterBody = styled.div``;
+
+export {
+  Filter
+};

package/dist/chunk-HSNTRQ7D.js

@@ -0,0 +1,24 @@
+// src/icons/Zap.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Zap() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9.33395 1.60194C9.33395 0.612524 8.05068 0.224007 7.50188 1.04724L2.12471 9.11298C1.68167 9.77751 2.15806 10.6677 2.95676 10.6677H6.66728V14.4001C6.66728 15.3895 7.95048 15.778 8.49928 14.9548L13.8765 6.88904C14.3195 6.2245 13.8431 5.33435 13.0444 5.33435H9.33395V1.60194Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Zap
+};

package/dist/chunk-HXNEBHAR.js

@@ -0,0 +1,80 @@
+import {
+  standardBorderRadius
+} from "./chunk-4H7CTVLY.js";
+import {
+  themeOr
+} from "./chunk-HCKCJR5Y.js";
+
+// src/components/ProgressBar.tsx
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var defaultProps = {
+  isSm: false,
+  stepDuration: 0.5
+};
+function ProgressBar({
+  background,
+  progressPercentage,
+  isSm = defaultProps.isSm,
+  stepDuration = defaultProps.stepDuration
+}) {
+  const [percentage, setPercentage] = useState(5);
+  useEffect(() => {
+    if (progressPercentage !== void 0) {
+      setPercentage(progressPercentage);
+    } else {
+      setTimeout(() => {
+        setPercentage(100);
+      }, 0);
+    }
+  }, [progressPercentage]);
+  return /* @__PURE__ */ jsx(ProgressBarContainer, { isSm, children: /* @__PURE__ */ jsx(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ jsx(
+    BarBg,
+    {
+      background,
+      isSm,
+      percentage,
+      stepDuration
+    }
+  ) }) });
+}
+ProgressBar.defaultProps = defaultProps;
+var ProgressBarContainer = styled.div`
+  ${standardBorderRadius(16)}
+  background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
+  box-sizing: border-box;
+  display: flex;
+  height: ${({ isSm }) => isSm ? "6px" : "16px"};
+  justify-content: flex-start;
+  width: 100%;
+  position: relative;
+`;
+var BarBg = styled.div`
+  ${standardBorderRadius(16)}
+  width: ${({ percentage }) => 100 / percentage * 100}%;
+  height: 100%;
+
+  background: ${({ background }) => background ? background : `
+  linear-gradient(
+    90deg,
+    #000000 -25.9%,
+    #1b4077 14.55%,
+    #a152c7 82.22%,
+    #3f2e7e 115.32%
+  )`};
+`;
+var Bar = styled.div`
+  ${standardBorderRadius(16)}
+  overflow: hidden;
+  box-sizing: border-box;
+  display: inline-block;
+  height: ${({ isSm }) => isSm ? "6px" : "16px"};
+  width: ${(props) => props.percentage}%;
+  transition: width ${({ stepDuration }) => stepDuration}s
+    cubic-bezier(0.16, 0.3, 0.18, 1);
+`;
+
+export {
+  ProgressBar
+};

package/dist/chunk-I6XDZ76B.js

@@ -0,0 +1,35 @@
+import {
+  getPropDefaultsBase
+} from "./chunk-XJ3UGTYC.js";
+import {
+  typographyStyles
+} from "./chunk-FKTI5NUC.js";
+import {
+  applyTypography
+} from "./chunk-XTOBN7SG.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/typography/base/Body.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function BodyString(props) {
+  const _a = getPropDefaults(props), { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(StyledBody, __spreadProps(__spreadValues({}, rest), { children }));
+}
+function getPropDefaults(props) {
+  return getPropDefaultsBase(props, { as: props.tag || "span" });
+}
+var StyledBody = styled.span`
+  ${({ theme, size, colorProp }) => applyTypography(theme, "Body", size, colorProp)}
+  ${typographyStyles}
+`;
+
+export {
+  BodyString,
+  getPropDefaults,
+  StyledBody
+};

package/dist/chunk-IAGH4CKJ.js

@@ -0,0 +1,274 @@
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  standardBorderRadius,
+  subtext
+} from "./chunk-4H7CTVLY.js";
+import {
+  applyTypography
+} from "./chunk-XTOBN7SG.js";
+import {
+  getColor,
+  themeOr
+} from "./chunk-HCKCJR5Y.js";
+
+// src/styles/fields.tsx
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var maxFieldWidth = "100%";
+var fieldWidth = "100%";
+var inputSpacingPx = 24;
+var formButtonTopMargin = "32px";
+var formButtonTopMarginStyle = css`
+  margin-top: ${formButtonTopMargin};
+`;
+var standardBorderColor = ({ theme }) => css`
+  border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
+`;
+var inputBlockStyle = ({
+  theme,
+  hasValue,
+  hasError
+}) => css`
+  ${subtext({ theme })}
+  ${standardBorderColor({ theme })}
+  ${standardBorderRadius(8)}
+  background-color: ${theme.bg};
+  border-width: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+  cursor: pointer;
+  padding: 52.5px;
+  ${hasError ? `border-style: solid; border-color: ${theme.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
+`;
+var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
+var textInputFontWeight = 600;
+var textInputBorderRadiusPx = 8;
+var textInputPaddingPx = 12;
+var textInputPadding = `${textInputPaddingPx}px`;
+var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
+var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
+var textInputActiveStyles = ({
+  theme,
+  paddingLeftPx,
+  paddingRightPx,
+  activeOutline,
+  activeOutlineColor
+}) => {
+  if (activeOutline) {
+    const outlineColor = activeOutlineColor ? getColor(theme, activeOutlineColor) : textInputBorderColorFocused({ theme });
+    return css`
+      outline: 2px solid ${outlineColor};
+      outline-offset: 2px;
+      caret-color: ${outlineColor};
+    `;
+  }
+  return css`
+    border-color: ${textInputBorderColorFocused({ theme })};
+    border-width: 2px;
+    padding: ${textInputPaddingPx - 1}px;
+    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
+    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+  `;
+};
+var defaultTextInputTypography = {
+  type: "Body",
+  size: "Small",
+  color: "text"
+};
+var textInputStyle = ({
+  theme,
+  active,
+  disabled,
+  hasError,
+  paddingLeftPx,
+  paddingRightPx,
+  paddingTopPx,
+  paddingBottomPx,
+  activeOutline,
+  activeOutlineColor,
+  typography,
+  borderRadius
+}) => {
+  var _a;
+  return css`
+  border-radius: ${borderRadius === "round" ? "999" : textInputBorderRadiusPx}px;
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
+  cursor: ${disabled ? "not-allowed" : "auto"};
+  box-sizing: border-box;
+  font-weight: ${textInputFontWeight};
+
+  position: relative;
+  z-index: ${z.textInput};
+  font-family: ${(_a = theme.typography) == null ? void 0 : _a.fontFamilies.main};
+  padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
+  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
+  ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
+  ${paddingTopPx ? `padding-top: ${paddingTopPx - (hasError ? 1 : 0)}px;` : ""}
+  ${paddingBottomPx ? `padding-bottom: ${paddingBottomPx - (hasError ? 1 : 0)}px;` : ""}
+  border-style: solid;
+  border-width: ${hasError ? "2" : "1"}px;
+  border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
+  line-height: 22px;
+  outline: none;
+
+  ${applyTypography(
+    theme,
+    (typography == null ? void 0 : typography.type) || defaultTextInputTypography.type,
+    (typography == null ? void 0 : typography.size) || defaultTextInputTypography.size,
+    (typography == null ? void 0 : typography.color) || defaultTextInputTypography.color
+  )}
+
+  width: ${fieldWidth};
+  max-width: ${maxFieldWidth};
+  text-overflow: ellipsis;
+  &:focus,
+  &:active,
+  &:has(:focus) {
+    ${textInputActiveStyles({
+    theme,
+    paddingLeftPx,
+    paddingRightPx,
+    activeOutline,
+    activeOutlineColor
+  })}
+  }
+
+  ${active && textInputActiveStyles({
+    theme,
+    paddingLeftPx,
+    paddingRightPx,
+    activeOutline,
+    activeOutlineColor
+  })}
+
+  &::placeholder {
+    color: ${textInputPlaceholderColor({ theme })};
+  }
+
+  &:focus::placeholder {
+    color: ${textInputPlaceholderColor({ theme })};
+  }
+`;
+};
+var FieldError = styled.div`
+  background-color: rgba(242, 239, 255, 1);
+  padding: 16px 16px 8px;
+  margin-top: -8px;
+  border-radius: 0 0 8px 8px;
+  position: relative;
+  z-index: ${z.fieldError};
+`;
+var aboveFieldError = ({
+  theme,
+  hasError
+}) => css`
+  ${hasError ? "border: none !important" : ""};
+  background-color: ${theme.bg};
+  position: relative;
+  z-index: ${z.fieldError + 1};
+  ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
+`;
+var inputSubtextSeconds = 0.25;
+function InputSubtext({
+  text,
+  hasError = false,
+  tooltipId
+}) {
+  const timeoutRef = useRef(null);
+  const [subtext2, setSubtext] = useState(text);
+  const [visible, setVisible] = useState(Boolean(text));
+  useLayoutEffect(() => {
+    if (text) {
+      setSubtext(text);
+      setVisible(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    } else {
+      setVisible(false);
+      timeoutRef.current = setTimeout(() => {
+        setSubtext(void 0);
+      }, inputSubtextSeconds * 1e3);
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    StyledInputSubtext,
+    {
+      visible,
+      hasError,
+      cursorPointer: Boolean(tooltipId),
+      children: tooltipId ? /* @__PURE__ */ jsx("span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
+    }
+  );
+}
+var StyledInputSubtext = styled.div`
+  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
+  margin-left: ${({ visible }) => visible ? "8px" : "0px"};
+  font-size: 12px;
+  font-size: ${({ visible }) => visible ? "12px" : "0px"};
+  opacity: ${({ visible }) => visible ? "1" : "0"};
+  overflow: hidden;
+  transition:
+    font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
+    opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
+    margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
+  color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
+  cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
+`;
+var labelStyle = ({
+  theme,
+  hasError
+}) => css`
+  color: ${hasError ? theme.danger : theme.text};
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & + * {
+    margin-top: 12px;
+  }
+  * ~ & {
+    margin-top: 40px;
+  }
+`;
+var Label = styled.label`
+  ${subtext}
+  ${labelStyle}
+`;
+var LabelDiv = styled.div`
+  ${subtext}
+  ${labelStyle}
+`;
+
+export {
+  maxFieldWidth,
+  fieldWidth,
+  inputSpacingPx,
+  formButtonTopMargin,
+  formButtonTopMarginStyle,
+  standardBorderColor,
+  inputBlockStyle,
+  textInputPlaceholderColor,
+  textInputFontWeight,
+  textInputBorderRadiusPx,
+  textInputPaddingPx,
+  textInputPadding,
+  textInputBorderColor,
+  textInputBorderColorFocused,
+  defaultTextInputTypography,
+  textInputStyle,
+  FieldError,
+  aboveFieldError,
+  InputSubtext,
+  StyledInputSubtext,
+  labelStyle,
+  Label,
+  LabelDiv
+};