@lightsparkdev/ui 1.0.8 → 1.0.10

package/dist/{chunk-VW2IB7XD.js → chunk-5LEYZK7K.js}

@@ -3,11 +3,11 @@ import {
 } from "./chunk-5KSG5D3I.js";
 import {
   TextInput
-} from "./chunk-DPSSQNBK.js";
+} from "./chunk-G3FLE2PL.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-LOPKRCGI.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/PhoneInput.tsx
 import {
@@ -19,9 +19,6 @@ import { useCallback, useState } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 var countries = getCountries();
 var defaultOptions = countries.map((countryCode) => {
-  if (countryCodesToNames[countryCode] === void 0) {
-    console.log("no name", countryCode);
-  }
   return {
     value: countryCode,
     label: `${getCountryCallingCode(countryCode)} (${countryCodesToNames[countryCode]})`

package/dist/{chunk-LZ24FX6C.cjs → chunk-5MLMGZJG.cjs}

@@ -3,11 +3,11 @@
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
+var _chunkDIMJISMHcjs = require('./chunk-DIMJISMH.cjs');
 
 
 
-var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 
 // src/components/Tooltip.tsx
 var _css = require('@emotion/css');
@@ -36,7 +36,7 @@ function Tooltip(props) {
   return nodeReady && nodeRef.current ? _reactdom2.default.createPortal(
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _reacttooltip.Tooltip,
-      _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, props), {
+      _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, props), {
         id: props.id || "",
         content: props.content || "",
         noArrow: true,
@@ -54,7 +54,7 @@ var styles = ({ theme }) => _css.css`
   border-radius: 8px !important;
   padding: 16px !important;
   z-index: ${_chunkZU72XWNEcjs.z.tooltip};
-  ${_chunkPYL3O7AFcjs.overlaySurface.call(void 0, { theme, important: true })};
+  ${_chunkDIMJISMHcjs.overlaySurface.call(void 0, { theme, important: true })};
 
   max-width: 260px;
   box-shadow:

package/dist/chunk-5O2EL5I3.js

@@ -0,0 +1,14 @@
+// src/components/DataManagerTable/filters.ts
+var FilterType = /* @__PURE__ */ ((FilterType2) => {
+  FilterType2["DATE"] = "date";
+  FilterType2["ENUM"] = "enum";
+  FilterType2["STRING"] = "string";
+  FilterType2["ID"] = "id";
+  FilterType2["NUMBER"] = "number";
+  FilterType2["BOOLEAN"] = "boolean";
+  return FilterType2;
+})(FilterType || {});
+
+export {
+  FilterType
+};

package/dist/chunk-5SJB7TBQ.js

@@ -0,0 +1,39 @@
+// src/components/Flex.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function Flex({
+  center = false,
+  justify: justifyProp,
+  align: alignProp,
+  column = false,
+  children,
+  onClick,
+  as = "div"
+}) {
+  const justify = justifyProp ? justifyProp : center ? "center" : "flex-start";
+  const align = alignProp ? alignProp : center ? "center" : "flex-start";
+  return /* @__PURE__ */ jsx(
+    StyledFlex,
+    {
+      justify,
+      align,
+      column,
+      as,
+      onClick,
+      cursorProp: onClick ? "pointer" : "unset",
+      children
+    }
+  );
+}
+var StyledFlex = styled.div`
+  display: flex;
+
+  ${({ column }) => column && `flex-direction: column;`}
+  ${({ justify }) => `justify-content: ${justify};`}
+  ${({ align }) => `align-items: ${align};`}
+  ${({ cursorProp }) => `cursor: ${cursorProp};`}
+`;
+
+export {
+  Flex
+};

package/dist/chunk-5VRX24DR.js

@@ -0,0 +1,28 @@
+import {
+  CodeInput
+} from "./chunk-JKR3MA6Q.js";
+
+// src/components/CardForm/CardFormCodeInput.tsx
+import { css } from "@emotion/react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var inputCSS = css``;
+function CardFormCodeInput({
+  onChange,
+  onSubmit,
+  onBlur
+}) {
+  return /* @__PURE__ */ jsx(
+    CodeInput,
+    {
+      codeLength: 6,
+      onSubmit,
+      inputCSS,
+      onChange,
+      onBlur
+    }
+  );
+}
+
+export {
+  CardFormCodeInput
+};

package/dist/{chunk-ONE4Q37F.js → chunk-5YKEHMNB.js}

@@ -1,15 +1,12 @@
 import {
   UnstyledButton
-} from "./chunk-E7RKIBJY.js";
-import {
-  standardLineHeightEms
-} from "./chunk-APUV4UN4.js";
+} from "./chunk-WZJTXJM5.js";
 import {
   themeOr
-} from "./chunk-W5I53DTZ.js";
+} from "./chunk-O42E7NAG.js";
 import {
   colors
-} from "./chunk-REL56P3K.js";
+} from "./chunk-MN4NUSPL.js";
 
 // src/components/Toggle.tsx
 import styled from "@emotion/styled";
@@ -82,17 +79,18 @@ var ToggleButton = styled(UnstyledButton)`
     right: ${({ isOn }) => isOn ? `${circleOffset}px` : `${width - circleDim - circleOffset}px`};
   }
 `;
+var gap = 12;
 var ToggleContainer = styled.span`
   display: flex;
   margin-bottom: ${({ mb }) => mb}px;
   margin-top: ${({ mt }) => mt}px;
   margin-left: ${({ ml }) => ml}px;
   align-items: center;
+  gap: ${gap}px;
 `;
 var ToggleLabel = styled.label`
-  margin-left: 12px;
+  width: calc(100% - ${width + gap}px);
   cursor: pointer;
-  height: ${standardLineHeightEms}em;
 `;
 
 export {

package/dist/{chunk-TSO4WRU4.js → chunk-625AYCBC.js}

@@ -1,9 +1,9 @@
 import {
   standardBorderRadius
-} from "./chunk-APUV4UN4.js";
+} from "./chunk-YZM4ALKD.js";
 import {
   themeOr
-} from "./chunk-W5I53DTZ.js";
+} from "./chunk-O42E7NAG.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-SXY5KR2T.js → chunk-62K3RQJB.js}

@@ -1,6 +1,6 @@
 import {
   pxToRems
-} from "./chunk-DNRHVCOE.js";
+} from "./chunk-HEXTPM3C.js";
 
 // src/components/StatusIndicator.tsx
 import styled from "@emotion/styled";

package/dist/chunk-6AHBVQ2G.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk4CFGJROVcjs = require('./chunk-4CFGJROV.cjs');
+
+
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/components/SecretInput.tsx
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function SecretInput(_a) {
+  var rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _a, []);
+  const [showSecret, setShowSecret] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk4CFGJROVcjs.TextInput,
+    _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, rest), {
+      type: showSecret ? void 0 : "password",
+      onClickIcon: () => setShowSecret(!showSecret),
+      icon: {
+        name: showSecret ? "NotEye" : "Eye",
+        width: 16
+      }
+    })
+  );
+}
+
+
+
+exports.SecretInput = SecretInput;

package/dist/{chunk-4P7RPU32.cjs → chunk-6IU4OQOC.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
+var _chunkDIMJISMHcjs = require('./chunk-DIMJISMH.cjs');
 
 // src/styles/utils.tsx
 var _react = require('@emotion/react');
 function pxToRems(rems, asNum = false) {
-  const value = (rems / _chunkPYL3O7AFcjs.rootFontSizePx).toFixed(6);
+  const value = (rems / _chunkDIMJISMHcjs.rootFontSizePx).toFixed(6);
   return asNum ? Number(value) : `${value}rem`;
 }
 function remsToPx(rems, asNum = false) {
-  const value = (_chunkPYL3O7AFcjs.rootFontSizePx * rems).toFixed(6);
+  const value = (_chunkDIMJISMHcjs.rootFontSizePx * rems).toFixed(6);
   return asNum ? Number(value) : `${value}px`;
 }
 var extend = (...args) => _react.css.call(void 0, ...args);

package/dist/{chunk-HN6NGIKM.js → chunk-6P2AYPAD.js}

@@ -1,6 +1,9 @@
 import {
   Icon
-} from "./chunk-QQTZ6DZL.js";
+} from "./chunk-NGSQ2OOV.js";
+import {
+  renderTypography
+} from "./chunk-73ETEREG.js";
 
 // src/components/CurrencyAmount.tsx
 import styled from "@emotion/styled";
@@ -18,10 +21,13 @@ function CurrencyAmount({
   showUnits = false,
   includeEstimatedIndicator = false,
   fullPrecision = false,
-  ml = 0
+  id,
+  ml = 0,
+  typography,
+  centsPerBtc
 }) {
   const unit = displayUnit;
-  const amountMap = isCurrencyMap(amount) ? amount : mapCurrencyAmount(amount);
+  const amountMap = isCurrencyMap(amount) ? amount : mapCurrencyAmount(amount, centsPerBtc);
   const value = amountMap[unit];
   const defaultFormattedNumber = amountMap.formatted[unit];
   let formattedNumber = defaultFormattedNumber;
@@ -39,10 +45,18 @@ function CurrencyAmount({
   if (showUnits) {
     formattedNumber += ` ${shorttext(unit, value)}`;
   }
-  return /* @__PURE__ */ jsxs(StyledCurrencyAmount, { ml, children: [
+  let content = formattedNumber;
+  if (typography && typography.type) {
+    content = renderTypography(typography.type, {
+      size: typography.size,
+      color: typography.color,
+      content: formattedNumber
+    });
+  }
+  return /* @__PURE__ */ jsxs(StyledCurrencyAmount, { ml, id, children: [
     includeEstimatedIndicator && "Est. ",
     /* @__PURE__ */ jsx(CurrencyIcon, { unit }),
-    formattedNumber
+    content
   ] });
 }
 var CurrencyIcon = ({ unit }) => {

package/dist/{chunk-XIFM5AMT.cjs → chunk-6RG56RES.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAZRC3MXCcjs = require('./chunk-AZRC3MXC.cjs');
+var _chunkOVJZVL57cjs = require('./chunk-OVJZVL57.cjs');
 
 
-var _chunkG5HBO2FIcjs = require('./chunk-G5HBO2FI.cjs');
+var _chunkGEMBOYJDcjs = require('./chunk-GEMBOYJD.cjs');
 
 
-var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
+var _chunkSEOJ475Zcjs = require('./chunk-SEOJ475Z.cjs');
 
 // src/components/typography/LabelModerate.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -23,7 +23,7 @@ var LabelModerate = ({
 }) => {
   let reactNodes = children || null;
   if (content) {
-    reactNodes = _chunkAZRC3MXCcjs.toNonTypographicReactNodes.call(void 0, content);
+    reactNodes = _chunkSEOJ475Zcjs.toReactNodesBase.call(void 0, content);
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     StyledLabelModerate,
@@ -39,8 +39,8 @@ var LabelModerate = ({
   );
 };
 var StyledLabelModerate = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkZBBVZQKJcjs.applyTypography.call(void 0, theme, "Label Moderate", size, colorProp)}
-  ${_chunkG5HBO2FIcjs.typographyStyles}
+  ${({ theme, size, colorProp }) => _chunkGEMBOYJDcjs.applyTypography.call(void 0, theme, "Label Moderate", size, colorProp)}
+  ${_chunkOVJZVL57cjs.typographyStyles}
 `;
 
 

package/dist/chunk-72JQQKA7.js

@@ -0,0 +1,191 @@
+import {
+  defaultTextInputTypography,
+  fieldWidth,
+  maxFieldWidth,
+  textInputBorderColor,
+  textInputBorderColorFocused,
+  textInputPadding,
+  textInputPaddingPx,
+  textInputPlaceholderColor
+} from "./chunk-AXHFR6HR.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  Icon
+} from "./chunk-NGSQ2OOV.js";
+import {
+  getColor,
+  themeOr
+} from "./chunk-O42E7NAG.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/Select.tsx
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import BaseSelect from "react-select";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Select(_a) {
+  var _b = _a, {
+    zIndex,
+    selectRef,
+    label,
+    openMenuOnFocus = true,
+    tabSelectsValue = false,
+    getOptionStyles
+  } = _b, rest = __objRest(_b, [
+    "zIndex",
+    "selectRef",
+    "label",
+    "openMenuOnFocus",
+    "tabSelectsValue",
+    "getOptionStyles"
+  ]);
+  const theme = useTheme();
+  const styles = {
+    container: (styles2, state) => {
+      return __spreadProps(__spreadValues({}, styles2), {
+        width: fieldWidth,
+        maxWidth: maxFieldWidth,
+        zIndex: z.select
+      });
+    },
+    control: (styles2, state) => {
+      return __spreadProps(__spreadValues({}, styles2), {
+        transition: "none",
+        padding: state.menuIsOpen || state.isFocused ? `${textInputPaddingPx - 1}px` : textInputPadding,
+        boxShadow: "none",
+        background: theme.bg,
+        minHeight: 0,
+        fontSize: 14,
+        borderWidth: state.menuIsOpen || state.isFocused ? "2px" : "1px",
+        "&:hover": {
+          borderColor: state.menuIsOpen ? textInputBorderColorFocused({ theme }) : textInputBorderColor({ theme })
+        },
+        borderColor: state.menuIsOpen || state.isFocused ? textInputBorderColorFocused({ theme }) : textInputBorderColor({ theme })
+      });
+    },
+    indicatorsContainer: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      padding: "0 8px"
+    }),
+    indicatorSeparator: (styles2) => ({
+      display: "none"
+    }),
+    menu: (styles2, state) => {
+      return __spreadProps(__spreadValues({}, styles2), {
+        overflow: "hidden",
+        border: `2px solid ${theme.lcNeutral}`,
+        backgroundColor: theme.bg,
+        boxShadow: "0px 3px 6px 1px rgba(0,0,0,0.05)",
+        borderColor: theme.hcNeutral,
+        width: "max-content",
+        minWidth: "100%"
+      });
+    },
+    option: (styles2, props) => {
+      const optionStyles = getOptionStyles ? getOptionStyles(styles2, props) : {};
+      return __spreadValues(__spreadProps(__spreadValues({}, styles2), {
+        color: props.isFocused ? getColor(theme, defaultTextInputTypography.color) : props.isDisabled ? textInputPlaceholderColor({ theme }) : getColor(theme, defaultTextInputTypography.color),
+        fontWeight: 600,
+        cursor: "pointer",
+        backgroundColor: props.isFocused ? themeOr(theme.c05Neutral, theme.c2Neutral)({ theme }) : theme.bg,
+        WebkitTapHighlightColor: theme.c1Neutral,
+        "&:active": {
+          backgroundColor: themeOr(
+            theme.c05Neutral,
+            theme.c5Neutral
+          )({ theme })
+        }
+      }), optionStyles);
+    },
+    menuPortal: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      fontSize: 14,
+      zIndex: zIndex || z.selectFocused
+    }),
+    singleValue: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      color: theme.text,
+      fontWeight: 600,
+      fontSize: 14
+    }),
+    placeholder: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      color: theme.mcNeutral
+    }),
+    valueContainer: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      padding: 0
+    }),
+    input: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      color: theme.text,
+      fontWeight: 600,
+      fontSize: 14
+    })
+  };
+  return /* @__PURE__ */ jsxs(StyledSelect, { children: [
+    label && /* @__PURE__ */ jsx(SelectLabel, { hasError: false, children: label }),
+    /* @__PURE__ */ jsx(
+      BaseSelect,
+      __spreadProps(__spreadValues({}, rest), {
+        styles,
+        openMenuOnFocus,
+        tabSelectsValue,
+        menuPortalTarget: document.body,
+        ref: selectRef,
+        components: {
+          DropdownIndicator: () => /* @__PURE__ */ jsx(Icon, { name: "Chevron", width: 16 })
+          // Option: (option) => {
+          //   return <div>Option</div>;
+          // },
+        },
+        theme: (selectTheme) => __spreadProps(__spreadValues({}, selectTheme), {
+          borderRadius: 8,
+          colors: {
+            danger: theme.danger,
+            dangerLight: "#ff8",
+            primary: theme.text,
+            primary75: "#ccc",
+            primary50: "#888",
+            primary25: "#444",
+            neutral0: "#000",
+            neutral5: "#111",
+            neutral10: "#222",
+            neutral20: "#999",
+            neutral30: "#aaa",
+            neutral40: "#bbb",
+            neutral50: "#bbb",
+            neutral60: "#ccc",
+            neutral70: "#ccc",
+            neutral80: "#ddd",
+            neutral90: "#ddd"
+          }
+        })
+      })
+    )
+  ] });
+}
+var SelectLabel = styled.label`
+  font-size: 10px;
+  position: absolute;
+  z-index: ${z.select + 1};
+  background-color: ${({ theme }) => theme.bg};
+  color: ${({ theme, hasError }) => hasError ? theme.danger : theme.mcNeutral};
+  font-weight: 600;
+  padding: 0px 6px;
+  left: 12px;
+  top: -6px;
+`;
+var StyledSelect = styled.div`
+  position: relative;
+  & + & {
+    margin-top: 8px;
+  }
+`;
+var Select_default = Select;
+
+export {
+  Select,
+  StyledSelect,
+  Select_default
+};

