@plumile/ui 0.1.56 → 0.1.57

package/lib/esm/components/data-table/tableBreakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableBreakpoints.js","sources":["../../../../src/components/data-table/tableBreakpoints.ts"],"sourcesContent":["import { containerQueries } from '../../theme/containerQueries.js';\n\n/**\n * Les tableaux reposent sur les mêmes largeurs minimales que les container queries\n * globales. On dérive donc les valeurs dynamiquement afin d'éviter tout décalage\n * entre la visibilité des colonnes (minVisibleAt) et la grille CSS des composants\n * qui consomment DataTable.\n */\n\nconst MIN_WIDTH_REGEX = /\\(min-width:\\s*(\\d+(?:\\.\\d+)?)px\\)/i;\n\nconst DATA_TABLE_BREAKPOINT_KEYS = ['sm', 'md', 'lg', 'xl', 'xxl'] as const;\n\nexport type DataTableBreakpoint = (typeof DATA_TABLE_BREAKPOINT_KEYS)[number];\n\n/**\n * Extrait la valeur numérique d'une media query `(min-width: XXXpx)`.\n */\nfunction parseMinWidth(key: DataTableBreakpoint, query: string): number {\n  const match = MIN_WIDTH_REGEX.exec(query);\n  if (match == null) {\n    throw new Error(\n      `[DataTable] Format de media query inattendu pour le point de rupture « ${key} » : ${query}`,\n    );\n  }\n\n  const [, value] = match;\n  if (value == null) {\n    throw new Error(\n      `[DataTable] Impossible d'extraire la valeur numérique pour le point de rupture « ${key} » à partir de la media query : ${query}`,\n    );\n  }\n  return Number.parseFloat(value);\n}\n\n/**\n * Retourne la media query déclarée pour un point de rupture donné, avec\n * diagnostic explicite si elle est absente.\n */\nfunction requireContainerQuery(key: DataTableBreakpoint): string {\n  const query = containerQueries[key] as string | undefined;\n  if (query == null) {\n    throw new Error(\n      `[DataTable] Aucun container query défini pour le point de rupture « ${key} ».`,\n    );\n  }\n\n  return query;\n}\n\n/**\n * Construit le mapping des breakpoints DataTable en se synchronisant sur les\n * container queries globales.\n */\nfunction computeBreakpoints(): Record<DataTableBreakpoint, number> {\n  const result = {} as Record<DataTableBreakpoint, number>;\n\n  for (const key of DATA_TABLE_BREAKPOINT_KEYS) {\n    const query = requireContainerQuery(key);\n    result[key] = parseMinWidth(key, query);\n  }\n\n  return result;\n}\n\nexport const DATA_TABLE_BREAKPOINTS = Object.freeze(computeBreakpoints());\n\nexport const DATA_TABLE_BREAKPOINT_ENTRIES: readonly [\n  DataTableBreakpoint,\n  number,\n][] = Object.entries(DATA_TABLE_BREAKPOINTS).map(([key, value]) => {\n  return [key as DataTableBreakpoint, value];\n});\n"],"names":["MIN_WIDTH_REGEX","DATA_TABLE_BREAKPOINT_KEYS","parseMinWidth","key","query","match","value","requireContainerQuery","containerQueries","computeBreakpoints","result","DATA_TABLE_BREAKPOINTS","DATA_TABLE_BREAKPOINT_ENTRIES"],"mappings":";AASA,MAAMA,IAAkB,uCAElBC,IAA6B,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK;AAOjE,SAASC,EAAcC,GAA0BC,GAAuB;AACtE,QAAMC,IAAQL,EAAgB,KAAKI,CAAK;AACxC,MAAIC,KAAS;AACX,UAAM,IAAI;AAAA,MACR,0EAA0EF,CAAG,QAAQC,CAAK;AAAA,IAAA;AAI9F,QAAM,CAAA,EAAGE,CAAK,IAAID;AAClB,MAAIC,KAAS;AACX,UAAM,IAAI;AAAA,MACR,oFAAoFH,CAAG,mCAAmCC,CAAK;AAAA,IAAA;AAGnI,SAAO,OAAO,WAAWE,CAAK;AAChC;AAMA,SAASC,EAAsBJ,GAAkC;AAC/D,QAAMC,IAAQI,EAAiBL,CAAG;AAClC,MAAIC,KAAS;AACX,UAAM,IAAI;AAAA,MACR,uEAAuED,CAAG;AAAA,IAAA;AAI9E,SAAOC;AACT;AAMA,SAASK,IAA0D;AACjE,QAAMC,IAAS,CAAA;AAEf,aAAWP,KAAOF,GAA4B;AAC5C,UAAMG,IAAQG,EAAsBJ,CAAG;AACvC,IAAAO,EAAOP,CAAG,IAAID,EAAcC,GAAKC,CAAK;AAAA,EACxC;AAEA,SAAOM;AACT;AAEO,MAAMC,IAAyB,OAAO,OAAOF,EAAA,CAAoB,GAE3DG,IAGP,OAAO,QAAQD,CAAsB,EAAE,IAAI,CAAC,CAACR,GAAKG,CAAK,MACpD,CAACH,GAA4BG,CAAK,CAC1C;"}
+{"version":3,"file":"tableBreakpoints.js","names":[],"sources":["../../../../src/components/data-table/tableBreakpoints.ts"],"sourcesContent":["import { containerQueries } from '../../theme/containerQueries.js';\n\n/**\n * Les tableaux reposent sur les mêmes largeurs minimales que les container queries\n * globales. On dérive donc les valeurs dynamiquement afin d'éviter tout décalage\n * entre la visibilité des colonnes (minVisibleAt) et la grille CSS des composants\n * qui consomment DataTable.\n */\n\nconst MIN_WIDTH_REGEX = /\\(min-width:\\s*(\\d+(?:\\.\\d+)?)px\\)/i;\n\nconst DATA_TABLE_BREAKPOINT_KEYS = ['sm', 'md', 'lg', 'xl', 'xxl'] as const;\n\nexport type DataTableBreakpoint = (typeof DATA_TABLE_BREAKPOINT_KEYS)[number];\n\n/**\n * Extrait la valeur numérique d'une media query `(min-width: XXXpx)`.\n */\nfunction parseMinWidth(key: DataTableBreakpoint, query: string): number {\n  const match = MIN_WIDTH_REGEX.exec(query);\n  if (match == null) {\n    throw new Error(\n      `[DataTable] Format de media query inattendu pour le point de rupture « ${key} » : ${query}`,\n    );\n  }\n\n  const [, value] = match;\n  if (value == null) {\n    throw new Error(\n      `[DataTable] Impossible d'extraire la valeur numérique pour le point de rupture « ${key} » à partir de la media query : ${query}`,\n    );\n  }\n  return Number.parseFloat(value);\n}\n\n/**\n * Retourne la media query déclarée pour un point de rupture donné, avec\n * diagnostic explicite si elle est absente.\n */\nfunction requireContainerQuery(key: DataTableBreakpoint): string {\n  const query = containerQueries[key] as string | undefined;\n  if (query == null) {\n    throw new Error(\n      `[DataTable] Aucun container query défini pour le point de rupture « ${key} ».`,\n    );\n  }\n\n  return query;\n}\n\n/**\n * Construit le mapping des breakpoints DataTable en se synchronisant sur les\n * container queries globales.\n */\nfunction computeBreakpoints(): Record<DataTableBreakpoint, number> {\n  const result = {} as Record<DataTableBreakpoint, number>;\n\n  for (const key of DATA_TABLE_BREAKPOINT_KEYS) {\n    const query = requireContainerQuery(key);\n    result[key] = parseMinWidth(key, query);\n  }\n\n  return result;\n}\n\nexport const DATA_TABLE_BREAKPOINTS = Object.freeze(computeBreakpoints());\n\nexport const DATA_TABLE_BREAKPOINT_ENTRIES: readonly [\n  DataTableBreakpoint,\n  number,\n][] = Object.entries(DATA_TABLE_BREAKPOINTS).map(([key, value]) => {\n  return [key as DataTableBreakpoint, value];\n});\n"],"mappings":";;AASA,IAAM,IAAkB,uCAElB,IAA6B;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAOlE,SAAS,EAAc,GAA0B,GAAuB;CACtE,IAAM,IAAQ,EAAgB,KAAK,EAAM;AACzC,KAAI,KAAS,KACX,OAAU,MACR,0EAA0E,EAAI,OAAO,IACtF;CAGH,IAAM,GAAG,KAAS;AAClB,KAAI,KAAS,KACX,OAAU,MACR,oFAAoF,EAAI,kCAAkC,IAC3H;AAEH,QAAO,OAAO,WAAW,EAAM;;AAOjC,SAAS,EAAsB,GAAkC;CAC/D,IAAM,IAAQ,EAAiB;AAC/B,KAAI,KAAS,KACX,OAAU,MACR,uEAAuE,EAAI,KAC5E;AAGH,QAAO;;AAOT,SAAS,IAA0D;CACjE,IAAM,IAAS,EAAE;AAEjB,MAAK,IAAM,KAAO,EAEhB,GAAO,KAAO,EAAc,GADd,EAAsB,EAAI,CACD;AAGzC,QAAO;;AAGT,IAAa,IAAyB,OAAO,OAAO,GAAoB,CAAC,EAE5D,IAGP,OAAO,QAAQ,EAAuB,CAAC,KAAK,CAAC,GAAK,OAC/C,CAAC,GAA4B,EAAM,CAC1C"}

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

