@lightsparkdev/ui 1.0.10 → 1.0.12

package/dist/chunk-AXHFR6HR.js

@@ -1,243 +0,0 @@
-import {
-  applyTypography
-} from "./chunk-R4JQUMCP.js";
-import {
-  z
-} from "./chunk-55OQPFLF.js";
-import {
-  standardBorderRadius,
-  subtext
-} from "./chunk-YZM4ALKD.js";
-import {
-  themeOr
-} from "./chunk-O42E7NAG.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
-}) => 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,
-  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;` : ""}
-  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 })}
-  }
-
-  ${active && textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
-
-  &::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
-};

package/dist/chunk-B3OYC2SZ.js

@@ -1,351 +0,0 @@
-import {
-  pageSectionScrollOffset
-} from "./chunk-JJC2AUQ3.js";
-import {
-  TextButton
-} from "./chunk-AEL6DM2K.js";
-import {
-  Dropdown
-} from "./chunk-LFIZVZWX.js";
-import {
-  standardBorderColor
-} from "./chunk-AXHFR6HR.js";
-import {
-  Badge,
-  badgeSmVPadding
-} from "./chunk-PXY7XXMI.js";
-import {
-  Heading,
-  headingWithDefaults
-} from "./chunk-I7MVMRCX.js";
-import {
-  select
-} from "./chunk-YMNSXZ5D.js";
-import {
-  Loading
-} from "./chunk-FFOE2R32.js";
-import {
-  UnstyledButton
-} from "./chunk-WZJTXJM5.js";
-import {
-  toReactNodes
-} from "./chunk-XSMF72UT.js";
-import {
-  Icon
-} from "./chunk-NGSQ2OOV.js";
-import {
-  standardBorderRadius,
-  standardLineHeightEms
-} from "./chunk-YZM4ALKD.js";
-import {
-  bp
-} from "./chunk-JSGRNWSB.js";
-import {
-  colors
-} from "./chunk-MN4NUSPL.js";
-import {
-  __spreadValues
-} from "./chunk-CWMXXUWU.js";
-
-// src/components/PageSection/PageSection.tsx
-import { useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
-import { Fragment } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-function PageSection({
-  children,
-  title,
-  sectionId,
-  headerOffset = 0
-}) {
-  return /* @__PURE__ */ jsxs(StyledPageSection, { scrollMarginTop: headerOffset + pageSectionScrollOffset, children: [
-    title ? /* @__PURE__ */ jsx(Heading, { type: "h3", id: sectionId, mt: 0, mb: 40, children: title }) : null,
-    children
-  ] });
-}
-var StyledPageSection = styled.div`
-  &:first-of-type {
-    ${bp.minSm(`
-      margin-top: 4px;
-    `)}
-  }
-
-  &:not(:first-of-type) {
-    margin-top: 72px;
-  }
-
-  h3,
-  h4 {
-    scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px !important;
-  }
-`;
-var PageSectionSubheading = headingWithDefaults({
-  type: "h4",
-  mb: 32
-});
-var PageSectionBoxActionColumn = ({
-  label,
-  value,
-  valueId
-}) => /* @__PURE__ */ jsxs(StyledPageSectionBoxActionColumn, { children: [
-  /* @__PURE__ */ jsx(PageSectionBoxActionColumnLabel, { children: label }),
-  value ? /* @__PURE__ */ jsx(PageSectionBoxActionColumnValue, { id: valueId, children: value }) : /* @__PURE__ */ jsx(PageSectionBoxActionColumnNoValue, { children: "Unknown" })
-] });
-var StyledPageSectionBoxActionColumn = styled.div``;
-var PageSectionBoxActionColumnLabel = styled.div`
-  color: ${colors.gray40};
-  font-weight: 500;
-  margin: 0;
-`;
-var PageSectionBoxActionColumnValue = styled.div`
-  font-weight: 700;
-  margin-bottom: 0;
-  margin-top: 6px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-var PageSectionBoxActionColumnNoValue = styled(
-  PageSectionBoxActionColumnValue
-)`
-  color: ${colors.gray80};
-  font-style: italic;
-`;
-function PageSectionBoxAction({
-  dropdownItems,
-  icon,
-  isDelete = false,
-  label,
-  loading = false,
-  onClick,
-  to,
-  toParams
-}) {
-  const theme = useTheme();
-  return loading ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Loading, { size: 12, center: false }) }) : icon ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(UnstyledButton, { onClick: icon.onClick, children: /* @__PURE__ */ jsx(Icon, { name: icon.name, width: 12, color: "mcNeutral" }) }) }) : dropdownItems ? /* @__PURE__ */ jsx(
-    Dropdown,
-    {
-      button: {
-        getContent: () => /* @__PURE__ */ jsx(Icon, { name: "DotGrid1x3Horizontal", width: 16 })
-      },
-      dropdownItems
-    }
-  ) : isDelete ? /* @__PURE__ */ jsx(UnstyledButton, { css: { color: theme.mcNeutral }, onClick, children: "Delete" }) : label ? (
-    /* Extra div for proper default alignment inside flex contexts */
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-      TextButton,
-      {
-        leftIcon: icon,
-        text: label,
-        to,
-        toParams,
-        onClick
-      }
-    ) })
-  ) : null;
-}
-var PageSectionBoxActionRow = ({
-  title,
-  titleBadge,
-  description,
-  separator,
-  children,
-  action,
-  smFlexColumn = true
-}) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    SPageSectionBoxActionRow,
-    {
-      separator: Boolean(separator),
-      smFlexColumn: Boolean(smFlexColumn),
-      children: [
-        title ? /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(PageSectionBoxTitle, { children: [
-            title,
-            titleBadge ? /* @__PURE__ */ jsx(Badge, { content: titleBadge, ml: 4 }) : null
-          ] }),
-          description ? /* @__PURE__ */ jsx(PageSectionBoxDescription, { children: description }) : null
-        ] }) : null,
-        children,
-        /* @__PURE__ */ jsx(PageSectionBoxAction, __spreadValues({}, action))
-      ]
-    }
-  ) });
-};
-var SPageSectionBoxActionRow = styled.div`
-  display: flex;
-  gap: 12px;
-  align-items: top;
-  flex-direction: row;
-  justify-content: space-between;
-
-  & + & {
-    margin-top: 32px;
-  }
-
-  ${({ smFlexColumn }) => smFlexColumn ? bp.sm(`flex-direction: column;`) : ""}
-
-  &:has(> ${StyledPageSectionBoxActionColumn}) {
-    ${select(StyledPageSectionBoxActionColumn)} {
-      width: 150px;
-    }
-    ${bp.maxMd(`
-      ${select(StyledPageSectionBoxActionColumn)} {
-        width: auto;
-      }
-    `)}
-  }
-
-  ${({ separator, theme }) => separator && `
-      border-top: 1px solid;
-      ${standardBorderColor({ theme }).styles};
-      padding-top: 32px;
-    `}
-`;
-var PageSectionBoxColumn = styled.div``;
-var PageSectionBoxRow = styled.div`
-  display: grid;
-  grid-template-columns: repeat(
-    auto-fit,
-    minmax(215px, 1fr)
-  ); /* This creates as many columns as can fit, each at least 150px wide */
-`;
-function PageSectionBox({
-  action,
-  description,
-  children
-}) {
-  return /* @__PURE__ */ jsxs(StyledPageSectionBox, { children: [
-    description && /* @__PURE__ */ jsx(PageSectionBoxDescription, { children: toReactNodes(description) }),
-    children,
-    (action == null ? void 0 : action.label) ? /* @__PURE__ */ jsx("div", { css: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(PageSectionBoxAction, __spreadValues({}, action)) }) : null
-  ] });
-}
-var StyledPageSectionBox = styled.div`
-  & + & {
-    margin-top: 32px;
-  }
-
-  & > ${PageSectionBoxRow}, & {
-    border: 1px solid;
-    ${standardBorderColor}
-  }
-
-  ${standardBorderRadius(8)}
-  padding: 16px;
-
-  /* PageSectionBoxRow and PageSectionBoxColumn manage their own borders: */
-  &:has(> ${PageSectionBoxRow}) {
-    border: none;
-    padding: 0;
-    ${standardBorderRadius(0)}
-  }
-
-  & > ${PageSectionBoxRow} {
-    &:first-of-type {
-      ${standardBorderRadius([12, 12, 0, 0])}
-    }
-
-    &:last-of-type {
-      ${standardBorderRadius([0, 0, 12, 12])}
-    }
-
-    &:only-of-type {
-      ${standardBorderRadius(12)}
-    }
-
-    &:not(:last-of-type) {
-      border-bottom: 0;
-    }
-
-    ${PageSectionBoxColumn} {
-      padding: 32px;
-      ${bp.sm(`padding: 16px;`)}
-      &:not(:first-of-type) {
-        border-left: solid 1px;
-        ${standardBorderColor}
-      }
-    }
-
-    ${({ theme }) => bp.maxMd(`
-        grid-template-columns: none;
-        ${select(PageSectionBoxColumn)} {
-          &:not(:first-of-type) {
-            border-left: 0 !important;
-            border-top: solid 1px;
-            ${standardBorderColor({ theme }).styles};
-          }
-        }
-      `)}
-  }
-`;
-var PageSectionBoxTitle = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: ${({ lg }) => lg ? 14 : 12}px;
-  font-weight: 600;
-  line-height: ${({ lg }) => standardLineHeightEms * (lg ? 14 : 12) + badgeSmVPadding * 2}px;
-`;
-var PageSectionBoxDescription = styled.div`
-  color: ${({ theme }) => theme.mcNeutral};
-  ${PageSectionBoxTitle} + & {
-    margin-top: 6px;
-  }
-`;
-var gapPx = 24;
-var PageSectionRow = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${gapPx}px;
-
-  ${bp.minSm(`
-    flex-direction: row;
-  `)}
-
-  margin-top: 40px;
-  &:first-of-type {
-    margin-top: 0;
-  }
-`;
-var PageSectionRowSubSection = styled.div`
-  box-sizing: border-box;
-  width: 100%;
-
-  &:first-of-type {
-    margin-right: 0px;
-  }
-
-  &:last-of-type {
-    margin-left: 0px;
-    margin-top: ${gapPx}px;
-  }
-
-  ${StyledPageSectionBox} + ${StyledPageSectionBox} {
-    /* Less margin for boxes within a single SubSection: */
-    margin-top: 16px;
-  }
-
-  ${bp.minSm(`
-    width: calc(50% - ${gapPx / 2}px);
-
-    &:last-of-type {
-      margin-top: 0;
-    }
-  `)}
-
-  ${({ fullWidth }) => fullWidth ? "width: 100% !important;" : ""}
-`;
-
-export {
-  PageSection,
-  PageSectionSubheading,
-  PageSectionBoxActionColumn,
-  PageSectionBoxActionRow,
-  PageSectionBoxColumn,
-  PageSectionBoxRow,
-  PageSectionBox,
-  StyledPageSectionBox,
-  PageSectionBoxTitle,
-  PageSectionBoxDescription,
-  PageSectionRow,
-  PageSectionRowSubSection
-};

