@digilogiclabs/saas-factory-ui 1.34.0 → 1.34.1

package/dist/index.js

@@ -27747,15 +27747,6 @@ var SortIcon = ({ size = 13 }) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs
     ]
   }
 );
-var STYLE_ID = "dll-news-ticker-styles";
-function ensureStylesInjected() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID;
-  el.textContent = NEWS_TICKER_CSS;
-  document.head.appendChild(el);
-}
 function NewsTicker({
   items,
   speed = 40,
@@ -27784,9 +27775,6 @@ function NewsTicker({
   const inputRef = React85.useRef(null);
   const filterRef = React85.useRef(null);
   const [trackWidth, setTrackWidth] = React85.useState(0);
-  React85.useEffect(() => {
-    ensureStylesInjected();
-  }, []);
   const hasFiltersOrSort = filters.length > 0 || sorts.length > 0;
   const activeFilterCount = Object.values(activeFilters).filter((v) => v && v.length > 0).length + (activeSort ? 1 : 0);
   React85.useEffect(() => {
@@ -27872,6 +27860,7 @@ function NewsTicker({
       className: `ticker-root ${variantClass} ${className}`,
       style: { ["--ticker-h"]: `${height}px` },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("style", { href: "dll-news-ticker-styles", precedence: "default", children: NEWS_TICKER_CSS }),
         /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "ticker-controls", children: [
           /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
             "button",
@@ -28643,15 +28632,6 @@ function useDebouncedValue(value, ms) {
   }, [value, ms]);
   return debounced;
 }
-var STYLE_ID2 = "dll-filterable-grid-styles";
-function ensureStylesInjected2() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID2)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID2;
-  el.textContent = FILTERABLE_GRID_CSS;
-  document.head.appendChild(el);
-}
 function FilterSidebar({
   open,
   onClose,
@@ -28986,9 +28966,6 @@ function FilterableGrid({
   labels: labelOverrides,
   className = ""
 }) {
-  React86.useEffect(() => {
-    ensureStylesInjected2();
-  }, []);
   const labels = React86.useMemo(
     () => ({ ...DEFAULT_LABELS, ...labelOverrides }),
     [labelOverrides]
@@ -29243,6 +29220,7 @@ function FilterableGrid({
   const showEmpty = displayed.length === 0 && !loading;
   const currentState = stateRef.current;
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: `fg-root ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("style", { href: "dll-filterable-grid-styles", precedence: "default", children: FILTERABLE_GRID_CSS }),
     /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "fg-sr-only", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
     showSearch && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "fg-search-row", children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "fg-search", children: [
       /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(SearchIcon2, { size: 16 }),
@@ -29999,7 +29977,6 @@ var STAGGER_STEP_MS = 35;
 var STAGGER_CAP = 14;
 var TILT_MAX_DEG = 12;
 var SCALE_HOVER = 1.04;
-var STYLE_ID3 = "dll-tilt-card-styles";
 var TILT_CARD_CSS = `
 .tc-root {
   --tc-accent: #3b82f6;
@@ -30304,14 +30281,6 @@ var TILT_CARD_CSS = `
   }
 }
 `;
-function ensureStylesInjected3() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID3)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID3;
-  el.textContent = TILT_CARD_CSS;
-  document.head.appendChild(el);
-}
 function TiltCard({
   accent,
   accentSecondary,
@@ -30335,7 +30304,6 @@ function TiltCard({
   const uid = (0, import_react67.useId)().replace(/:/g, "");
   const rootRef = (0, import_react67.useRef)(null);
   const [hovered, setHovered] = (0, import_react67.useState)(false);
-  ensureStylesInjected3();
   const handleMove = (0, import_react67.useCallback)(
     (e) => {
       if (disableTilt && disableShine) return;
@@ -30440,8 +30408,9 @@ function TiltCard({
     "aria-pressed": as === "button" ? selected : void 0,
     "data-hovered": hovered || void 0
   };
+  const stylesheet = /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("style", { href: "dll-tilt-card-styles", precedence: "default", children: TILT_CARD_CSS });
   if (as === "button") {
-    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
       "button",
       {
         ...commonProps,
@@ -30449,11 +30418,14 @@ function TiltCard({
         disabled: selected,
         onClick: handleClick,
         onKeyDown: handleKey,
-        children: content
+        children: [
+          stylesheet,
+          content
+        ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
     "div",
     {
       ...commonProps,
@@ -30462,7 +30434,10 @@ function TiltCard({
       "aria-disabled": selected || void 0,
       onClick: handleClick,
       onKeyDown: handleKey,
-      children: content
+      children: [
+        stylesheet,
+        content
+      ]
     }
   );
 }
@@ -37233,10 +37208,10 @@ var DEFAULT_LAYOUT = {
   cardH: 56,
   detailMaxW: 320
 };
-var STYLE_ID4 = "dll-flow-tree-styles";
+var STYLE_ID = "dll-flow-tree-styles";
 function FlowTreeStyles() {
   const reactHostingProps = {
-    href: STYLE_ID4,
+    href: STYLE_ID,
     precedence: "default"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
@@ -37247,11 +37222,11 @@ function FlowTreeStyles() {
     }
   );
 }
-function ensureStylesInjected4() {
+function ensureStylesInjected() {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID4)) return;
+  if (document.getElementById(STYLE_ID)) return;
   const el = document.createElement("style");
-  el.id = STYLE_ID4;
+  el.id = STYLE_ID;
   el.textContent = FLOW_TREE_CSS;
   document.head.appendChild(el);
 }
@@ -37739,7 +37714,7 @@ function FlowTree({
   autoCyclePaths
 }) {
   React87.useEffect(() => {
-    ensureStylesInjected4();
+    ensureStylesInjected();
   }, []);
   const opts = React87.useMemo(
     () => ({ ...DEFAULT_LAYOUT, ...layoutOptions ?? {} }),
@@ -41635,7 +41610,6 @@ Scoreboard.displayName = "Scoreboard";
 // src/components/ui/step-wizard/index.tsx
 var import_react79 = require("react");
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var STYLE_ID5 = "dll-step-wizard-styles";
 var STEP_WIZARD_CSS = `
 .sw-root {
   --sw-accent: var(--primary, #3b82f6);
@@ -41793,27 +41767,19 @@ var STEP_WIZARD_CSS = `
   box-shadow: 0 4px 20px rgba(34, 197, 94, 0.25);
 }
 `;
-function ensureStylesInjected5() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID5)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID5;
-  el.textContent = STEP_WIZARD_CSS;
-  document.head.appendChild(el);
-}
 function StepProgress({
   steps,
   current,
   onJump,
   className = ""
 }) {
-  ensureStylesInjected5();
   const currentIdx = Math.max(
     0,
     steps.findIndex((s) => s.key === current)
   );
   const pct = steps.length <= 1 ? 100 : currentIdx / (steps.length - 1) * 100;
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: `sw-progress ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("style", { href: "dll-step-wizard-styles", precedence: "default", children: STEP_WIZARD_CSS }),
     /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "sw-progress-row", children: steps.map((s, i) => {
       const state = i === currentIdx ? "active" : i < currentIdx ? "done" : "todo";
       const clickable = state === "done" && !!onJump;
@@ -41863,7 +41829,6 @@ function StepWizard({
   nextLabel = "Continue",
   className = ""
 }) {
-  ensureStylesInjected5();
   const currentIdx = steps.findIndex((s) => s.key === current);
   const safeIdx = currentIdx < 0 ? 0 : currentIdx;
   const isFirst = safeIdx === 0;
@@ -41894,6 +41859,7 @@ function StepWizard({
     return () => window.removeEventListener("keydown", onKey);
   }, [goBack, isFirst]);
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: `sw-root ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("style", { href: "dll-step-wizard-styles", precedence: "default", children: STEP_WIZARD_CSS }),
     !hideProgress && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StepProgress, { steps, current, onJump: onChange }),
     banner && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "sw-banner", children: banner }),
     /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "sw-content", children: renderStep(current) }, current),
@@ -41928,7 +41894,6 @@ function StepWizard({
 
 // src/components/ui/pill-toggle/index.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
-var STYLE_ID6 = "dll-pill-toggle-styles";
 var PILL_TOGGLE_CSS = `
 .pt-root {
   --pt-accent: var(--primary, #3b82f6);
@@ -41977,16 +41942,7 @@ var PILL_TOGGLE_CSS = `
   line-height: 1;
 }
 `;
-function ensureStylesInjected6() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID6)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID6;
-  el.textContent = PILL_TOGGLE_CSS;
-  document.head.appendChild(el);
-}
 function PillToggle(props) {
-  ensureStylesInjected6();
   const { options, ariaLabel, className = "" } = props;
   const isActive = (value) => {
     if (props.multi) return props.value.includes(value);
@@ -42006,31 +41962,34 @@ function PillToggle(props) {
     }
     props.onChange(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
     "div",
     {
       role: props.multi ? "group" : "radiogroup",
       "aria-label": ariaLabel,
       className: `pt-root ${className}`.trim(),
-      children: options.map((opt) => {
-        const active = isActive(opt.value);
-        return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-          "button",
-          {
-            type: "button",
-            className: "pt-pill",
-            "data-active": active,
-            onClick: () => handleToggle(opt.value),
-            role: props.multi ? "checkbox" : "radio",
-            "aria-checked": active,
-            children: [
-              opt.icon && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "pt-icon", children: opt.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: opt.label })
-            ]
-          },
-          opt.value
-        );
-      })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("style", { href: "dll-pill-toggle-styles", precedence: "default", children: PILL_TOGGLE_CSS }),
+        options.map((opt) => {
+          const active = isActive(opt.value);
+          return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "pt-pill",
+              "data-active": active,
+              onClick: () => handleToggle(opt.value),
+              role: props.multi ? "checkbox" : "radio",
+              "aria-checked": active,
+              children: [
+                opt.icon && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "pt-icon", children: opt.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: opt.label })
+              ]
+            },
+            opt.value
+          );
+        })
+      ]
     }
   );
 }
@@ -42038,7 +41997,6 @@ function PillToggle(props) {
 // src/components/ui/tag-input/index.tsx
 var import_react80 = require("react");
 var import_jsx_runtime130 = require("react/jsx-runtime");
-var STYLE_ID7 = "dll-tag-input-styles";
 var TAG_INPUT_CSS = `
 .ti-root {
   --ti-accent: var(--primary, #3b82f6);
@@ -42147,14 +42105,6 @@ var TAG_INPUT_CSS = `
   font-variant-numeric: tabular-nums;
 }
 `;
-function ensureStylesInjected7() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID7)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID7;
-  el.textContent = TAG_INPUT_CSS;
-  document.head.appendChild(el);
-}
 var defaultNormalize = (raw) => {
   const trimmed = raw.trim();
   if (!trimmed) return "";
@@ -42174,7 +42124,6 @@ function TagInput({
   onInputChange,
   className = ""
 }) {
-  ensureStylesInjected7();
   const [internalInput, setInternalInput] = (0, import_react80.useState)("");
   const isControlled = inputValue !== void 0;
   const input = isControlled ? inputValue : internalInput;
@@ -42222,6 +42171,7 @@ function TagInput({
     if (filteredSuggestions.length >= maxVisibleSuggestions) break;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: `ti-root ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("style", { href: "dll-tag-input-styles", precedence: "default", children: TAG_INPUT_CSS }),
     /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "ti-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
         "input",
@@ -42289,7 +42239,7 @@ function TagInput({
 // src/components/ui/sectioned-list-editor/index.tsx
 var import_react81 = require("react");
 var import_jsx_runtime131 = require("react/jsx-runtime");
-var STYLE_ID8 = "dll-sectioned-list-editor-styles";
+var STYLE_ID2 = "dll-sectioned-list-editor-styles";
 var SECTIONED_LIST_CSS = `
 .sle-root {
   --sle-accent: var(--primary, #3b82f6);
@@ -42502,11 +42452,11 @@ var SECTIONED_LIST_CSS = `
   font-variant-numeric: tabular-nums;
 }
 `;
-function ensureStylesInjected8() {
+function ensureStylesInjected2() {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID8)) return;
+  if (document.getElementById(STYLE_ID2)) return;
   const el = document.createElement("style");
-  el.id = STYLE_ID8;
+  el.id = STYLE_ID2;
   el.textContent = SECTIONED_LIST_CSS;
   document.head.appendChild(el);
 }
@@ -42520,7 +42470,7 @@ function SectionedListEditor({
   renderSummary,
   className = ""
 }) {
-  ensureStylesInjected8();
+  ensureStylesInjected2();
   const [activeKey, setActiveKey] = (0, import_react81.useState)(sections[0]?.key ?? "");
   const [input, setInput] = (0, import_react81.useState)("");
   const [customName, setCustomName] = (0, import_react81.useState)("");