@lightsparkdev/ui 0.0.12 → 1.0.0

package/dist/chunk-FHNYQLMF.js

@@ -1,30 +0,0 @@
-import {
-  colors
-} from "./chunk-2VBDEO6M.js";
-import {
-  getTypographyString
-} from "./chunk-E4EXM4SY.js";
-
-// src/styles/fonts/typography/Title.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-var Title = ({
-  children,
-  color,
-  size = "Medium" /* Medium */,
-  block = false
-}) => {
-  return /* @__PURE__ */ jsx(StyledTitle, { size, color, block, children });
-};
-var StyledTitle = styled.span`
-  ${({ block }) => block ? "display: block;" : ""}
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app].Title[size]) : "";
-}}
-`;
-
-export {
-  Title,
-  StyledTitle
-};

package/dist/chunk-IJVWYT5G.js

@@ -1,8 +0,0 @@
-// src/styles/constants.ts
-var cssVars = {
-  docHeight: "--doc-height"
-};
-
-export {
-  cssVars
-};

package/dist/chunk-LD5LZXUP.js

@@ -1,25 +0,0 @@
-import {
-  colors
-} from "./chunk-2VBDEO6M.js";
-import {
-  getTypographyString
-} from "./chunk-E4EXM4SY.js";
-
-// src/styles/fonts/typography/Body.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-var Body = ({ children, color, size = "Medium" /* Medium */ }) => {
-  return /* @__PURE__ */ jsx(StyledBody, { size, color, children });
-};
-var StyledBody = styled.span`
-  display: block;
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app].Body[size]) : "";
-}}
-`;
-
-export {
-  Body,
-  StyledBody
-};

package/dist/chunk-LN7MMOXE.js

@@ -1,29 +0,0 @@
-import {
-  colors
-} from "./chunk-2VBDEO6M.js";
-import {
-  getTypographyString
-} from "./chunk-E4EXM4SY.js";
-
-// src/styles/fonts/typography/BodyStrong.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-var BodyStrong = ({
-  children,
-  color,
-  size = "Medium" /* Medium */
-}) => {
-  return /* @__PURE__ */ jsx(StyledBodyStrong, { size, color, children });
-};
-var StyledBodyStrong = styled.span`
-  display: block;
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app]["Body Strong"][size]) : "";
-}}
-`;
-
-export {
-  BodyStrong,
-  StyledBodyStrong
-};

package/dist/chunk-MYKMYG6H.js

@@ -1,36 +0,0 @@
-import {
-  colors
-} from "./chunk-2VBDEO6M.js";
-import {
-  getTypographyString
-} from "./chunk-E4EXM4SY.js";
-
-// src/styles/fonts/typography/LabelStrong.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-var LabelStrong = ({
-  children,
-  color,
-  size = "Medium" /* Medium */
-}) => {
-  return /* @__PURE__ */ jsx(StyledLabelStrong, { size, color, children });
-};
-var StyledLabelStrong = styled.label`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app]["Label Strong"][size]) : "";
-}}
-  cursor: inherit;
-
-  * {
-    color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-    ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app]["Label Strong"][size]) : "";
-}}
-  }
-`;
-
-export {
-  LabelStrong,
-  StyledLabelStrong
-};

package/dist/chunk-OO5UJRAW.js

@@ -1,25 +0,0 @@
-import {
-  colors
-} from "./chunk-2VBDEO6M.js";
-import {
-  getTypographyString
-} from "./chunk-E4EXM4SY.js";
-
-// src/styles/fonts/typography/Label.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-var Label = ({ children, color, size = "Medium" /* Medium */ }) => {
-  return /* @__PURE__ */ jsx(StyledLabel, { size, color, children });
-};
-var StyledLabel = styled.label`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app].Label[size]) : "";
-}}
-  cursor: inherit;
-`;
-
-export {
-  Label,
-  StyledLabel
-};

package/dist/chunk-QGGOMPHZ.js