@@ -1,18 +1,8 @@
-/* empty css                                       */
-/* empty css                                 */
-var v = "_17ichq70 txvbqbu6f txvbqb9io txvbqbdof", q = "_17ichq71 txvbqbu6f txvbqb9io txvbqbai6 txvbqbap6", x = "_17ichq72 txvbqb9io txvbqbajx txvbqbaoo txvbqbcf txvbqbdoo", o = "_17ichq73 txvbqb9io txvbqbai6 txvbqbanx txvbqbk4x", a = "_17ichq74 txvbqb9x txvbqbf76 txvbqbamo txvbqbv8p txvbqbfbo", i = "_17ichq75 txvbqb96 txvbqbv8r txvbqbfbo", r = "_17ichq76 txvbqb9io txvbqbco txvbqbajx txvbqbao6", c = "_17ichq77 txvbqb9io txvbqbajx txvbqbao6 txvbqbdo6", e = "_17ichq78 txvbqb9jf", h = "_17ichq79 txvbqb9io txvbqbai6 txvbqbap6", _ = "_17ichq7a txvbqbpso txvbqbdpf txvbqb83o txvbqbu6f txvbqb9io txvbqbdnx txvbqb2k txvbqbn86", n = "_17ichq7b txvbqb2l";
-export {
-  c as actionCluster,
-  e as actionClusterItem,
-  h as body,
-  _ as bottomFloatArea,
-  n as bottomFloatContent,
-  x as header,
-  o as headingGroup,
-  q as inner,
-  r as metaRow,
-  v as section,
-  i as subheader,
-  a as title
-};
-//# sourceMappingURL=ContentLayout.css.js.map
+/* empty css                                   */
+/* empty css                             */
+//#region src/components/layout/ContentLayout.css.ts
+var e = "_17ichq70 txvbqbu6f txvbqb9io txvbqbdof", t = "_17ichq71 txvbqbu6f txvbqb9io txvbqbai6 txvbqbap6", n = "_17ichq72 txvbqb9io txvbqbajx txvbqbaoo txvbqbcf txvbqbdoo", r = "_17ichq73 txvbqb9io txvbqbai6 txvbqbanx txvbqbk4x", i = "_17ichq74 txvbqb9x txvbqbf76 txvbqbamo txvbqbv8p txvbqbfbo", a = "_17ichq75 txvbqb96 txvbqbv8r txvbqbfbo", o = "_17ichq76 txvbqb9io txvbqbco txvbqbajx txvbqbao6", s = "_17ichq77 txvbqb9io txvbqbajx txvbqbao6 txvbqbdo6", c = "_17ichq78 txvbqb9jf", l = "_17ichq79 txvbqb9io txvbqbai6 txvbqbap6", u = "_17ichq7a txvbqbpso txvbqbdpf txvbqb83o txvbqbu6f txvbqb9io txvbqbdnx txvbqb2k txvbqbn86", d = "_17ichq7b txvbqb2l";
+//#endregion
+export { s as actionCluster, c as actionClusterItem, l as body, u as bottomFloatArea, d as bottomFloatContent, n as header, r as headingGroup, t as inner, o as metaRow, e as section, a as subheader, i as title };
+
+//# sourceMappingURL=ContentLayout.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"ContentLayout.css.js","names":[],"sources":["../../../../src/components/layout/ContentLayout.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const section = sprinkles({\n  width: 'full',\n  display: 'flex',\n  justifyContent: 'flex-start',\n});\n\nexport const inner = sprinkles({\n  width: 'full',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 4,\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n});\n\nexport const headingGroup = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const title = sprinkles({\n  fontSize: '2xl',\n  lineHeight: '2xl',\n  fontWeight: 'semibold',\n  color: 'text',\n  margin: 0,\n});\n\nexport const subheader = sprinkles({\n  fontSize: 'base',\n  color: 'textSecondary',\n  margin: 0,\n});\n\nexport const metaRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const actionCluster = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  justifyContent: 'flex-end',\n});\n\nexport const actionClusterItem = sprinkles({\n  display: 'inline-flex',\n});\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const bottomFloatArea = sprinkles({\n  position: 'fixed',\n  left: 0,\n  bottom: 6,\n  width: 'full',\n  display: 'flex',\n  justifyContent: 'center',\n  pointerEvents: 'none',\n  paddingInline: 4,\n});\n\nexport const bottomFloatContent = sprinkles({\n  pointerEvents: 'auto',\n});\n"],"mappings":""}

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