package/dist/{chunk-YHDN5LEA.cjs → chunk-73EJLMPT.cjs}

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 
 // src/styles/themeDefaults/loading.tsx
 var loadingThemeBase = {
   defaultIconName: "LoadingSpinner",
   kinds: {}
 };
-var defaultLoadingTheme = _chunkLKKJVJCGcjs.__spreadProps.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, loadingThemeBase), {
+var defaultLoadingTheme = _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, loadingThemeBase), {
   kinds: {
     primary: {
       defaultIconName: "LoadingSpinner"

package/dist/chunk-73ETEREG.js

@@ -0,0 +1,36 @@
+// src/components/typography/renderTypography.tsx
+import React, {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+var typographyMapModulePromise = import("./components/typography/typographyMap.js");
+var renderTypography = (typographyType, typographyProps) => {
+  return React.createElement(RenderTypographyLoader, {
+    typographyType,
+    typographyProps
+  });
+};
+function RenderTypographyLoader({
+  typographyType,
+  typographyProps
+}) {
+  const typographyMap = useRef(null);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    void typographyMapModulePromise.then((typographyMapModule) => {
+      typographyMap.current = typographyMapModule.typographyMap;
+      setReady(true);
+    });
+  }, []);
+  if (!ready || !typographyMap.current) {
+    return null;
+  }
+  const TypographyComponent = typographyMap.current[typographyType];
+  const { children } = typographyProps;
+  return React.createElement(TypographyComponent, typographyProps, children);
+}
+
+export {
+  renderTypography
+};

package/dist/{chunk-UDKRYLGK.cjs → chunk-753ZXPCO.cjs}

@@ -15,7 +15,7 @@ function ArrowUpRightCircleFill() {
           fillRule: "evenodd",
           clipRule: "evenodd",
           d: "M20 1.25C30.3553 1.25 38.75 9.64468 38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64468 38.75 1.25 30.3553 1.25 20C1.25 9.64468 9.64468 1.25 20 1.25ZM15.4392 12.4122C14.8869 12.4122 14.4392 12.8599 14.4392 13.4122C14.4392 13.9644 14.8869 14.4122 15.4392 14.4122H24.1736L12.7051 25.8807C12.3146 26.2713 12.3146 26.9044 12.7051 27.2949C13.0956 27.6855 13.7288 27.6855 14.1193 27.2949L25.5879 15.8263V24.5608C25.5879 25.1131 26.0356 25.5608 26.5879 25.5608C27.1402 25.5608 27.5879 25.1131 27.5879 24.5608V13.4122C27.5879 12.8599 27.1402 12.4122 26.5879 12.4122H15.4392Z",
-          fill: "black"
+          fill: "currentColor"
         }
       )
     }

