@dataverse-kit/surface-kit 0.2.0 → 0.3.0

package/dist/v9.cjs

@@ -0,0 +1,993 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v9/index.ts
+var v9_exports = {};
+__export(v9_exports, {
+  ActionBar: () => ActionBar,
+  BREAKPOINTS: () => BREAKPOINTS,
+  CALLOUT_DEFAULT_WIDTH: () => CALLOUT_DEFAULT_WIDTH,
+  CARD_REFLOW_WIDTH: () => CARD_REFLOW_WIDTH,
+  CalloutSurface: () => CalloutSurface,
+  CommandSurface: () => CommandSurface,
+  DIALOG_SIZE_PX: () => DIALOG_SIZE_PX,
+  DensityContext: () => DensityContext,
+  Footer: () => Footer,
+  FormDialogSurface: () => FormDialogSurface,
+  FormHeader: () => FormHeader,
+  FormSurface: () => FormSurface,
+  MODAL_AUTOSIZE_MIN_WIDTH: () => MODAL_AUTOSIZE_MIN_WIDTH,
+  ModalSurface: () => ModalSurface,
+  PANEL_DEFAULT_WIDTH: () => PANEL_DEFAULT_WIDTH,
+  PageSurface: () => PageSurface,
+  PanelSurface: () => PanelSurface,
+  PivotSurface: () => PivotSurface,
+  Section: () => Section,
+  SectionCard: () => SectionCard,
+  SectionHeader: () => SectionHeader,
+  TooltipSurface: () => TooltipSurface,
+  calloutFormDefaults: () => calloutFormDefaults,
+  calloutWidthPx: () => calloutWidthPx,
+  clampSpan: () => clampSpan,
+  colors: () => import_design_tokens.colors,
+  createDynamicsV9DarkTheme: () => createDynamicsV9DarkTheme,
+  createDynamicsV9Theme: () => createDynamicsV9Theme,
+  densityScale: () => densityScale,
+  dialogHeightCss: () => dialogHeightCss,
+  dialogWidthCss: () => dialogWidthCss,
+  dialogWidthPx: () => dialogWidthPx,
+  dynamicsBrandRamp: () => dynamicsBrandRamp,
+  dynamicsV9Theme: () => dynamicsV9Theme,
+  fieldGridStyle: () => fieldGridStyle,
+  fieldRowStyle: () => fieldRowStyle,
+  gridTemplateForColumns: () => gridTemplateForColumns,
+  layout: () => import_design_tokens.layout,
+  panelCustomWidthPx: () => panelCustomWidthPx,
+  panelKindFromWidth: () => panelKindFromWidth,
+  radius: () => import_design_tokens.radius,
+  resolveBreakpoint: () => resolveBreakpoint,
+  resolveResponsiveValue: () => resolveResponsiveValue,
+  scaleSpacing: () => scaleSpacing,
+  sectionStackingStyle: () => sectionStackingStyle,
+  spacing: () => import_design_tokens.spacing,
+  typography: () => import_design_tokens.typography,
+  useContainerBreakpoint: () => useContainerBreakpoint,
+  useContainerSize: () => useContainerSize,
+  useContainerWidth: () => useContainerWidth,
+  useDensity: () => useDensity,
+  useMediaQuery: () => useMediaQuery,
+  useResponsiveValue: () => useResponsiveValue
+});
+module.exports = __toCommonJS(v9_exports);
+
+// src/core/sizePresets.ts
+var DIALOG_SIZE_PX = {
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1600
+};
+function dialogWidthPx(opts = {}) {
+  if (typeof opts.width === "number") return opts.width;
+  const size = opts.size ?? "lg";
+  if (size === "fullscreen") return DIALOG_SIZE_PX.xl;
+  return DIALOG_SIZE_PX[size];
+}
+function dialogWidthCss(opts = {}) {
+  if (opts.size === "fullscreen" && opts.width == null) return "95vw";
+  return `${dialogWidthPx(opts)}px`;
+}
+function dialogHeightCss(height) {
+  return height != null && height <= 100 ? `${height}vh` : "95vh";
+}
+var MODAL_AUTOSIZE_MIN_WIDTH = 1e3;
+var PANEL_DEFAULT_WIDTH = 480;
+function panelKindFromWidth(width) {
+  return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? "medium" : "custom";
+}
+function panelCustomWidthPx(width) {
+  return width ?? PANEL_DEFAULT_WIDTH;
+}
+var CALLOUT_DEFAULT_WIDTH = 320;
+var calloutFormDefaults = {
+  width: CALLOUT_DEFAULT_WIDTH,
+  directionalHint: "bottomLeftEdge"
+};
+function calloutWidthPx(width) {
+  return width ?? CALLOUT_DEFAULT_WIDTH;
+}
+
+// src/core/columns.ts
+function gridTemplateForColumns(columns) {
+  return `repeat(${columns}, 1fr)`;
+}
+function clampSpan(span, columns) {
+  if (!Number.isFinite(span)) return 1;
+  return Math.max(1, Math.min(Math.round(span), columns));
+}
+
+// src/responsive/breakpoints.ts
+var BREAKPOINTS = {
+  xs: 0,
+  sm: 480,
+  md: 768,
+  lg: 1024,
+  xl: 1366
+};
+var CARD_REFLOW_WIDTH = 900;
+var DESCENDING = ["xl", "lg", "md", "sm", "xs"];
+var ASCENDING = ["xs", "sm", "md", "lg", "xl"];
+function resolveBreakpoint(width) {
+  for (const bp of DESCENDING) {
+    if (width >= BREAKPOINTS[bp]) return bp;
+  }
+  return "xs";
+}
+function isResponsiveMap(v) {
+  return typeof v === "object" && v !== null && ASCENDING.some((bp) => bp in v);
+}
+function resolveResponsiveValue(value, breakpoint) {
+  if (!isResponsiveMap(value)) return value;
+  const map = value;
+  const idx = ASCENDING.indexOf(breakpoint);
+  for (let i = idx; i >= 0; i--) {
+    const v = map[ASCENDING[i]];
+    if (v !== void 0) return v;
+  }
+  for (let i = idx + 1; i < ASCENDING.length; i++) {
+    const v = map[ASCENDING[i]];
+    if (v !== void 0) return v;
+  }
+  return void 0;
+}
+
+// src/responsive/builders.ts
+function atRule(mode, maxPx) {
+  return mode === "container" ? `@container (max-width: ${maxPx}px)` : `@media (max-width: ${maxPx}px)`;
+}
+function fieldGridStyle(columns, mode = "media") {
+  const capped = Math.min(columns, 2);
+  return {
+    display: "grid",
+    gridTemplateColumns: gridTemplateForColumns(columns),
+    gap: "4px 24px",
+    selectors: {
+      [atRule(mode, BREAKPOINTS.md)]: { gridTemplateColumns: gridTemplateForColumns(capped) },
+      [atRule(mode, BREAKPOINTS.sm)]: { gridTemplateColumns: "1fr" }
+    }
+  };
+}
+function sectionStackingStyle(gridTemplateColumns, mode = "media") {
+  return {
+    display: "grid",
+    gridTemplateColumns,
+    gap: 16,
+    alignItems: "start",
+    selectors: {
+      [atRule(mode, BREAKPOINTS.md)]: { gridTemplateColumns: "1fr" }
+    }
+  };
+}
+function fieldRowStyle(labelWidth = "130px", mode = "media") {
+  return {
+    display: "grid",
+    gridTemplateColumns: `${labelWidth} 1fr`,
+    alignItems: "center",
+    gap: 8,
+    minHeight: 38,
+    selectors: {
+      [atRule(mode, BREAKPOINTS.sm)]: { gridTemplateColumns: "1fr", alignItems: "flex-start", minHeight: 0, gap: 4 }
+    }
+  };
+}
+
+// src/tokens/tokens.ts
+var import_design_tokens = require("@dataverse-kit/design-tokens");
+
+// src/tokens/density.ts
+var densityScale = {
+  comfortable: 1,
+  compact: 0.75
+};
+function scaleSpacing(value, density = "comfortable") {
+  return Math.round(value * densityScale[density]);
+}
+
+// src/hooks/useContainerSize.ts
+var import_react = require("react");
+function useContainerSize(ref) {
+  const [size, setSize] = (0, import_react.useState)({ width: 0, height: 0, inlineSize: 0, blockSize: 0 });
+  (0, import_react.useEffect)(() => {
+    if (!ref.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        const inlineSize = entry.borderBoxSize?.[0]?.inlineSize ?? width;
+        const blockSize = entry.borderBoxSize?.[0]?.blockSize ?? height;
+        setSize({ width, height, inlineSize, blockSize });
+      }
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+}
+
+// src/hooks/useContainerWidth.ts
+var import_react2 = require("react");
+function useContainerWidth() {
+  const ref = (0, import_react2.useRef)(null);
+  const { width } = useContainerSize(ref);
+  return [ref, width];
+}
+
+// src/hooks/useContainerBreakpoint.ts
+function useContainerBreakpoint() {
+  const [ref, width] = useContainerWidth();
+  return [ref, resolveBreakpoint(width), width];
+}
+
+// src/hooks/useResponsiveValue.ts
+function useResponsiveValue(value) {
+  const [ref, breakpoint] = useContainerBreakpoint();
+  return [ref, resolveResponsiveValue(value, breakpoint)];
+}
+
+// src/hooks/useMediaQuery.ts
+var import_react3 = require("react");
+function useMediaQuery(query) {
+  const [matches, setMatches] = (0, import_react3.useState)(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+    return window.matchMedia(query).matches;
+  });
+  (0, import_react3.useEffect)(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+
+// src/hooks/useDensity.ts
+var import_react4 = require("react");
+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();
+
+// src/v9/containers/FormSurface.tsx
+var import_react_components2 = require("@fluentui/react-components");
+var import_jsx_runtime = require("react/jsx-runtime");
+var useStyles = (0, import_react_components2.makeStyles)({
+  root: {
+    display: "grid",
+    alignItems: "start",
+    backgroundColor: import_react_components2.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.
+  forceStackChildren: {
+    "& > *": { gridColumn: "1 / -1" }
+  },
+  // Viewport fallbacks (used only when containerWidth is unset) — one static slot per
+  // breakpoint so griffel gets literal media strings. The px come from the shared BREAKPOINTS.
+  stackSm: { [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { "& > *": { gridColumn: "1 / -1" } } },
+  stackMd: { [`@media (max-width: ${BREAKPOINTS.md}px)`]: { "& > *": { gridColumn: "1 / -1" } } },
+  stackLg: { [`@media (max-width: ${BREAKPOINTS.lg}px)`]: { "& > *": { gridColumn: "1 / -1" } } },
+  stackXl: { [`@media (max-width: ${BREAKPOINTS.xl}px)`]: { "& > *": { gridColumn: "1 / -1" } } }
+});
+var VIEWPORT_STACK = {
+  xs: null,
+  // xs = 0px, never stacks
+  sm: "stackSm",
+  md: "stackMd",
+  lg: "stackLg",
+  xl: "stackXl"
+};
+var FormSurface = ({
+  columns = 12,
+  gap = 20,
+  padding = 20,
+  density = "comfortable",
+  background,
+  containerWidth,
+  collapseBelow = "sm",
+  maxWidth,
+  className,
+  style,
+  children
+}) => {
+  const styles = useStyles();
+  const collapsePx = BREAKPOINTS[collapseBelow];
+  const forceStack = containerWidth != null && containerWidth <= collapsePx;
+  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)(
+    styles.root,
+    forceStack && styles.forceStackChildren,
+    viewportStackSlot ? styles[viewportStackSlot] : void 0,
+    className
+  );
+  const inlineStyle = {
+    gridTemplateColumns: forceStack ? "1fr" : `repeat(${columns}, 1fr)`,
+    gap: scaledGap,
+    padding: scaledPadding,
+    ...background != null ? { background } : {},
+    ...maxWidth != null ? { maxWidth, marginLeft: "auto", marginRight: "auto" } : {},
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cls, style: inlineStyle, children }) });
+};
+
+// src/v9/containers/PageSurface.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PageSurface = ({ centered, maxWidth, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormSurface, { maxWidth: maxWidth ?? (centered ? 1200 : void 0), ...rest });
+
+// src/v9/containers/Section.tsx
+var import_react5 = require("react");
+var import_react_components4 = require("@fluentui/react-components");
+
+// src/v9/containers/SectionHeader.tsx
+var import_react_components3 = require("@fluentui/react-components");
+var import_react_icons = require("@fluentui/react-icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SectionHeader = ({
+  title,
+  statusText,
+  showCommandBar,
+  commandItems = [],
+  actions,
+  collapsible,
+  collapsed,
+  onToggle
+}) => {
+  const rootStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    borderBottom: `1px solid ${import_react_components3.tokens.colorNeutralStroke2}`,
+    marginBottom: 16,
+    minHeight: 48,
+    width: "100%"
+  };
+  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
+  };
+  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,
+        {
+          appearance: "subtle",
+          size: "small",
+          icon: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.ChevronRight20Regular, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.ChevronDown20Regular, {}),
+          onClick: onToggle,
+          "aria-label": collapsed ? "Expand section" : "Collapse section",
+          "aria-expanded": !collapsed
+        }
+      ),
+      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_components3.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,
+      {
+        icon: item.icon,
+        appearance: item.appearance === "primary" ? "primary" : "subtle",
+        disabled: item.disabled,
+        onClick: item.onClick,
+        children: item.label
+      },
+      item.id
+    )) }) : null
+  ] });
+};
+
+// src/v9/containers/Section.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var useStyles2 = (0, import_react_components4.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" } }
+  }
+});
+var Section = ({
+  title,
+  columnSpan = 12,
+  columnStart,
+  rowPosition,
+  internalColumns = 12,
+  showCommandBar,
+  commandItems,
+  statusText,
+  notification,
+  collapsible,
+  defaultCollapsed = false,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  variant = "card",
+  minHeight = 80,
+  density: densityProp,
+  className,
+  style,
+  children
+}) => {
+  const styles = useStyles2();
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react5.useState)(defaultCollapsed);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const toggle = () => {
+    const next = !collapsed;
+    if (controlledCollapsed == null) setInternalCollapsed(next);
+    onCollapsedChange?.(next);
+  };
+  const ctxDensity = useDensity();
+  const density = densityProp ?? ctxDensity;
+  const cardPad = `${scaleSpacing(3, density)}px ${scaleSpacing(20, density)}px ${scaleSpacing(20, density)}px ${scaleSpacing(20, density)}px`;
+  const bodyGap = scaleSpacing(7, density);
+  const gridColumn = columnStart ? `${columnStart} / span ${columnSpan}` : `span ${columnSpan}`;
+  const rootStyle = {
+    gridColumn,
+    ...rowPosition ? { gridRowStart: rowPosition } : {},
+    ...style
+  };
+  if (variant === "placeholder") {
+    const placeholderStyle = {
+      ...rootStyle,
+      border: `1px dashed ${import_react_components4.tokens.colorNeutralStroke2}`,
+      borderRadius: import_react_components4.tokens.borderRadiusMedium,
+      minHeight,
+      width: "100%",
+      background: "transparent"
+    };
+    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,
+    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,
+    padding: cardPad,
+    minWidth: 300,
+    width: "100%",
+    overflow: "hidden"
+  };
+  const showHeader = Boolean(title) || showCommandBar || collapsible;
+  const bodyStyle = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${internalColumns}, 1fr)`,
+    gap: bodyGap,
+    alignItems: "start"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, style: { ...chrome, ...rootStyle }, children: [
+    notification && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginBottom: scaleSpacing(8, density) }, children: notification }),
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SectionHeader,
+      {
+        title,
+        statusText,
+        showCommandBar,
+        commandItems,
+        collapsible,
+        collapsed,
+        onToggle: toggle
+      }
+    ),
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_react_components4.mergeClasses)(styles.bodyStack), style: bodyStyle, children })
+  ] });
+};
+
+// src/v9/containers/SectionCard.tsx
+var import_react_components5 = require("@fluentui/react-components");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SectionCard = ({
+  accentColor = import_react_components5.tokens.colorBrandStroke1,
+  accentWidth = 3,
+  variant = "card",
+  style,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  Section,
+  {
+    variant,
+    ...rest,
+    style: { borderTop: `${accentWidth}px solid ${accentColor}`, ...style }
+  }
+);
+
+// src/v9/containers/FormHeader.tsx
+var import_react_components6 = require("@fluentui/react-components");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FormHeader = ({
+  title,
+  subtitle,
+  status,
+  titleColor,
+  subtitleColor,
+  persona,
+  actions,
+  className
+}) => {
+  const rootStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    padding: "12px 24px",
+    borderBottom: `1px solid ${import_react_components6.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components6.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 subtitleStyle = {
+    fontSize: import_react_components6.tokens.fontSizeBase200,
+    color: subtitleColor || import_react_components6.tokens.colorNeutralForeground3,
+    marginTop: 2
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style: rootStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: mainStyle, children: [
+      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 }),
+          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 })
+      ] })
+    ] }),
+    actions != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: actions })
+  ] });
+};
+
+// src/v9/containers/PivotSurface.tsx
+var import_react6 = require("react");
+var import_react_components7 = require("@fluentui/react-components");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PivotSurface = ({
+  tabs,
+  selectedId,
+  defaultSelectedId,
+  onTabChange,
+  appearance = "transparent",
+  size = "medium",
+  className
+}) => {
+  const firstEnabledId = tabs.find((t) => !t.disabled)?.id ?? tabs[0]?.id;
+  const [internal, setInternal] = (0, import_react6.useState)(defaultSelectedId ?? firstEnabledId);
+  const selected = selectedId ?? internal;
+  const handleSelect = (_e, data) => {
+    const id = String(data.value);
+    if (selectedId == null) setInternal(id);
+    onTabChange?.(id);
+  };
+  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)("div", { children: active?.content })
+  ] });
+};
+
+// src/v9/containers/CommandSurface.tsx
+var import_react_components8 = 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,
+    {
+      icon: item.icon,
+      appearance: item.appearance === "primary" ? "primary" : "subtle",
+      disabled: item.disabled,
+      onClick: item.onClick,
+      children: item.label
+    },
+    item.id
+  );
+}
+var CommandSurface = ({
+  items,
+  overflowItems,
+  farItems,
+  size = "small",
+  className
+}) => {
+  const hasFar = Boolean(farItems && farItems.length > 0);
+  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: [
+      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)) }) })
+      ] })
+    ] }),
+    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) })
+  ] });
+};
+
+// src/v9/containers/ActionBar.tsx
+var import_react_components9 = 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);
+}
+var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) => {
+  const justify = alignment === "left" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
+  const visible = buttons.filter((b) => !b.hidden);
+  const left = visible.filter((b) => b.position === "left");
+  const right = visible.filter((b) => b.position !== "left");
+  const rootStyle = {
+    display: "flex",
+    alignItems: "center",
+    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,
+    ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, style: rootStyle, children: [
+    left.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
+  ] });
+};
+
+// src/v9/containers/Footer.tsx
+var import_react_components10 = 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";
+  const rootStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap: 8,
+    padding: "12px 24px",
+    borderTop: `1px solid ${import_react_components10.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components10.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_icons3 = require("@fluentui/react-icons");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FormDialogSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  subheader,
+  size,
+  width,
+  height,
+  isBlocking = true,
+  recordCounter,
+  footer,
+  className,
+  children
+}) => {
+  const widthCss = dialogWidthCss({ width, size });
+  const heightCss = dialogHeightCss(height);
+  const showHeader = Boolean(title) || Boolean(recordCounter) || Boolean(onDismiss);
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    padding: "12px 20px",
+    borderBottom: `1px solid ${import_react_components11.tokens.colorNeutralStroke2}`
+  };
+  const counterStyle = { fontSize: import_react_components11.tokens.fontSizeBase200, color: import_react_components11.tokens.colorNeutralForeground3 };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_components11.Dialog,
+    {
+      open: isOpen,
+      modalType: isBlocking ? "modal" : "non-modal",
+      onOpenChange: (_e, data) => {
+        if (!data.open) onDismiss?.();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        import_react_components11.DialogSurface,
+        {
+          className,
+          style: {
+            maxWidth: "95vw",
+            width: widthCss,
+            height: heightCss,
+            maxHeight: "95vh",
+            display: "flex",
+            flexDirection: "column",
+            padding: 0
+          },
+          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 })
+              ] }),
+              /* @__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: [
+                  recordCounter.current,
+                  " 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 })
+              ] })
+            ] }),
+            /* @__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 })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/v9/overlays/ModalSurface.tsx
+var import_react_components12 = require("@fluentui/react-components");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ModalSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  size,
+  width,
+  isBlocking = true,
+  autoSize,
+  footer,
+  className,
+  children
+}) => {
+  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,
+    {
+      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 }) }),
+        /* @__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}`,
+              padding: "12px 20px",
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: 8
+            },
+            children: footer
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/v9/overlays/PanelSurface.tsx
+var import_react_components13 = require("@fluentui/react-components");
+var import_react_icons4 = require("@fluentui/react-icons");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var PanelSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  drawerSize,
+  width,
+  hasCloseButton = true,
+  isLightDismiss = true,
+  isNonModal = false,
+  footer,
+  children
+}) => {
+  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,
+    {
+      open: isOpen,
+      position: "end",
+      size,
+      modalType: isNonModal ? "non-modal" : "modal",
+      style: customWidthStyle,
+      onOpenChange: (_e, data) => {
+        if (data.open) return;
+        if (data.type === "backdropClick" && !isLightDismiss) return;
+        onDismiss?.();
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.DrawerHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_components13.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,
+            children: title
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_components13.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 })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/v9/overlays/CalloutSurface.tsx
+var import_react_components14 = require("@fluentui/react-components");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function resolveTarget(target) {
+  if (!target) return null;
+  if (typeof target === "string") return document.querySelector(target);
+  if ("current" in target) return target.current ?? null;
+  return target;
+}
+var CalloutSurface = ({
+  target,
+  isOpen = true,
+  onDismiss,
+  width,
+  position = "below",
+  align = "start",
+  isBeakVisible = true,
+  className,
+  children
+}) => {
+  if (!isOpen) return null;
+  const el = resolveTarget(target);
+  const positioning = { position, align, ...el ? { target: el } : {} };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_components14.Popover,
+    {
+      open: true,
+      trapFocus: false,
+      withArrow: isBeakVisible,
+      positioning,
+      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 })
+    }
+  );
+};
+
+// src/v9/overlays/TooltipSurface.tsx
+var import_react_components15 = require("@fluentui/react-components");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var DELAY_MS = {
+  zero: 0,
+  medium: 250,
+  long: 500
+};
+var TooltipSurface = ({
+  content,
+  position = "above",
+  delay = "medium",
+  relationship = "label",
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.Tooltip, { content, relationship, positioning: position, showDelay: DELAY_MS[delay], children });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionBar,
+  BREAKPOINTS,
+  CALLOUT_DEFAULT_WIDTH,
+  CARD_REFLOW_WIDTH,
+  CalloutSurface,
+  CommandSurface,
+  DIALOG_SIZE_PX,
+  DensityContext,
+  Footer,
+  FormDialogSurface,
+  FormHeader,
+  FormSurface,
+  MODAL_AUTOSIZE_MIN_WIDTH,
+  ModalSurface,
+  PANEL_DEFAULT_WIDTH,
+  PageSurface,
+  PanelSurface,
+  PivotSurface,
+  Section,
+  SectionCard,
+  SectionHeader,
+  TooltipSurface,
+  calloutFormDefaults,
+  calloutWidthPx,
+  clampSpan,
+  colors,
+  createDynamicsV9DarkTheme,
+  createDynamicsV9Theme,
+  densityScale,
+  dialogHeightCss,
+  dialogWidthCss,
+  dialogWidthPx,
+  dynamicsBrandRamp,
+  dynamicsV9Theme,
+  fieldGridStyle,
+  fieldRowStyle,
+  gridTemplateForColumns,
+  layout,
+  panelCustomWidthPx,
+  panelKindFromWidth,
+  radius,
+  resolveBreakpoint,
+  resolveResponsiveValue,
+  scaleSpacing,
+  sectionStackingStyle,
+  spacing,
+  typography,
+  useContainerBreakpoint,
+  useContainerSize,
+  useContainerWidth,
+  useDensity,
+  useMediaQuery,
+  useResponsiveValue
+});
+//# sourceMappingURL=v9.cjs.map