@dataverse-kit/surface-kit 0.4.0 → 0.4.1

package/dist/index.d.cts

@@ -6,9 +6,9 @@ import { Breakpoint } from './responsive.cjs';
 export { BREAKPOINTS, CARD_REFLOW_WIDTH, ResponsiveMode, ResponsiveValue, StyleObject, fieldGridStyle, fieldRowStyle, resolveBreakpoint, resolveResponsiveValue, sectionStackingStyle } from './responsive.cjs';
 export { colors, layout, radius, spacing, typography } from '@dataverse-kit/design-tokens';
 import { Theme, ICommandBarItemProps } from '@fluentui/react';
-import { D as Density } from './useDensity-xEYt-GdJ.cjs';
-export { C as ContainerSize, f as DensityContext, d as densityScale, s as scaleSpacing, b as useContainerBreakpoint, u as useContainerSize, a as useContainerWidth, g as useDensity, e as useMediaQuery, c as useResponsiveValue } from './useDensity-xEYt-GdJ.cjs';
-import React__default, { CSSProperties, ReactNode, RefObject, ReactElement } from 'react';
+import { D as Density } from './useDensity-CLglP89q.cjs';
+export { C as ContainerSize, a as DensityContext, d as densityScale, s as scaleSpacing, u as useContainerBreakpoint, b as useContainerSize, c as useContainerWidth, e as useDensity, f as useMediaQuery, g as useResponsiveValue } from './useDensity-CLglP89q.cjs';
+import React__default, { RefObject, ReactNode, CSSProperties, ReactElement } from 'react';
 
 declare function createDynamicsTheme(): Theme;
 

package/dist/index.d.ts

@@ -6,9 +6,9 @@ import { Breakpoint } from './responsive.js';
 export { BREAKPOINTS, CARD_REFLOW_WIDTH, ResponsiveMode, ResponsiveValue, StyleObject, fieldGridStyle, fieldRowStyle, resolveBreakpoint, resolveResponsiveValue, sectionStackingStyle } from './responsive.js';
 export { colors, layout, radius, spacing, typography } from '@dataverse-kit/design-tokens';
 import { Theme, ICommandBarItemProps } from '@fluentui/react';
-import { D as Density } from './useDensity-BePwtUzY.js';
-export { C as ContainerSize, f as DensityContext, d as densityScale, s as scaleSpacing, b as useContainerBreakpoint, u as useContainerSize, a as useContainerWidth, g as useDensity, e as useMediaQuery, c as useResponsiveValue } from './useDensity-BePwtUzY.js';
-import React__default, { CSSProperties, ReactNode, RefObject, ReactElement } from 'react';
+import { D as Density } from './useDensity-fkCdcf_j.js';
+export { C as ContainerSize, a as DensityContext, d as densityScale, s as scaleSpacing, u as useContainerBreakpoint, b as useContainerSize, c as useContainerWidth, e as useDensity, f as useMediaQuery, g as useResponsiveValue } from './useDensity-fkCdcf_j.js';
+import React__default, { RefObject, ReactNode, CSSProperties, ReactElement } from 'react';
 
 declare function createDynamicsTheme(): Theme;
 

package/dist/{useDensity-xEYt-GdJ.d.cts → useDensity-CLglP89q.d.cts}

@@ -50,4 +50,4 @@ declare const DensityContext: React.Context<Density>;
 /** Read the ambient spacing density (defaults to `'comfortable'` outside a provider). */
 declare const useDensity: () => Density;
 
-export { type ContainerSize as C, type Density as D, useContainerWidth as a, useContainerBreakpoint as b, useResponsiveValue as c, densityScale as d, useMediaQuery as e, DensityContext as f, useDensity as g, scaleSpacing as s, useContainerSize as u };
+export { type ContainerSize as C, type Density as D, DensityContext as a, useContainerSize as b, useContainerWidth as c, densityScale as d, useDensity as e, useMediaQuery as f, useResponsiveValue as g, scaleSpacing as s, useContainerBreakpoint as u };

package/dist/{useDensity-BePwtUzY.d.ts → useDensity-fkCdcf_j.d.ts}

