@plumile/ui 0.1.134 → 0.1.142

package/lib/esm/components/feedback/OperationFeedback.js

@@ -1,33 +1,29 @@
 import { Button as e } from "../../atomic/atoms/button/Button.js";
-import { ErrorMessage as t } from "../../atomic/atoms/error_message/ErrorMessage.js";
-import { InfoTile as n } from "../tile/InfoTile.js";
-import { stack as r } from "./OperationFeedback.css.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { InlineBanner as t } from "./InlineBanner.js";
+import { stack as n } from "./OperationFeedback.css.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/feedback/OperationFeedback.tsx
-var o = ({ errorMessage: o = null, successMessage: s = null, retryLabel: c, onRetry: l }) => {
-	if (o == null && s == null) return null;
-	let u = null;
-	return o != null && l != null && c != null && (u = /* @__PURE__ */ i(e, {
+var a = ({ errorMessage: a = null, successMessage: o = null, retryLabel: s, onRetry: c }) => {
+	if (a == null && o == null) return null;
+	let l = null;
+	return a != null && c != null && s != null && (l = /* @__PURE__ */ r(e, {
 		type: "button",
 		variant: "secondary",
-		onClick: l,
-		children: c
-	})), /* @__PURE__ */ a("div", {
-		className: r,
-		children: [o != null && /* @__PURE__ */ a("div", {
-			className: "_19ozap71 txvbqbdr8 txvbqbf91 txvbqbey txvbqbff6",
-			role: "alert",
-			children: [/* @__PURE__ */ i(t, { children: o }), u]
-		}), s != null && /* @__PURE__ */ i(n, {
-			title: s,
-			body: /* @__PURE__ */ i("div", {
-				role: "status",
-				"aria-live": "polite"
-			})
+		onClick: c,
+		children: s
+	})), /* @__PURE__ */ i("div", {
+		className: n,
+		children: [a != null && /* @__PURE__ */ r(t, {
+			tone: "danger",
+			actions: l,
+			children: a
+		}), o != null && /* @__PURE__ */ r(t, {
+			tone: "success",
+			children: o
 		})]
 	});
-}, s = o;
+}, o = a;
 //#endregion
-export { s as MutationFeedback, o as OperationFeedback, o as default };
+export { o as MutationFeedback, a as OperationFeedback, a as default };
 
 //# sourceMappingURL=OperationFeedback.js.map

package/lib/esm/components/feedback/OperationFeedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationFeedback.js","names":[],"sources":["../../../../src/components/feedback/OperationFeedback.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '../../atomic/atoms/button/Button.js';\nimport { ErrorMessage } from '../../atomic/atoms/error_message/ErrorMessage.js';\nimport { InfoTile } from '../tile/InfoTile.js';\n\nimport * as styles from './OperationFeedback.css.js';\n\nexport type OperationFeedbackProps = {\n  errorMessage?: string | null;\n  successMessage?: string | null;\n  retryLabel?: string;\n  onRetry?: () => void;\n};\n\nexport const OperationFeedback = ({\n  errorMessage = null,\n  successMessage = null,\n  retryLabel,\n  onRetry,\n}: OperationFeedbackProps): JSX.Element | null => {\n  if (errorMessage == null && successMessage == null) {\n    return null;\n  }\n\n  let retryAction: JSX.Element | null = null;\n  if (errorMessage != null && onRetry != null && retryLabel != null) {\n    retryAction = (\n      <Button type=\"button\" variant=\"secondary\" onClick={onRetry}>\n        {retryLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={styles.stack}>\n      {errorMessage != null && (\n        <div className={styles.row} role=\"alert\">\n          <ErrorMessage>{errorMessage}</ErrorMessage>\n          {retryAction}\n        </div>\n      )}\n      {successMessage != null && (\n        <InfoTile\n          title={successMessage}\n          body={<div role=\"status\" aria-live=\"polite\" />}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const MutationFeedback = OperationFeedback;\n\nexport default OperationFeedback;\n"],"mappings":";;;;;;AAeA,IAAa,KAAqB,EAChC,kBAAe,MACf,oBAAiB,MACjB,eACA,iBACgD;CAChD,IAAI,KAAgB,QAAQ,KAAkB,MAC5C,OAAO;CAGT,IAAI,IAAkC;CAStC,OARI,KAAgB,QAAQ,KAAW,QAAQ,KAAc,SAC3D,IACE,kBAAC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAY,SAAS;YAChD;EACM,CAAA,GAKX,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KAAgB,QACf,kBAAC,OAAD;GAAK,WAAW;GAAY,MAAK;aAAjC,CACE,kBAAC,GAAD,EAAA,UAAe,GAA4B,CAAA,EAC1C,EACG;MAEP,KAAkB,QACjB,kBAAC,GAAD;GACE,OAAO;GACP,MAAM,kBAAC,OAAD;IAAK,MAAK;IAAS,aAAU;IAAW,CAAA;GAC9C,CAAA,CAEA;;GAIG,IAAmB"}
+{"version":3,"file":"OperationFeedback.js","names":[],"sources":["../../../../src/components/feedback/OperationFeedback.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '../../atomic/atoms/button/Button.js';\nimport { InlineBanner } from './InlineBanner.js';\n\nimport * as styles from './OperationFeedback.css.js';\n\nexport type OperationFeedbackProps = {\n  errorMessage?: string | null;\n  successMessage?: string | null;\n  retryLabel?: string;\n  onRetry?: () => void;\n};\n\nexport const OperationFeedback = ({\n  errorMessage = null,\n  successMessage = null,\n  retryLabel,\n  onRetry,\n}: OperationFeedbackProps): JSX.Element | null => {\n  if (errorMessage == null && successMessage == null) {\n    return null;\n  }\n\n  let retryAction: JSX.Element | null = null;\n  if (errorMessage != null && onRetry != null && retryLabel != null) {\n    retryAction = (\n      <Button type=\"button\" variant=\"secondary\" onClick={onRetry}>\n        {retryLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={styles.stack}>\n      {errorMessage != null && (\n        <InlineBanner tone=\"danger\" actions={retryAction}>\n          {errorMessage}\n        </InlineBanner>\n      )}\n      {successMessage != null && (\n        <InlineBanner tone=\"success\">{successMessage}</InlineBanner>\n      )}\n    </div>\n  );\n};\n\nexport const MutationFeedback = OperationFeedback;\n\nexport default OperationFeedback;\n"],"mappings":";;;;;AAcA,IAAa,KAAqB,EAChC,kBAAe,MACf,oBAAiB,MACjB,eACA,iBACgD;CAChD,IAAI,KAAgB,QAAQ,KAAkB,MAC5C,OAAO;CAGT,IAAI,IAAkC;CAStC,OARI,KAAgB,QAAQ,KAAW,QAAQ,KAAc,SAC3D,IACE,kBAAC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAY,SAAS;YAChD;EACM,CAAA,GAKX,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KAAgB,QACf,kBAAC,GAAD;GAAc,MAAK;GAAS,SAAS;aAClC;GACY,CAAA,EAEhB,KAAkB,QACjB,kBAAC,GAAD;GAAc,MAAK;aAAW;GAA8B,CAAA,CAE1D;;GAIG,IAAmB"}

package/lib/esm/components/feedback/inlineBanner.css.js

@@ -0,0 +1,19 @@
+/* empty css                                   */
+/* empty css                            */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/feedback/inlineBanner.css.ts
+var t = "j0pjq90 txvbqbyov txvbqbzmg txvbqb10jo txvbqbvvr txvbqbdr8 txvbqbel txvbqbjus txvbqbf91 txvbqbffj txvbqb2g9 txvbqb9j txvbqb1uy txvbqb2et txvbqb17h", n = e({
+	defaultClassName: "j0pjq95",
+	variantClassNames: { tone: {
+		info: "j0pjq96 j0pjq91 txvbqb1983 txvbqb19c9",
+		success: "j0pjq97 j0pjq92 txvbqb194d txvbqb19ab",
+		warning: "j0pjq98 j0pjq93 txvbqb193t txvbqb199t",
+		danger: "j0pjq99 j0pjq94 txvbqb1939 txvbqb1997"
+	} },
+	defaultVariants: { tone: "info" },
+	compoundVariants: []
+}), r = "j0pjq9a txvbqbdr8 txvbqbf6i txvbqbfet txvbqbdxd txvbqbt9i", i = "j0pjq9b txvbqbfd0", a = "j0pjq9c ", o = "j0pjq9d txvbqbdsb txvbqbey txvbqbff6 txvbqbf91 txvbqbf7y", s = "j0pjq9f qbwcuej qbwcueh txvbqbdsb txvbqbey txvbqbjtp txvbqb1g5 txvbqb2e3 txvbqb2g9 txvbqb1933 txvbqb19cb txvbqbv txvbqbux3 txvbqb7h txvbqb76 txvbqb7t qbwcuei txvbqb1aey txvbqb1bsa qbwcue4 txvbqb1c2w txvbqb1c9c qbwcue0 txvbqb1cb0 txvbqb1cws j0pjq9e txvbqb17in txvbqbho2 txvbqb198h";
+//#endregion
+export { o as actions, s as closeButton, t as container, r as content, a as description, i as title, n as toneRecipe };
+
+//# sourceMappingURL=inlineBanner.css.js.map

package/lib/esm/components/feedback/inlineBanner.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineBanner.css.js","names":[],"sources":["../../../../src/components/feedback/inlineBanner.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { ghostIconButton } from '../../theme/styleRecipes.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  flexWrap: 'wrap',\n  gap: 3,\n  paddingX: 4,\n  paddingY: 3,\n  borderRadius: 'md',\n  fontSize: 'sm',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n});\n\nconst toneInfo = sprinkles({\n  backgroundColor: 'brandLightGray',\n  color: 'text',\n});\nconst toneSuccess = sprinkles({\n  backgroundColor: 'green-50',\n  color: 'green-800',\n});\nconst toneWarning = sprinkles({\n  backgroundColor: 'amber-50',\n  color: 'amber-900',\n});\nconst toneDanger = sprinkles({\n  backgroundColor: 'red-50',\n  color: 'red-800',\n});\n\nexport const toneRecipe = recipe({\n  variants: {\n    tone: {\n      info: toneInfo,\n      success: toneSuccess,\n      warning: toneWarning,\n      danger: toneDanger,\n    },\n  },\n  defaultVariants: {\n    tone: 'info',\n  },\n});\n\nexport type ToneRecipeVariants = RecipeVariants<typeof toneRecipe>;\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const description = sprinkles({});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n  flexShrink: 0,\n});\n\nexport const closeButton = style([\n  ghostIconButton,\n  sprinkles({\n    width: 8,\n    height: 8,\n    color: 'inherit',\n  }),\n]);\n"],"mappings":""}

package/lib/esm/components/infinite/InfiniteScrollTrigger.js

@@ -1,39 +1,47 @@
-import { trigger as e } from "./infiniteScrollTrigger.css.js";
-import { useEffect as t, useRef as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { resolveInfiniteRootMargin as e, shouldObserveInfiniteTrigger as t } from "../../internal/infinite/infiniteLoad.js";
+import { trigger as n } from "./infiniteScrollTrigger.css.js";
+import { useEffect as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/infinite/InfiniteScrollTrigger.tsx
-var i = ({ enabled: i, hasNext: a, isLoading: o, onTrigger: s, thresholdPx: c = 800, loadingLabel: l }) => {
-	let u = n(null);
-	return t(() => {
-		if (!i || !a || o) return () => {};
-		let e = u.current;
-		if (e == null || typeof window > "u") return () => {};
-		let t = new IntersectionObserver((e) => {
-			e[0]?.isIntersecting === !0 && s();
+var o = ({ enabled: o, hasNext: s, isLoading: c, onTrigger: l, thresholdPx: u = 800, loadingLabel: d }) => {
+	let f = i(null);
+	return r(() => {
+		if (!t({
+			enabled: o,
+			hasNext: s,
+			isLoading: c
+		})) return () => {};
+		let n = f.current;
+		if (n == null || typeof window > "u" || typeof IntersectionObserver > "u") return () => {};
+		let r = new IntersectionObserver((e) => {
+			e[0]?.isIntersecting === !0 && l();
 		}, {
 			root: null,
-			rootMargin: `${c}px`
+			rootMargin: e({
+				thresholdPx: u,
+				axis: "both"
+			})
 		});
-		return t.observe(e), () => {
-			t.disconnect();
+		return r.observe(n), () => {
+			r.disconnect();
 		};
 	}, [
-		i,
-		a,
 		o,
 		s,
-		c
-	]), !i || !a ? null : /* @__PURE__ */ r("div", {
-		ref: u,
-		className: e,
+		c,
+		l,
+		u
+	]), !o || !s ? null : /* @__PURE__ */ a("div", {
+		ref: f,
+		className: n,
 		"aria-hidden": "true",
-		children: o && /* @__PURE__ */ r("span", {
+		children: c && /* @__PURE__ */ a("span", {
 			className: "_14q3b2q1 txvbqb9j txvbqb19cb",
-			children: l
+			children: d
 		})
 	});
 };
 //#endregion
-export { i as InfiniteScrollTrigger, i as default };
+export { o as InfiniteScrollTrigger, o as default };
 
 //# sourceMappingURL=InfiniteScrollTrigger.js.map

package/lib/esm/components/infinite/InfiniteScrollTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfiniteScrollTrigger.js","names":[],"sources":["../../../../src/components/infinite/InfiniteScrollTrigger.tsx"],"sourcesContent":["import { useEffect, useRef, type JSX } from 'react';\n\nimport * as styles from './infiniteScrollTrigger.css.js';\n\nexport type InfiniteScrollTriggerProps = {\n  enabled: boolean;\n  hasNext: boolean;\n  isLoading: boolean;\n  onTrigger: () => void;\n  thresholdPx?: number;\n  loadingLabel: string;\n};\n\nexport const InfiniteScrollTrigger = ({\n  enabled,\n  hasNext,\n  isLoading,\n  onTrigger,\n  thresholdPx = 800,\n  loadingLabel,\n}: InfiniteScrollTriggerProps): JSX.Element | null => {\n  const sentinelRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!enabled || !hasNext || isLoading) {\n      return () => {};\n    }\n    const sentinel = sentinelRef.current;\n    if (sentinel == null || typeof window === 'undefined') {\n      return () => {};\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        if (entry?.isIntersecting === true) {\n          onTrigger();\n        }\n      },\n      {\n        root: null,\n        rootMargin: `${thresholdPx}px`,\n      },\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [enabled, hasNext, isLoading, onTrigger, thresholdPx]);\n\n  if (!enabled || !hasNext) {\n    return null;\n  }\n\n  return (\n    <div ref={sentinelRef} className={styles.trigger} aria-hidden=\"true\">\n      {isLoading && <span className={styles.loadingText}>{loadingLabel}</span>}\n    </div>\n  );\n};\n\nexport default InfiniteScrollTrigger;\n"],"mappings":";;;;AAaA,IAAa,KAAyB,EACpC,YACA,YACA,cACA,cACA,iBAAc,KACd,sBACoD;CACpD,IAAM,IAAc,EAA8B,KAAK;CAmCvD,OAjCA,QAAgB;EACd,IAAI,CAAC,KAAW,CAAC,KAAW,GAC1B,aAAa;EAEf,IAAM,IAAW,EAAY;EAC7B,IAAI,KAAY,QAAQ,OAAO,SAAW,KACxC,aAAa;EAGf,IAAM,IAAW,IAAI,sBAClB,MAAY;GAEX,AADc,EAAQ,IACX,mBAAmB,MAC5B,GAAW;KAGf;GACE,MAAM;GACN,YAAY,GAAG,EAAY;GAC5B,CACF;EAID,OAFA,EAAS,QAAQ,EAAS,QAEb;GACX,EAAS,YAAY;;IAEtB;EAAC;EAAS;EAAS;EAAW;EAAW;EAAY,CAAC,EAErD,CAAC,KAAW,CAAC,IACR,OAIP,kBAAC,OAAD;EAAK,KAAK;EAAa,WAAW;EAAgB,eAAY;YAC3D,KAAa,kBAAC,QAAD;GAAM,WAAW;aAAqB;GAAoB,CAAA;EACpE,CAAA"}
+{"version":3,"file":"InfiniteScrollTrigger.js","names":[],"sources":["../../../../src/components/infinite/InfiniteScrollTrigger.tsx"],"sourcesContent":["import { useEffect, useRef, type JSX } from 'react';\n\nimport {\n  resolveInfiniteRootMargin,\n  shouldObserveInfiniteTrigger,\n} from '../../internal/infinite/infiniteLoad.js';\nimport * as styles from './infiniteScrollTrigger.css.js';\n\nexport type InfiniteScrollTriggerProps = {\n  enabled: boolean;\n  hasNext: boolean;\n  isLoading: boolean;\n  onTrigger: () => void;\n  thresholdPx?: number;\n  loadingLabel: string;\n};\n\nexport const InfiniteScrollTrigger = ({\n  enabled,\n  hasNext,\n  isLoading,\n  onTrigger,\n  thresholdPx = 800,\n  loadingLabel,\n}: InfiniteScrollTriggerProps): JSX.Element | null => {\n  const sentinelRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!shouldObserveInfiniteTrigger({ enabled, hasNext, isLoading })) {\n      return () => {};\n    }\n    const sentinel = sentinelRef.current;\n    if (\n      sentinel == null ||\n      typeof window === 'undefined' ||\n      typeof IntersectionObserver === 'undefined'\n    ) {\n      return () => {};\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        if (entry?.isIntersecting === true) {\n          onTrigger();\n        }\n      },\n      {\n        root: null,\n        rootMargin: resolveInfiniteRootMargin({\n          thresholdPx,\n          axis: 'both',\n        }),\n      },\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [enabled, hasNext, isLoading, onTrigger, thresholdPx]);\n\n  if (!enabled || !hasNext) {\n    return null;\n  }\n\n  return (\n    <div ref={sentinelRef} className={styles.trigger} aria-hidden=\"true\">\n      {isLoading && <span className={styles.loadingText}>{loadingLabel}</span>}\n    </div>\n  );\n};\n\nexport default InfiniteScrollTrigger;\n"],"mappings":";;;;;AAiBA,IAAa,KAAyB,EACpC,YACA,YACA,cACA,cACA,iBAAc,KACd,sBACoD;CACpD,IAAM,IAAc,EAA8B,KAAK;CA0CvD,OAxCA,QAAgB;EACd,IAAI,CAAC,EAA6B;GAAE;GAAS;GAAS;GAAW,CAAC,EAChE,aAAa;EAEf,IAAM,IAAW,EAAY;EAC7B,IACE,KAAY,QACZ,OAAO,SAAW,OAClB,OAAO,uBAAyB,KAEhC,aAAa;EAGf,IAAM,IAAW,IAAI,sBAClB,MAAY;GAEX,AADc,EAAQ,IACX,mBAAmB,MAC5B,GAAW;KAGf;GACE,MAAM;GACN,YAAY,EAA0B;IACpC;IACA,MAAM;IACP,CAAC;GACH,CACF;EAID,OAFA,EAAS,QAAQ,EAAS,QAEb;GACX,EAAS,YAAY;;IAEtB;EAAC;EAAS;EAAS;EAAW;EAAW;EAAY,CAAC,EAErD,CAAC,KAAW,CAAC,IACR,OAIP,kBAAC,OAAD;EAAK,KAAK;EAAa,WAAW;EAAgB,eAAY;YAC3D,KAAa,kBAAC,QAAD;GAAM,WAAW;aAAqB;GAAoB,CAAA;EACpE,CAAA"}

package/lib/esm/components/layout/ActionPanel.css.js

@@ -1,8 +1,8 @@
 /* empty css                                   */
 /* empty css                           */
 //#region src/components/layout/ActionPanel.css.ts
-var e = "_13wai4x0 txvbqbdr8 txvbqbf6i txvbqbffj", t = "_13wai4x1 txvbqbdr8 txvbqbf6i txvbqbfet", n = "_13wai4x2 txvbqbm9g txvbqb9j txvbqbfd0 txvbqb19c9", r = "_13wai4x3 txvbqbm9g txvbqb9j txvbqb19cb", i = "_13wai4x4 txvbqbdr8 txvbqbf6i txvbqbffj", a = "_13wai4x5 txvbqbdr8 txvbqbf91 txvbqbff6", o = "_13wai4x6 txvbqb9j txvbqb19cb";
+var e = "_13wai4x0 txvbqbdr8 txvbqbf6i txvbqbffj", t = "_13wai4x1 txvbqbdr8 txvbqbf6i txvbqbfet", n = "_13wai4x2 txvbqbm9g txvbqb9j txvbqbfd0 txvbqb19c9", r = "_13wai4x3 txvbqbm9g txvbqb9j txvbqb19cb", i = "_13wai4x4 txvbqbdr8 txvbqbf6i txvbqbffj", a = "_13wai4x5 txvbqbdr8 txvbqbf6i txvbqbffj", o = "_13wai4x6 txvbqbdr8 txvbqbf91 txvbqbff6", s = "_13wai4x7 txvbqb9j txvbqb19cb";
 //#endregion
-export { a as actions, i as content, r as description, o as feedback, t as header, e as root, n as title };
+export { o as actions, i as content, r as description, s as feedback, a as footer, t as header, e as root, n as title };
 
 //# sourceMappingURL=ActionPanel.css.js.map

package/lib/esm/components/layout/ActionPanel.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPanel.css.js","names":[],"sources":["../../../../src/components/layout/ActionPanel.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const title = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const feedback = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n"],"mappings":""}
+{"version":3,"file":"ActionPanel.css.js","names":[],"sources":["../../../../src/components/layout/ActionPanel.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const title = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const footer = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const feedback = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n"],"mappings":""}

package/lib/esm/components/layout/ActionPanel.js

@@ -1,39 +1,33 @@
-import { cx as e } from "../../theme/tools.js";
-import { PanelShell as t } from "./PanelShell.js";
-import { content as n, header as r, root as i, title as a } from "./ActionPanel.css.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { SurfaceSection as e } from "./Surface.js";
+import { content as t, footer as n } from "./ActionPanel.css.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/layout/ActionPanel.tsx
-var c = ({ actions: c, children: l, className: u, description: d, feedback: f, title: p }) => /* @__PURE__ */ o(t, {
-	className: u,
-	children: /* @__PURE__ */ s("div", {
-		className: i,
-		children: [
-			/* @__PURE__ */ s("div", {
-				className: r,
-				children: [/* @__PURE__ */ o("h3", {
-					className: a,
-					children: p
-				}), d != null && /* @__PURE__ */ o("div", {
-					className: "_13wai4x3 txvbqbm9g txvbqb9j txvbqb19cb",
-					children: d
-				})]
-			}),
-			/* @__PURE__ */ o("div", {
-				className: n,
-				children: l
-			}),
-			c != null && /* @__PURE__ */ o("div", {
-				className: "_13wai4x5 txvbqbdr8 txvbqbf91 txvbqbff6",
-				children: c
-			}),
-			f != null && /* @__PURE__ */ o("div", {
-				className: e("_13wai4x6 txvbqb9j txvbqb19cb"),
-				children: f
-			})
-		]
-	})
-});
+var a = ({ actions: a, children: o, className: s, description: c, feedback: l, title: u }) => {
+	let d = null;
+	return (a != null || l != null) && (d = /* @__PURE__ */ i("div", {
+		className: n,
+		children: [a != null && /* @__PURE__ */ r("div", {
+			className: "_13wai4x6 txvbqbdr8 txvbqbf91 txvbqbff6",
+			children: a
+		}), l != null && /* @__PURE__ */ r("div", {
+			className: "_13wai4x7 txvbqb9j txvbqb19cb",
+			children: l
+		})]
+	})), /* @__PURE__ */ r(e, {
+		border: "none",
+		className: s,
+		contentClassName: t,
+		density: "spacious",
+		description: c,
+		footer: d,
+		radius: "xl",
+		title: u,
+		titleAs: "h3",
+		variant: "brand",
+		children: o
+	});
+};
 //#endregion
-export { c as ActionPanel, c as default };
+export { a as ActionPanel, a as default };
 
 //# sourceMappingURL=ActionPanel.js.map

package/lib/esm/components/layout/ActionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPanel.js","names":[],"sources":["../../../../src/components/layout/ActionPanel.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../theme/tools.js';\nimport { PanelShell } from './PanelShell.js';\nimport * as styles from './ActionPanel.css.js';\n\nexport type ActionPanelProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  actions?: ReactNode;\n  feedback?: ReactNode;\n  className?: string;\n};\n\nexport const ActionPanel = ({\n  actions,\n  children,\n  className,\n  description,\n  feedback,\n  title,\n}: ActionPanelProps): JSX.Element => {\n  return (\n    <PanelShell className={className}>\n      <div className={styles.root}>\n        <div className={styles.header}>\n          <h3 className={styles.title}>{title}</h3>\n          {description != null && (\n            <div className={styles.description}>{description}</div>\n          )}\n        </div>\n        <div className={styles.content}>{children}</div>\n        {actions != null && <div className={styles.actions}>{actions}</div>}\n        {feedback != null && (\n          <div className={cx(styles.feedback)}>{feedback}</div>\n        )}\n      </div>\n    </PanelShell>\n  );\n};\n\nexport default ActionPanel;\n"],"mappings":";;;;;AAeA,IAAa,KAAe,EAC1B,SAAA,GACA,aACA,cACA,aAAA,GACA,UAAA,GACA,OAAA,QAGE,kBAAC,GAAD;CAAuB;WACrB,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACE,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,MAAD;KAAI,WAAW;eAAe;KAAW,CAAA,EACxC,KAAe,QACd,kBAAC,OAAD;KAAK,WAAW;eAAqB;KAAkB,CAAA,CAErD;;GACN,kBAAC,OAAD;IAAK,WAAW;IAAiB;IAAe,CAAA;GAC/C,KAAW,QAAQ,kBAAC,OAAD;IAAK,WAAW;cAAiB;IAAc,CAAA;GAClE,KAAY,QACX,kBAAC,OAAD;IAAK,WAAW,EAAG,gCAAgB;cAAG;IAAe,CAAA;GAEnD;;CACK,CAAA"}
+{"version":3,"file":"ActionPanel.js","names":[],"sources":["../../../../src/components/layout/ActionPanel.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { SurfaceSection } from './Surface.js';\nimport * as styles from './ActionPanel.css.js';\n\nexport type ActionPanelProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  actions?: ReactNode;\n  feedback?: ReactNode;\n  className?: string;\n};\n\nexport const ActionPanel = ({\n  actions,\n  children,\n  className,\n  description,\n  feedback,\n  title,\n}: ActionPanelProps): JSX.Element => {\n  let footer: JSX.Element | null = null;\n  if (actions != null || feedback != null) {\n    footer = (\n      <div className={styles.footer}>\n        {actions != null && <div className={styles.actions}>{actions}</div>}\n        {feedback != null && <div className={styles.feedback}>{feedback}</div>}\n      </div>\n    );\n  }\n\n  return (\n    <SurfaceSection\n      border=\"none\"\n      className={className}\n      contentClassName={styles.content}\n      density=\"spacious\"\n      description={description}\n      footer={footer}\n      radius=\"xl\"\n      title={title}\n      titleAs=\"h3\"\n      variant=\"brand\"\n    >\n      {children}\n    </SurfaceSection>\n  );\n};\n\nexport default ActionPanel;\n"],"mappings":";;;;AAcA,IAAa,KAAe,EAC1B,SAAA,GACA,aACA,cACA,gBACA,UAAA,GACA,eACmC;CACnC,IAAI,IAA6B;CAUjC,QATI,KAAW,QAAQ,KAAY,UACjC,IACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KAAW,QAAQ,kBAAC,OAAD;GAAK,WAAW;aAAiB;GAAc,CAAA,EAClE,KAAY,QAAQ,kBAAC,OAAD;GAAK,WAAW;aAAkB;GAAe,CAAA,CAClE;MAKR,kBAAC,GAAD;EACE,QAAO;EACI;EACX,kBAAkB;EAClB,SAAQ;EACK;EACL,QAAA;EACR,QAAO;EACA;EACP,SAAQ;EACR,SAAQ;EAEP;EACc,CAAA"}

package/lib/esm/components/layout/PageShell.css.js

@@ -1,26 +1,8 @@
 /* empty css                                   */
 /* empty css                         */
-import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/components/layout/PageShell.css.ts
-var t = "_1kley2d0 txvbqbdr8 txvbqb17w0 txvbqb196j txvbqb191j", n = "_1kley2d1 txvbqbyo5 txvbqbzlq txvbqb10jb txvbqbvve txvbqbipm txvbqbi1c txvbqbdxd txvbqbt9i", r = "_1kley2d2 txvbqbipm txvbqbs9r txvbqbusr", i = "_1kley2d3 txvbqbdr8 txvbqbe8 txvbqbfeg txvbqbfft txvbqbt9i txvbqbf65 txvbqbf6s txvbqbi1f txvbqbi1c", a = "_1kley2d4 txvbqb11ki txvbqb16gq txvbqbipm txvbqbf7y txvbqbdr8 txvbqbusr", o = "_1kley2d5", s = "_1kley2d6", c = "_1kley2d8 _1kley2d7 txvbqbdr8 txvbqbi1f", l = "_1kley2d9", u = "_1kley2da", d = "_1kley2db txvbqbdq5 txvbqbdsl txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv txvbqbf7y", f = "_1kley2dd _1kley2dc txvbqbdsb txvbqbdqf txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv txvbqbf7y txvbqb7g txvbqb76 txvbqb7t", p = "_1kley2de txvbqbdq5 txvbqbdsl txvbqb11kv txvbqb11jp txvbqb11l8 txvbqb11ml txvbqb16gq txvbqb16i3 txvbqb18w4 txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv", m = "_1kley2df txvbqbdxd txvbqbi1f txvbqbt9i txvbqbs9r txvbqbdr8 txvbqbf6i txvbqb196b txvbqbusr txvbqb2gm txvbqb1uy txvbqb2et txvbqb17u txvbqbclc", h = "_1kley2dg txvbqbs9r txvbqbusr", g = "_1kley2dh txvbqbi1f txvbqbi1c", _ = "_1kley2di txvbqbdr8 txvbqbf6i txvbqbs9r txvbqbi1f txvbqbi1c", v = "_1kley2dj txvbqbdyg txvbqb196b txvbqb2gz txvbqb1uy txvbqb2et txvbqb17u", y = "_1kley2dk", b = "_1kley2dm _1kley2dl txvbqbhh txvbqb1933 txvbqbb txvbqbdyg txvbqbtay txvbqb11js txvbqb17h7", x = "_1kley2dn txvbqbdqi txvbqbdqf", S = "_1kley2do txvbqb11ki txvbqb16gq txvbqb18v1 txvbqbdr8 txvbqbf6i txvbqbffj txvbqb196b txvbqb1g5 txvbqb2et txvbqb8oi txvbqb577 txvbqbyp8 txvbqbzmt txvbqbvve txvbqb10jo", C = "_1kley2dp txvbqbdr8 txvbqbf91 txvbqbel txvbqbjus txvbqbffw txvbqb17w0", w = "_1kley2dq txvbqbdr8 txvbqbey txvbqbffj txvbqbdxd txvbqbt9i", T = "_1kley2dr txvbqbdr8 txvbqbf6i txvbqbff6 txvbqbt9i", E = "_1kley2ds txvbqbdr8 txvbqbf91 txvbqbey txvbqbcta txvbqb12j6 txvbqbm8d txvbqbm9g txvbqbux3 txvbqb19cb txvbqb96", D = "_1kley2dt txvbqbdr8 txvbqbey txvbqbfet txvbqbs26", O = "_1kley2dv _1kley2du txvbqb19c9 txvbqb3f txvbqbfcn txvbqbusr txvbqb16g0 txvbqb18xk", k = "_1kley2dw txvbqb19c9 txvbqbfd0 txvbqbusr txvbqb16g0 txvbqb18xk", A = "_1kley2dx txvbqb19cl txvbqb96", j = "_1kley2dy txvbqbdr8 txvbqbf91 txvbqbff6 txvbqbju2", M = "_1kley2dz txvbqbdsb", N = "_1kley2d10 txvbqb17w0 txvbqbdr8 txvbqbf91 txvbqbff6", P = e({
-	defaultClassName: "_1kley2d15 _1kley2d12 _1kley2d11 txvbqbey txvbqb196f txvbqb2gm txvbqb19cb txvbqbdsb txvbqb9j txvbqbfcn txvbqbxo1 txvbqbxqx txvbqb3f txvbqb7g txvbqb76 txvbqb7t",
-	variantClassNames: {
-		state: {
-			default: "_1kley2d16",
-			active: "_1kley2d17 _1kley2d13 txvbqb1959 txvbqb198p txvbqbcj6"
-		},
-		mode: {
-			link: "_1kley2d18",
-			static: "_1kley2d19 _1kley2d14 txvbqbf"
-		}
-	},
-	defaultVariants: {
-		state: "default",
-		mode: "link"
-	},
-	compoundVariants: []
-}), F = "_1kley2d1a txvbqbdxd txvbqbs9r txvbqbdr8 txvbqbf6i txvbqbuse txvbqbuyj txvbqbuyg", I = "_1kley2d1b txvbqbusr txvbqbs9r";
+var e = "_1kley2d0 txvbqbdr8 txvbqb17w0 txvbqb196j txvbqb191j", t = "_1kley2d1 txvbqbyo5 txvbqbzlq txvbqb10jb txvbqbvve txvbqbipm txvbqbi1c txvbqbdxd txvbqbt9i", n = "_1kley2d2 txvbqbipm txvbqbs9r txvbqbusr", r = "_1kley2d3 txvbqbdr8 txvbqbe8 txvbqbfeg txvbqbfft txvbqbt9i txvbqbf65 txvbqbf6s txvbqbi1f txvbqbi1c", i = "_1kley2d4 txvbqbi1f txvbqbi1c", a = "_1kley2d5 txvbqb11ki txvbqb16gq txvbqbipm txvbqbf7y txvbqbdr8 txvbqbusr", o = "_1kley2d6", s = "_1kley2d7", c = "_1kley2d9 _1kley2d8 txvbqbdr8 txvbqbi1f", l = "_1kley2da", u = "_1kley2db", d = "_1kley2dc txvbqbdq5 txvbqbdsl txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv txvbqbf7y", f = "_1kley2de _1kley2dd txvbqbdsb txvbqbdqf txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv txvbqbf7y txvbqb7g txvbqb76 txvbqb7t", p = "_1kley2df txvbqbdq5 txvbqbdsl txvbqb11kv txvbqb11jp txvbqb11l8 txvbqb11ml txvbqb16gq txvbqb16i3 txvbqb18w4 txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv", m = "_1kley2dg txvbqbdxd txvbqbi1f txvbqbt9i txvbqbs9r txvbqbdr8 txvbqbf6i txvbqb196b txvbqbusr txvbqb2gm txvbqb1uy txvbqb2et txvbqb17u txvbqbclc", h = "_1kley2dh txvbqbs9r txvbqbusr", g = "_1kley2di txvbqbi1f txvbqbi1c", _ = "_1kley2dj txvbqbdr8 txvbqbf6i txvbqbs9r txvbqbi1f txvbqbi1c", v = "_1kley2dk txvbqbdyg txvbqb196b txvbqb2gz txvbqb1uy txvbqb2et txvbqb17u", y = "_1kley2dl txvbqb11ki txvbqb16gq txvbqb18v1 txvbqbdr8 txvbqbf6i txvbqbffj txvbqb196b txvbqb1g5 txvbqb2et txvbqb8oi txvbqb577 txvbqbyp8 txvbqbzmt txvbqbvve txvbqb10jo", b = "_1kley2dm txvbqbdr8 txvbqbf91 txvbqbel txvbqbjus txvbqbffw txvbqb17w0", x = "_1kley2dn txvbqbdr8 txvbqbey txvbqbffj txvbqbdxd txvbqbt9i", S = "_1kley2do txvbqbdr8 txvbqbf6i txvbqbff6 txvbqbt9i", C = "_1kley2dp txvbqbdr8 txvbqbf91 txvbqbey txvbqbcta txvbqb12j6 txvbqbm8d txvbqbm9g txvbqbux3 txvbqb19cb txvbqb96", w = "_1kley2dq txvbqbdr8 txvbqbey txvbqbfet txvbqbs26", T = "_1kley2ds _1kley2dr txvbqb19c9 txvbqb3f txvbqbfcn txvbqbusr txvbqb16g0 txvbqb18xk", E = "_1kley2dt txvbqb19c9 txvbqbfd0 txvbqbusr txvbqb16g0 txvbqb18xk", D = "_1kley2du txvbqb19cl txvbqb96", O = "_1kley2dv txvbqbdr8 txvbqbf91 txvbqbff6 txvbqbju2", k = "_1kley2dw txvbqbdsb", A = "_1kley2dx txvbqbdxd txvbqbs9r txvbqbdr8 txvbqbf6i txvbqbuse txvbqbuyj txvbqbuyg", j = "_1kley2dy txvbqbusr txvbqbs9r";
 //#endregion
-export { j as actionGroup, k as breadcrumbCurrent, D as breadcrumbItem, O as breadcrumbLink, E as breadcrumbList, T as breadcrumbNav, A as breadcrumbSeparator, F as content, I as contentContained, f as desktopSidebarToggle, S as header, w as headerLeading, C as headerRow, m as mainColumn, h as mainColumnContained, g as mainColumnWithSidePanel, l as mobileSidebarBackdrop, u as mobileSidebarBackdropOpen, p as mobileSidebarClose, d as mobileSidebarToggle, n as page, r as pageContained, i as pageWithSidePanel, M as secondaryAction, t as shell, _ as sidePanel, y as sidePanelResizable, b as sidePanelResizer, x as sidePanelResizerHiddenOnMobile, v as sidePanelSurface, a as sidebarColumn, o as sidebarColumnMobile, s as sidebarColumnMobileOpen, c as sidebarInner, P as tabRecipe, N as tabsRow };
+export { O as actionGroup, E as breadcrumbCurrent, w as breadcrumbItem, T as breadcrumbLink, C as breadcrumbList, S as breadcrumbNav, D as breadcrumbSeparator, A as content, j as contentContained, f as desktopSidebarToggle, y as header, x as headerLeading, b as headerRow, m as mainColumn, h as mainColumnContained, g as mainColumnWithSidePanel, l as mobileSidebarBackdrop, u as mobileSidebarBackdropOpen, p as mobileSidebarClose, d as mobileSidebarToggle, t as page, n as pageContained, i as pageSplitView, r as pageWithSidePanel, k as secondaryAction, e as shell, _ as sidePanel, v as sidePanelSurface, a as sidebarColumn, o as sidebarColumnMobile, s as sidebarColumnMobileOpen, c as sidebarInner };
 
 //# sourceMappingURL=PageShell.css.js.map

package/lib/esm/components/layout/PageShell.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageShell.css.js","names":[],"sources":["../../../../src/components/layout/PageShell.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 1023px)';\n\nexport const shell = sprinkles({\n  display: 'flex',\n  width: 'full',\n  backgroundColor: 'background',\n  backgroundImage: 'pageShellSurface',\n});\n\nexport const page = sprinkles({\n  paddingLeft: 2,\n  paddingRight: 2,\n  paddingTop: 2,\n  paddingBottom: 2,\n  height: {\n    base: 'screen',\n    max1023: 'auto',\n  },\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const pageContained = sprinkles({\n  height: 'screen',\n  minHeight: 0,\n  overflow: 'hidden',\n});\n\nexport const pageWithSidePanel = sprinkles({\n  display: 'flex',\n  alignItems: 'stretch',\n  gap: {\n    base: 0,\n    max1023: 3,\n  },\n  minWidth: 0,\n  flexDirection: {\n    base: 'row',\n    max1023: 'column',\n  },\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidebarColumn = sprinkles({\n  position: 'sticky',\n  top: 0,\n  height: 'screen',\n  flexShrink: 0,\n  display: 'flex',\n  overflow: 'hidden',\n});\n\nexport const sidebarColumnMobile = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      position: 'fixed',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      width: '20rem',\n      maxWidth: '85vw',\n      transform: 'translateX(-100%)',\n      transitionProperty: 'transform',\n      transitionDuration: vars.transitionDuration[200],\n      transitionTimingFunction: vars.transitionTimingFunction.ease,\n      zIndex: vars.zIndex[30],\n      backgroundColor: vars.colors.surface,\n      borderRight: `1px solid ${vars.colors.borderSubtle}`,\n    },\n  },\n});\n\nexport const sidebarColumnMobileOpen = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      transform: 'translateX(0)',\n    },\n  },\n});\n\nexport const sidebarInner = style([\n  sprinkles({\n    display: 'flex',\n    height: 'full',\n  }),\n  {\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        paddingTop: '3.75rem',\n      },\n    },\n  },\n]);\n\nexport const mobileSidebarBackdrop = style({\n  display: 'none',\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      display: 'block',\n      position: 'fixed',\n      inset: 0,\n      backgroundColor: 'rgba(15, 23, 42, 0.32)',\n      opacity: 0,\n      pointerEvents: 'none',\n      transitionProperty: 'opacity',\n      transitionDuration: vars.transitionDuration[200],\n      transitionTimingFunction: vars.transitionTimingFunction.ease,\n      zIndex: vars.zIndex[20],\n    },\n  },\n});\n\nexport const mobileSidebarBackdropOpen = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      opacity: 1,\n      pointerEvents: 'auto',\n    },\n  },\n});\n\nexport const mobileSidebarToggle = sprinkles({\n  display: {\n    base: 'none',\n    max1023: 'inline-flex',\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10,\n  height: 10,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 'default',\n  borderColor: 'border',\n  backgroundColor: 'surface',\n  color: 'text',\n  cursor: 'pointer',\n  flexShrink: 0,\n});\n\nexport const desktopSidebarToggle = style([\n  sprinkles({\n    display: {\n      base: 'inline-flex',\n      max1023: 'none',\n    },\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 10,\n    height: 10,\n    borderRadius: 'lg',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n    borderColor: 'border',\n    backgroundColor: 'surface',\n    color: 'text',\n    cursor: 'pointer',\n    flexShrink: 0,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        borderColor: vars.colors.primaryLight,\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.primary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const mobileSidebarClose = sprinkles({\n  display: {\n    base: 'none',\n    max1023: 'inline-flex',\n  },\n  position: {\n    base: 'static',\n    max1023: 'absolute',\n  },\n  right: {\n    base: 0,\n    max1023: 3,\n  },\n  top: {\n    base: 0,\n    max1023: 3,\n  },\n  zIndex: 40,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10,\n  height: 10,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 'default',\n  borderColor: 'border',\n  backgroundColor: 'surface',\n  color: 'text',\n  cursor: 'pointer',\n});\n\nexport const mainColumn = sprinkles({\n  flex: 1,\n  height: 'full',\n  minWidth: 0,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  backgroundColor: 'surface',\n  overflow: 'hidden',\n  borderRadius: 'lg',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  boxShadow: 'inkSoft',\n});\n\nexport const mainColumnContained = sprinkles({\n  minHeight: 0,\n  overflow: 'hidden',\n});\n\nexport const mainColumnWithSidePanel = sprinkles({\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidePanel = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minHeight: 0,\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidePanelSurface = sprinkles({\n  flex: 'none',\n  backgroundColor: 'surface',\n  borderRadius: 'xl',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n});\n\nexport const sidePanelResizable = style({\n  minWidth: '360px',\n  maxWidth: '50vw',\n});\n\nexport const sidePanelResizer = style([\n  sprinkles({\n    alignSelf: 'stretch',\n    backgroundColor: 'transparent',\n    cursor: 'col-resize',\n    flex: 'none',\n    minWidth: 4,\n    position: 'relative',\n    width: 4,\n  }),\n  {\n    selectors: {\n      '&::after': {\n        content: '',\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        width: '4px',\n        height: '96px',\n        transform: 'translate(-50%, -50%)',\n        borderRadius: vars.borderRadius.full,\n        backgroundColor: vars.colors.border,\n        boxShadow: vars.boxShadow.sm,\n        transitionProperty: 'default',\n        transitionDuration: vars.transitionDuration[120],\n        transitionTimingFunction: vars.transitionTimingFunction.ease,\n      },\n      '&:hover::after, &[data-active=\"true\"]::after': {\n        backgroundColor: vars.colors.primary,\n        boxShadow: `0 0 0 1px ${vars.colors.primaryLight}`,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const sidePanelResizerHiddenOnMobile = sprinkles({\n  display: {\n    base: 'block',\n    max1023: 'none',\n  },\n});\n\nexport const header = sprinkles({\n  position: 'sticky',\n  top: 0,\n  zIndex: 10,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  backgroundColor: 'surface',\n  borderWidth: 0,\n  borderStyle: 'solid',\n  borderBottomWidth: 'default',\n  borderBottomColor: 'borderSubtle',\n  paddingLeft: 5,\n  paddingRight: 5,\n  paddingBottom: 2,\n  paddingTop: 3,\n});\n\nexport const headerRow = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 4,\n  width: 'full',\n});\n\nexport const headerLeading = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const breadcrumbNav = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const breadcrumbList = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  columnGap: 2,\n  rowGap: 1,\n  listStyleType: 'none',\n  margin: 0,\n  padding: 0,\n  color: 'textSecondary',\n  fontSize: 'xs',\n});\n\nexport const breadcrumbItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1,\n  maxWidth: '12rem',\n});\n\nexport const breadcrumbLink = style([\n  sprinkles({\n    color: 'text',\n    textDecoration: 'none',\n    fontWeight: 'medium',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors['blue-600'],\n      },\n    },\n  },\n]);\n\nexport const breadcrumbCurrent = sprinkles({\n  color: 'text',\n  fontWeight: 'semibold',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const breadcrumbSeparator = sprinkles({\n  color: 'borderLight',\n  fontSize: 'xs',\n});\n\nexport const actionGroup = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  justifyContent: 'flex-end',\n});\n\nexport const secondaryAction = sprinkles({\n  display: 'inline-flex',\n});\n\nexport const tabsRow = sprinkles({\n  width: 'full',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nconst tabBase = style([\n  sprinkles({\n    alignItems: 'center',\n    backgroundColor: 'surfaceMuted',\n    borderRadius: 'lg',\n    color: 'textSecondary',\n    display: 'inline-flex',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    paddingBlock: 1.5,\n    paddingInline: 3,\n    textDecoration: 'none',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: tabBase,\n  variants: {\n    state: {\n      default: {},\n      active: sprinkles({\n        backgroundColor: 'blue-500',\n        color: 'white',\n        boxShadow: 'sm',\n      }),\n    },\n    mode: {\n      link: {},\n      static: sprinkles({\n        cursor: 'default',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n    mode: 'link',\n  },\n});\n\nexport const content = sprinkles({\n  flex: 1,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'auto',\n  padding: {\n    base: 4,\n    max1023: 3,\n  },\n});\n\nexport const contentContained = sprinkles({\n  overflow: 'hidden',\n  minHeight: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"PageShell.css.js","names":[],"sources":["../../../../src/components/layout/PageShell.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 1023px)';\n\nexport const shell = sprinkles({\n  display: 'flex',\n  width: 'full',\n  backgroundColor: 'background',\n  backgroundImage: 'pageShellSurface',\n});\n\nexport const page = sprinkles({\n  paddingLeft: 2,\n  paddingRight: 2,\n  paddingTop: 2,\n  paddingBottom: 2,\n  height: {\n    base: 'screen',\n    max1023: 'auto',\n  },\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const pageContained = sprinkles({\n  height: 'screen',\n  minHeight: 0,\n  overflow: 'hidden',\n});\n\nexport const pageWithSidePanel = sprinkles({\n  display: 'flex',\n  alignItems: 'stretch',\n  gap: {\n    base: 0,\n    max1023: 3,\n  },\n  minWidth: 0,\n  flexDirection: {\n    base: 'row',\n    max1023: 'column',\n  },\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const pageSplitView = sprinkles({\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidebarColumn = sprinkles({\n  position: 'sticky',\n  top: 0,\n  height: 'screen',\n  flexShrink: 0,\n  display: 'flex',\n  overflow: 'hidden',\n});\n\nexport const sidebarColumnMobile = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      position: 'fixed',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      width: '20rem',\n      maxWidth: '85vw',\n      transform: 'translateX(-100%)',\n      transitionProperty: 'transform',\n      transitionDuration: vars.transitionDuration[200],\n      transitionTimingFunction: vars.transitionTimingFunction.ease,\n      zIndex: vars.zIndex[30],\n      backgroundColor: vars.colors.surface,\n      borderRight: `1px solid ${vars.colors.borderSubtle}`,\n    },\n  },\n});\n\nexport const sidebarColumnMobileOpen = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      transform: 'translateX(0)',\n    },\n  },\n});\n\nexport const sidebarInner = style([\n  sprinkles({\n    display: 'flex',\n    height: 'full',\n  }),\n  {\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        paddingTop: '3.75rem',\n      },\n    },\n  },\n]);\n\nexport const mobileSidebarBackdrop = style({\n  display: 'none',\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      display: 'block',\n      position: 'fixed',\n      inset: 0,\n      backgroundColor: 'rgba(15, 23, 42, 0.32)',\n      opacity: 0,\n      pointerEvents: 'none',\n      transitionProperty: 'opacity',\n      transitionDuration: vars.transitionDuration[200],\n      transitionTimingFunction: vars.transitionTimingFunction.ease,\n      zIndex: vars.zIndex[20],\n    },\n  },\n});\n\nexport const mobileSidebarBackdropOpen = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      opacity: 1,\n      pointerEvents: 'auto',\n    },\n  },\n});\n\nexport const mobileSidebarToggle = sprinkles({\n  display: {\n    base: 'none',\n    max1023: 'inline-flex',\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10,\n  height: 10,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 'default',\n  borderColor: 'border',\n  backgroundColor: 'surface',\n  color: 'text',\n  cursor: 'pointer',\n  flexShrink: 0,\n});\n\nexport const desktopSidebarToggle = style([\n  sprinkles({\n    display: {\n      base: 'inline-flex',\n      max1023: 'none',\n    },\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 10,\n    height: 10,\n    borderRadius: 'lg',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n    borderColor: 'border',\n    backgroundColor: 'surface',\n    color: 'text',\n    cursor: 'pointer',\n    flexShrink: 0,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        borderColor: vars.colors.primaryLight,\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.primary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const mobileSidebarClose = sprinkles({\n  display: {\n    base: 'none',\n    max1023: 'inline-flex',\n  },\n  position: {\n    base: 'static',\n    max1023: 'absolute',\n  },\n  right: {\n    base: 0,\n    max1023: 3,\n  },\n  top: {\n    base: 0,\n    max1023: 3,\n  },\n  zIndex: 40,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10,\n  height: 10,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 'default',\n  borderColor: 'border',\n  backgroundColor: 'surface',\n  color: 'text',\n  cursor: 'pointer',\n});\n\nexport const mainColumn = sprinkles({\n  flex: 1,\n  height: 'full',\n  minWidth: 0,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  backgroundColor: 'surface',\n  overflow: 'hidden',\n  borderRadius: 'lg',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  boxShadow: 'inkSoft',\n});\n\nexport const mainColumnContained = sprinkles({\n  minHeight: 0,\n  overflow: 'hidden',\n});\n\nexport const mainColumnWithSidePanel = sprinkles({\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidePanel = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minHeight: 0,\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidePanelSurface = sprinkles({\n  flex: 'none',\n  backgroundColor: 'surface',\n  borderRadius: 'xl',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n});\n\nexport const header = sprinkles({\n  position: 'sticky',\n  top: 0,\n  zIndex: 10,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  backgroundColor: 'surface',\n  borderWidth: 0,\n  borderStyle: 'solid',\n  borderBottomWidth: 'default',\n  borderBottomColor: 'borderSubtle',\n  paddingLeft: 5,\n  paddingRight: 5,\n  paddingBottom: 2,\n  paddingTop: 3,\n});\n\nexport const headerRow = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 4,\n  width: 'full',\n});\n\nexport const headerLeading = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const breadcrumbNav = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const breadcrumbList = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  columnGap: 2,\n  rowGap: 1,\n  listStyleType: 'none',\n  margin: 0,\n  padding: 0,\n  color: 'textSecondary',\n  fontSize: 'xs',\n});\n\nexport const breadcrumbItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1,\n  maxWidth: '12rem',\n});\n\nexport const breadcrumbLink = style([\n  sprinkles({\n    color: 'text',\n    textDecoration: 'none',\n    fontWeight: 'medium',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors['blue-600'],\n      },\n    },\n  },\n]);\n\nexport const breadcrumbCurrent = sprinkles({\n  color: 'text',\n  fontWeight: 'semibold',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const breadcrumbSeparator = sprinkles({\n  color: 'borderLight',\n  fontSize: 'xs',\n});\n\nexport const actionGroup = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  justifyContent: 'flex-end',\n});\n\nexport const secondaryAction = sprinkles({\n  display: 'inline-flex',\n});\n\nexport const content = sprinkles({\n  flex: 1,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'auto',\n  padding: {\n    base: 4,\n    max1023: 3,\n  },\n});\n\nexport const contentContained = sprinkles({\n  overflow: 'hidden',\n  minHeight: 0,\n});\n"],"mappings":""}