package/dist/{chunk-GB2UBWT4.js → chunk-7D5HL6WZ.js}

@@ -1,12 +1,12 @@
-import {
-  toNonTypographicReactNodes
-} from "./chunk-UC6SP4KJ.js";
 import {
   typographyStyles
-} from "./chunk-EGOOSBGG.js";
+} from "./chunk-X5SBSJ3Z.js";
 import {
   applyTypography
-} from "./chunk-GHXNMLAB.js";
+} from "./chunk-R4JQUMCP.js";
+import {
+  toReactNodesBase
+} from "./chunk-DILTUDQN.js";
 
 // src/components/typography/Label.tsx
 import styled from "@emotion/styled";
@@ -23,7 +23,7 @@ var Label = ({
 }) => {
   let reactNodes = children || null;
   if (content) {
-    reactNodes = toNonTypographicReactNodes(content);
+    reactNodes = toReactNodesBase(content);
   }
   return /* @__PURE__ */ jsx(
     StyledLabel,

package/dist/{chunk-VCHMPHHC.js → chunk-7H74ZBRC.js}

@@ -1,6 +1,9 @@
 import {
-  standardLineHeightEms
-} from "./chunk-APUV4UN4.js";
+  setDefaultReactNodesTypography
+} from "./chunk-VVA3TL2D.js";
+import {
+  toReactNodes
+} from "./chunk-XSMF72UT.js";
 
 // src/components/Checkbox.tsx
 import styled from "@emotion/styled";
@@ -17,8 +20,24 @@ function Checkbox({
   label,
   mt = 0,
   alignItems = "center",
-  disabled = false
+  disabled = false,
+  typography: typographyProp
 }) {
+  const defaultTypography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
+    size: (typographyProp == null ? void 0 : typographyProp.size) || "Medium",
+    color: (typographyProp == null ? void 0 : typographyProp.color) || "text"
+  };
+  const defaultTypographyMap = {
+    link: defaultTypography,
+    text: defaultTypography,
+    nextLink: defaultTypography
+  };
+  const nodesWithTypography = setDefaultReactNodesTypography(
+    label,
+    defaultTypographyMap
+  );
+  const content = toReactNodes(nodesWithTypography);
   return /* @__PURE__ */ jsxs(CheckboxContainer, { mt, alignItems, children: [
     /* @__PURE__ */ jsx(
       StyledCheckbox,
@@ -36,7 +55,7 @@ function Checkbox({
         }
       }
     ),
-    label && /* @__PURE__ */ jsx(CheckboxLabel, { htmlFor: id, children: label })
+    label && /* @__PURE__ */ jsx(CheckboxLabel, { htmlFor: id, children: content })
   ] });
 }
 var StyledCheckbox = styled.input`
@@ -58,7 +77,7 @@ var StyledCheckbox = styled.input`
 `;
 var CheckboxContainer = styled.span`
   display: flex;
-  margin-top: ${({ mt }) => mt}px;
+  ${({ mt }) => mt === 0 ? "" : `margin-top: ${mt}px;`}
   align-items: ${({ alignItems }) => alignItems};
 
   & + & {
@@ -68,7 +87,6 @@ var CheckboxContainer = styled.span`
 var CheckboxLabel = styled.label`
   margin-left: 12px;
   cursor: pointer;
-  height: ${standardLineHeightEms}em;
 `;
 
 export {