@@ -1,79 +1,69 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import { actionClusterItem as b, bottomFloatContent as H, bottomFloatArea as _, actionCluster as B, title as I, subheader as L, metaRow as R, headingGroup as E, header as G, body as M, inner as $, section as j } from "./ContentLayout.css.js";
-import { cx as n } from "../../theme/tools.js";
-const w = 320, S = 48, U = (e, l) => e == null ? null : typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ o("h1", { className: l, children: e }) : /* @__PURE__ */ o("div", { className: l, children: e }), D = (e, l) => e == null ? null : typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ o("p", { className: l, children: e }) : /* @__PURE__ */ o("div", { className: l, children: e }), J = (e) => {
-  const {
-    bottomFloat: l,
-    classes: t,
-    children: y,
-    className: F,
-    contentClassName: g,
-    mainAction: i,
-    meta: s,
-    secondaryActions: d = [],
-    subheader: m,
-    title: u
-  } = e;
-  let a = 0;
-  if (l != null) {
-    const c = l.reservedHeight ?? w;
-    a = Math.max(c, 0);
-  }
-  let h;
-  a > 0 && (h = {
-    paddingBottom: a + S
-  });
-  const f = i != null || d.length > 0;
-  let N = null;
-  i != null && (N = /* @__PURE__ */ o("div", { className: n(b, t?.actionClusterItem), children: i }));
-  let p = null;
-  l != null && (p = /* @__PURE__ */ o("div", { className: n(_, t?.bottomFloatArea), children: /* @__PURE__ */ o(
-    "div",
-    {
-      className: n(H, t?.bottomFloatContent),
-      children: l.node
-    }
-  ) }));
-  let v = null;
-  f && (v = /* @__PURE__ */ r("div", { className: n(B, t?.actionCluster), children: [
-    d.map((c, x) => /* @__PURE__ */ o(
-      "div",
-      {
-        className: n(
-          b,
-          t?.actionClusterItem
-        ),
-        children: c
-      },
-      `secondary-${x}`
-    )),
-    N
-  ] }));
-  const A = n(I, t?.title), T = n(L, t?.subheader), O = n(R, t?.metaRow);
-  let C = null;
-  return s != null && (C = /* @__PURE__ */ o("div", { className: O, children: s })), /* @__PURE__ */ r(
-    "section",
-    {
-      className: n(j, t?.section, F),
-      style: h,
-      children: [
-        /* @__PURE__ */ r("div", { className: n($, t?.inner, g), children: [
-          (u != null || m != null || s != null || f) && /* @__PURE__ */ r("div", { className: n(G, t?.header), children: [
-            /* @__PURE__ */ r("div", { className: n(E, t?.headingGroup), children: [
-              U(u, A),
-              D(m, T),
-              C
-            ] }),
-            v
-          ] }),
-          /* @__PURE__ */ o("div", { className: n(M, t?.body), children: y })
-        ] }),
-        p
-      ]
-    }
-  );
+import { cx as e } from "../../theme/tools.js";
+import { actionCluster as t, actionClusterItem as n, body as r, bottomFloatArea as i, bottomFloatContent as a, inner as o, metaRow as s, section as c, subheader as l, title as u } from "./ContentLayout.css.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/layout/ContentLayout.tsx
+var p = 320, m = 48, h = (e, t) => e == null ? null : d(typeof e == "string" || typeof e == "number" ? "h1" : "div", {
+	className: t,
+	children: e
+}), g = (e, t) => e == null ? null : d(typeof e == "string" || typeof e == "number" ? "p" : "div", {
+	className: t,
+	children: e
+}), _ = (_) => {
+	let { bottomFloat: v, classes: y, children: b, className: x, contentClassName: S, mainAction: C, meta: w, secondaryActions: T = [], subheader: E, title: D } = _, O = 0;
+	if (v != null) {
+		let e = v.reservedHeight ?? p;
+		O = Math.max(e, 0);
+	}
+	let k;
+	O > 0 && (k = { paddingBottom: O + m });
+	let A = C != null || T.length > 0, j = null;
+	C != null && (j = /* @__PURE__ */ d("div", {
+		className: e(n, y?.actionClusterItem),
+		children: C
+	}));
+	let M = null;
+	v != null && (M = /* @__PURE__ */ d("div", {
+		className: e(i, y?.bottomFloatArea),
+		children: /* @__PURE__ */ d("div", {
+			className: e(a, y?.bottomFloatContent),
+			children: v.node
+		})
+	}));
+	let N = null;
+	A && (N = /* @__PURE__ */ f("div", {
+		className: e(t, y?.actionCluster),
+		children: [T.map((t, r) => /* @__PURE__ */ d("div", {
+			className: e(n, y?.actionClusterItem),
+			children: t
+		}, `secondary-${r}`)), j]
+	}));
+	let P = e(u, y?.title), F = e(l, y?.subheader), I = e(s, y?.metaRow), L = null;
+	return w != null && (L = /* @__PURE__ */ d("div", {
+		className: I,
+		children: w
+	})), /* @__PURE__ */ f("section", {
+		className: e(c, y?.section, x),
+		style: k,
+		children: [/* @__PURE__ */ f("div", {
+			className: e(o, y?.inner, S),
+			children: [(D != null || E != null || w != null || A) && /* @__PURE__ */ f("div", {
+				className: e("_17ichq72 txvbqb9io txvbqbajx txvbqbaoo txvbqbcf txvbqbdoo", y?.header),
+				children: [/* @__PURE__ */ f("div", {
+					className: e("_17ichq73 txvbqb9io txvbqbai6 txvbqbanx txvbqbk4x", y?.headingGroup),
+					children: [
+						h(D, P),
+						g(E, F),
+						L
+					]
+				}), N]
+			}), /* @__PURE__ */ d("div", {
+				className: e(r, y?.body),
+				children: b
+			})]
+		}), M]
+	});
 };
-export {
-  J as ContentLayout
-};
-//# sourceMappingURL=ContentLayout.js.map
+//#endregion
+export { _ as ContentLayout };
+
+//# sourceMappingURL=ContentLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.js","sources":["../../../../src/components/layout/ContentLayout.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport * as styles from './ContentLayout.css.js';\nimport { cx } from '../../theme/tools.js';\n\nexport type BottomFloatConfig = {\n  node: ReactNode;\n  reservedHeight?: number;\n};\n\ntype ContentLayoutSlot =\n  | 'section'\n  | 'inner'\n  | 'header'\n  | 'headingGroup'\n  | 'title'\n  | 'subheader'\n  | 'metaRow'\n  | 'actionCluster'\n  | 'actionClusterItem'\n  | 'body'\n  | 'bottomFloatArea'\n  | 'bottomFloatContent';\n\ntype SlotClasses<TSlot extends string> = Partial<Record<TSlot, string>>;\n\nexport type ContentLayoutProps = {\n  title?: ReactNode;\n  subheader?: ReactNode;\n  mainAction?: ReactNode;\n  secondaryActions?: ReactNode[];\n  meta?: ReactNode;\n  children: ReactNode;\n  bottomFloat?: BottomFloatConfig;\n  className?: string;\n  contentClassName?: string;\n  classes?: SlotClasses<ContentLayoutSlot>;\n};\n\nconst DEFAULT_BOTTOM_FLOAT_HEIGHT = 320;\nconst BOTTOM_FLOAT_BUFFER = 48;\n\nconst renderTitle = (\n  title: ReactNode | undefined,\n  className: string,\n): ReactNode => {\n  if (title == null) {\n    return null;\n  }\n\n  if (typeof title === 'string' || typeof title === 'number') {\n    return <h1 className={className}>{title}</h1>;\n  }\n\n  return <div className={className}>{title}</div>;\n};\n\nconst renderSubheader = (\n  subheader: ReactNode | undefined,\n  className: string,\n): ReactNode => {\n  if (subheader == null) {\n    return null;\n  }\n\n  if (typeof subheader === 'string' || typeof subheader === 'number') {\n    return <p className={className}>{subheader}</p>;\n  }\n\n  return <div className={className}>{subheader}</div>;\n};\n\nexport const ContentLayout = (props: ContentLayoutProps): JSX.Element => {\n  const {\n    bottomFloat,\n    classes,\n    children,\n    className,\n    contentClassName,\n    mainAction,\n    meta,\n    secondaryActions = [],\n    subheader,\n    title,\n  } = props;\n\n  let reservedHeight = 0;\n  if (bottomFloat != null) {\n    const floatHeight =\n      bottomFloat.reservedHeight ?? DEFAULT_BOTTOM_FLOAT_HEIGHT;\n    reservedHeight = Math.max(floatHeight, 0);\n  }\n\n  let paddingStyles: CSSProperties | undefined;\n  if (reservedHeight > 0) {\n    paddingStyles = {\n      paddingBottom: reservedHeight + BOTTOM_FLOAT_BUFFER,\n    };\n  }\n\n  const shouldRenderActions = mainAction != null || secondaryActions.length > 0;\n  let mainActionNode: JSX.Element | null = null;\n  if (mainAction != null) {\n    mainActionNode = (\n      <div className={cx(styles.actionClusterItem, classes?.actionClusterItem)}>\n        {mainAction}\n      </div>\n    );\n  }\n\n  let bottomFloatNode: JSX.Element | null = null;\n  if (bottomFloat != null) {\n    bottomFloatNode = (\n      <div className={cx(styles.bottomFloatArea, classes?.bottomFloatArea)}>\n        <div\n          className={cx(styles.bottomFloatContent, classes?.bottomFloatContent)}\n        >\n          {bottomFloat.node}\n        </div>\n      </div>\n    );\n  }\n\n  let actionClusterNode: JSX.Element | null = null;\n  if (shouldRenderActions) {\n    actionClusterNode = (\n      <div className={cx(styles.actionCluster, classes?.actionCluster)}>\n        {secondaryActions.map((action, index) => {\n          return (\n            <div\n              key={`secondary-${index}`}\n              className={cx(\n                styles.actionClusterItem,\n                classes?.actionClusterItem,\n              )}\n            >\n              {action}\n            </div>\n          );\n        })}\n        {mainActionNode}\n      </div>\n    );\n  }\n\n  const titleClassName = cx(styles.title, classes?.title);\n  const subheaderClassName = cx(styles.subheader, classes?.subheader);\n  const metaClassName = cx(styles.metaRow, classes?.metaRow);\n  let metaNode: ReactNode | null = null;\n  if (meta != null) {\n    metaNode = <div className={metaClassName}>{meta}</div>;\n  }\n\n  return (\n    <section\n      className={cx(styles.section, classes?.section, className)}\n      style={paddingStyles}\n    >\n      <div className={cx(styles.inner, classes?.inner, contentClassName)}>\n        {(title != null ||\n          subheader != null ||\n          meta != null ||\n          shouldRenderActions) && (\n          <div className={cx(styles.header, classes?.header)}>\n            <div className={cx(styles.headingGroup, classes?.headingGroup)}>\n              {renderTitle(title, titleClassName)}\n              {renderSubheader(subheader, subheaderClassName)}\n              {metaNode}\n            </div>\n            {actionClusterNode}\n          </div>\n        )}\n\n        <div className={cx(styles.body, classes?.body)}>{children}</div>\n      </div>\n\n      {bottomFloatNode}\n    </section>\n  );\n};\n"],"names":["DEFAULT_BOTTOM_FLOAT_HEIGHT","BOTTOM_FLOAT_BUFFER","renderTitle","title","className","jsx","renderSubheader","subheader","ContentLayout","props","bottomFloat","classes","children","contentClassName","mainAction","meta","secondaryActions","reservedHeight","floatHeight","paddingStyles","shouldRenderActions","mainActionNode","cx","styles.actionClusterItem","bottomFloatNode","styles.bottomFloatArea","styles.bottomFloatContent","actionClusterNode","jsxs","styles.actionCluster","action","index","titleClassName","styles.title","subheaderClassName","styles.subheader","metaClassName","styles.metaRow","metaNode","styles.section","styles.inner","styles.header","styles.headingGroup","styles.body"],"mappings":"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"}
+{"version":3,"file":"ContentLayout.js","names":[],"sources":["../../../../src/components/layout/ContentLayout.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport * as styles from './ContentLayout.css.js';\nimport { cx } from '../../theme/tools.js';\n\nexport type BottomFloatConfig = {\n  node: ReactNode;\n  reservedHeight?: number;\n};\n\ntype ContentLayoutSlot =\n  | 'section'\n  | 'inner'\n  | 'header'\n  | 'headingGroup'\n  | 'title'\n  | 'subheader'\n  | 'metaRow'\n  | 'actionCluster'\n  | 'actionClusterItem'\n  | 'body'\n  | 'bottomFloatArea'\n  | 'bottomFloatContent';\n\ntype SlotClasses<TSlot extends string> = Partial<Record<TSlot, string>>;\n\nexport type ContentLayoutProps = {\n  title?: ReactNode;\n  subheader?: ReactNode;\n  mainAction?: ReactNode;\n  secondaryActions?: ReactNode[];\n  meta?: ReactNode;\n  children: ReactNode;\n  bottomFloat?: BottomFloatConfig;\n  className?: string;\n  contentClassName?: string;\n  classes?: SlotClasses<ContentLayoutSlot>;\n};\n\nconst DEFAULT_BOTTOM_FLOAT_HEIGHT = 320;\nconst BOTTOM_FLOAT_BUFFER = 48;\n\nconst renderTitle = (\n  title: ReactNode | undefined,\n  className: string,\n): ReactNode => {\n  if (title == null) {\n    return null;\n  }\n\n  if (typeof title === 'string' || typeof title === 'number') {\n    return <h1 className={className}>{title}</h1>;\n  }\n\n  return <div className={className}>{title}</div>;\n};\n\nconst renderSubheader = (\n  subheader: ReactNode | undefined,\n  className: string,\n): ReactNode => {\n  if (subheader == null) {\n    return null;\n  }\n\n  if (typeof subheader === 'string' || typeof subheader === 'number') {\n    return <p className={className}>{subheader}</p>;\n  }\n\n  return <div className={className}>{subheader}</div>;\n};\n\nexport const ContentLayout = (props: ContentLayoutProps): JSX.Element => {\n  const {\n    bottomFloat,\n    classes,\n    children,\n    className,\n    contentClassName,\n    mainAction,\n    meta,\n    secondaryActions = [],\n    subheader,\n    title,\n  } = props;\n\n  let reservedHeight = 0;\n  if (bottomFloat != null) {\n    const floatHeight =\n      bottomFloat.reservedHeight ?? DEFAULT_BOTTOM_FLOAT_HEIGHT;\n    reservedHeight = Math.max(floatHeight, 0);\n  }\n\n  let paddingStyles: CSSProperties | undefined;\n  if (reservedHeight > 0) {\n    paddingStyles = {\n      paddingBottom: reservedHeight + BOTTOM_FLOAT_BUFFER,\n    };\n  }\n\n  const shouldRenderActions = mainAction != null || secondaryActions.length > 0;\n  let mainActionNode: JSX.Element | null = null;\n  if (mainAction != null) {\n    mainActionNode = (\n      <div className={cx(styles.actionClusterItem, classes?.actionClusterItem)}>\n        {mainAction}\n      </div>\n    );\n  }\n\n  let bottomFloatNode: JSX.Element | null = null;\n  if (bottomFloat != null) {\n    bottomFloatNode = (\n      <div className={cx(styles.bottomFloatArea, classes?.bottomFloatArea)}>\n        <div\n          className={cx(styles.bottomFloatContent, classes?.bottomFloatContent)}\n        >\n          {bottomFloat.node}\n        </div>\n      </div>\n    );\n  }\n\n  let actionClusterNode: JSX.Element | null = null;\n  if (shouldRenderActions) {\n    actionClusterNode = (\n      <div className={cx(styles.actionCluster, classes?.actionCluster)}>\n        {secondaryActions.map((action, index) => {\n          return (\n            <div\n              key={`secondary-${index}`}\n              className={cx(\n                styles.actionClusterItem,\n                classes?.actionClusterItem,\n              )}\n            >\n              {action}\n            </div>\n          );\n        })}\n        {mainActionNode}\n      </div>\n    );\n  }\n\n  const titleClassName = cx(styles.title, classes?.title);\n  const subheaderClassName = cx(styles.subheader, classes?.subheader);\n  const metaClassName = cx(styles.metaRow, classes?.metaRow);\n  let metaNode: ReactNode | null = null;\n  if (meta != null) {\n    metaNode = <div className={metaClassName}>{meta}</div>;\n  }\n\n  return (\n    <section\n      className={cx(styles.section, classes?.section, className)}\n      style={paddingStyles}\n    >\n      <div className={cx(styles.inner, classes?.inner, contentClassName)}>\n        {(title != null ||\n          subheader != null ||\n          meta != null ||\n          shouldRenderActions) && (\n          <div className={cx(styles.header, classes?.header)}>\n            <div className={cx(styles.headingGroup, classes?.headingGroup)}>\n              {renderTitle(title, titleClassName)}\n              {renderSubheader(subheader, subheaderClassName)}\n              {metaNode}\n            </div>\n            {actionClusterNode}\n          </div>\n        )}\n\n        <div className={cx(styles.body, classes?.body)}>{children}</div>\n      </div>\n\n      {bottomFloatNode}\n    </section>\n  );\n};\n"],"mappings":";;;;AAuCA,IAAM,IAA8B,KAC9B,IAAsB,IAEtB,KACJ,GACA,MAEI,KAAS,OACJ,OAIA,EADL,OAAO,KAAU,YAAY,OAAO,KAAU,WACxC,OAGF,OAHC;CAAe;WAAY;CAAW,CAAA,EAM3C,KACJ,GACA,MAEI,KAAa,OACR,OAIA,EADL,OAAO,KAAc,YAAY,OAAO,KAAc,WAChD,MAGF,OAHC;CAAc;WAAY;CAAc,CAAA,EAMtC,KAAiB,MAA2C;CACvE,IAAM,EACJ,gBACA,YACA,aACA,cACA,qBACA,eACA,SACA,sBAAmB,EAAE,EACrB,WAAA,GACA,OAAA,MACE,GAEA,IAAiB;AACrB,KAAI,KAAe,MAAM;EACvB,IAAM,IACJ,EAAY,kBAAkB;AAChC,MAAiB,KAAK,IAAI,GAAa,EAAE;;CAG3C,IAAI;AACJ,CAAI,IAAiB,MACnB,IAAgB,EACd,eAAe,IAAiB,GACjC;CAGH,IAAM,IAAsB,KAAc,QAAQ,EAAiB,SAAS,GACxE,IAAqC;AACzC,CAAI,KAAc,SAChB,IACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAA0B,GAAS,kBAAkB;YACrE;EACG,CAAA;CAIV,IAAI,IAAsC;AAC1C,CAAI,KAAe,SACjB,IACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAwB,GAAS,gBAAgB;YAClE,kBAAC,OAAD;GACE,WAAW,EAAG,GAA2B,GAAS,mBAAmB;aAEpE,EAAY;GACT,CAAA;EACF,CAAA;CAIV,IAAI,IAAwC;AAC5C,CAAI,MACF,IACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAsB,GAAS,cAAc;YAAhE,CACG,EAAiB,KAAK,GAAQ,MAE3B,kBAAC,OAAD;GAEE,WAAW,EACT,GACA,GAAS,kBACV;aAEA;GACG,EAPC,aAAa,IAOd,CAER,EACD,EACG;;CAIV,IAAM,IAAiB,EAAG,GAAc,GAAS,MAAM,EACjD,IAAqB,EAAG,GAAkB,GAAS,UAAU,EAC7D,IAAgB,EAAG,GAAgB,GAAS,QAAQ,EACtD,IAA6B;AAKjC,QAJI,KAAQ,SACV,IAAW,kBAAC,OAAD;EAAK,WAAW;YAAgB;EAAW,CAAA,GAItD,kBAAC,WAAD;EACE,WAAW,EAAG,GAAgB,GAAS,SAAS,EAAU;EAC1D,OAAO;YAFT,CAIE,kBAAC,OAAD;GAAK,WAAW,EAAG,GAAc,GAAS,OAAO,EAAiB;aAAlE,EACI,KAAS,QACT,KAAa,QACb,KAAQ,QACR,MACA,kBAAC,OAAD;IAAK,WAAW,EAAG,8DAAe,GAAS,OAAO;cAAlD,CACE,kBAAC,OAAD;KAAK,WAAW,EAAG,qDAAqB,GAAS,aAAa;eAA9D;MACG,EAAY,GAAO,EAAe;MAClC,EAAgB,GAAW,EAAmB;MAC9C;MACG;QACL,EACG;OAGR,kBAAC,OAAD;IAAK,WAAW,EAAG,GAAa,GAAS,KAAK;IAAG;IAAe,CAAA,CAC5D;MAEL,EACO"}

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

@@ -1,11 +1,8 @@
-/* empty css                                       */
-/* empty css                                     */
-var v = "b55nf40 txvbqb9io txvbqbai6 txvbqbaoo txvbqbu6f", x = "b55nf41 txvbqbu6f txvbqb9io txvbqbdnx", a = "b55nf42 txvbqbu6f txvbqb9io txvbqbdnx", q = "b55nf43 txvbqbu6f", r = "b55nf44 txvbqbu6f";
-export {
-  r as panel,
-  q as panels,
-  x as tabsBar,
-  a as tabsInner,
-  v as wrapper
-};
-//# sourceMappingURL=TabsContentLayout.css.js.map
+/* empty css                                   */
+/* empty css                                 */
+//#region src/components/layout/TabsContentLayout.css.ts
+var e = "b55nf40 txvbqb9io txvbqbai6 txvbqbaoo txvbqbu6f", t = "b55nf41 txvbqbu6f txvbqb9io txvbqbdnx", n = "b55nf42 txvbqbu6f txvbqb9io txvbqbdnx", r = "b55nf43 txvbqbu6f", i = "b55nf44 txvbqbu6f";
+//#endregion
+export { i as panel, r as panels, t as tabsBar, n as tabsInner, e as wrapper };
+
+//# sourceMappingURL=TabsContentLayout.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsContentLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"TabsContentLayout.css.js","names":[],"sources":["../../../../src/components/layout/TabsContentLayout.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const wrapper = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  width: 'full',\n});\n\nexport const tabsBar = sprinkles({\n  width: 'full',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nexport const tabsInner = sprinkles({\n  width: 'full',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nexport const panels = sprinkles({\n  width: 'full',\n});\n\nexport const panel = sprinkles({\n  width: 'full',\n});\n"],"mappings":""}

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

@@ -1,14 +1,31 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { Tabs as i } from "../../atomic/molecules/tabs/Tabs.js";
-import { wrapper as l, tabsBar as c, tabsInner as o, panels as m, panel as d } from "./TabsContentLayout.css.js";
-const N = (s) => {
-  const { ariaLabel: e, children: r, tabs: n } = s;
-  return /* @__PURE__ */ t("div", { className: l, children: [
-    /* @__PURE__ */ a("div", { className: c, children: /* @__PURE__ */ a("div", { className: o, children: /* @__PURE__ */ a(i, { items: n, ariaLabel: e }) }) }),
-    /* @__PURE__ */ a("div", { className: m, children: /* @__PURE__ */ a("section", { role: "tabpanel", className: d, children: r }) })
-  ] });
+import { Tabs as e } from "../../atomic/molecules/tabs/Tabs.js";
+import { panel as t, panels as n, tabsBar as r, tabsInner as i, wrapper as a } from "./TabsContentLayout.css.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/layout/TabsContentLayout.tsx
+var c = (c) => {
+	let { ariaLabel: l, children: u, tabs: d } = c;
+	return /* @__PURE__ */ s("div", {
+		className: a,
+		children: [/* @__PURE__ */ o("div", {
+			className: r,
+			children: /* @__PURE__ */ o("div", {
+				className: i,
+				children: /* @__PURE__ */ o(e, {
+					items: d,
+					ariaLabel: l
+				})
+			})
+		}), /* @__PURE__ */ o("div", {
+			className: n,
+			children: /* @__PURE__ */ o("section", {
+				role: "tabpanel",
+				className: t,
+				children: u
+			})
+		})]
+	});
 };
-export {
-  N as TabsContentLayout
-};
-//# sourceMappingURL=TabsContentLayout.js.map
+//#endregion
+export { c as TabsContentLayout };
+
+//# sourceMappingURL=TabsContentLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsContentLayout.js","sources":["../../../../src/components/layout/TabsContentLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Tabs, type TabItem } from '../../atomic/molecules/tabs/Tabs.js';\nimport * as styles from './TabsContentLayout.css.js';\n\nexport type TabsContentLayoutProps = {\n  tabs: TabItem[];\n  ariaLabel?: string;\n  children: ReactNode;\n};\n\nexport const TabsContentLayout = (\n  props: TabsContentLayoutProps,\n): JSX.Element => {\n  const { ariaLabel, children, tabs } = props;\n\n  return (\n    <div className={styles.wrapper}>\n      <div className={styles.tabsBar}>\n        <div className={styles.tabsInner}>\n          <Tabs items={tabs} ariaLabel={ariaLabel} />\n        </div>\n      </div>\n      <div className={styles.panels}>\n        <section role=\"tabpanel\" className={styles.panel}>\n          {children}\n        </section>\n      </div>\n    </div>\n  );\n};\n"],"names":["TabsContentLayout","props","ariaLabel","children","tabs","jsxs","styles.wrapper","jsx","styles.tabsBar","styles.tabsInner","Tabs","styles.panels","styles.panel"],"mappings":";;;AAWO,MAAMA,IAAoB,CAC/BC,MACgB;AAChB,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,EAAA,IAASH;AAEtC,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWC,GACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWC,GACd,4BAAC,OAAA,EAAI,WAAWC,GACd,4BAACC,GAAA,EAAK,OAAON,GAAM,WAAAF,EAAA,CAAsB,GAC3C,GACF;AAAA,IACA,gBAAAK,EAAC,OAAA,EAAI,WAAWI,GACd,UAAA,gBAAAJ,EAAC,WAAA,EAAQ,MAAK,YAAW,WAAWK,GACjC,UAAAT,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"TabsContentLayout.js","names":[],"sources":["../../../../src/components/layout/TabsContentLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Tabs, type TabItem } from '../../atomic/molecules/tabs/Tabs.js';\nimport * as styles from './TabsContentLayout.css.js';\n\nexport type TabsContentLayoutProps = {\n  tabs: TabItem[];\n  ariaLabel?: string;\n  children: ReactNode;\n};\n\nexport const TabsContentLayout = (\n  props: TabsContentLayoutProps,\n): JSX.Element => {\n  const { ariaLabel, children, tabs } = props;\n\n  return (\n    <div className={styles.wrapper}>\n      <div className={styles.tabsBar}>\n        <div className={styles.tabsInner}>\n          <Tabs items={tabs} ariaLabel={ariaLabel} />\n        </div>\n      </div>\n      <div className={styles.panels}>\n        <section role=\"tabpanel\" className={styles.panel}>\n          {children}\n        </section>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAWA,IAAa,KACX,MACgB;CAChB,IAAM,EAAE,cAAW,aAAU,YAAS;AAEtC,QACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,GAAD;KAAM,OAAO;KAAiB;KAAa,CAAA;IACvC,CAAA;GACF,CAAA,EACN,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,WAAD;IAAS,MAAK;IAAW,WAAW;IACjC;IACO,CAAA;GACN,CAAA,CACF"}

package/lib/esm/components/select/SimpleSelect.css.js

@@ -1,22 +1,17 @@
-/* empty css                                       */
-/* empty css                                */
-import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
-var q = "_11ypmks0 txvbqbpsf txvbqbu6f", a = "_11ypmks1 txvbqb9i6 txvbqbfzf txvbqb8o txvbqbamo txvbqbedx txvbqb66 txvbqbv8t", o = b({ defaultClassName: "_11ypmks7 _11ypmks3 _11ypmks2 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqbu6f txvbqb9io txvbqbco txvbqbdoo txvbqbao6 txvbqb1rx txvbqb8x txvbqbamo txvbqbt5o txvbqbv txvbqb78 txvbqb6x txvbqb7k", variantClassNames: { variant: { default: "_11ypmks8 _11ypmks4 txvbqb1df txvbqb1qf txvbqbwf txvbqbuzn txvbqbv8p", brand: "_11ypmks9 _11ypmks6 _11ypmks5 txvbqbv9z txvbqb1co txvbqb1qf txvbqb106 txvbqbuy6" } }, defaultVariants: { variant: "default" }, compoundVariants: [] }), p = "_11ypmksa txvbqb7bo txvbqb78x", r = "_11ypmksb txvbqb9mx txvbqbk4x txvbqbuw6 txvbqbl6f txvbqbt6f", m = "_11ypmksc txvbqb9ix txvbqbco txvbqbdnx txvbqbtw6 txvbqbc5o txvbqbv8t txvbqb77 txvbqb6x txvbqb7k", n = "_11ypmksd txvbqb2w txvbqbv8p", i = "_11ypmkse txvbqbv9z", f = "_11ypmksf txvbqbps6 txvbqbthf txvbqbdpf txvbqbptf txvbqbuuf txvbqb9io txvbqbai6 txvbqbanx txvbqbl9o txvbqb1rx txvbqb1co txvbqb1qf txvbqbwf txvbqbuzn txvbqb8q6 txvbqbis6 txvbqbl7o", s = "_11ypmksg txvbqb766 txvbqb73f txvbqbi7o", e = "_11ypmksh txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbai6 txvbqbcf txvbqbanx txvbqbu6f txvbqb12f txvbqb1px txvbqb1ro txvbqbuzj txvbqb8x txvbqbamf txvbqbv8p txvbqbt5o txvbqbv txvbqb78 txvbqb6w txvbqb7k", k = "_11ypmksi txvbqbv8p", y = "_11ypmksj txvbqb8o txvbqbv8t", u = "_11ypmksk txvbqbgmo txvbqbh9x txvbqbhwx txvbqbfz6 txvbqbcfo txvbqbv3d", _ = "_11ypmksl txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx";
-export {
-  _ as actionsContainer,
-  q as container,
-  a as label,
-  f as menu,
-  s as menuOpen,
-  u as menuSeparator,
-  e as optionButton,
-  y as optionDescription,
-  k as optionSelected,
-  o as trigger,
-  m as triggerIcon,
-  i as triggerIconBrand,
-  n as triggerIconOpen,
-  p as triggerOpen,
-  r as valueText
-};
-//# sourceMappingURL=SimpleSelect.css.js.map
+/* empty css                                   */
+/* empty css                            */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/select/SimpleSelect.css.ts
+var t = "_11ypmks0 txvbqbpsf txvbqbu6f", n = "_11ypmks1 txvbqb9i6 txvbqbfzf txvbqb8o txvbqbamo txvbqbedx txvbqb66 txvbqbv8t", r = e({
+	defaultClassName: "_11ypmks7 _11ypmks3 _11ypmks2 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqbu6f txvbqb9io txvbqbco txvbqbdoo txvbqbao6 txvbqb1rx txvbqb8x txvbqbamo txvbqbt5o txvbqbv txvbqb78 txvbqb6x txvbqb7k",
+	variantClassNames: { variant: {
+		default: "_11ypmks8 _11ypmks4 txvbqb1df txvbqb1qf txvbqbwf txvbqbuzn txvbqbv8p",
+		brand: "_11ypmks9 _11ypmks6 _11ypmks5 txvbqbv9z txvbqb1co txvbqb1qf txvbqb106 txvbqbuy6"
+	} },
+	defaultVariants: { variant: "default" },
+	compoundVariants: []
+}), i = "_11ypmksa txvbqb7bo txvbqb78x", a = "_11ypmksb txvbqb9mx txvbqbk4x txvbqbuw6 txvbqbl6f txvbqbt6f", o = "_11ypmksc txvbqb9ix txvbqbco txvbqbdnx txvbqbtw6 txvbqbc5o txvbqbv8t txvbqb77 txvbqb6x txvbqb7k", s = "_11ypmksd txvbqb2w txvbqbv8p", c = "_11ypmkse txvbqbv9z", l = "_11ypmksf txvbqbps6 txvbqbthf txvbqbdpf txvbqbptf txvbqbuuf txvbqb9io txvbqbai6 txvbqbanx txvbqbl9o txvbqb1rx txvbqb1co txvbqb1qf txvbqbwf txvbqbuzn txvbqb8q6 txvbqbis6 txvbqbl7o", u = "_11ypmksg txvbqb766 txvbqb73f txvbqbi7o", d = "_11ypmksh txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbai6 txvbqbcf txvbqbanx txvbqbu6f txvbqb12f txvbqb1px txvbqb1ro txvbqbuzj txvbqb8x txvbqbamf txvbqbv8p txvbqbt5o txvbqbv txvbqb78 txvbqb6w txvbqb7k", f = "_11ypmksi txvbqbv8p", p = "_11ypmksj txvbqb8o txvbqbv8t", m = "_11ypmksk txvbqbgmo txvbqbh9x txvbqbhwx txvbqbfz6 txvbqbcfo txvbqbv3d", h = "_11ypmksl txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx";
+//#endregion
+export { h as actionsContainer, t as container, n as label, l as menu, u as menuOpen, m as menuSeparator, d as optionButton, p as optionDescription, f as optionSelected, r as trigger, o as triggerIcon, c as triggerIconBrand, s as triggerIconOpen, i as triggerOpen, a as valueText };
+
+//# sourceMappingURL=SimpleSelect.css.js.map

package/lib/esm/components/select/SimpleSelect.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleSelect.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"SimpleSelect.css.js","names":[],"sources":["../../../../src/components/select/SimpleSelect.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 { vars } from '../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  position: 'relative',\n  width: 'full',\n});\n\nexport const label = sprinkles({\n  display: 'block',\n  marginBottom: 2,\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  letterSpacing: 'wider',\n  textTransform: 'uppercase',\n  color: 'textMuted',\n});\n\nconst triggerBase = style([\n  sprinkles({\n    width: 'full',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 2,\n    paddingY: 2,\n    paddingX: 3,\n    borderRadius: 'xl',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n    textAlign: 'left',\n    cursor: 'pointer',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:disabled': {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n      },\n    },\n  },\n]);\n\nconst defaultTrigger = sprinkles({\n  borderWidth: 'px',\n  borderStyle: 'solid',\n  borderColor: 'border',\n  backgroundColor: 'white',\n  color: 'text',\n});\n\nconst brandTrigger = style([\n  sprinkles({\n    color: 'brandWhite',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'brandPrimaryRed',\n    backgroundImage: 'brandDiagonal',\n  }),\n  {\n    // boxShadow: `0 0 0 1px ${vars.colors.brandPrimaryRed}`,\n    selectors: {\n      '&:hover': {\n        filter: 'brightness(0.98)',\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        // borderColor: vars.colors.brandPrimaryRed,\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\n      },\n    },\n  },\n]);\n\nexport const trigger = recipe({\n  base: triggerBase,\n  variants: {\n    variant: {\n      default: defaultTrigger,\n      brand: brandTrigger,\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const triggerOpen = sprinkles({\n  borderBottomLeftRadius: 'none',\n  borderBottomRightRadius: 'none',\n});\n\nexport const valueText = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const triggerIcon = sprinkles({\n  display: 'grid',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  color: 'textMuted',\n  transitionProperty: 'default',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const triggerIconOpen = sprinkles({\n  rotate: 180,\n  color: 'text',\n});\n\nexport const triggerIconBrand = sprinkles({\n  color: 'brandWhite',\n});\n\nexport const menu = sprinkles({\n  position: 'absolute',\n  top: 'full',\n  left: 0,\n  right: 0,\n  zIndex: 10,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  padding: 1,\n  borderRadius: 'xl',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n  backgroundColor: 'white',\n  boxShadow: 'lg',\n  maxHeight: 72,\n  overflowY: 'auto',\n});\n\nexport const menuOpen = sprinkles({\n  borderTopLeftRadius: 'none',\n  borderTopRightRadius: 'none',\n  marginTop: '-px',\n});\n\nexport const optionButton = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: 1,\n  width: 'full',\n  borderWidth: 0,\n  borderStyle: 'none',\n  borderRadius: 'lg',\n  backgroundColor: 'transparent',\n  paddingY: 2,\n  paddingX: 3,\n  fontSize: 'sm',\n  fontWeight: 'medium',\n  color: 'text',\n  textAlign: 'left',\n  cursor: 'pointer',\n  transitionProperty: 'colors',\n  transitionDuration: 120,\n  transitionTimingFunction: 'ease',\n});\n\nexport const optionSelected = sprinkles({\n  // backgroundColor: vars.colors['slate-100'],\n  color: 'text',\n});\n\nexport const optionDescription = sprinkles({\n  fontSize: 'xs',\n  color: 'textMuted',\n});\n\nexport const menuSeparator = sprinkles({\n  height: 'px',\n  marginY: 1,\n  marginX: 2,\n  backgroundColor: 'border',\n});\n\nexport const actionsContainer = sprinkles({\n  paddingY: 1,\n  paddingX: 2,\n});\n\nexport type SimpleSelectVariants = RecipeVariants<typeof trigger>;\n"],"mappings":""}