package/dist/chunk-B5DSZXP6.js

@@ -1,48 +0,0 @@
-import {
-  Filter
-} from "./chunk-MQVRZOTQ.js";
-import {
-  Radio
-} from "./chunk-XXXM6HSW.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-CWMXXUWU.js";
-
-// src/components/DataManagerTable/BooleanFilter.tsx
-import { Fragment, jsx } from "@emotion/react/jsx-runtime";
-var isBooleanFilterState = (state) => state.type === "boolean" /* BOOLEAN */;
-var getDefaultBooleanFilterState = () => ({
-  type: "boolean" /* BOOLEAN */,
-  value: void 0,
-  isApplied: false
-});
-var BooleanFilter = ({
-  updateFilterState,
-  state,
-  label
-}) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Filter, { label, children: /* @__PURE__ */ jsx(
-    Radio,
-    {
-      radioOptions: [
-        { label: "Yes" /* YES */ },
-        { label: "No" /* NO */ },
-        { label: "Both" /* BOTH */ }
-      ],
-      defaultOption: "Both" /* BOTH */,
-      onChange: (selectedOption) => {
-        updateFilterState(__spreadProps(__spreadValues({}, state), {
-          value: selectedOption === "Yes" /* YES */ ? true : selectedOption === "No" /* NO */ ? false : void 0,
-          isApplied: true
-        }));
-      }
-    }
-  ) }) });
-};
-
-export {
-  isBooleanFilterState,
-  getDefaultBooleanFilterState,
-  BooleanFilter
-};