@lightsparkdev/ui 1.1.3 → 1.1.4

package/dist/{chunk-5YPZRUZG.js → chunk-LOGFZK7Y.js}

@@ -1,77 +1,74 @@
 import {
   Headline
-} from "./chunk-TKLFSNHO.js";
+} from "./chunk-D3P3STPT.js";
 import {
   StyledSelect
-} from "./chunk-6GPS5UZL.js";
+} from "./chunk-SND77246.js";
 import {
   TextInputHalfRow
-} from "./chunk-GNNSP254.js";
+} from "./chunk-UZVCEPZZ.js";
 import {
   ToggleContainer
-} from "./chunk-A5TI24JJ.js";
+} from "./chunk-K27IPM4F.js";
 import {
   StyledFileInput
-} from "./chunk-I5TCLIUL.js";
+} from "./chunk-2SMHXYLT.js";
 import {
   formButtonTopMarginStyle,
   inputSpacingPx
-} from "./chunk-AO3ZBQ6T.js";
+} from "./chunk-WZFG7LSB.js";
 import {
-  Flex
-} from "./chunk-NPKEAEDV.js";
+  StyledButtonRowButton
+} from "./chunk-SOZ7BJDT.js";
+import {
+  ButtonSelector
+} from "./chunk-EWU2MUVI.js";
+import {
+  LoadingWrapper
+} from "./chunk-XIDZLXAN.js";
 import {
   Checkbox
-} from "./chunk-D3WSMM2N.js";
+} from "./chunk-HABYIBKT.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   toReactNodesWithTypographyMap
-} from "./chunk-H7KIUDPL.js";
+} from "./chunk-DTELIM22.js";
 import {
   toReactNodes
-} from "./chunk-H37TWCVW.js";
+} from "./chunk-AQ72FLUP.js";
 import {
   icon
 } from "./chunk-FZUV52PP.js";
 import {
   ClipboardTextField
-} from "./chunk-A6APLSNG.js";
-import {
-  StyledButtonRowButton
-} from "./chunk-PGMKAWUJ.js";
-import {
-  Spacing
-} from "./chunk-E5DUKMCU.js";
+} from "./chunk-WLB5CQQV.js";
 import {
   pxToRems
-} from "./chunk-MGHQ74CH.js";
-import {
-  ButtonSelector
-} from "./chunk-KWNSXCDT.js";
-import {
-  LoadingWrapper
-} from "./chunk-HGYZXUCB.js";
+} from "./chunk-VHE37AWV.js";
 import {
   mcBold,
   standardBorderRadius,
   standardCardShadow,
   standardCardShadowHard,
   standardContentInset
-} from "./chunk-VAPNTHG5.js";
+} from "./chunk-IQQ7XKJO.js";
 import {
   Link
-} from "./chunk-BMCY2VFD.js";
+} from "./chunk-3NEARZTN.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   getColor
-} from "./chunk-GZILHEOA.js";
+} from "./chunk-YPQXKAV2.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-EA22C7OJ.js";
+} from "./chunk-GUCFCDNY.js";
 import {
   __spreadProps,
   __spreadValues
@@ -80,7 +77,7 @@ import {
 // src/components/CardForm/CardForm.tsx
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Fragment, useCallback } from "react";
+import { Fragment, useCallback, useEffect, useMemo } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 function resolveProps(args, theme) {
   const paddingTop = resolveCardFormProp(
@@ -193,6 +190,7 @@ function CardForm({
   forceMarginAfterSubtitle = true,
   afterTitleMargin = 40,
   graphicHeader,
+  statusHeaderProps,
   centeredContent = false,
   contentMarginTop,
   formButtonTopMargin,
@@ -290,8 +288,21 @@ function CardForm({
     smDontAdjustWidth
   };
   const Container = full ? CardFormContentFull : CardFormContainer;
+  const statusHeader = useMemo(
+    () => statusHeaderProps ? /* @__PURE__ */ jsx(StatusHeader, __spreadValues({}, statusHeaderProps)) : null,
+    [statusHeaderProps]
+  );
+  useEffect(() => {
+    var _a;
+    (_a = document.querySelector("meta[name='theme-color']")) == null ? void 0 : _a.setAttribute("content", statusHeader ? theme.linkLight : theme.bg);
+    return () => {
+      var _a2;
+      (_a2 = document.querySelector("meta[name='theme-color']")) == null ? void 0 : _a2.setAttribute("content", theme.bg);
+    };
+  }, [statusHeader, theme.linkLight, theme.bg]);
   return /* @__PURE__ */ jsxs(Container, { paddingBottom, children: [
-    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsxs(Flex, { column: true, align: "center", height: full ? "100%" : "auto", children: [
+    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsxs(StyledCardFormContainer, { full, statusHeader: !!statusHeader, children: [
+      statusHeader,
       graphicHeader && graphicHeader,
       /* @__PURE__ */ jsx(
         StyledCardForm,
@@ -300,7 +311,8 @@ function CardForm({
           noValidate: true
         }, commonProps), {
           forceMarginAfterSubtitle,
-          graphicHeader: graphicHeader ? true : false,
+          graphicHeader: !!graphicHeader,
+          statusHeader: !!statusHeader,
           formButtonTopMargin,
           selectMarginTop,
           children: content
@@ -310,6 +322,38 @@ function CardForm({
     belowFormContentNodes && /* @__PURE__ */ jsx(BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
   ] });
 }
+var StatusHeader = ({ content, onClick }) => {
+  return /* @__PURE__ */ jsx(StatusHeaderContainer, { onClick, children: toReactNodes(content) });
+};
+var StatusHeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ onClick }) => onClick ? "pointer" : "default"};
+  gap: 2px;
+  width: 100%;
+  min-height: 49px;
+  background-color: ${({ theme }) => theme.linkLight};
+  padding: ${Spacing.px.xs} ${Spacing.px.lg};
+
+  ${bp.minSm(`
+    margin-bottom: ${Spacing.px.xs};
+    width: fit-content;
+    border-radius: 32px;
+  `)}
+`;
+var StyledCardFormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: ${({ full }) => full ? "100%" : "auto"};
+  background-color: ${({ statusHeader, theme }) => statusHeader ? theme.linkLight : theme.bg};
+  ${bp.minSm(`
+    background-color: #F9F9F9;
+  `)}
+`;
 var CenteredHeader = styled.div`
   display: flex;
   flex-direction: column;
@@ -423,12 +467,14 @@ var formInset = ({
 
   & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
     ${smDontAdjustWidth ? "" : bp.sm(`
-      width: calc(100% + ${standardContentInset.smPx * 2}px);
+      padding-right: ${standardContentInset.smPx}px;
+      padding-left: ${standardContentInset.smPx}px;
       margin-left: -${standardContentInset.smPx}px;
     `)}
 
     ${smDontAdjustWidth ? "" : bp.minSm(`
-      width: calc(100% + ${paddingX * 2}px);
+      padding-right: ${paddingX}px;
+      padding-left: ${paddingX}px;
       margin-left: -${paddingX}px;
     `)}
   }
@@ -455,6 +501,7 @@ var StyledCardFormStyle = ({
   smBorderWidth,
   forceMarginAfterSubtitle = true,
   graphicHeader,
+  statusHeader,
   formButtonTopMargin = 32,
   selectMarginTop = inputSpacingPx,
   smDontAdjustWidth = false
@@ -488,6 +535,8 @@ var StyledCardFormStyle = ({
       box-shadow: none;
       background-color: ${getColor(theme, smBackgroundColor)};
       border-width: ${smBorderWidth}px;
+      border-radius: ${statusHeader ? `${borderRadius}px ${borderRadius}px 0 0` : 0};
+      ${statusHeader ? `box-shadow: 0 -0.5px 0 0px ${getColor(theme, borderColor)};` : ""}
     `)}
 
     ${bp.minSm(`

package/dist/{chunk-K5TPZGN2.js → chunk-MEANACQ4.js}

@@ -1,12 +1,12 @@
 import {
   setDefaultReactNodesTypography
-} from "./chunk-H7KIUDPL.js";
+} from "./chunk-DTELIM22.js";
 import {
   toReactNodes
-} from "./chunk-H37TWCVW.js";
+} from "./chunk-AQ72FLUP.js";
 import {
   Icon
-} from "./chunk-5VKJXXI3.js";
+} from "./chunk-XJB6VA4O.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-7LGSON6F.cjs → chunk-MECYTRP3.cjs}

@@ -1,21 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkKGBWMBLAcjs = require('./chunk-KGBWMBLA.cjs');
 
 
-var _chunkCZJ6JPXBcjs = require('./chunk-CZJ6JPXB.cjs');
+var _chunkWLHC2LVQcjs = require('./chunk-WLHC2LVQ.cjs');
 
 
-var _chunkNCVALN33cjs = require('./chunk-NCVALN33.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunkCKSZUZXJcjs = require('./chunk-CKSZUZXJ.cjs');
+var _chunk267QLBXGcjs = require('./chunk-267QLBXG.cjs');
 
 
-var _chunk545K27C4cjs = require('./chunk-545K27C4.cjs');
+var _chunkMODD4YGEcjs = require('./chunk-MODD4YGE.cjs');
 
 // src/components/Drawer.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -105,7 +105,7 @@ var Drawer = (props) => {
             children: [
               props.grabber && !props.nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Grabber, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GrabberBar, {}) }),
               props.handleBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButtonContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkCZJ6JPXBcjs.Button,
+                _chunkKGBWMBLAcjs.Button,
                 {
                   onClick: props.handleBack,
                   icon: { name: "ChevronLeft" },
@@ -114,7 +114,7 @@ var Drawer = (props) => {
                 }
               ) }),
               props.closeButton && !props.nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButtonContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkCKSZUZXJcjs.Icon,
+                _chunk267QLBXGcjs.Icon,
                 {
                   name: "CentralCrossLarge",
                   square: true,
@@ -236,8 +236,8 @@ var CloseButtonContainer = _styled2.default.div`
     line-height: 14px;
   }
 `;
-var CloseButton = _styled2.default.call(void 0, _chunkNCVALN33cjs.UnstyledButton)`
-  ${_chunk545K27C4cjs.standardFocusOutline}
+var CloseButton = _styled2.default.call(void 0, _chunkWLHC2LVQcjs.UnstyledButton)`
+  ${_chunkMODD4YGEcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;

package/dist/{chunk-YKA3LGK6.js → chunk-MLVP4XYS.js}

@@ -1,13 +1,13 @@
 import {
   setDefaultReactNodesTypography
-} from "./chunk-H7KIUDPL.js";
+} from "./chunk-DTELIM22.js";
 import {
   toReactNodes
-} from "./chunk-H37TWCVW.js";
+} from "./chunk-AQ72FLUP.js";
 import {
   themeOrWithKey,
   themes
-} from "./chunk-GZILHEOA.js";
+} from "./chunk-YPQXKAV2.js";
 import {
   getLineHeightForTypographyType
 } from "./chunk-J3TUZRIL.js";

package/dist/{chunk-JDQRH4KE.cjs → chunk-MMTLTGEP.cjs}

@@ -3,28 +3,28 @@
 var _chunk4VVPSX5Ocjs = require('./chunk-4VVPSX5O.cjs');
 
 
-var _chunk3JTH7BHIcjs = require('./chunk-3JTH7BHI.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkK57M5KQ5cjs = require('./chunk-K57M5KQ5.cjs');
+var _chunk6IBADE46cjs = require('./chunk-6IBADE46.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunk267QLBXGcjs = require('./chunk-267QLBXG.cjs');
 
 
-var _chunkCKSZUZXJcjs = require('./chunk-CKSZUZXJ.cjs');
+var _chunk7KHYVDQ6cjs = require('./chunk-7KHYVDQ6.cjs');
 
 
-var _chunkT3LKI5VGcjs = require('./chunk-T3LKI5VG.cjs');
+var _chunkFFXUPRYTcjs = require('./chunk-FFXUPRYT.cjs');
 
 
-var _chunkEGKT7YHPcjs = require('./chunk-EGKT7YHP.cjs');
+var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
+var _chunkIJMYMSSCcjs = require('./chunk-IJMYMSSC.cjs');
 
 
-var _chunkDRTADBFRcjs = require('./chunk-DRTADBFR.cjs');
+var _chunk3JTH7BHIcjs = require('./chunk-3JTH7BHI.cjs');
 
 // src/components/Banner/Banner.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -65,11 +65,11 @@ function Banner({
   }, [onHeightChange, rect == null ? void 0 : rect.height]);
   let contentNode = null;
   if (content) {
-    const contentNodes = _chunkK57M5KQ5cjs.toReactNodes.call(void 0, content);
+    const contentNodes = _chunk6IBADE46cjs.toReactNodes.call(void 0, content);
     if (to) {
-      contentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT3LKI5VGcjs.Link, { to, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BannerFlexInnerContent, { children: [
+      contentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7KHYVDQ6cjs.Link, { to, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BannerFlexInnerContent, { children: [
         contentNodes,
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKSZUZXJcjs.Icon, { name: "ArrowRight", width: 12, ml: 6 })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk267QLBXGcjs.Icon, { name: "ArrowRight", width: 12, ml: 6 })
       ] }) });
     } else {
       contentNode = contentNodes;
@@ -138,9 +138,9 @@ var StyledBanner = _styled2.default.div`
 
   width: 100%;
   z-index: ${_chunkZU72XWNEcjs.z.notificationBanner};
-  color: ${_chunkDRTADBFRcjs.colors.white};
+  color: ${_chunkIJMYMSSCcjs.colors.white};
   font-weight: 500;
-  background-color: ${({ colorProp, theme }) => colorProp ? _chunkEGKT7YHPcjs.getColor.call(void 0, theme, colorProp) : "none"};
+  background-color: ${({ colorProp, theme }) => colorProp ? _chunkFFXUPRYTcjs.getColor.call(void 0, theme, colorProp) : "none"};
   ${({ blurScroll }) => blurScroll ? `
       background: rgba(249, 249, 249, 0.8);
       backdrop-filter: blur(32px);
@@ -150,7 +150,7 @@ var StyledBanner = _styled2.default.div`
   align-items: center;
   padding: ${({ hPadding, vPadding }) => `${vPadding}px ${hPadding}px`};
   min-height: ${({ minHeight }) => typeof minHeight === "number" ? `${minHeight}px` : "auto"};
-  ${({ borderColor, theme }) => borderColor ? `border-bottom: 1px solid ${_chunkEGKT7YHPcjs.getColor.call(void 0, theme, borderColor)};` : ""}
+  ${({ borderColor, theme }) => borderColor ? `border-bottom: 1px solid ${_chunkFFXUPRYTcjs.getColor.call(void 0, theme, borderColor)};` : ""}
 
   ${({ borderProgress }) => {
   if (typeof borderProgress === "number") {

package/dist/{chunk-545K27C4.cjs → chunk-MODD4YGE.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkEGKT7YHPcjs = require('./chunk-EGKT7YHP.cjs');
+var _chunkFFXUPRYTcjs = require('./chunk-FFXUPRYT.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkDRTADBFRcjs = require('./chunk-DRTADBFR.cjs');
+var _chunkIJMYMSSCcjs = require('./chunk-IJMYMSSC.cjs');
 
 // src/styles/common.tsx
 var _react = require('@emotion/react');
@@ -20,21 +20,27 @@ function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx, smDontAdjustWidth =
     ${_chunkKW3JYLRIcjs.bp.sm(`
       margin-left: auto;
       margin-right: auto;
-      width: ${smDontAdjustWidth ? "100%" : `calc(100% - ${smPx * 2}px)`};
+      width: 100%;
+      padding-right: ${smDontAdjustWidth ? 0 : smPx}px;
+      padding-left: ${smDontAdjustWidth ? 0 : smPx}px;
     `)}
   `;
   const minSmMaxLgCSS = _react.css`
     ${_chunkKW3JYLRIcjs.bp.minSmMaxLg(`
       margin-left: auto;
       margin-right: auto;
-      width: calc(100% - ${minSmMaxLgPx * 2}px);
+      width: 100%;
+      padding-right: ${smDontAdjustWidth ? 0 : minSmMaxLgPx}px;
+      padding-left: ${smDontAdjustWidth ? 0 : minSmMaxLgPx}px;
     `)}
   `;
   const lgCSS = _react.css`
     ${_chunkKW3JYLRIcjs.bp.lg(`
       margin-left: auto;
       margin-right: auto;
-      width: calc(100% - ${lgPx * 2}px);
+      width: 100%;
+      padding-right: ${smDontAdjustWidth ? 0 : lgPx}px;
+      padding-left: ${smDontAdjustWidth ? 0 : lgPx}px;
       max-width: 1280px;
     `)}
   `;
@@ -109,13 +115,13 @@ var Subtext = _styled2.default.div`
   ${subtext}
 `;
 var darkGradientBg = _react.css`
-  background: ${_chunkDRTADBFRcjs.darkGradient};
+  background: ${_chunkIJMYMSSCcjs.darkGradient};
 `;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
 }) => _react.css`
-  border-color: ${_chunkEGKT7YHPcjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme })}
+  border-color: ${_chunkFFXUPRYTcjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme })}
     ${important ? "!important" : ""};
 `;
 var overlaySurface = ({
@@ -123,11 +129,11 @@ var overlaySurface = ({
   important = false,
   border = true
 }) => _react.css`
-  background-color: ${_chunkEGKT7YHPcjs.themeOr.call(void 0, theme.bg, theme.c1Neutral)({ theme })}
+  background-color: ${_chunkFFXUPRYTcjs.themeOr.call(void 0, theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
   ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
-  ${_chunkEGKT7YHPcjs.themeOr.call(void 0, 
+  ${_chunkFFXUPRYTcjs.themeOr.call(void 0, 
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
   ""
 )({ theme })}

package/dist/{chunk-4FKE64WY.js → chunk-MXPPOSOB.js}

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

package/dist/{chunk-IGU3GPKV.cjs → chunk-MYEAKADT.cjs}

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkSCFTWRJQcjs = require('./chunk-SCFTWRJQ.cjs');
+var _chunkVRKSWRR6cjs = require('./chunk-VRKSWRR6.cjs');
 
 
-var _chunkEGKT7YHPcjs = require('./chunk-EGKT7YHP.cjs');
+var _chunkFFXUPRYTcjs = require('./chunk-FFXUPRYT.cjs');
 
 // src/components/LightsparkProvider.tsx
 var _react = require('@emotion/react');
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 function LightsparkProvider({ children }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.ThemeProvider, { theme: _chunkEGKT7YHPcjs.themes.light, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSCFTWRJQcjs.GlobalStyles, {}),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.ThemeProvider, { theme: _chunkFFXUPRYTcjs.themes.light, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRKSWRR6cjs.GlobalStyles, {}),
     children
   ] });
 }

package/dist/{chunk-QMJ2TXEF.js → chunk-MZPKC6AW.js}

@@ -1,12 +1,12 @@
-import {
-  toReactNodes
-} from "./chunk-H37TWCVW.js";
 import {
   Tooltip
-} from "./chunk-PJ2JIR4Q.js";
+} from "./chunk-4CMNSEWA.js";
+import {
+  toReactNodes
+} from "./chunk-AQ72FLUP.js";
 import {
   Icon
-} from "./chunk-5VKJXXI3.js";
+} from "./chunk-XJB6VA4O.js";
 
 // src/components/InfoIconTooltip.tsx
 import { Fragment } from "react";