@@ -50,4 +50,4 @@ declare const DensityContext: React.Context<Density>;
 /** Read the ambient spacing density (defaults to `'comfortable'` outside a provider). */
 declare const useDensity: () => Density;
 
-export { type ContainerSize as C, type Density as D, useContainerWidth as a, useContainerBreakpoint as b, useResponsiveValue as c, densityScale as d, useMediaQuery as e, DensityContext as f, useDensity as g, scaleSpacing as s, useContainerSize as u };
+export { type ContainerSize as C, type Density as D, DensityContext as a, useContainerSize as b, useContainerWidth as c, densityScale as d, useDensity as e, useMediaQuery as f, useResponsiveValue as g, scaleSpacing as s, useContainerBreakpoint as u };

package/dist/v9.cjs

@@ -46,14 +46,15 @@ __export(v9_exports, {
   calloutWidthPx: () => calloutWidthPx,
   clampSpan: () => clampSpan,
   colors: () => import_design_tokens.colors,
-  createDynamicsV9DarkTheme: () => createDynamicsV9DarkTheme,
-  createDynamicsV9Theme: () => createDynamicsV9Theme,
+  createDynamicsV9DarkTheme: () => import_fluent_theme.createDynamicsV9DarkTheme,
+  createDynamicsV9Theme: () => import_fluent_theme.createDynamicsV9Theme,
   densityScale: () => densityScale,
   dialogHeightCss: () => dialogHeightCss,
   dialogWidthCss: () => dialogWidthCss,
   dialogWidthPx: () => dialogWidthPx,
-  dynamicsBrandRamp: () => dynamicsBrandRamp,
-  dynamicsV9Theme: () => dynamicsV9Theme,
+  dynamicsBrandRamp: () => import_fluent_theme.dynamicsBrandRamp,
+  dynamicsV9DarkTheme: () => import_fluent_theme.dynamicsV9DarkTheme,
+  dynamicsV9Theme: () => import_fluent_theme.dynamicsV9Theme,
   fieldGridStyle: () => fieldGridStyle,
   fieldRowStyle: () => fieldRowStyle,
   gridTemplateForColumns: () => gridTemplateForColumns,
@@ -273,44 +274,16 @@ var DensityContext = (0, import_react4.createContext)("comfortable");
 var useDensity = () => (0, import_react4.useContext)(DensityContext);
 
 // src/v9/theme.ts
-var import_react_components = require("@fluentui/react-components");
-var dynamicsBrandRamp = {
-  10: "#061724",
-  20: "#082338",
-  30: "#0a2e4a",
-  40: "#0c3b5e",
-  50: "#0e4775",
-  60: import_design_tokens.colors.brandDark,
-  // #005a9e — colorBrandBackgroundPressed
-  70: import_design_tokens.colors.brandHover,
-  // #106ebe — colorBrandBackground(Hover/Selected)
-  80: import_design_tokens.colors.brand,
-  // #0078d4 — colorBrandBackground + colorBrandForeground1 (the Dynamics blue)
-  90: "#2886de",
-  100: "#479ef5",
-  110: "#62abf5",
-  120: "#77b7f7",
-  130: "#96c6fa",
-  140: "#b4d6fa",
-  150: "#cfe4fa",
-  160: "#ebf3fc"
-};
-function createDynamicsV9Theme(brand = dynamicsBrandRamp) {
-  return (0, import_react_components.createLightTheme)(brand);
-}
-function createDynamicsV9DarkTheme(brand = dynamicsBrandRamp) {
-  return (0, import_react_components.createDarkTheme)(brand);
-}
-var dynamicsV9Theme = createDynamicsV9Theme();
+var import_fluent_theme = require("@dataverse-kit/fluent-theme");
 
 // src/v9/containers/FormSurface.tsx
-var import_react_components2 = require("@fluentui/react-components");
+var import_react_components = require("@fluentui/react-components");
 var import_jsx_runtime = require("react/jsx-runtime");
-var useStyles = (0, import_react_components2.makeStyles)({
+var useStyles = (0, import_react_components.makeStyles)({
   root: {
     display: "grid",
     alignItems: "start",
-    backgroundColor: import_react_components2.tokens.colorNeutralBackground2
+    backgroundColor: import_react_components.tokens.colorNeutralBackground2
   },
   // Container forced a single column: reset every child's span the same way the @media
   // fallback does, so a Section with `columnStart` doesn't escape the stack.
@@ -351,7 +324,7 @@ var FormSurface = ({
   const scaledGap = scaleSpacing(gap, density);
   const scaledPadding = scaleSpacing(padding, density);
   const viewportStackSlot = containerWidth == null ? VIEWPORT_STACK[collapseBelow] : null;
-  const cls = (0, import_react_components2.mergeClasses)(
+  const cls = (0, import_react_components.mergeClasses)(
     styles.root,
     forceStack && styles.forceStackChildren,
     viewportStackSlot ? styles[viewportStackSlot] : void 0,
@@ -374,10 +347,10 @@ var PageSurface = ({ centered, maxWidth, ...rest }) => /* @__PURE__ */ (0, impor
 
 // src/v9/containers/Section.tsx
 var import_react5 = require("react");
-var import_react_components4 = require("@fluentui/react-components");
+var import_react_components3 = require("@fluentui/react-components");
 
 // src/v9/containers/SectionHeader.tsx
-var import_react_components3 = require("@fluentui/react-components");
+var import_react_components2 = require("@fluentui/react-components");
 var import_react_icons = require("@fluentui/react-icons");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SectionHeader = ({
@@ -395,7 +368,7 @@ var SectionHeader = ({
     justifyContent: "space-between",
     alignItems: "center",
     flexWrap: "nowrap",
-    borderBottom: `1px solid ${import_react_components3.tokens.colorNeutralStroke2}`,
+    borderBottom: `1px solid ${import_react_components2.tokens.colorNeutralStroke2}`,
     marginBottom: 16,
     minHeight: 48,
     width: "100%"
@@ -403,13 +376,13 @@ var SectionHeader = ({
   const leftStyle = { display: "flex", alignItems: "center", gap: 8, minWidth: 0 };
   const statusStyle = {
     marginLeft: 8,
-    fontSize: import_react_components3.tokens.fontSizeBase200,
-    color: import_react_components3.tokens.colorNeutralForeground3
+    fontSize: import_react_components2.tokens.fontSizeBase200,
+    color: import_react_components2.tokens.colorNeutralForeground3
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: rootStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: leftStyle, children: [
       collapsible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_components3.Button,
+        import_react_components2.Button,
         {
           appearance: "subtle",
           size: "small",
@@ -419,11 +392,11 @@ var SectionHeader = ({
           "aria-expanded": !collapsed
         }
       ),
-      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_components3.Text, { weight: "semibold", size: 300, children: title }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_components2.Text, { weight: "semibold", size: 300, children: title }),
       statusText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: statusStyle, children: statusText })
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: actions }) : showCommandBar && commandItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_components3.Toolbar, { "aria-label": "Section commands", size: "small", children: commandItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_components3.ToolbarButton,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: actions }) : showCommandBar && commandItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_components2.Toolbar, { "aria-label": "Section commands", size: "small", children: commandItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_components2.ToolbarButton,
       {
         icon: item.icon,
         appearance: item.appearance === "primary" ? "primary" : "subtle",
@@ -438,7 +411,7 @@ var SectionHeader = ({
 
 // src/v9/containers/Section.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var useStyles2 = (0, import_react_components4.makeStyles)({
+var useStyles2 = (0, import_react_components3.makeStyles)({
   // Phone-stack the internal field grid below `sm` (griffel — inline can't do @media).
   bodyStack: {
     [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { "& > *": { gridColumn: "1 / -1" } }
@@ -486,8 +459,8 @@ var Section = ({
   if (variant === "placeholder") {
     const placeholderStyle = {
       ...rootStyle,
-      border: `1px dashed ${import_react_components4.tokens.colorNeutralStroke2}`,
-      borderRadius: import_react_components4.tokens.borderRadiusMedium,
+      border: `1px dashed ${import_react_components3.tokens.colorNeutralStroke2}`,
+      borderRadius: import_react_components3.tokens.borderRadiusMedium,
       minHeight,
       width: "100%",
       background: "transparent"
@@ -495,17 +468,17 @@ var Section = ({
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: placeholderStyle });
   }
   const chrome = variant === "flat" ? {
-    backgroundColor: import_react_components4.tokens.colorNeutralBackground1,
-    borderRadius: import_react_components4.tokens.borderRadiusMedium,
+    backgroundColor: import_react_components3.tokens.colorNeutralBackground1,
+    borderRadius: import_react_components3.tokens.borderRadiusMedium,
     padding: cardPad,
     minWidth: 300,
     width: "100%",
     overflow: "hidden"
   } : {
-    backgroundColor: import_react_components4.tokens.colorNeutralBackground1,
-    border: `1px solid ${import_react_components4.tokens.colorNeutralStroke2}`,
-    borderRadius: import_react_components4.tokens.borderRadiusMedium,
-    boxShadow: import_react_components4.tokens.shadow4,
+    backgroundColor: import_react_components3.tokens.colorNeutralBackground1,
+    border: `1px solid ${import_react_components3.tokens.colorNeutralStroke2}`,
+    borderRadius: import_react_components3.tokens.borderRadiusMedium,
+    boxShadow: import_react_components3.tokens.shadow4,
     padding: cardPad,
     minWidth: 300,
     width: "100%",
@@ -532,15 +505,15 @@ var Section = ({
         onToggle: toggle
       }
     ),
-    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_react_components4.mergeClasses)(styles.bodyStack), style: bodyStyle, children })
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_react_components3.mergeClasses)(styles.bodyStack), style: bodyStyle, children })
   ] });
 };
 
 // src/v9/containers/SectionCard.tsx
-var import_react_components5 = require("@fluentui/react-components");
+var import_react_components4 = require("@fluentui/react-components");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SectionCard = ({
-  accentColor = import_react_components5.tokens.colorBrandStroke1,
+  accentColor = import_react_components4.tokens.colorBrandStroke1,
   accentWidth = 3,
   variant = "card",
   style,
@@ -555,7 +528,7 @@ var SectionCard = ({
 );
 
 // src/v9/containers/FormHeader.tsx
-var import_react_components6 = require("@fluentui/react-components");
+var import_react_components5 = require("@fluentui/react-components");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var FormHeader = ({
   title,
@@ -573,15 +546,15 @@ var FormHeader = ({
     justifyContent: "space-between",
     gap: 12,
     padding: "12px 24px",
-    borderBottom: `1px solid ${import_react_components6.tokens.colorNeutralStroke2}`,
-    backgroundColor: import_react_components6.tokens.colorNeutralBackground1
+    borderBottom: `1px solid ${import_react_components5.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components5.tokens.colorNeutralBackground1
   };
   const mainStyle = { display: "flex", alignItems: "center", gap: 12, minWidth: 0 };
   const titleRowStyle = { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" };
-  const statusStyle = { fontSize: import_react_components6.tokens.fontSizeBase200, color: import_react_components6.tokens.colorNeutralForeground3 };
+  const statusStyle = { fontSize: import_react_components5.tokens.fontSizeBase200, color: import_react_components5.tokens.colorNeutralForeground3 };
   const subtitleStyle = {
-    fontSize: import_react_components6.tokens.fontSizeBase200,
-    color: subtitleColor || import_react_components6.tokens.colorNeutralForeground3,
+    fontSize: import_react_components5.tokens.fontSizeBase200,
+    color: subtitleColor || import_react_components5.tokens.colorNeutralForeground3,
     marginTop: 2
   };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style: rootStyle, children: [
@@ -589,7 +562,7 @@ var FormHeader = ({
       persona,
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: titleRowStyle, children: [
-          title != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_components6.Text, { weight: "semibold", size: 400, style: titleColor ? { color: titleColor } : void 0, children: title }),
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_components5.Text, { weight: "semibold", size: 400, style: titleColor ? { color: titleColor } : void 0, children: title }),
           status != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: statusStyle, children: status })
         ] }),
         subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: subtitleStyle, children: subtitle })
@@ -601,7 +574,7 @@ var FormHeader = ({
 
 // src/v9/containers/PivotSurface.tsx
 var import_react6 = require("react");
-var import_react_components7 = require("@fluentui/react-components");
+var import_react_components6 = require("@fluentui/react-components");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var PivotSurface = ({
   tabs,
@@ -622,18 +595,18 @@ var PivotSurface = ({
   };
   const active = tabs.find((t) => t.id === selected) ?? tabs[0];
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components7.TabList, { selectedValue: selected, onTabSelect: handleSelect, appearance, size, children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components7.Tab, { value: t.id, icon: t.icon, disabled: t.disabled, children: t.label }, t.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.TabList, { selectedValue: selected, onTabSelect: handleSelect, appearance, size, children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.Tab, { value: t.id, icon: t.icon, disabled: t.disabled, children: t.label }, t.id)) }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: active?.content })
   ] });
 };
 
 // src/v9/containers/CommandSurface.tsx
-var import_react_components8 = require("@fluentui/react-components");
+var import_react_components7 = require("@fluentui/react-components");
 var import_react_icons2 = require("@fluentui/react-icons");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function renderToolbarButton(item) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react_components8.ToolbarButton,
+    import_react_components7.ToolbarButton,
     {
       icon: item.icon,
       appearance: item.appearance === "primary" ? "primary" : "subtle",
@@ -655,24 +628,24 @@ var CommandSurface = ({
   const hasOverflow = Boolean(overflowItems && overflowItems.length > 0);
   const hasPrimary = items.length > 0 || hasOverflow;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-    hasPrimary && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_components8.Toolbar, { "aria-label": "Commands", size, children: [
+    hasPrimary && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_components7.Toolbar, { "aria-label": "Commands", size, children: [
       items.map(renderToolbarButton),
-      hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_components8.Menu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.ToolbarButton, { "aria-label": "More commands", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_icons2.MoreHorizontal20Regular, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.MenuList, { children: overflowItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.MenuItem, { icon: item.icon, disabled: item.disabled, onClick: item.onClick, children: item.label }, item.id)) }) })
+      hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_components7.Menu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components7.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components7.ToolbarButton, { "aria-label": "More commands", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_icons2.MoreHorizontal20Regular, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components7.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components7.MenuList, { children: overflowItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components7.MenuItem, { icon: item.icon, disabled: item.disabled, onClick: item.onClick, children: item.label }, item.id)) }) })
       ] })
     ] }),
     hasFar && // marginLeft:auto keeps far items right-aligned whether or not a primary toolbar renders.
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.Toolbar, { "aria-label": "Secondary commands", size, style: { marginLeft: "auto" }, children: farItems.map(renderToolbarButton) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components7.Toolbar, { "aria-label": "Secondary commands", size, style: { marginLeft: "auto" }, children: farItems.map(renderToolbarButton) })
   ] });
 };
 
 // src/v9/containers/ActionBar.tsx
-var import_react_components9 = require("@fluentui/react-components");
+var import_react_components8 = require("@fluentui/react-components");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function renderButton(b) {
   const appearance = b.appearance === "primary" ? "primary" : b.appearance === "subtle" ? "subtle" : "secondary";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components9.Button, { appearance, icon: b.icon, disabled: b.disabled, onClick: b.onClick, children: b.label }, b.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.Button, { appearance, icon: b.icon, disabled: b.disabled, onClick: b.onClick, children: b.label }, b.id);
 }
 var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) => {
   const justify = alignment === "left" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
@@ -685,8 +658,8 @@ var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) =>
     justifyContent: left.length ? "space-between" : justify,
     gap: 8,
     padding: "12px 24px",
-    borderTop: `1px solid ${import_react_components9.tokens.colorNeutralStroke2}`,
-    backgroundColor: import_react_components9.tokens.colorNeutralBackground1,
+    borderTop: `1px solid ${import_react_components8.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components8.tokens.colorNeutralBackground1,
     ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
   };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, style: rootStyle, children: [
@@ -696,7 +669,7 @@ var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) =>
 };
 
 // src/v9/containers/Footer.tsx
-var import_react_components10 = require("@fluentui/react-components");
+var import_react_components9 = require("@fluentui/react-components");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Footer = ({ sticky = true, align = "right", className, children }) => {
   const justify = align === "left" ? "flex-start" : align === "center" ? "center" : "flex-end";
@@ -706,15 +679,15 @@ var Footer = ({ sticky = true, align = "right", className, children }) => {
     justifyContent: justify,
     gap: 8,
     padding: "12px 24px",
-    borderTop: `1px solid ${import_react_components10.tokens.colorNeutralStroke2}`,
-    backgroundColor: import_react_components10.tokens.colorNeutralBackground1,
+    borderTop: `1px solid ${import_react_components9.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components9.tokens.colorNeutralBackground1,
     ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style: rootStyle, children });
 };
 
 // src/v9/overlays/FormDialogSurface.tsx
-var import_react_components11 = require("@fluentui/react-components");
+var import_react_components10 = require("@fluentui/react-components");
 var import_react_icons3 = require("@fluentui/react-icons");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var FormDialogSurface = ({
@@ -740,11 +713,11 @@ var FormDialogSurface = ({
     justifyContent: "space-between",
     gap: 12,
     padding: "12px 20px",
-    borderBottom: `1px solid ${import_react_components11.tokens.colorNeutralStroke2}`
+    borderBottom: `1px solid ${import_react_components10.tokens.colorNeutralStroke2}`
   };
-  const counterStyle = { fontSize: import_react_components11.tokens.fontSizeBase200, color: import_react_components11.tokens.colorNeutralForeground3 };
+  const counterStyle = { fontSize: import_react_components10.tokens.fontSizeBase200, color: import_react_components10.tokens.colorNeutralForeground3 };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_components11.Dialog,
+    import_react_components10.Dialog,
     {
       open: isOpen,
       modalType: isBlocking ? "modal" : "non-modal",
@@ -752,7 +725,7 @@ var FormDialogSurface = ({
         if (!data.open) onDismiss?.();
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        import_react_components11.DialogSurface,
+        import_react_components10.DialogSurface,
         {
           className,
           style: {
@@ -767,8 +740,8 @@ var FormDialogSurface = ({
           children: [
             showHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: headerStyle, children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-                title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_components11.Text, { weight: "semibold", size: 400, children: title }),
-                subheader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: import_react_components11.tokens.fontSizeBase200, color: import_react_components11.tokens.colorNeutralForeground3, marginTop: 2 }, children: subheader })
+                title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_components10.Text, { weight: "semibold", size: 400, children: title }),
+                subheader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: import_react_components10.tokens.fontSizeBase200, color: import_react_components10.tokens.colorNeutralForeground3, marginTop: 2 }, children: subheader })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
                 recordCounter && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: counterStyle, children: [
@@ -776,11 +749,11 @@ var FormDialogSurface = ({
                   " of ",
                   recordCounter.total
                 ] }),
-                onDismiss && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_components11.Button, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_icons3.Dismiss20Regular, {}), onClick: onDismiss })
+                onDismiss && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_components10.Button, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_icons3.Dismiss20Regular, {}), onClick: onDismiss })
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 }, children }),
-            footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { borderTop: `1px solid ${import_react_components11.tokens.colorNeutralStroke2}`, padding: "12px 20px" }, children: footer })
+            footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { borderTop: `1px solid ${import_react_components10.tokens.colorNeutralStroke2}`, padding: "12px 20px" }, children: footer })
           ]
         }
       )
@@ -789,7 +762,7 @@ var FormDialogSurface = ({
 };
 
 // src/v9/overlays/ModalSurface.tsx
-var import_react_components12 = require("@fluentui/react-components");
+var import_react_components11 = require("@fluentui/react-components");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var ModalSurface = ({
   isOpen,
@@ -805,21 +778,21 @@ var ModalSurface = ({
 }) => {
   const sizing = autoSize ? { width: "auto", minWidth: MODAL_AUTOSIZE_MIN_WIDTH, maxWidth: "100%" } : { maxWidth: "95vw", width: `${dialogWidthPx({ width, size })}px` };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_components12.Dialog,
+    import_react_components11.Dialog,
     {
       open: isOpen,
       modalType: isBlocking ? "modal" : "non-modal",
       onOpenChange: (_e, data) => {
         if (!data.open) onDismiss?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_components12.DialogSurface, { className, style: { ...sizing, padding: 0 }, children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { padding: "16px 20px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components12.Text, { weight: "semibold", size: 500, children: title }) }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_components11.DialogSurface, { className, style: { ...sizing, padding: 0 }, children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { padding: "16px 20px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Text, { weight: "semibold", size: 500, children: title }) }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { padding: 20 }, children }),
         footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             style: {
-              borderTop: `1px solid ${import_react_components12.tokens.colorNeutralStroke2}`,
+              borderTop: `1px solid ${import_react_components11.tokens.colorNeutralStroke2}`,
               padding: "12px 20px",
               display: "flex",
               justifyContent: "flex-end",
@@ -834,7 +807,7 @@ var ModalSurface = ({
 };
 
 // src/v9/overlays/PanelSurface.tsx
-var import_react_components13 = require("@fluentui/react-components");
+var import_react_components12 = require("@fluentui/react-components");
 var import_react_icons4 = require("@fluentui/react-icons");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var PanelSurface = ({
@@ -852,7 +825,7 @@ var PanelSurface = ({
   const size = drawerSize ?? (width != null && width > 500 ? "medium" : "small");
   const customWidthStyle = width != null ? { width: `${width}px` } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    import_react_components13.OverlayDrawer,
+    import_react_components12.OverlayDrawer,
     {
       open: isOpen,
       position: "end",
@@ -865,14 +838,14 @@ var PanelSurface = ({
         onDismiss?.();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.DrawerHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_react_components13.DrawerHeaderTitle,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.DrawerHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_components12.DrawerHeaderTitle,
           {
-            action: hasCloseButton && onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.Button, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons4.Dismiss24Regular, {}), onClick: onDismiss }) : void 0,
+            action: hasCloseButton && onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.Button, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons4.Dismiss24Regular, {}), onClick: onDismiss }) : void 0,
             children: title
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_components13.DrawerBody, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_components12.DrawerBody, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: "12px 0" }, children }),
           footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginTop: "auto", paddingTop: 12 }, children: footer })
         ] })
@@ -882,7 +855,7 @@ var PanelSurface = ({
 };
 
 // src/v9/overlays/CalloutSurface.tsx
-var import_react_components14 = require("@fluentui/react-components");
+var import_react_components13 = require("@fluentui/react-components");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function resolveTarget(target) {
   if (!target) return null;
@@ -905,7 +878,7 @@ var CalloutSurface = ({
   const el = resolveTarget(target);
   const positioning = { position, align, ...el ? { target: el } : {} };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_components14.Popover,
+    import_react_components13.Popover,
     {
       open: true,
       trapFocus: false,
@@ -914,13 +887,13 @@ var CalloutSurface = ({
       onOpenChange: (_e, data) => {
         if (!data.open) onDismiss?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components14.PopoverSurface, { className, style: { width: calloutWidthPx(width), padding: 16 }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components13.PopoverSurface, { className, style: { width: calloutWidthPx(width), padding: 16 }, children })
     }
   );
 };
 
 // src/v9/overlays/TooltipSurface.tsx
-var import_react_components15 = require("@fluentui/react-components");
+var import_react_components14 = require("@fluentui/react-components");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var DELAY_MS = {
   zero: 0,
@@ -933,7 +906,7 @@ var TooltipSurface = ({
   delay = "medium",
   relationship = "label",
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.Tooltip, { content, relationship, positioning: position, showDelay: DELAY_MS[delay], children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components14.Tooltip, { content, relationship, positioning: position, showDelay: DELAY_MS[delay], children });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionBar,
@@ -969,6 +942,7 @@ var TooltipSurface = ({
   dialogWidthCss,
   dialogWidthPx,
   dynamicsBrandRamp,
+  dynamicsV9DarkTheme,
   dynamicsV9Theme,
   fieldGridStyle,
   fieldRowStyle,