@@ -1,37 +0,0 @@
-import {
-  select
-} from "./chunk-YMNSXZ5D.js";
-import {
-  colors
-} from "./chunk-2VBDEO6M.js";
-import {
-  getTypographyString
-} from "./chunk-E4EXM4SY.js";
-
-// src/styles/fonts/typography/Display.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-var ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
-var Display = ({
-  children,
-  color,
-  size = "Medium" /* Medium */,
-  element = "h1"
-}) => {
-  return /* @__PURE__ */ jsx(StyledDisplay, { as: element, size, color, children });
-};
-var StyledDisplay = styled.span`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app].Display[size]) : "";
-}}
-`;
-function displaySelector(element) {
-  return `${element}${select(StyledDisplay)}`;
-}
-
-export {
-  ELEMENTS,
-  Display,
-  displaySelector
-};

package/dist/chunk-RBYRXBPI.js

@@ -1,29 +0,0 @@
-import {
-  colors
-} from "./chunk-2VBDEO6M.js";
-import {
-  getTypographyString
-} from "./chunk-E4EXM4SY.js";
-
-// src/styles/fonts/typography/Overline.tsx
-import styled from "@emotion/styled";
-import { jsx } from "@emotion/react/jsx-runtime";
-var Overline = ({
-  children,
-  color,
-  size = "Medium" /* Medium */
-}) => {
-  return /* @__PURE__ */ jsx(StyledOverline, { size, color, children });
-};
-var StyledOverline = styled.span`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app].Overline[size]) : "";
-}}
-  cursor: inherit;
-`;
-
-export {
-  Overline,
-  StyledOverline
-};

package/dist/chunk-VE7J2N47.js

@@ -1,30 +0,0 @@
-import {
-  Link
-} from "./chunk-OGSDZTHM.js";
-
-// src/utils/toReactNodes.tsx
-import { Fragment } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-var ToReactNodesTypes = {
-  Link: "link"
-};
-function toReactNodes(toReactNodesArg) {
-  const toReactNodesArray = Array.isArray(toReactNodesArg) ? toReactNodesArg : [toReactNodesArg];
-  const reactNodes = toReactNodesArray.map((node, i) => {
-    if (typeof node === "string") {
-      return /* @__PURE__ */ jsx(Fragment, { children: node.split("\n").map((str, j, strArr) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        str,
-        j < strArr.length - 1 && /* @__PURE__ */ jsx("br", {})
-      ] }, `str-${i}-break-${j}`)) }, `str-${i}`);
-    } else if (node.type === ToReactNodesTypes.Link) {
-      return /* @__PURE__ */ jsx(Link, { to: node.to, children: node.text }, `link-${i}`);
-    }
-    return null;
-  });
-  return /* @__PURE__ */ jsx(Fragment, { children: reactNodes });
-}
-
-export {
-  ToReactNodesTypes,
-  toReactNodes
-};

package/dist/chunk-ZANLDY2W.js

@@ -1,312 +0,0 @@
-import {
-  Link
-} from "./chunk-OGSDZTHM.js";
-import {
-  select
-} from "./chunk-YMNSXZ5D.js";
-import {
-  Loading
-} from "./chunk-J4FJQ3FN.js";
-import {
-  UnstyledButton
-} from "./chunk-3GS5EFXV.js";
-import {
-  LightTooltip
-} from "./chunk-3EVAP5JT.js";
-import {
-  Icon
-} from "./chunk-RWIZ7Q74.js";
-import {
-  getFocusOutline
-} from "./chunk-JK4BP73A.js";
-import {
-  colors,
-  themeOr
-} from "./chunk-2VBDEO6M.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-CIGAQ47A.js";
-
-// 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) {
-    return color;
-  }
-  if (blue) {
-    return colors.white;
-  }
-  if (primary) {
-    const color2 = theme.hcNeutralFromBg(theme.hcNeutral);
-    return color2;
-  }
-  return theme.text;
-}
-function getBackgroundColor({
-  backgroundColor,
-  theme,
-  primary,
-  blue,
-  ghost
-}) {
-  if (ghost) {
-    return "none";
-  }
-  if (backgroundColor) {
-    return backgroundColor;
-  }
-  if (blue) {
-    return colors.blue43;
-  }
-  if (primary) {
-    return themeOr(theme.c9Neutral, colors.white)({ theme });
-  }
-  return themeOr(colors.white, theme.c1Neutral)({ theme });
-}
-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,
-  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`;
-}
-function getBorder({ ghost }) {
-  if (ghost) {
-    return "none";
-  }
-  return "1px solid";
-}
-function getInnerBorderColor({
-  backgroundColor,
-  theme,
-  primary,
-  blue
-}) {
-  if (primary || blue || backgroundColor) {
-    return getBackgroundColor({
-      backgroundColor,
-      theme,
-      primary,
-      blue
-    });
-  }
-  return themeOr(colors.gray90, colors.gray20)({ theme });
-}
-function Button({
-  backgroundColor,
-  color,
-  hoverColor,
-  primary = false,
-  ghost = false,
-  text,
-  to,
-  hash,
-  href,
-  toParams,
-  onClick,
-  icon,
-  iconSide = "left",
-  loading = false,
-  fullWidth = false,
-  disabled = false,
-  size = "lg",
-  mt = 0,
-  ml = 0,
-  type = "button",
-  blue = false,
-  newTab = false,
-  zIndex = void 0,
-  tooltipText
-}) {
-  const tooltipId = useRef(uniqueId());
-  const iconMarginRight = 6;
-  const iconSize = size === "lg" ? 16 : 12;
-  let currentIcon = null;
-  if (loading) {
-    currentIcon = /* @__PURE__ */ jsx(ButtonIcon, { ghost, iconSide, text, size, children: /* @__PURE__ */ jsx(Loading, { size: iconSize, center: false }) });
-  } else if (icon) {
-    currentIcon = /* @__PURE__ */ jsx(ButtonIcon, { ghost, iconSide, text, size, children: /* @__PURE__ */ jsx(Icon, { name: icon, width: iconSize }) });
-  }
-  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,
-    hoverColor,
-    type,
-    size,
-    onClick,
-    primary,
-    ghost,
-    fullWidth,
-    blue,
-    iconSide,
-    isRound: isSingleCharRoundButton,
-    iconWidth: currentIcon ? iconSize + iconMarginRight : 0,
-    isLoading: loading,
-    disabled: disabled || loading,
-    css: {
-      marginTop: mt ? `${mt}px` : void 0,
-      marginLeft: ml ? `${ml}px` : void 0
-    },
-    newTab,
-    text,
-    zIndex
-  };
-  if (to) {
-    return /* @__PURE__ */ jsx(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, 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 = ({
-  color,
-  backgroundColor,
-  hoverColor,
-  theme,
-  primary,
-  ghost,
-  disabled,
-  isLoading,
-  size,
-  fullWidth,
-  iconWidth,
-  blue,
-  text,
-  zIndex,
-  iconSide,
-  isRound
-}) => css`
-  display: inline-flex;
-  opacity: ${disabled && !isLoading ? 0.2 : 1};
-  transition: opacity 0.2s;
-  position: relative;
-
-  ${zIndex && `z-index: ${zIndex};`}
-
-  color: ${getTextColor({ color, theme, primary, blue })};
-  font-size: ${["lg", "md"].includes(size) ? "14px" : "12px"};
-  font-weight: 600;
-
-  &:focus-visible {
-    outline: ${getFocusOutline({ theme })};
-  }
-
-  width: ${fullWidth ? "100%" : "fit-content"};
-
-  & > * {
-    width: 100%;
-    text-align: center;
-    white-space: nowrap;
-    background-color: ${getBackgroundColor({
-  backgroundColor,
-  theme,
-  primary,
-  blue,
-  ghost
-})};
-    border: ${getBorder({ ghost })};
-    border-color: ${getInnerBorderColor({
-  backgroundColor,
-  theme,
-  primary,
-  blue
-})};
-    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,
-      border-color 0.2s ease-out;
-
-    &:hover {
-      ${hoverColor && ghost ? "" : `background-color: ${hoverColor}; border-color: ${hoverColor};`}
-    }
-  }
-`;
-var ButtonIcon = styled.div`
-  ${(props) => props.ghost ? "" : "position: absolute;"}
-  ${({ iconSide, ghost, text, size }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size, ghost, isRound: false })}px;`}
-`;
-var StyledButton = styled(UnstyledButton)`
-  ${(props) => buttonStyle(props)}
-`;
-var ButtonLink = styled(Link)`
-  ${(props) => buttonStyle(props)}
-`;
-var ButtonHrefLink = styled.a`
-  ${(props) => buttonStyle(props)}
-`;
-var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${select(StyledButton)}, ${select(ButtonLink)}, ${select(
-  ButtonHrefLink
-)})${append}`;
-
-export {
-  Button,
-  StyledButton,
-  ButtonSelector
-};