@techzyapp/ui-library 1.0.2 → 1.0.3

package/dist/Masonry-BTvtDdnt.js

@@ -0,0 +1,104 @@
+import { jsx as M } from "react/jsx-runtime";
+import { forwardRef as G, useMemo as I, Children as K, useState as A, useRef as C, useCallback as T, useLayoutEffect as N, useEffect as P } from "react";
+import { s as O } from "./Flex-Bj3mMF5A.js";
+import { B as d, a as H } from "./breakpoints-o3dzSzrU.js";
+import { u as h } from "./useMediaQuery-_1EcFoC5.js";
+const q = 200, F = (r, l) => r.length === l.length && r.every((n, c) => n === l[c]);
+function S(r, l) {
+  if (r == null || typeof r != "object") return r;
+  const n = r;
+  let c;
+  for (const i of H)
+    n[i] != null && l[i] && (c = n[i]);
+  if (c === void 0) {
+    for (const i of H)
+      if (n[i] != null) {
+        c = n[i];
+        break;
+      }
+  }
+  return c;
+}
+const U = G(function({ columns: l = 3, minColumnWidth: n, gap: c = "md", padding: i, className: $, style: k, children: b, ...B }, m) {
+  const x = I(() => K.toArray(b), [b]), f = x.length, v = {
+    xs: !0,
+    sm: h(`(min-width: ${d.sm}px)`),
+    md: h(`(min-width: ${d.md}px)`),
+    lg: h(`(min-width: ${d.lg}px)`),
+    xl: h(`(min-width: ${d.xl}px)`)
+  }, y = Math.max(1, S(l, v) ?? 1), g = O(S(c, v)), [a, D] = A(y), [w, _] = A([]), R = C(null), E = C([]), j = T(
+    (e) => {
+      R.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+    },
+    [m]
+  ), p = T(() => {
+    const e = R.current;
+    if (!e) return;
+    let s = y;
+    if (n != null) {
+      const t = parseFloat(getComputedStyle(e).columnGap) || 0, u = e.clientWidth;
+      s = Math.max(1, Math.floor((u + t) / (n + t)));
+    }
+    D((t) => t === s ? t : s);
+    const o = E.current.slice(0, f).map((t) => t ? t.offsetHeight : 0);
+    _((t) => F(t, o) ? t : o);
+  }, [y, n, f]);
+  N(p, [p, x, a, g]), P(() => {
+    const e = R.current;
+    if (!e || typeof ResizeObserver > "u") return;
+    const s = new ResizeObserver(() => p());
+    return s.observe(e), E.current.slice(0, f).forEach((o) => o && s.observe(o)), () => s.disconnect();
+  }, [p, f, a]);
+  const z = I(() => {
+    const e = Array.from({ length: a }, () => []), s = new Array(a).fill(0);
+    for (let o = 0; o < f; o++) {
+      let t = 0;
+      for (let u = 1; u < a; u++) s[u] < s[t] && (t = u);
+      e[t].push(o), s[t] += w[o] || q;
+    }
+    return e;
+  }, [a, f, w]);
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      ref: j,
+      className: $,
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: g,
+        padding: O(i),
+        ...k
+      },
+      ...B,
+      children: z.map((e, s) => /* @__PURE__ */ M(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: g,
+            flex: "1 1 0",
+            minWidth: 0
+          },
+          children: e.map((o) => /* @__PURE__ */ M(
+            "div",
+            {
+              ref: (t) => {
+                E.current[o] = t;
+              },
+              style: { minWidth: 0 },
+              children: x[o]
+            },
+            o
+          ))
+        },
+        s
+      ))
+    }
+  );
+});
+export {
+  U as M
+};
+//# sourceMappingURL=Masonry-BTvtDdnt.js.map

package/dist/Masonry-BTvtDdnt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry-BTvtDdnt.js","sources":["../src/components/Masonry/Masonry.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { space, type Spacing } from '../Flex/Flex'\nimport { BREAKPOINTS, BREAKPOINT_ORDER, type Breakpoint } from '../../theme/breakpoints'\nimport { useMediaQuery } from '../../hooks/useMediaQuery'\n\n// nominal height for a not-yet-measured item, so the first (pre-measure) pass spreads items across\n// columns round-robin instead of dumping them all into the first one; corrected on the layout pass.\nconst ESTIMATED_ITEM_HEIGHT = 200\n\nexport interface MasonryProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Number of columns. Either a fixed number, or a **mobile-first** map keyed by the library's\n   * `Breakpoint`s (`xs`/`sm`/`md`/`lg`/`xl`) — each entry applies from that breakpoint's min-width up,\n   * until a larger defined one overrides it, with the smallest defined key as the base. Defaults to\n   * `3`. Ignored when `minColumnWidth` is set.\n   *\n   * @example columns={2}                 // always 2\n   * @example columns={{ xs: 1, md: 2 }}  // 1 below md (768px), 2 at md and up\n   */\n  columns?: number | Partial<Record<Breakpoint, number>>\n  /** Responsive: fit as many equal columns as this min pixel width allows (overrides `columns`). */\n  minColumnWidth?: number\n  /**\n   * Gap between items, horizontally and vertically. Either a single value (a `--tz-space-*` key, a px\n   * number, or any CSS value) or a **mobile-first** breakpoint map — same resolution as `columns`.\n   * Defaults to `md`.\n   *\n   * @example gap=\"md\"\n   * @example gap={{ xs: 'sm', md: 'lg' }}  // tighter on phones, looser from md up\n   */\n  gap?: Spacing | Partial<Record<Breakpoint, Spacing>>\n  /** Padding around the grid (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** The items to lay out. */\n  children?: ReactNode\n}\n\nconst arraysEqual = (a: number[], b: number[]) =>\n  a.length === b.length && a.every((v, i) => v === b[i])\n\n/**\n * Resolve a possibly-responsive prop to a concrete value. A plain value passes through; a mobile-first\n * breakpoint map (a plain object keyed by breakpoints) picks the value of the **largest defined\n * breakpoint that currently matches**, falling back to the smallest defined key as the base when none\n * larger has kicked in yet.\n */\nfunction resolveResponsive<T>(\n  value: T | Partial<Record<Breakpoint, T>>,\n  matches: Record<Breakpoint, boolean>,\n): T | undefined {\n  if (value == null || typeof value !== 'object') return value as T | undefined\n  const map = value as Partial<Record<Breakpoint, T>>\n  let resolved: T | undefined\n  for (const bp of BREAKPOINT_ORDER) {\n    if (map[bp] != null && matches[bp]) resolved = map[bp]\n  }\n  if (resolved === undefined) {\n    for (const bp of BREAKPOINT_ORDER) {\n      if (map[bp] != null) {\n        resolved = map[bp]\n        break\n      }\n    }\n  }\n  return resolved\n}\n\n/**\n * A masonry layout — packs items of varying heights into balanced columns, always adding the next item\n * to the **shortest** column (Pinterest-style), so columns stay level rather than following a fixed\n * grid. Item heights are measured in the DOM (a `ResizeObserver` re-balances on content/size changes),\n * so it works with any children. `columns` is either a fixed number or a mobile-first breakpoint map\n * (`{ xs: 1, md: 2 }`); `minColumnWidth` is a responsive alternative (and overrides `columns`); `gap`\n * spaces items on both axes and is itself responsive the same way (`{ xs: 'sm', md: 'lg' }`).\n * Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer `style` merges last.\n * Reading order flows left-to-right across the columns.\n */\nexport const Masonry = forwardRef<HTMLDivElement, MasonryProps>(function Masonry(\n  { columns = 3, minColumnWidth, gap = 'md', padding, className, style, children, ...props },\n  ref,\n) {\n  const items = useMemo(() => Children.toArray(children), [children])\n  const count = items.length\n\n  // active min-width breakpoints — a FIXED set of hook calls (order-stable), mobile-first; `xs` is the\n  // always-true base. `useMediaQuery` is correct on the first client render, so the resolved count has\n  // no flash. These fire regardless of the `columns` form; a plain number just ignores them.\n  const matches: Record<Breakpoint, boolean> = {\n    xs: true,\n    sm: useMediaQuery(`(min-width: ${BREAKPOINTS.sm}px)`),\n    md: useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`),\n    lg: useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`),\n    xl: useMediaQuery(`(min-width: ${BREAKPOINTS.xl}px)`),\n  }\n  const resolvedColumns = Math.max(1, resolveResponsive(columns, matches) ?? 1)\n  const gapValue = space(resolveResponsive(gap, matches))\n\n  const [colCount, setColCount] = useState(resolvedColumns)\n  const [heights, setHeights] = useState<number[]>([])\n\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const itemRefs = useRef<Array<HTMLDivElement | null>>([])\n\n  // merge the internal measuring ref with the forwarded ref\n  const setRootRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  // measure the container width → column count, and each item's height → the balance\n  const measure = useCallback(() => {\n    const root = rootRef.current\n    if (!root) return\n\n    let nextCols = resolvedColumns\n    if (minColumnWidth != null) {\n      const g = parseFloat(getComputedStyle(root).columnGap) || 0\n      const width = root.clientWidth\n      nextCols = Math.max(1, Math.floor((width + g) / (minColumnWidth + g)))\n    }\n    setColCount((prev) => (prev === nextCols ? prev : nextCols))\n\n    const next = itemRefs.current.slice(0, count).map((el) => (el ? el.offsetHeight : 0))\n    setHeights((prev) => (arraysEqual(prev, next) ? prev : next))\n  }, [resolvedColumns, minColumnWidth, count])\n\n  // measure before paint (mount + whenever the item set, column count, or gap changes — a gap change\n  // shifts column widths, so heights and the minColumnWidth count need re-reading)\n  useLayoutEffect(measure, [measure, items, colCount, gapValue])\n\n  // re-balance on container resize and on any item resizing (image loads, dynamic content, …)\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root || typeof ResizeObserver === 'undefined') return\n    const ro = new ResizeObserver(() => measure())\n    ro.observe(root)\n    itemRefs.current.slice(0, count).forEach((el) => el && ro.observe(el))\n    return () => ro.disconnect()\n  }, [measure, count, colCount])\n\n  // greedily assign each item (in order) to the currently shortest column\n  const columnsItems = useMemo(() => {\n    const buckets: number[][] = Array.from({ length: colCount }, () => [])\n    const acc = new Array(colCount).fill(0)\n    for (let i = 0; i < count; i++) {\n      let min = 0\n      for (let c = 1; c < colCount; c++) if (acc[c] < acc[min]) min = c\n      buckets[min].push(i)\n      acc[min] += heights[i] || ESTIMATED_ITEM_HEIGHT\n    }\n    return buckets\n  }, [colCount, count, heights])\n\n  return (\n    <div\n      ref={setRootRef}\n      className={className}\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: gapValue,\n        padding: space(padding),\n        ...style,\n      }}\n      {...props}\n    >\n      {columnsItems.map((indices, c) => (\n        <div\n          key={c}\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: gapValue,\n            flex: '1 1 0',\n            minWidth: 0,\n          }}\n        >\n          {indices.map((i) => (\n            <div\n              key={i}\n              ref={(el) => {\n                itemRefs.current[i] = el\n              }}\n              style={{ minWidth: 0 } as CSSProperties}\n            >\n              {items[i]}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n})\n"],"names":["ESTIMATED_ITEM_HEIGHT","arraysEqual","a","b","v","i","resolveResponsive","value","matches","map","resolved","bp","BREAKPOINT_ORDER","Masonry","forwardRef","columns","minColumnWidth","gap","padding","className","style","children","props","ref","items","useMemo","Children","count","useMediaQuery","BREAKPOINTS","resolvedColumns","gapValue","space","colCount","setColCount","useState","heights","setHeights","rootRef","useRef","itemRefs","setRootRef","useCallback","node","measure","root","nextCols","g","width","prev","next","el","useLayoutEffect","useEffect","ro","columnsItems","buckets","acc","min","c","jsx","indices"],"mappings":"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"}

package/dist/Masonry-Bl1Mlzqw.cjs

@@ -0,0 +1,2 @@
+"use strict";const b=require("react/jsx-runtime"),r=require("react"),T=require("./Flex-CqL3Ghda.cjs"),m=require("./breakpoints-BNPC2_Te.cjs"),y=require("./useMediaQuery-BCsNfMA1.cjs"),P=200,j=(c,l)=>c.length===l.length&&c.every((o,i)=>o===l[i]);function v(c,l){if(c==null||typeof c!="object")return c;const o=c;let i;for(const u of m.BREAKPOINT_ORDER)o[u]!=null&&l[u]&&(i=o[u]);if(i===void 0){for(const u of m.BREAKPOINT_ORDER)if(o[u]!=null){i=o[u];break}}return i}const k=r.forwardRef(function({columns:l=3,minColumnWidth:o,gap:i="md",padding:u,className:w,style:S,children:I,...C},p){const x=r.useMemo(()=>r.Children.toArray(I),[I]),a=x.length,A={xs:!0,sm:y.useMediaQuery(`(min-width: ${m.BREAKPOINTS.sm}px)`),md:y.useMediaQuery(`(min-width: ${m.BREAKPOINTS.md}px)`),lg:y.useMediaQuery(`(min-width: ${m.BREAKPOINTS.lg}px)`),xl:y.useMediaQuery(`(min-width: ${m.BREAKPOINTS.xl}px)`)},R=Math.max(1,v(l,A)??1),g=T.space(v(i,A)),[f,q]=r.useState(R),[O,B]=r.useState([]),E=r.useRef(null),M=r.useRef([]),K=r.useCallback(t=>{E.current=t,typeof p=="function"?p(t):p&&(p.current=t)},[p]),h=r.useCallback(()=>{const t=E.current;if(!t)return;let n=R;if(o!=null){const e=parseFloat(getComputedStyle(t).columnGap)||0,d=t.clientWidth;n=Math.max(1,Math.floor((d+e)/(o+e)))}q(e=>e===n?e:n);const s=M.current.slice(0,a).map(e=>e?e.offsetHeight:0);B(e=>j(e,s)?e:s)},[R,o,a]);r.useLayoutEffect(h,[h,x,f,g]),r.useEffect(()=>{const t=E.current;if(!t||typeof ResizeObserver>"u")return;const n=new ResizeObserver(()=>h());return n.observe(t),M.current.slice(0,a).forEach(s=>s&&n.observe(s)),()=>n.disconnect()},[h,a,f]);const N=r.useMemo(()=>{const t=Array.from({length:f},()=>[]),n=new Array(f).fill(0);for(let s=0;s<a;s++){let e=0;for(let d=1;d<f;d++)n[d]<n[e]&&(e=d);t[e].push(s),n[e]+=O[s]||P}return t},[f,a,O]);return b.jsx("div",{ref:K,className:w,style:{display:"flex",alignItems:"flex-start",gap:g,padding:T.space(u),...S},...C,children:N.map((t,n)=>b.jsx("div",{style:{display:"flex",flexDirection:"column",gap:g,flex:"1 1 0",minWidth:0},children:t.map(s=>b.jsx("div",{ref:e=>{M.current[s]=e},style:{minWidth:0},children:x[s]},s))},n))})});exports.Masonry=k;
+//# sourceMappingURL=Masonry-Bl1Mlzqw.cjs.map

package/dist/Masonry-Bl1Mlzqw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry-Bl1Mlzqw.cjs","sources":["../src/components/Masonry/Masonry.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { space, type Spacing } from '../Flex/Flex'\nimport { BREAKPOINTS, BREAKPOINT_ORDER, type Breakpoint } from '../../theme/breakpoints'\nimport { useMediaQuery } from '../../hooks/useMediaQuery'\n\n// nominal height for a not-yet-measured item, so the first (pre-measure) pass spreads items across\n// columns round-robin instead of dumping them all into the first one; corrected on the layout pass.\nconst ESTIMATED_ITEM_HEIGHT = 200\n\nexport interface MasonryProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Number of columns. Either a fixed number, or a **mobile-first** map keyed by the library's\n   * `Breakpoint`s (`xs`/`sm`/`md`/`lg`/`xl`) — each entry applies from that breakpoint's min-width up,\n   * until a larger defined one overrides it, with the smallest defined key as the base. Defaults to\n   * `3`. Ignored when `minColumnWidth` is set.\n   *\n   * @example columns={2}                 // always 2\n   * @example columns={{ xs: 1, md: 2 }}  // 1 below md (768px), 2 at md and up\n   */\n  columns?: number | Partial<Record<Breakpoint, number>>\n  /** Responsive: fit as many equal columns as this min pixel width allows (overrides `columns`). */\n  minColumnWidth?: number\n  /**\n   * Gap between items, horizontally and vertically. Either a single value (a `--tz-space-*` key, a px\n   * number, or any CSS value) or a **mobile-first** breakpoint map — same resolution as `columns`.\n   * Defaults to `md`.\n   *\n   * @example gap=\"md\"\n   * @example gap={{ xs: 'sm', md: 'lg' }}  // tighter on phones, looser from md up\n   */\n  gap?: Spacing | Partial<Record<Breakpoint, Spacing>>\n  /** Padding around the grid (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** The items to lay out. */\n  children?: ReactNode\n}\n\nconst arraysEqual = (a: number[], b: number[]) =>\n  a.length === b.length && a.every((v, i) => v === b[i])\n\n/**\n * Resolve a possibly-responsive prop to a concrete value. A plain value passes through; a mobile-first\n * breakpoint map (a plain object keyed by breakpoints) picks the value of the **largest defined\n * breakpoint that currently matches**, falling back to the smallest defined key as the base when none\n * larger has kicked in yet.\n */\nfunction resolveResponsive<T>(\n  value: T | Partial<Record<Breakpoint, T>>,\n  matches: Record<Breakpoint, boolean>,\n): T | undefined {\n  if (value == null || typeof value !== 'object') return value as T | undefined\n  const map = value as Partial<Record<Breakpoint, T>>\n  let resolved: T | undefined\n  for (const bp of BREAKPOINT_ORDER) {\n    if (map[bp] != null && matches[bp]) resolved = map[bp]\n  }\n  if (resolved === undefined) {\n    for (const bp of BREAKPOINT_ORDER) {\n      if (map[bp] != null) {\n        resolved = map[bp]\n        break\n      }\n    }\n  }\n  return resolved\n}\n\n/**\n * A masonry layout — packs items of varying heights into balanced columns, always adding the next item\n * to the **shortest** column (Pinterest-style), so columns stay level rather than following a fixed\n * grid. Item heights are measured in the DOM (a `ResizeObserver` re-balances on content/size changes),\n * so it works with any children. `columns` is either a fixed number or a mobile-first breakpoint map\n * (`{ xs: 1, md: 2 }`); `minColumnWidth` is a responsive alternative (and overrides `columns`); `gap`\n * spaces items on both axes and is itself responsive the same way (`{ xs: 'sm', md: 'lg' }`).\n * Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer `style` merges last.\n * Reading order flows left-to-right across the columns.\n */\nexport const Masonry = forwardRef<HTMLDivElement, MasonryProps>(function Masonry(\n  { columns = 3, minColumnWidth, gap = 'md', padding, className, style, children, ...props },\n  ref,\n) {\n  const items = useMemo(() => Children.toArray(children), [children])\n  const count = items.length\n\n  // active min-width breakpoints — a FIXED set of hook calls (order-stable), mobile-first; `xs` is the\n  // always-true base. `useMediaQuery` is correct on the first client render, so the resolved count has\n  // no flash. These fire regardless of the `columns` form; a plain number just ignores them.\n  const matches: Record<Breakpoint, boolean> = {\n    xs: true,\n    sm: useMediaQuery(`(min-width: ${BREAKPOINTS.sm}px)`),\n    md: useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`),\n    lg: useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`),\n    xl: useMediaQuery(`(min-width: ${BREAKPOINTS.xl}px)`),\n  }\n  const resolvedColumns = Math.max(1, resolveResponsive(columns, matches) ?? 1)\n  const gapValue = space(resolveResponsive(gap, matches))\n\n  const [colCount, setColCount] = useState(resolvedColumns)\n  const [heights, setHeights] = useState<number[]>([])\n\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const itemRefs = useRef<Array<HTMLDivElement | null>>([])\n\n  // merge the internal measuring ref with the forwarded ref\n  const setRootRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  // measure the container width → column count, and each item's height → the balance\n  const measure = useCallback(() => {\n    const root = rootRef.current\n    if (!root) return\n\n    let nextCols = resolvedColumns\n    if (minColumnWidth != null) {\n      const g = parseFloat(getComputedStyle(root).columnGap) || 0\n      const width = root.clientWidth\n      nextCols = Math.max(1, Math.floor((width + g) / (minColumnWidth + g)))\n    }\n    setColCount((prev) => (prev === nextCols ? prev : nextCols))\n\n    const next = itemRefs.current.slice(0, count).map((el) => (el ? el.offsetHeight : 0))\n    setHeights((prev) => (arraysEqual(prev, next) ? prev : next))\n  }, [resolvedColumns, minColumnWidth, count])\n\n  // measure before paint (mount + whenever the item set, column count, or gap changes — a gap change\n  // shifts column widths, so heights and the minColumnWidth count need re-reading)\n  useLayoutEffect(measure, [measure, items, colCount, gapValue])\n\n  // re-balance on container resize and on any item resizing (image loads, dynamic content, …)\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root || typeof ResizeObserver === 'undefined') return\n    const ro = new ResizeObserver(() => measure())\n    ro.observe(root)\n    itemRefs.current.slice(0, count).forEach((el) => el && ro.observe(el))\n    return () => ro.disconnect()\n  }, [measure, count, colCount])\n\n  // greedily assign each item (in order) to the currently shortest column\n  const columnsItems = useMemo(() => {\n    const buckets: number[][] = Array.from({ length: colCount }, () => [])\n    const acc = new Array(colCount).fill(0)\n    for (let i = 0; i < count; i++) {\n      let min = 0\n      for (let c = 1; c < colCount; c++) if (acc[c] < acc[min]) min = c\n      buckets[min].push(i)\n      acc[min] += heights[i] || ESTIMATED_ITEM_HEIGHT\n    }\n    return buckets\n  }, [colCount, count, heights])\n\n  return (\n    <div\n      ref={setRootRef}\n      className={className}\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: gapValue,\n        padding: space(padding),\n        ...style,\n      }}\n      {...props}\n    >\n      {columnsItems.map((indices, c) => (\n        <div\n          key={c}\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: gapValue,\n            flex: '1 1 0',\n            minWidth: 0,\n          }}\n        >\n          {indices.map((i) => (\n            <div\n              key={i}\n              ref={(el) => {\n                itemRefs.current[i] = el\n              }}\n              style={{ minWidth: 0 } as CSSProperties}\n            >\n              {items[i]}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n})\n"],"names":["ESTIMATED_ITEM_HEIGHT","arraysEqual","a","b","v","resolveResponsive","value","matches","map","resolved","bp","BREAKPOINT_ORDER","Masonry","forwardRef","columns","minColumnWidth","gap","padding","className","style","children","props","ref","items","useMemo","Children","count","useMediaQuery","BREAKPOINTS","resolvedColumns","gapValue","space","colCount","setColCount","useState","heights","setHeights","rootRef","useRef","itemRefs","setRootRef","useCallback","node","measure","root","nextCols","g","width","prev","next","el","useLayoutEffect","useEffect","ro","columnsItems","buckets","acc","i","min","c","jsx","indices"],"mappings":"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"}

package/dist/breakpoints-BNPC2_Te.cjs

@@ -0,0 +1,2 @@
+"use strict";const s={xs:0,sm:576,md:768,lg:992,xl:1280},R=["xs","sm","md","lg","xl"];exports.BREAKPOINTS=s;exports.BREAKPOINT_ORDER=R;
+//# sourceMappingURL=breakpoints-BNPC2_Te.cjs.map

package/dist/breakpoints-BNPC2_Te.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints-BNPC2_Te.cjs","sources":["../src/theme/breakpoints.ts"],"sourcesContent":["/**\n * The library's shared responsive breakpoints — the single source of truth for width thresholds.\n *\n * Mobile-first **min-width** values in px. `xs` is the base (`0`); the two values the component CSS\n * already keys off (`≤575.98px` phones, `≤1279.98px` tablet/overlay) line up with `sm` (576) and `xl`\n * (1280), so this scale is a superset of what the styles already use rather than a new set. Consume\n * these instead of hardcoding pixel thresholds, and derive the `Breakpoint` type from here rather than\n * re-listing the keys locally.\n */\nexport const BREAKPOINTS = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1280,\n} as const\n\n/** A responsive breakpoint key (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`). */\nexport type Breakpoint = keyof typeof BREAKPOINTS\n\n/** Breakpoint keys in ascending (mobile-first) order. */\nexport const BREAKPOINT_ORDER: readonly Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl']\n"],"names":["BREAKPOINTS","BREAKPOINT_ORDER"],"mappings":"aASO,MAAMA,EAAc,CACzB,GAAI,EACJ,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,GAAI,IACN,EAMaC,EAA0C,CAAC,KAAM,KAAM,KAAM,KAAM,IAAI"}

package/dist/breakpoints-o3dzSzrU.js

@@ -0,0 +1,12 @@
+const s = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1280
+}, x = ["xs", "sm", "md", "lg", "xl"];
+export {
+  s as B,
+  x as a
+};
+//# sourceMappingURL=breakpoints-o3dzSzrU.js.map

package/dist/breakpoints-o3dzSzrU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints-o3dzSzrU.js","sources":["../src/theme/breakpoints.ts"],"sourcesContent":["/**\n * The library's shared responsive breakpoints — the single source of truth for width thresholds.\n *\n * Mobile-first **min-width** values in px. `xs` is the base (`0`); the two values the component CSS\n * already keys off (`≤575.98px` phones, `≤1279.98px` tablet/overlay) line up with `sm` (576) and `xl`\n * (1280), so this scale is a superset of what the styles already use rather than a new set. Consume\n * these instead of hardcoding pixel thresholds, and derive the `Breakpoint` type from here rather than\n * re-listing the keys locally.\n */\nexport const BREAKPOINTS = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1280,\n} as const\n\n/** A responsive breakpoint key (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`). */\nexport type Breakpoint = keyof typeof BREAKPOINTS\n\n/** Breakpoint keys in ascending (mobile-first) order. */\nexport const BREAKPOINT_ORDER: readonly Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl']\n"],"names":["BREAKPOINTS","BREAKPOINT_ORDER"],"mappings":"AASO,MAAMA,IAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAMaC,IAA0C,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;"}

package/dist/components/Masonry/Masonry.d.cts

@@ -1,12 +1,28 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type Spacing } from '../Flex/Flex';
+import { type Breakpoint } from '../../theme/breakpoints';
 export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
-    /** Fixed number of columns. Defaults to `3`. Ignored when `minColumnWidth` is set. */
-    columns?: number;
+    /**
+     * Number of columns. Either a fixed number, or a **mobile-first** map keyed by the library's
+     * `Breakpoint`s (`xs`/`sm`/`md`/`lg`/`xl`) — each entry applies from that breakpoint's min-width up,
+     * until a larger defined one overrides it, with the smallest defined key as the base. Defaults to
+     * `3`. Ignored when `minColumnWidth` is set.
+     *
+     * @example columns={2}                 // always 2
+     * @example columns={{ xs: 1, md: 2 }}  // 1 below md (768px), 2 at md and up
+     */
+    columns?: number | Partial<Record<Breakpoint, number>>;
     /** Responsive: fit as many equal columns as this min pixel width allows (overrides `columns`). */
     minColumnWidth?: number;
-    /** Gap between items, horizontally and vertically (token key, px number, or CSS value). Defaults to `md`. */
-    gap?: Spacing;
+    /**
+     * Gap between items, horizontally and vertically. Either a single value (a `--tz-space-*` key, a px
+     * number, or any CSS value) or a **mobile-first** breakpoint map — same resolution as `columns`.
+     * Defaults to `md`.
+     *
+     * @example gap="md"
+     * @example gap={{ xs: 'sm', md: 'lg' }}  // tighter on phones, looser from md up
+     */
+    gap?: Spacing | Partial<Record<Breakpoint, Spacing>>;
     /** Padding around the grid (token key, px number, or CSS value). */
     padding?: Spacing;
     /** The items to lay out. */
@@ -16,8 +32,10 @@ export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
  * A masonry layout — packs items of varying heights into balanced columns, always adding the next item
  * to the **shortest** column (Pinterest-style), so columns stay level rather than following a fixed
  * grid. Item heights are measured in the DOM (a `ResizeObserver` re-balances on content/size changes),
- * so it works with any children. Use a fixed `columns` count or a responsive `minColumnWidth`; `gap`
- * spaces items on both axes. Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer
- * `style` merges last. Reading order flows left-to-right across the columns.
+ * so it works with any children. `columns` is either a fixed number or a mobile-first breakpoint map
+ * (`{ xs: 1, md: 2 }`); `minColumnWidth` is a responsive alternative (and overrides `columns`); `gap`
+ * spaces items on both axes and is itself responsive the same way (`{ xs: 'sm', md: 'lg' }`).
+ * Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer `style` merges last.
+ * Reading order flows left-to-right across the columns.
  */
 export declare const Masonry: import("react").ForwardRefExoticComponent<MasonryProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Masonry/Masonry.d.ts

@@ -1,12 +1,28 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type Spacing } from '../Flex/Flex';
+import { type Breakpoint } from '../../theme/breakpoints';
 export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
-    /** Fixed number of columns. Defaults to `3`. Ignored when `minColumnWidth` is set. */
-    columns?: number;
+    /**
+     * Number of columns. Either a fixed number, or a **mobile-first** map keyed by the library's
+     * `Breakpoint`s (`xs`/`sm`/`md`/`lg`/`xl`) — each entry applies from that breakpoint's min-width up,
+     * until a larger defined one overrides it, with the smallest defined key as the base. Defaults to
+     * `3`. Ignored when `minColumnWidth` is set.
+     *
+     * @example columns={2}                 // always 2
+     * @example columns={{ xs: 1, md: 2 }}  // 1 below md (768px), 2 at md and up
+     */
+    columns?: number | Partial<Record<Breakpoint, number>>;
     /** Responsive: fit as many equal columns as this min pixel width allows (overrides `columns`). */
     minColumnWidth?: number;
-    /** Gap between items, horizontally and vertically (token key, px number, or CSS value). Defaults to `md`. */
-    gap?: Spacing;
+    /**
+     * Gap between items, horizontally and vertically. Either a single value (a `--tz-space-*` key, a px
+     * number, or any CSS value) or a **mobile-first** breakpoint map — same resolution as `columns`.
+     * Defaults to `md`.
+     *
+     * @example gap="md"
+     * @example gap={{ xs: 'sm', md: 'lg' }}  // tighter on phones, looser from md up
+     */
+    gap?: Spacing | Partial<Record<Breakpoint, Spacing>>;
     /** Padding around the grid (token key, px number, or CSS value). */
     padding?: Spacing;
     /** The items to lay out. */
@@ -16,8 +32,10 @@ export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
  * A masonry layout — packs items of varying heights into balanced columns, always adding the next item
  * to the **shortest** column (Pinterest-style), so columns stay level rather than following a fixed
  * grid. Item heights are measured in the DOM (a `ResizeObserver` re-balances on content/size changes),
- * so it works with any children. Use a fixed `columns` count or a responsive `minColumnWidth`; `gap`
- * spaces items on both axes. Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer
- * `style` merges last. Reading order flows left-to-right across the columns.
+ * so it works with any children. `columns` is either a fixed number or a mobile-first breakpoint map
+ * (`{ xs: 1, md: 2 }`); `minColumnWidth` is a responsive alternative (and overrides `columns`); `gap`
+ * spaces items on both axes and is itself responsive the same way (`{ xs: 'sm', md: 'lg' }`).
+ * Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer `style` merges last.
+ * Reading order flows left-to-right across the columns.
  */
 export declare const Masonry: import("react").ForwardRefExoticComponent<MasonryProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Masonry/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Masonry-DlD-rIQX.cjs");exports.Masonry=e.Masonry;exports.default=e.Masonry;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Masonry-Bl1Mlzqw.cjs");exports.Masonry=e.Masonry;exports.default=e.Masonry;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Masonry/index.js

@@ -1,4 +1,4 @@
-import { M as r, M as s } from "../../Masonry--bT8SICO.js";
+import { M as r, M as s } from "../../Masonry-BTvtDdnt.js";
 export {
   r as Masonry,
   s as default

package/dist/entries/components.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../Form-Bz2xgkEm.cjs"),e=require("../Accordion-Dy_dM79Y.cjs"),s=require("../Alert-DKIjM-9x.cjs"),d=require("../Avatar-_ufXh3AY.cjs"),q=require("../AvatarGroup-TW1pt4tj.cjs"),T=require("../Badge-BQpr2Jee.cjs"),p=require("../Blockquote-CxHwOecc.cjs"),g=require("../Breadcrumbs-CHONper7.cjs"),C=require("../Button-D4bfVNNa.cjs"),m=require("../Card-CfyaerZZ.cjs"),F=require("../Checkbox-DXOzYIAz.cjs"),S=require("../Chip-DSrdXLBU.cjs"),r=require("../ChoiceCardGroup-6eFM1eL0.cjs"),h=require("../Code-CUdpWlY5.cjs"),P=require("../CodeBlock-CgXOjKS-.cjs"),o=require("../Col-R5mAy8T9.cjs"),k=require("../ColorPicker-BwmaXCOy.cjs"),B=require("../DatePicker-DF4Epkn8.cjs"),b=require("../DateTimePicker-C557OjBU.cjs"),y=require("../Divider-CzbhdCiD.cjs"),D=require("../Dropdown-DygP50OB.cjs"),R=require("../EmptyState-CCCpZ-ZA.cjs"),A=require("../FileUploader-B4TJHyoi.cjs"),t=require("../Sidebar-AaIlRzgk.cjs"),I=require("../Flag-EPZOrH-U.cjs"),v=require("../Flex-CqL3Ghda.cjs"),x=require("../FullscreenToggle-DDKN5n8B.cjs"),G=require("../Grid-Bw95bKkJ.cjs"),i=require("../names-C2Yj1p3u.cjs"),L=require("../Icon-CXTl_QAP.cjs"),M=require("../IconButton-D6TenQZ_.cjs"),w=require("../List-CNz2M3-q.cjs"),N=require("../ListItem-RH-D-Wey.cjs"),O=require("../Loader-D1MtlQOH.cjs"),E=require("../Masonry-DlD-rIQX.cjs"),U=require("../Modal-B2YSCVVt.cjs"),_=require("../MultiSelect-CSJKSWpA.cjs"),f=require("../MultilineTextField-Dz6Fg8RJ.cjs"),j=require("../NumberField-DBpO-Z_7.cjs"),z=require("../OtpField-BUBYyorC.cjs"),H=require("../PageLayout-Dfbjw6jD.cjs"),J=require("../Pagination-DRwTLPh8.cjs"),K=require("../Popover-CBI1icIM.cjs"),c=require("../RadioGroup-C8u7eNBS.cjs"),Q=require("../RemoveDialog-ClyZKyUG.cjs"),V=require("../RichTextEditor-CAYt1Zm1.cjs"),W=require("../RootLayout-Cp-9CVjP.cjs"),X=require("../Select-_6WogC0u.cjs"),Y=require("../Slider-dxYVXRev.cjs"),n=require("../SpeedDial-C4jxIXTr.cjs"),Z=require("../Stepper-7pPEBRLI.cjs"),$=require("../SwatchPicker-DbAU9-ux.cjs"),ee=require("../Switch-DRkZ6kHJ.cjs"),re=require("../Table-BeOumGng.cjs"),oe=require("../Tabs-BZcMnjdC.cjs"),te=require("../TagsField-kknWiJZZ.cjs"),ie=require("../TextField-BPefnD5M.cjs"),ce=require("../ThemeToggle-DTal3RX5.cjs"),ne=require("../TimePicker-CfGrCH9T.cjs"),u=require("../Timeline-CoxW0Ia_.cjs"),ue=require("../Toaster-Bk5GtPjX.cjs"),a=require("../ToggleButtonGroup-DYRLwKKh.cjs"),ae=require("../Tooltip-Ao7az09p.cjs"),le=require("../TranslatedFields-DT3bYse6.cjs"),se=require("../Typography-BFatE1_A.cjs"),de=require("../UserCard-OlLeyyS0.cjs"),qe=require("../toastStore-B4Tk2Xk7.cjs");exports.Form=l.Form;exports.Accordion=e.Accordion;exports.AccordionItem=e.AccordionItem;exports.Alert=s.Alert;exports.Avatar=d.Avatar;exports.AvatarGroup=q.AvatarGroup;exports.Badge=T.Badge;exports.Blockquote=p.Blockquote;exports.Breadcrumbs=g.Breadcrumbs;exports.Button=C.Button;exports.Card=m.Card;exports.Checkbox=F.Checkbox;exports.Chip=S.Chip;exports.ChoiceCard=r.ChoiceCard;exports.ChoiceCardGroup=r.ChoiceCardGroup;exports.Code=h.Code;exports.CodeBlock=P.CodeBlock;exports.Col=o.Col;exports.Row=o.Row;exports.ColorPicker=k.ColorPicker;exports.DatePicker=B.DatePicker;exports.DateTimePicker=b.DateTimePicker;exports.Divider=y.Divider;exports.Dropdown=D.Dropdown;exports.EmptyState=R.EmptyState;exports.FileUploader=A.FileUploader;exports.FirstRouteRedirect=t.FirstRouteRedirect;exports.Sidebar=t.Sidebar;exports.Flag=I.Flag;exports.Flex=v.Flex;exports.FullscreenToggle=x.FullscreenToggle;exports.Grid=G.Grid;exports.ICON_COUNT=i.ICON_COUNT;exports.ICON_NAMES=i.ICON_NAMES;exports.Icon=L.Icon;exports.IconButton=M.IconButton;exports.List=w.List;exports.ListItem=N.ListItem;exports.Loader=O.Loader;exports.Masonry=E.Masonry;exports.Modal=U.Modal;exports.MultiSelect=_.MultiSelect;exports.MultilineTextField=f.MultilineTextField;exports.NumberField=j.NumberField;exports.OtpField=z.OtpField;exports.PageLayout=H.PageLayout;exports.Pagination=J.Pagination;exports.Popover=K.Popover;exports.Radio=c.Radio;exports.RadioGroup=c.RadioGroup;exports.RemoveDialog=Q.RemoveDialog;exports.RichTextEditor=V.RichTextEditor;exports.RootLayout=W.RootLayout;exports.Select=X.Select;exports.Slider=Y.Slider;exports.SpeedDial=n.SpeedDial;exports.SpeedDialAction=n.SpeedDialAction;exports.Stepper=Z.Stepper;exports.SwatchPicker=$.SwatchPicker;exports.Switch=ee.Switch;exports.Table=re.Table;exports.Tabs=oe.Tabs;exports.TagsField=te.TagsField;exports.TextField=ie.TextField;exports.ThemeToggle=ce.ThemeToggle;exports.TimePicker=ne.TimePicker;exports.Timeline=u.Timeline;exports.TimelineItem=u.TimelineItem;exports.Toaster=ue.Toaster;exports.ToggleButton=a.ToggleButton;exports.ToggleButtonGroup=a.ToggleButtonGroup;exports.Tooltip=ae.Tooltip;exports.TranslatedFields=le.TranslatedFields;exports.Typography=se.Typography;exports.UserCard=de.UserCard;exports.toast=qe.toast;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../Form-Bz2xgkEm.cjs"),e=require("../Accordion-Dy_dM79Y.cjs"),s=require("../Alert-DKIjM-9x.cjs"),d=require("../Avatar-_ufXh3AY.cjs"),q=require("../AvatarGroup-TW1pt4tj.cjs"),T=require("../Badge-BQpr2Jee.cjs"),p=require("../Blockquote-CxHwOecc.cjs"),g=require("../Breadcrumbs-CHONper7.cjs"),C=require("../Button-D4bfVNNa.cjs"),m=require("../Card-CfyaerZZ.cjs"),F=require("../Checkbox-DXOzYIAz.cjs"),S=require("../Chip-DSrdXLBU.cjs"),r=require("../ChoiceCardGroup-6eFM1eL0.cjs"),h=require("../Code-CUdpWlY5.cjs"),P=require("../CodeBlock-CgXOjKS-.cjs"),o=require("../Col-R5mAy8T9.cjs"),k=require("../ColorPicker-BwmaXCOy.cjs"),B=require("../DatePicker-DF4Epkn8.cjs"),b=require("../DateTimePicker-C557OjBU.cjs"),y=require("../Divider-CzbhdCiD.cjs"),D=require("../Dropdown-DygP50OB.cjs"),R=require("../EmptyState-CCCpZ-ZA.cjs"),A=require("../FileUploader-B4TJHyoi.cjs"),t=require("../Sidebar-AaIlRzgk.cjs"),I=require("../Flag-EPZOrH-U.cjs"),v=require("../Flex-CqL3Ghda.cjs"),x=require("../FullscreenToggle-DDKN5n8B.cjs"),G=require("../Grid-Bw95bKkJ.cjs"),i=require("../names-C2Yj1p3u.cjs"),L=require("../Icon-CXTl_QAP.cjs"),M=require("../IconButton-D6TenQZ_.cjs"),w=require("../List-CNz2M3-q.cjs"),N=require("../ListItem-RH-D-Wey.cjs"),O=require("../Loader-D1MtlQOH.cjs"),E=require("../Masonry-Bl1Mlzqw.cjs"),U=require("../Modal-B2YSCVVt.cjs"),_=require("../MultiSelect-CSJKSWpA.cjs"),f=require("../MultilineTextField-Dz6Fg8RJ.cjs"),j=require("../NumberField-DBpO-Z_7.cjs"),z=require("../OtpField-BUBYyorC.cjs"),H=require("../PageLayout-Dfbjw6jD.cjs"),J=require("../Pagination-DRwTLPh8.cjs"),K=require("../Popover-CBI1icIM.cjs"),c=require("../RadioGroup-C8u7eNBS.cjs"),Q=require("../RemoveDialog-ClyZKyUG.cjs"),V=require("../RichTextEditor-CAYt1Zm1.cjs"),W=require("../RootLayout-Cp-9CVjP.cjs"),X=require("../Select-_6WogC0u.cjs"),Y=require("../Slider-dxYVXRev.cjs"),n=require("../SpeedDial-C4jxIXTr.cjs"),Z=require("../Stepper-7pPEBRLI.cjs"),$=require("../SwatchPicker-DbAU9-ux.cjs"),ee=require("../Switch-DRkZ6kHJ.cjs"),re=require("../Table-BeOumGng.cjs"),oe=require("../Tabs-BZcMnjdC.cjs"),te=require("../TagsField-kknWiJZZ.cjs"),ie=require("../TextField-BPefnD5M.cjs"),ce=require("../ThemeToggle-DTal3RX5.cjs"),ne=require("../TimePicker-CfGrCH9T.cjs"),u=require("../Timeline-CoxW0Ia_.cjs"),ue=require("../Toaster-Bk5GtPjX.cjs"),a=require("../ToggleButtonGroup-DYRLwKKh.cjs"),ae=require("../Tooltip-Ao7az09p.cjs"),le=require("../TranslatedFields-DT3bYse6.cjs"),se=require("../Typography-BFatE1_A.cjs"),de=require("../UserCard-OlLeyyS0.cjs"),qe=require("../toastStore-B4Tk2Xk7.cjs");exports.Form=l.Form;exports.Accordion=e.Accordion;exports.AccordionItem=e.AccordionItem;exports.Alert=s.Alert;exports.Avatar=d.Avatar;exports.AvatarGroup=q.AvatarGroup;exports.Badge=T.Badge;exports.Blockquote=p.Blockquote;exports.Breadcrumbs=g.Breadcrumbs;exports.Button=C.Button;exports.Card=m.Card;exports.Checkbox=F.Checkbox;exports.Chip=S.Chip;exports.ChoiceCard=r.ChoiceCard;exports.ChoiceCardGroup=r.ChoiceCardGroup;exports.Code=h.Code;exports.CodeBlock=P.CodeBlock;exports.Col=o.Col;exports.Row=o.Row;exports.ColorPicker=k.ColorPicker;exports.DatePicker=B.DatePicker;exports.DateTimePicker=b.DateTimePicker;exports.Divider=y.Divider;exports.Dropdown=D.Dropdown;exports.EmptyState=R.EmptyState;exports.FileUploader=A.FileUploader;exports.FirstRouteRedirect=t.FirstRouteRedirect;exports.Sidebar=t.Sidebar;exports.Flag=I.Flag;exports.Flex=v.Flex;exports.FullscreenToggle=x.FullscreenToggle;exports.Grid=G.Grid;exports.ICON_COUNT=i.ICON_COUNT;exports.ICON_NAMES=i.ICON_NAMES;exports.Icon=L.Icon;exports.IconButton=M.IconButton;exports.List=w.List;exports.ListItem=N.ListItem;exports.Loader=O.Loader;exports.Masonry=E.Masonry;exports.Modal=U.Modal;exports.MultiSelect=_.MultiSelect;exports.MultilineTextField=f.MultilineTextField;exports.NumberField=j.NumberField;exports.OtpField=z.OtpField;exports.PageLayout=H.PageLayout;exports.Pagination=J.Pagination;exports.Popover=K.Popover;exports.Radio=c.Radio;exports.RadioGroup=c.RadioGroup;exports.RemoveDialog=Q.RemoveDialog;exports.RichTextEditor=V.RichTextEditor;exports.RootLayout=W.RootLayout;exports.Select=X.Select;exports.Slider=Y.Slider;exports.SpeedDial=n.SpeedDial;exports.SpeedDialAction=n.SpeedDialAction;exports.Stepper=Z.Stepper;exports.SwatchPicker=$.SwatchPicker;exports.Switch=ee.Switch;exports.Table=re.Table;exports.Tabs=oe.Tabs;exports.TagsField=te.TagsField;exports.TextField=ie.TextField;exports.ThemeToggle=ce.ThemeToggle;exports.TimePicker=ne.TimePicker;exports.Timeline=u.Timeline;exports.TimelineItem=u.TimelineItem;exports.Toaster=ue.Toaster;exports.ToggleButton=a.ToggleButton;exports.ToggleButtonGroup=a.ToggleButtonGroup;exports.Tooltip=ae.Tooltip;exports.TranslatedFields=le.TranslatedFields;exports.Typography=se.Typography;exports.UserCard=de.UserCard;exports.toast=qe.toast;
 //# sourceMappingURL=components.cjs.map

package/dist/entries/components.js

@@ -32,7 +32,7 @@ import { I as co } from "../IconButton-CBusrDa9.js";
 import { L as no } from "../List-BHgFI9Ll.js";
 import { L as So } from "../ListItem-B4yqZR-Z.js";
 import { L as go } from "../Loader-C4JoXOyA.js";
-import { M as Bo } from "../Masonry--bT8SICO.js";
+import { M as Bo } from "../Masonry-BTvtDdnt.js";
 import { M as Do } from "../Modal-BuaPDlKV.js";
 import { M as Io } from "../MultiSelect-BGRT_B60.js";
 import { M as Mo } from "../MultilineTextField-CwNCJ9lZ.js";

package/dist/entries/theme.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../ConfigProvider-ByOFXVyP.cjs");exports.ConfigProvider=e.ConfigProvider;exports.DEFAULT_FONT_FAMILY=e.DEFAULT_FONT_FAMILY;exports.DEFAULT_NESTED_TAB_QUERY_KEY=e.DEFAULT_NESTED_TAB_QUERY_KEY;exports.DEFAULT_STEP_QUERY_KEY=e.DEFAULT_STEP_QUERY_KEY;exports.DEFAULT_TABS_QUERY_KEY=e.DEFAULT_TABS_QUERY_KEY;exports.applyTheme=e.applyTheme;exports.useHeaderConfig=e.useHeaderConfig;exports.useLocales=e.useLocales;exports.useNestedTabQueryKey=e.useNestedTabQueryKey;exports.useStepQueryKey=e.useStepQueryKey;exports.useTableQueryConfig=e.useTableQueryConfig;exports.useTabsQueryKey=e.useTabsQueryKey;exports.useTheme=e.useTheme;exports.useTranslationsNamespace=e.useTranslationsNamespace;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../breakpoints-BNPC2_Te.cjs"),e=require("../ConfigProvider-ByOFXVyP.cjs");exports.BREAKPOINTS=T.BREAKPOINTS;exports.BREAKPOINT_ORDER=T.BREAKPOINT_ORDER;exports.ConfigProvider=e.ConfigProvider;exports.DEFAULT_FONT_FAMILY=e.DEFAULT_FONT_FAMILY;exports.DEFAULT_NESTED_TAB_QUERY_KEY=e.DEFAULT_NESTED_TAB_QUERY_KEY;exports.DEFAULT_STEP_QUERY_KEY=e.DEFAULT_STEP_QUERY_KEY;exports.DEFAULT_TABS_QUERY_KEY=e.DEFAULT_TABS_QUERY_KEY;exports.applyTheme=e.applyTheme;exports.useHeaderConfig=e.useHeaderConfig;exports.useLocales=e.useLocales;exports.useNestedTabQueryKey=e.useNestedTabQueryKey;exports.useStepQueryKey=e.useStepQueryKey;exports.useTableQueryConfig=e.useTableQueryConfig;exports.useTabsQueryKey=e.useTabsQueryKey;exports.useTheme=e.useTheme;exports.useTranslationsNamespace=e.useTranslationsNamespace;
 //# sourceMappingURL=theme.cjs.map

package/dist/entries/theme.d.cts

@@ -1,2 +1,2 @@
-export { applyTheme, ConfigProvider, useTheme, useLocales, useTranslationsNamespace, useTabsQueryKey, useNestedTabQueryKey, useStepQueryKey, useTableQueryConfig, useHeaderConfig, DEFAULT_TABS_QUERY_KEY, DEFAULT_NESTED_TAB_QUERY_KEY, DEFAULT_STEP_QUERY_KEY, DEFAULT_FONT_FAMILY, } from '../theme';
-export type { ThemePalette, ThemeColor, Config, ThemeConfig, ThemeColors, ThemeMode, ConfigProviderProps, LocaleConfig, KeysConfig, TableConfig, TableQueryConfig, HeaderConfig, HeaderUser, I18nConfig, } from '../theme';
+export { applyTheme, ConfigProvider, useTheme, useLocales, useTranslationsNamespace, useTabsQueryKey, useNestedTabQueryKey, useStepQueryKey, useTableQueryConfig, useHeaderConfig, DEFAULT_TABS_QUERY_KEY, DEFAULT_NESTED_TAB_QUERY_KEY, DEFAULT_STEP_QUERY_KEY, DEFAULT_FONT_FAMILY, BREAKPOINTS, BREAKPOINT_ORDER, } from '../theme';
+export type { ThemePalette, ThemeColor, Breakpoint, Config, ThemeConfig, ThemeColors, ThemeMode, ConfigProviderProps, LocaleConfig, KeysConfig, TableConfig, TableQueryConfig, HeaderConfig, HeaderUser, I18nConfig, } from '../theme';

package/dist/entries/theme.d.ts

@@ -1,2 +1,2 @@
-export { applyTheme, ConfigProvider, useTheme, useLocales, useTranslationsNamespace, useTabsQueryKey, useNestedTabQueryKey, useStepQueryKey, useTableQueryConfig, useHeaderConfig, DEFAULT_TABS_QUERY_KEY, DEFAULT_NESTED_TAB_QUERY_KEY, DEFAULT_STEP_QUERY_KEY, DEFAULT_FONT_FAMILY, } from '../theme';
-export type { ThemePalette, ThemeColor, Config, ThemeConfig, ThemeColors, ThemeMode, ConfigProviderProps, LocaleConfig, KeysConfig, TableConfig, TableQueryConfig, HeaderConfig, HeaderUser, I18nConfig, } from '../theme';
+export { applyTheme, ConfigProvider, useTheme, useLocales, useTranslationsNamespace, useTabsQueryKey, useNestedTabQueryKey, useStepQueryKey, useTableQueryConfig, useHeaderConfig, DEFAULT_TABS_QUERY_KEY, DEFAULT_NESTED_TAB_QUERY_KEY, DEFAULT_STEP_QUERY_KEY, DEFAULT_FONT_FAMILY, BREAKPOINTS, BREAKPOINT_ORDER, } from '../theme';
+export type { ThemePalette, ThemeColor, Breakpoint, Config, ThemeConfig, ThemeColors, ThemeMode, ConfigProviderProps, LocaleConfig, KeysConfig, TableConfig, TableQueryConfig, HeaderConfig, HeaderUser, I18nConfig, } from '../theme';

package/dist/entries/theme.js

@@ -1,18 +1,21 @@
-import { C as a, D as T, c as E, d as u, e as _, f as r, g as o, h as y, i as A, j as Q, k as U, l as Y, m as i, n } from "../ConfigProvider-2c94kUOk.js";
+import { B as a, a as T } from "../breakpoints-o3dzSzrU.js";
+import { C as _, D as r, c as u, d as o, e as A, f as y, g as K, h as D, i as Q, j as R, k as U, l as Y, m as f, n as i } from "../ConfigProvider-2c94kUOk.js";
 export {
-  a as ConfigProvider,
-  T as DEFAULT_FONT_FAMILY,
-  E as DEFAULT_NESTED_TAB_QUERY_KEY,
-  u as DEFAULT_STEP_QUERY_KEY,
-  _ as DEFAULT_TABS_QUERY_KEY,
-  r as applyTheme,
-  o as useHeaderConfig,
-  y as useLocales,
-  A as useNestedTabQueryKey,
-  Q as useStepQueryKey,
+  a as BREAKPOINTS,
+  T as BREAKPOINT_ORDER,
+  _ as ConfigProvider,
+  r as DEFAULT_FONT_FAMILY,
+  u as DEFAULT_NESTED_TAB_QUERY_KEY,
+  o as DEFAULT_STEP_QUERY_KEY,
+  A as DEFAULT_TABS_QUERY_KEY,
+  y as applyTheme,
+  K as useHeaderConfig,
+  D as useLocales,
+  Q as useNestedTabQueryKey,
+  R as useStepQueryKey,
   U as useTableQueryConfig,
   Y as useTabsQueryKey,
-  i as useTheme,
-  n as useTranslationsNamespace
+  f as useTheme,
+  i as useTranslationsNamespace
 };
 //# sourceMappingURL=theme.js.map

package/dist/entries/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("./Form-Bz2xgkEm.cjs"),i=require("./useForm-C7erBHt0.cjs"),m=require("./useLockBodyScroll-CIXHZo-Q.cjs"),y=require("./useMediaQuery-BCsNfMA1.cjs"),o=require("./access-DPUHbE-S.cjs"),e=require("./ConfigProvider-ByOFXVyP.cjs"),t=require("./messages-Cy-qK5xU.cjs"),r=require("./translations-CXEeeUDL.cjs"),s=require("./table-CZRQGNdk.cjs"),a=require("./Icon-CXTl_QAP.cjs"),u=require("./Accordion-Dy_dM79Y.cjs"),A=require("./Alert-DKIjM-9x.cjs"),S=require("./Avatar-_ufXh3AY.cjs"),C=require("./AvatarGroup-TW1pt4tj.cjs"),E=require("./Badge-BQpr2Jee.cjs"),b=require("./Blockquote-CxHwOecc.cjs"),D=require("./Breadcrumbs-CHONper7.cjs"),L=require("./Button-D4bfVNNa.cjs"),h=require("./Card-CfyaerZZ.cjs"),P=require("./Checkbox-DXOzYIAz.cjs"),_=require("./Chip-DSrdXLBU.cjs"),c=require("./ChoiceCardGroup-6eFM1eL0.cjs"),B=require("./Code-CUdpWlY5.cjs"),R=require("./CodeBlock-CgXOjKS-.cjs"),n=require("./Col-R5mAy8T9.cjs"),k=require("./ColorPicker-BwmaXCOy.cjs"),N=require("./DatePicker-DF4Epkn8.cjs"),U=require("./DateTimePicker-C557OjBU.cjs"),M=require("./Divider-CzbhdCiD.cjs"),I=require("./Dropdown-DygP50OB.cjs"),Q=require("./EmptyState-CCCpZ-ZA.cjs"),v=require("./FileUploader-B4TJHyoi.cjs"),l=require("./Sidebar-AaIlRzgk.cjs"),K=require("./Flag-EPZOrH-U.cjs"),x=require("./Flex-CqL3Ghda.cjs"),G=require("./FullscreenToggle-DDKN5n8B.cjs"),O=require("./Grid-Bw95bKkJ.cjs"),T=require("./names-C2Yj1p3u.cjs"),Y=require("./IconButton-D6TenQZ_.cjs"),f=require("./List-CNz2M3-q.cjs"),w=require("./ListItem-RH-D-Wey.cjs"),H=require("./Loader-D1MtlQOH.cjs"),j=require("./Masonry-DlD-rIQX.cjs"),z=require("./Modal-B2YSCVVt.cjs"),J=require("./MultiSelect-CSJKSWpA.cjs"),V=require("./MultilineTextField-Dz6Fg8RJ.cjs"),W=require("./NumberField-DBpO-Z_7.cjs"),X=require("./OtpField-BUBYyorC.cjs"),Z=require("./PageLayout-Dfbjw6jD.cjs"),$=require("./Pagination-DRwTLPh8.cjs"),ee=require("./Popover-CBI1icIM.cjs"),d=require("./RadioGroup-C8u7eNBS.cjs"),re=require("./RemoveDialog-ClyZKyUG.cjs"),oe=require("./RichTextEditor-CAYt1Zm1.cjs"),te=require("./RootLayout-Cp-9CVjP.cjs"),ie=require("./Select-_6WogC0u.cjs"),se=require("./Slider-dxYVXRev.cjs"),q=require("./SpeedDial-C4jxIXTr.cjs"),ae=require("./Stepper-7pPEBRLI.cjs"),ue=require("./SwatchPicker-DbAU9-ux.cjs"),ce=require("./Switch-DRkZ6kHJ.cjs"),ne=require("./Table-BeOumGng.cjs"),le=require("./Tabs-BZcMnjdC.cjs"),Te=require("./TagsField-kknWiJZZ.cjs"),de=require("./TextField-BPefnD5M.cjs"),qe=require("./ThemeToggle-DTal3RX5.cjs"),pe=require("./TimePicker-CfGrCH9T.cjs"),p=require("./Timeline-CoxW0Ia_.cjs"),ge=require("./Toaster-Bk5GtPjX.cjs"),g=require("./ToggleButtonGroup-DYRLwKKh.cjs"),Fe=require("./Tooltip-Ao7az09p.cjs"),me=require("./TranslatedFields-DT3bYse6.cjs"),ye=require("./Typography-BFatE1_A.cjs"),Ae=require("./UserCard-OlLeyyS0.cjs"),Se=require("./toastStore-B4Tk2Xk7.cjs");exports.Form=F.Form;exports.useDisclosure=i.useDisclosure;exports.useForm=i.useForm;exports.useLockBodyScroll=m.useLockBodyScroll;exports.useMediaQuery=y.useMediaQuery;exports.getAccessKeys=o.getAccessKeys;exports.hasAccess=o.hasAccess;exports.setAccessKeys=o.setAccessKeys;exports.useAccessKeys=o.useAccessKeys;exports.ConfigProvider=e.ConfigProvider;exports.DEFAULT_FONT_FAMILY=e.DEFAULT_FONT_FAMILY;exports.DEFAULT_NESTED_TAB_QUERY_KEY=e.DEFAULT_NESTED_TAB_QUERY_KEY;exports.DEFAULT_STEP_QUERY_KEY=e.DEFAULT_STEP_QUERY_KEY;exports.DEFAULT_TABS_QUERY_KEY=e.DEFAULT_TABS_QUERY_KEY;exports.applyTheme=e.applyTheme;exports.useHeaderConfig=e.useHeaderConfig;exports.useLanguage=e.useLanguage;exports.useLocales=e.useLocales;exports.useNestedTabQueryKey=e.useNestedTabQueryKey;exports.useStepQueryKey=e.useStepQueryKey;exports.useT=e.useT;exports.useTableQueryConfig=e.useTableQueryConfig;exports.useTabsQueryKey=e.useTabsQueryKey;exports.useTheme=e.useTheme;exports.useTranslations=e.useTranslations;exports.useTranslationsNamespace=e.useTranslationsNamespace;exports.createAppTranslator=t.createAppTranslator;exports.createTranslator=t.createTranslator;exports.flagFor=t.flagFor;exports.DEFAULT_TRANSLATIONS_NAMESPACE=r.DEFAULT_TRANSLATIONS_NAMESPACE;exports.buildTranslationName=r.buildTranslationName;exports.buildTranslations=r.buildTranslations;exports.flattenTranslations=r.flattenTranslations;exports.nestTranslations=r.nestTranslations;exports.toFormData=r.toFormData;exports.buildTableQuery=s.buildTableQuery;exports.parseTableQuery=s.parseTableQuery;exports.Icon=a.Icon;exports.icons=a.icons;exports.Accordion=u.Accordion;exports.AccordionItem=u.AccordionItem;exports.Alert=A.Alert;exports.Avatar=S.Avatar;exports.AvatarGroup=C.AvatarGroup;exports.Badge=E.Badge;exports.Blockquote=b.Blockquote;exports.Breadcrumbs=D.Breadcrumbs;exports.Button=L.Button;exports.Card=h.Card;exports.Checkbox=P.Checkbox;exports.Chip=_.Chip;exports.ChoiceCard=c.ChoiceCard;exports.ChoiceCardGroup=c.ChoiceCardGroup;exports.Code=B.Code;exports.CodeBlock=R.CodeBlock;exports.Col=n.Col;exports.Row=n.Row;exports.ColorPicker=k.ColorPicker;exports.DatePicker=N.DatePicker;exports.DateTimePicker=U.DateTimePicker;exports.Divider=M.Divider;exports.Dropdown=I.Dropdown;exports.EmptyState=Q.EmptyState;exports.FileUploader=v.FileUploader;exports.FirstRouteRedirect=l.FirstRouteRedirect;exports.Sidebar=l.Sidebar;exports.Flag=K.Flag;exports.Flex=x.Flex;exports.FullscreenToggle=G.FullscreenToggle;exports.Grid=O.Grid;exports.ICON_COUNT=T.ICON_COUNT;exports.ICON_NAMES=T.ICON_NAMES;exports.IconButton=Y.IconButton;exports.List=f.List;exports.ListItem=w.ListItem;exports.Loader=H.Loader;exports.Masonry=j.Masonry;exports.Modal=z.Modal;exports.MultiSelect=J.MultiSelect;exports.MultilineTextField=V.MultilineTextField;exports.NumberField=W.NumberField;exports.OtpField=X.OtpField;exports.PageLayout=Z.PageLayout;exports.Pagination=$.Pagination;exports.Popover=ee.Popover;exports.Radio=d.Radio;exports.RadioGroup=d.RadioGroup;exports.RemoveDialog=re.RemoveDialog;exports.RichTextEditor=oe.RichTextEditor;exports.RootLayout=te.RootLayout;exports.Select=ie.Select;exports.Slider=se.Slider;exports.SpeedDial=q.SpeedDial;exports.SpeedDialAction=q.SpeedDialAction;exports.Stepper=ae.Stepper;exports.SwatchPicker=ue.SwatchPicker;exports.Switch=ce.Switch;exports.Table=ne.Table;exports.Tabs=le.Tabs;exports.TagsField=Te.TagsField;exports.TextField=de.TextField;exports.ThemeToggle=qe.ThemeToggle;exports.TimePicker=pe.TimePicker;exports.Timeline=p.Timeline;exports.TimelineItem=p.TimelineItem;exports.Toaster=ge.Toaster;exports.ToggleButton=g.ToggleButton;exports.ToggleButtonGroup=g.ToggleButtonGroup;exports.Tooltip=Fe.Tooltip;exports.TranslatedFields=me.TranslatedFields;exports.Typography=ye.Typography;exports.UserCard=Ae.UserCard;exports.toast=Se.toast;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("./Form-Bz2xgkEm.cjs"),i=require("./useForm-C7erBHt0.cjs"),S=require("./useLockBodyScroll-CIXHZo-Q.cjs"),m=require("./useMediaQuery-BCsNfMA1.cjs"),o=require("./access-DPUHbE-S.cjs"),e=require("./ConfigProvider-ByOFXVyP.cjs"),t=require("./messages-Cy-qK5xU.cjs"),r=require("./translations-CXEeeUDL.cjs"),s=require("./table-CZRQGNdk.cjs"),a=require("./Icon-CXTl_QAP.cjs"),u=require("./Accordion-Dy_dM79Y.cjs"),y=require("./Alert-DKIjM-9x.cjs"),C=require("./Avatar-_ufXh3AY.cjs"),E=require("./AvatarGroup-TW1pt4tj.cjs"),c=require("./breakpoints-BNPC2_Te.cjs"),b=require("./Badge-BQpr2Jee.cjs"),D=require("./Blockquote-CxHwOecc.cjs"),L=require("./Breadcrumbs-CHONper7.cjs"),P=require("./Button-D4bfVNNa.cjs"),R=require("./Card-CfyaerZZ.cjs"),B=require("./Checkbox-DXOzYIAz.cjs"),_=require("./Chip-DSrdXLBU.cjs"),n=require("./ChoiceCardGroup-6eFM1eL0.cjs"),h=require("./Code-CUdpWlY5.cjs"),N=require("./CodeBlock-CgXOjKS-.cjs"),l=require("./Col-R5mAy8T9.cjs"),k=require("./ColorPicker-BwmaXCOy.cjs"),I=require("./DatePicker-DF4Epkn8.cjs"),U=require("./DateTimePicker-C557OjBU.cjs"),K=require("./Divider-CzbhdCiD.cjs"),M=require("./Dropdown-DygP50OB.cjs"),Q=require("./EmptyState-CCCpZ-ZA.cjs"),O=require("./FileUploader-B4TJHyoi.cjs"),T=require("./Sidebar-AaIlRzgk.cjs"),v=require("./Flag-EPZOrH-U.cjs"),x=require("./Flex-CqL3Ghda.cjs"),G=require("./FullscreenToggle-DDKN5n8B.cjs"),Y=require("./Grid-Bw95bKkJ.cjs"),d=require("./names-C2Yj1p3u.cjs"),f=require("./IconButton-D6TenQZ_.cjs"),w=require("./List-CNz2M3-q.cjs"),H=require("./ListItem-RH-D-Wey.cjs"),j=require("./Loader-D1MtlQOH.cjs"),z=require("./Masonry-Bl1Mlzqw.cjs"),J=require("./Modal-B2YSCVVt.cjs"),V=require("./MultiSelect-CSJKSWpA.cjs"),W=require("./MultilineTextField-Dz6Fg8RJ.cjs"),X=require("./NumberField-DBpO-Z_7.cjs"),Z=require("./OtpField-BUBYyorC.cjs"),$=require("./PageLayout-Dfbjw6jD.cjs"),ee=require("./Pagination-DRwTLPh8.cjs"),re=require("./Popover-CBI1icIM.cjs"),q=require("./RadioGroup-C8u7eNBS.cjs"),oe=require("./RemoveDialog-ClyZKyUG.cjs"),te=require("./RichTextEditor-CAYt1Zm1.cjs"),ie=require("./RootLayout-Cp-9CVjP.cjs"),se=require("./Select-_6WogC0u.cjs"),ae=require("./Slider-dxYVXRev.cjs"),p=require("./SpeedDial-C4jxIXTr.cjs"),ue=require("./Stepper-7pPEBRLI.cjs"),ce=require("./SwatchPicker-DbAU9-ux.cjs"),ne=require("./Switch-DRkZ6kHJ.cjs"),le=require("./Table-BeOumGng.cjs"),Te=require("./Tabs-BZcMnjdC.cjs"),de=require("./TagsField-kknWiJZZ.cjs"),qe=require("./TextField-BPefnD5M.cjs"),pe=require("./ThemeToggle-DTal3RX5.cjs"),ge=require("./TimePicker-CfGrCH9T.cjs"),g=require("./Timeline-CoxW0Ia_.cjs"),Ae=require("./Toaster-Bk5GtPjX.cjs"),A=require("./ToggleButtonGroup-DYRLwKKh.cjs"),Fe=require("./Tooltip-Ao7az09p.cjs"),Se=require("./TranslatedFields-DT3bYse6.cjs"),me=require("./Typography-BFatE1_A.cjs"),ye=require("./UserCard-OlLeyyS0.cjs"),Ce=require("./toastStore-B4Tk2Xk7.cjs");exports.Form=F.Form;exports.useDisclosure=i.useDisclosure;exports.useForm=i.useForm;exports.useLockBodyScroll=S.useLockBodyScroll;exports.useMediaQuery=m.useMediaQuery;exports.getAccessKeys=o.getAccessKeys;exports.hasAccess=o.hasAccess;exports.setAccessKeys=o.setAccessKeys;exports.useAccessKeys=o.useAccessKeys;exports.ConfigProvider=e.ConfigProvider;exports.DEFAULT_FONT_FAMILY=e.DEFAULT_FONT_FAMILY;exports.DEFAULT_NESTED_TAB_QUERY_KEY=e.DEFAULT_NESTED_TAB_QUERY_KEY;exports.DEFAULT_STEP_QUERY_KEY=e.DEFAULT_STEP_QUERY_KEY;exports.DEFAULT_TABS_QUERY_KEY=e.DEFAULT_TABS_QUERY_KEY;exports.applyTheme=e.applyTheme;exports.useHeaderConfig=e.useHeaderConfig;exports.useLanguage=e.useLanguage;exports.useLocales=e.useLocales;exports.useNestedTabQueryKey=e.useNestedTabQueryKey;exports.useStepQueryKey=e.useStepQueryKey;exports.useT=e.useT;exports.useTableQueryConfig=e.useTableQueryConfig;exports.useTabsQueryKey=e.useTabsQueryKey;exports.useTheme=e.useTheme;exports.useTranslations=e.useTranslations;exports.useTranslationsNamespace=e.useTranslationsNamespace;exports.createAppTranslator=t.createAppTranslator;exports.createTranslator=t.createTranslator;exports.flagFor=t.flagFor;exports.DEFAULT_TRANSLATIONS_NAMESPACE=r.DEFAULT_TRANSLATIONS_NAMESPACE;exports.buildTranslationName=r.buildTranslationName;exports.buildTranslations=r.buildTranslations;exports.flattenTranslations=r.flattenTranslations;exports.nestTranslations=r.nestTranslations;exports.toFormData=r.toFormData;exports.buildTableQuery=s.buildTableQuery;exports.parseTableQuery=s.parseTableQuery;exports.Icon=a.Icon;exports.icons=a.icons;exports.Accordion=u.Accordion;exports.AccordionItem=u.AccordionItem;exports.Alert=y.Alert;exports.Avatar=C.Avatar;exports.AvatarGroup=E.AvatarGroup;exports.BREAKPOINTS=c.BREAKPOINTS;exports.BREAKPOINT_ORDER=c.BREAKPOINT_ORDER;exports.Badge=b.Badge;exports.Blockquote=D.Blockquote;exports.Breadcrumbs=L.Breadcrumbs;exports.Button=P.Button;exports.Card=R.Card;exports.Checkbox=B.Checkbox;exports.Chip=_.Chip;exports.ChoiceCard=n.ChoiceCard;exports.ChoiceCardGroup=n.ChoiceCardGroup;exports.Code=h.Code;exports.CodeBlock=N.CodeBlock;exports.Col=l.Col;exports.Row=l.Row;exports.ColorPicker=k.ColorPicker;exports.DatePicker=I.DatePicker;exports.DateTimePicker=U.DateTimePicker;exports.Divider=K.Divider;exports.Dropdown=M.Dropdown;exports.EmptyState=Q.EmptyState;exports.FileUploader=O.FileUploader;exports.FirstRouteRedirect=T.FirstRouteRedirect;exports.Sidebar=T.Sidebar;exports.Flag=v.Flag;exports.Flex=x.Flex;exports.FullscreenToggle=G.FullscreenToggle;exports.Grid=Y.Grid;exports.ICON_COUNT=d.ICON_COUNT;exports.ICON_NAMES=d.ICON_NAMES;exports.IconButton=f.IconButton;exports.List=w.List;exports.ListItem=H.ListItem;exports.Loader=j.Loader;exports.Masonry=z.Masonry;exports.Modal=J.Modal;exports.MultiSelect=V.MultiSelect;exports.MultilineTextField=W.MultilineTextField;exports.NumberField=X.NumberField;exports.OtpField=Z.OtpField;exports.PageLayout=$.PageLayout;exports.Pagination=ee.Pagination;exports.Popover=re.Popover;exports.Radio=q.Radio;exports.RadioGroup=q.RadioGroup;exports.RemoveDialog=oe.RemoveDialog;exports.RichTextEditor=te.RichTextEditor;exports.RootLayout=ie.RootLayout;exports.Select=se.Select;exports.Slider=ae.Slider;exports.SpeedDial=p.SpeedDial;exports.SpeedDialAction=p.SpeedDialAction;exports.Stepper=ue.Stepper;exports.SwatchPicker=ce.SwatchPicker;exports.Switch=ne.Switch;exports.Table=le.Table;exports.Tabs=Te.Tabs;exports.TagsField=de.TagsField;exports.TextField=qe.TextField;exports.ThemeToggle=pe.ThemeToggle;exports.TimePicker=ge.TimePicker;exports.Timeline=g.Timeline;exports.TimelineItem=g.TimelineItem;exports.Toaster=Ae.Toaster;exports.ToggleButton=A.ToggleButton;exports.ToggleButtonGroup=A.ToggleButtonGroup;exports.Tooltip=Fe.Tooltip;exports.TranslatedFields=Se.TranslatedFields;exports.Typography=me.Typography;exports.UserCard=ye.UserCard;exports.toast=Ce.toast;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -3,165 +3,168 @@ import { u as s, a as t } from "./useForm-B_5wDIER.js";
 import { u as m } from "./useLockBodyScroll-DwBILLPK.js";
 import { u as x } from "./useMediaQuery-_1EcFoC5.js";
 import { g as T, h as l, s as u, u as c } from "./access-Db4knwyR.js";
-import { C as d, D as A, c as C, d as F, e as S, f as g, g as y, u as D, h as E, i as L, j as b, a as R, k as _, l as B, m as h, b as N, n as P } from "./ConfigProvider-2c94kUOk.js";
-import { c as M, a as U, f as k } from "./messages-C-zecFBE.js";
-import { D as K, b as O, a as Y, f as v, n as G, t as w } from "./translations-D15tFHM1.js";
+import { C as d, D as A, c as C, d as F, e as S, f as g, g as E, u as D, h as y, i as R, j as B, a as L, k as b, l as _, m as N, b as P, n as h } from "./ConfigProvider-2c94kUOk.js";
+import { c as M, a as U, f as K } from "./messages-C-zecFBE.js";
+import { D as O, b as Q, a as Y, f as v, n as G, t as w } from "./translations-D15tFHM1.js";
 import { b as q, p as H } from "./table-DF3zTrC3.js";
 import { I as J, i as V } from "./Icon-CophpkHo.js";
 import { A as X, a as Z } from "./Accordion-CAxa1I-m.js";
 import { A as oo } from "./Alert-BQpA48PY.js";
 import { A as eo } from "./Avatar-BJVCdo-K.js";
 import { A as so } from "./AvatarGroup-DdJf4aT7.js";
-import { B as po } from "./Badge-DSWigoGC.js";
-import { B as fo } from "./Blockquote-CNIuJFHq.js";
-import { B as io } from "./Breadcrumbs-Bx5UgwDy.js";
-import { B as lo } from "./Button-DhEv0YFk.js";
-import { C as co } from "./Card-DzClqJuu.js";
-import { C as Ao } from "./Checkbox-XKL_Q5qj.js";
-import { C as Fo } from "./Chip-Cfo0v3Z8.js";
-import { C as go, a as yo } from "./ChoiceCardGroup-CvFzZlgI.js";
-import { C as Eo } from "./Code-DaEpXHfF.js";
-import { C as bo } from "./CodeBlock-BWxQyKRo.js";
-import { C as _o, R as Bo } from "./Col-D2TfZKiM.js";
-import { C as No } from "./ColorPicker-2udt1ORM.js";
-import { D as Io } from "./DatePicker-WM9TC6L_.js";
-import { D as Uo } from "./DateTimePicker-DBtcWK0F.js";
-import { D as Qo } from "./Divider-LtH3dLgw.js";
-import { D as Oo } from "./Dropdown-DKAXue5_.js";
-import { E as vo } from "./EmptyState-CetM49vk.js";
-import { F as wo } from "./FileUploader-VtmmwUFE.js";
-import { F as qo, S as Ho } from "./Sidebar-DRCs2ygZ.js";
-import { F as Jo } from "./Flag-BWCX6oSR.js";
-import { F as Wo } from "./Flex-Bj3mMF5A.js";
-import { F as Zo } from "./FullscreenToggle-oWzYqUPH.js";
-import { G as or } from "./Grid-CY-syhTX.js";
-import { I as er, a as ar } from "./names-D8ABK2Wk.js";
-import { I as tr } from "./IconButton-CBusrDa9.js";
-import { L as mr } from "./List-BHgFI9Ll.js";
-import { L as xr } from "./ListItem-B4yqZR-Z.js";
-import { L as Tr } from "./Loader-C4JoXOyA.js";
-import { M as ur } from "./Masonry--bT8SICO.js";
-import { M as nr } from "./Modal-BuaPDlKV.js";
-import { M as Ar } from "./MultiSelect-BGRT_B60.js";
-import { M as Fr } from "./MultilineTextField-CwNCJ9lZ.js";
-import { N as gr } from "./NumberField-DBvhSQCw.js";
-import { O as Dr } from "./OtpField-CTq-CUbF.js";
-import { P as Lr } from "./PageLayout-DddzYw2B.js";
-import { P as Rr } from "./Pagination-CN9V8M5C.js";
-import { P as Br } from "./Popover-CgIU4Rhg.js";
-import { R as Nr, a as Pr } from "./RadioGroup-DbodUJW8.js";
-import { R as Mr } from "./RemoveDialog-Bvt6sH79.js";
-import { R as kr } from "./RichTextEditor-BTx8Py3I.js";
-import { R as Kr } from "./RootLayout-DCpfuFWF.js";
-import { S as Yr } from "./Select-PbTyxB1Q.js";
-import { S as Gr } from "./Slider-oGXd5e9X.js";
-import { S as jr, a as qr } from "./SpeedDial-DgFj16BQ.js";
-import { S as zr } from "./Stepper-COKAyN1L.js";
-import { S as Vr } from "./SwatchPicker-D30aSrbY.js";
-import { S as Xr } from "./Switch-DMPJ0fhB.js";
-import { T as $r } from "./Table-BjPLvMbf.js";
-import { T as re } from "./Tabs--DDM-zKe.js";
-import { T as ae } from "./TagsField-BTJcZS9P.js";
-import { T as te } from "./TextField-DMI1X09n.js";
-import { T as me } from "./ThemeToggle-Deh9j8pm.js";
-import { T as xe } from "./TimePicker-3JgvK2on.js";
-import { T as Te, a as le } from "./Timeline-WkV4k_we.js";
-import { T as ce } from "./Toaster-D-eG1xv7.js";
-import { T as de, a as Ae } from "./ToggleButtonGroup-BWd7MOcc.js";
-import { T as Fe } from "./Tooltip-Cb_FKxT9.js";
-import { T as ge } from "./TranslatedFields-CI0F9bHw.js";
-import { T as De } from "./Typography-Cta6Rg4L.js";
-import { U as Le } from "./UserCard-BhqtX1vU.js";
-import { t as Re } from "./toastStore-Cx_JOKwS.js";
+import { B as po, a as mo } from "./breakpoints-o3dzSzrU.js";
+import { B as xo } from "./Badge-DSWigoGC.js";
+import { B as To } from "./Blockquote-CNIuJFHq.js";
+import { B as uo } from "./Breadcrumbs-Bx5UgwDy.js";
+import { B as no } from "./Button-DhEv0YFk.js";
+import { C as Co } from "./Card-DzClqJuu.js";
+import { C as So } from "./Checkbox-XKL_Q5qj.js";
+import { C as Eo } from "./Chip-Cfo0v3Z8.js";
+import { C as yo, a as Ro } from "./ChoiceCardGroup-CvFzZlgI.js";
+import { C as Lo } from "./Code-DaEpXHfF.js";
+import { C as _o } from "./CodeBlock-BWxQyKRo.js";
+import { C as Po, R as ho } from "./Col-D2TfZKiM.js";
+import { C as Mo } from "./ColorPicker-2udt1ORM.js";
+import { D as Ko } from "./DatePicker-WM9TC6L_.js";
+import { D as Oo } from "./DateTimePicker-DBtcWK0F.js";
+import { D as Yo } from "./Divider-LtH3dLgw.js";
+import { D as Go } from "./Dropdown-DKAXue5_.js";
+import { E as jo } from "./EmptyState-CetM49vk.js";
+import { F as Ho } from "./FileUploader-VtmmwUFE.js";
+import { F as Jo, S as Vo } from "./Sidebar-DRCs2ygZ.js";
+import { F as Xo } from "./Flag-BWCX6oSR.js";
+import { F as $o } from "./Flex-Bj3mMF5A.js";
+import { F as rr } from "./FullscreenToggle-oWzYqUPH.js";
+import { G as ar } from "./Grid-CY-syhTX.js";
+import { I as tr, a as pr } from "./names-D8ABK2Wk.js";
+import { I as fr } from "./IconButton-CBusrDa9.js";
+import { L as ir } from "./List-BHgFI9Ll.js";
+import { L as lr } from "./ListItem-B4yqZR-Z.js";
+import { L as cr } from "./Loader-C4JoXOyA.js";
+import { M as dr } from "./Masonry-BTvtDdnt.js";
+import { M as Cr } from "./Modal-BuaPDlKV.js";
+import { M as Sr } from "./MultiSelect-BGRT_B60.js";
+import { M as Er } from "./MultilineTextField-CwNCJ9lZ.js";
+import { N as yr } from "./NumberField-DBvhSQCw.js";
+import { O as Br } from "./OtpField-CTq-CUbF.js";
+import { P as br } from "./PageLayout-DddzYw2B.js";
+import { P as Nr } from "./Pagination-CN9V8M5C.js";
+import { P as hr } from "./Popover-CgIU4Rhg.js";
+import { R as Mr, a as Ur } from "./RadioGroup-DbodUJW8.js";
+import { R as kr } from "./RemoveDialog-Bvt6sH79.js";
+import { R as Qr } from "./RichTextEditor-BTx8Py3I.js";
+import { R as vr } from "./RootLayout-DCpfuFWF.js";
+import { S as wr } from "./Select-PbTyxB1Q.js";
+import { S as qr } from "./Slider-oGXd5e9X.js";
+import { S as zr, a as Jr } from "./SpeedDial-DgFj16BQ.js";
+import { S as Wr } from "./Stepper-COKAyN1L.js";
+import { S as Zr } from "./SwatchPicker-D30aSrbY.js";
+import { S as oe } from "./Switch-DMPJ0fhB.js";
+import { T as ee } from "./Table-BjPLvMbf.js";
+import { T as se } from "./Tabs--DDM-zKe.js";
+import { T as pe } from "./TagsField-BTJcZS9P.js";
+import { T as fe } from "./TextField-DMI1X09n.js";
+import { T as ie } from "./ThemeToggle-Deh9j8pm.js";
+import { T as le } from "./TimePicker-3JgvK2on.js";
+import { T as ce, a as ne } from "./Timeline-WkV4k_we.js";
+import { T as Ae } from "./Toaster-D-eG1xv7.js";
+import { T as Fe, a as Se } from "./ToggleButtonGroup-BWd7MOcc.js";
+import { T as Ee } from "./Tooltip-Cb_FKxT9.js";
+import { T as ye } from "./TranslatedFields-CI0F9bHw.js";
+import { T as Be } from "./Typography-Cta6Rg4L.js";
+import { U as be } from "./UserCard-BhqtX1vU.js";
+import { t as Ne } from "./toastStore-Cx_JOKwS.js";
 export {
   X as Accordion,
   Z as AccordionItem,
   oo as Alert,
   eo as Avatar,
   so as AvatarGroup,
-  po as Badge,
-  fo as Blockquote,
-  io as Breadcrumbs,
-  lo as Button,
-  co as Card,
-  Ao as Checkbox,
-  Fo as Chip,
-  go as ChoiceCard,
-  yo as ChoiceCardGroup,
-  Eo as Code,
-  bo as CodeBlock,
-  _o as Col,
-  No as ColorPicker,
+  po as BREAKPOINTS,
+  mo as BREAKPOINT_ORDER,
+  xo as Badge,
+  To as Blockquote,
+  uo as Breadcrumbs,
+  no as Button,
+  Co as Card,
+  So as Checkbox,
+  Eo as Chip,
+  yo as ChoiceCard,
+  Ro as ChoiceCardGroup,
+  Lo as Code,
+  _o as CodeBlock,
+  Po as Col,
+  Mo as ColorPicker,
   d as ConfigProvider,
   A as DEFAULT_FONT_FAMILY,
   C as DEFAULT_NESTED_TAB_QUERY_KEY,
   F as DEFAULT_STEP_QUERY_KEY,
   S as DEFAULT_TABS_QUERY_KEY,
-  K as DEFAULT_TRANSLATIONS_NAMESPACE,
-  Io as DatePicker,
-  Uo as DateTimePicker,
-  Qo as Divider,
-  Oo as Dropdown,
-  vo as EmptyState,
-  wo as FileUploader,
-  qo as FirstRouteRedirect,
-  Jo as Flag,
-  Wo as Flex,
+  O as DEFAULT_TRANSLATIONS_NAMESPACE,
+  Ko as DatePicker,
+  Oo as DateTimePicker,
+  Yo as Divider,
+  Go as Dropdown,
+  jo as EmptyState,
+  Ho as FileUploader,
+  Jo as FirstRouteRedirect,
+  Xo as Flag,
+  $o as Flex,
   e as Form,
-  Zo as FullscreenToggle,
-  or as Grid,
-  er as ICON_COUNT,
-  ar as ICON_NAMES,
+  rr as FullscreenToggle,
+  ar as Grid,
+  tr as ICON_COUNT,
+  pr as ICON_NAMES,
   J as Icon,
-  tr as IconButton,
-  mr as List,
-  xr as ListItem,
-  Tr as Loader,
-  ur as Masonry,
-  nr as Modal,
-  Ar as MultiSelect,
-  Fr as MultilineTextField,
-  gr as NumberField,
-  Dr as OtpField,
-  Lr as PageLayout,
-  Rr as Pagination,
-  Br as Popover,
-  Nr as Radio,
-  Pr as RadioGroup,
-  Mr as RemoveDialog,
-  kr as RichTextEditor,
-  Kr as RootLayout,
-  Bo as Row,
-  Yr as Select,
-  Ho as Sidebar,
-  Gr as Slider,
-  jr as SpeedDial,
-  qr as SpeedDialAction,
-  zr as Stepper,
-  Vr as SwatchPicker,
-  Xr as Switch,
-  $r as Table,
-  re as Tabs,
-  ae as TagsField,
-  te as TextField,
-  me as ThemeToggle,
-  xe as TimePicker,
-  Te as Timeline,
-  le as TimelineItem,
-  ce as Toaster,
-  de as ToggleButton,
-  Ae as ToggleButtonGroup,
-  Fe as Tooltip,
-  ge as TranslatedFields,
-  De as Typography,
-  Le as UserCard,
+  fr as IconButton,
+  ir as List,
+  lr as ListItem,
+  cr as Loader,
+  dr as Masonry,
+  Cr as Modal,
+  Sr as MultiSelect,
+  Er as MultilineTextField,
+  yr as NumberField,
+  Br as OtpField,
+  br as PageLayout,
+  Nr as Pagination,
+  hr as Popover,
+  Mr as Radio,
+  Ur as RadioGroup,
+  kr as RemoveDialog,
+  Qr as RichTextEditor,
+  vr as RootLayout,
+  ho as Row,
+  wr as Select,
+  Vo as Sidebar,
+  qr as Slider,
+  zr as SpeedDial,
+  Jr as SpeedDialAction,
+  Wr as Stepper,
+  Zr as SwatchPicker,
+  oe as Switch,
+  ee as Table,
+  se as Tabs,
+  pe as TagsField,
+  fe as TextField,
+  ie as ThemeToggle,
+  le as TimePicker,
+  ce as Timeline,
+  ne as TimelineItem,
+  Ae as Toaster,
+  Fe as ToggleButton,
+  Se as ToggleButtonGroup,
+  Ee as Tooltip,
+  ye as TranslatedFields,
+  Be as Typography,
+  be as UserCard,
   g as applyTheme,
   q as buildTableQuery,
-  O as buildTranslationName,
+  Q as buildTranslationName,
   Y as buildTranslations,
   M as createAppTranslator,
   U as createTranslator,
-  k as flagFor,
+  K as flagFor,
   v as flattenTranslations,
   T as getAccessKeys,
   l as hasAccess,
@@ -170,22 +173,22 @@ export {
   H as parseTableQuery,
   u as setAccessKeys,
   w as toFormData,
-  Re as toast,
+  Ne as toast,
   c as useAccessKeys,
   s as useDisclosure,
   t as useForm,
-  y as useHeaderConfig,
+  E as useHeaderConfig,
   D as useLanguage,
-  E as useLocales,
+  y as useLocales,
   m as useLockBodyScroll,
   x as useMediaQuery,
-  L as useNestedTabQueryKey,
-  b as useStepQueryKey,
-  R as useT,
-  _ as useTableQueryConfig,
-  B as useTabsQueryKey,
-  h as useTheme,
-  N as useTranslations,
-  P as useTranslationsNamespace
+  R as useNestedTabQueryKey,
+  B as useStepQueryKey,
+  L as useT,
+  b as useTableQueryConfig,
+  _ as useTabsQueryKey,
+  N as useTheme,
+  P as useTranslations,
+  h as useTranslationsNamespace
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/theme/breakpoints.d.cts

@@ -0,0 +1,20 @@
+/**
+ * The library's shared responsive breakpoints — the single source of truth for width thresholds.
+ *
+ * Mobile-first **min-width** values in px. `xs` is the base (`0`); the two values the component CSS
+ * already keys off (`≤575.98px` phones, `≤1279.98px` tablet/overlay) line up with `sm` (576) and `xl`
+ * (1280), so this scale is a superset of what the styles already use rather than a new set. Consume
+ * these instead of hardcoding pixel thresholds, and derive the `Breakpoint` type from here rather than
+ * re-listing the keys locally.
+ */
+export declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1280;
+};
+/** A responsive breakpoint key (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`). */
+export type Breakpoint = keyof typeof BREAKPOINTS;
+/** Breakpoint keys in ascending (mobile-first) order. */
+export declare const BREAKPOINT_ORDER: readonly Breakpoint[];

package/dist/theme/breakpoints.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The library's shared responsive breakpoints — the single source of truth for width thresholds.
+ *
+ * Mobile-first **min-width** values in px. `xs` is the base (`0`); the two values the component CSS
+ * already keys off (`≤575.98px` phones, `≤1279.98px` tablet/overlay) line up with `sm` (576) and `xl`
+ * (1280), so this scale is a superset of what the styles already use rather than a new set. Consume
+ * these instead of hardcoding pixel thresholds, and derive the `Breakpoint` type from here rather than
+ * re-listing the keys locally.
+ */
+export declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1280;
+};
+/** A responsive breakpoint key (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`). */
+export type Breakpoint = keyof typeof BREAKPOINTS;
+/** Breakpoint keys in ascending (mobile-first) order. */
+export declare const BREAKPOINT_ORDER: readonly Breakpoint[];

package/dist/theme/index.d.cts

@@ -1,5 +1,7 @@
 export { applyTheme } from './applyTheme';
 export type { ThemePalette, ThemeColor } from './applyTheme';
+export { BREAKPOINTS, BREAKPOINT_ORDER } from './breakpoints';
+export type { Breakpoint } from './breakpoints';
 export { ConfigProvider, useTheme, useLocales, useTranslationsNamespace, useTabsQueryKey, useNestedTabQueryKey, useStepQueryKey, useTableQueryConfig, useHeaderConfig, useT, useTranslations, useLanguage, DEFAULT_TABS_QUERY_KEY, DEFAULT_NESTED_TAB_QUERY_KEY, DEFAULT_STEP_QUERY_KEY, DEFAULT_FONT_FAMILY, } from './ConfigProvider';
 export type { Config, ThemeConfig, ThemeColors, ThemeMode, ConfigProviderProps, LocaleConfig, KeysConfig, TableConfig, TableQueryConfig, HeaderConfig, HeaderUser, I18nConfig, } from './ConfigProvider';
 export type { Messages, MessageKey, MessageCatalog, MessageOverrides, Translator, AppMessages, AppTranslator, } from '../i18n/messages';

package/dist/theme/index.d.ts

@@ -1,5 +1,7 @@
 export { applyTheme } from './applyTheme';
 export type { ThemePalette, ThemeColor } from './applyTheme';
+export { BREAKPOINTS, BREAKPOINT_ORDER } from './breakpoints';
+export type { Breakpoint } from './breakpoints';
 export { ConfigProvider, useTheme, useLocales, useTranslationsNamespace, useTabsQueryKey, useNestedTabQueryKey, useStepQueryKey, useTableQueryConfig, useHeaderConfig, useT, useTranslations, useLanguage, DEFAULT_TABS_QUERY_KEY, DEFAULT_NESTED_TAB_QUERY_KEY, DEFAULT_STEP_QUERY_KEY, DEFAULT_FONT_FAMILY, } from './ConfigProvider';
 export type { Config, ThemeConfig, ThemeColors, ThemeMode, ConfigProviderProps, LocaleConfig, KeysConfig, TableConfig, TableQueryConfig, HeaderConfig, HeaderUser, I18nConfig, } from './ConfigProvider';
 export type { Messages, MessageKey, MessageCatalog, MessageOverrides, Translator, AppMessages, AppTranslator, } from '../i18n/messages';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techzyapp/ui-library",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Techzy UI — reusable React component library for admin panels.",
   "type": "module",
   "license": "MIT",

package/dist/Masonry--bT8SICO.js

@@ -1,80 +0,0 @@
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as D, useMemo as E, Children as G, useState as R, useRef as v, useCallback as b, useLayoutEffect as O, useEffect as _ } from "react";
-import { s as C } from "./Flex-Bj3mMF5A.js";
-const j = 200, q = (u, r) => u.length === r.length && u.every((l, m) => l === r[m]), W = D(function({ columns: r = 3, minColumnWidth: l, gap: m = "md", padding: I, className: w, style: A, children: g, ...H }, i) {
-  const h = E(() => G.toArray(g), [g]), n = h.length, [c, T] = R(() => Math.max(1, r)), [x, S] = R([]), p = v(null), d = v([]), k = b(
-    (e) => {
-      p.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
-    },
-    [i]
-  ), f = b(() => {
-    const e = p.current;
-    if (!e) return;
-    let o = Math.max(1, r);
-    if (l != null) {
-      const t = parseFloat(getComputedStyle(e).columnGap) || 0, a = e.clientWidth;
-      o = Math.max(1, Math.floor((a + t) / (l + t)));
-    }
-    T((t) => t === o ? t : o);
-    const s = d.current.slice(0, n).map((t) => t ? t.offsetHeight : 0);
-    S((t) => q(t, s) ? t : s);
-  }, [r, l, n]);
-  O(f, [f, h, c]), _(() => {
-    const e = p.current;
-    if (!e || typeof ResizeObserver > "u") return;
-    const o = new ResizeObserver(() => f());
-    return o.observe(e), d.current.slice(0, n).forEach((s) => s && o.observe(s)), () => o.disconnect();
-  }, [f, n, c]);
-  const z = E(() => {
-    const e = Array.from({ length: c }, () => []), o = new Array(c).fill(0);
-    for (let s = 0; s < n; s++) {
-      let t = 0;
-      for (let a = 1; a < c; a++) o[a] < o[t] && (t = a);
-      e[t].push(s), o[t] += x[s] || j;
-    }
-    return e;
-  }, [c, n, x]), M = C(m);
-  return /* @__PURE__ */ y(
-    "div",
-    {
-      ref: k,
-      className: w,
-      style: {
-        display: "flex",
-        alignItems: "flex-start",
-        gap: M,
-        padding: C(I),
-        ...A
-      },
-      ...H,
-      children: z.map((e, o) => /* @__PURE__ */ y(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: M,
-            flex: "1 1 0",
-            minWidth: 0
-          },
-          children: e.map((s) => /* @__PURE__ */ y(
-            "div",
-            {
-              ref: (t) => {
-                d.current[s] = t;
-              },
-              style: { minWidth: 0 },
-              children: h[s]
-            },
-            s
-          ))
-        },
-        o
-      ))
-    }
-  );
-});
-export {
-  W as M
-};
-//# sourceMappingURL=Masonry--bT8SICO.js.map

package/dist/Masonry--bT8SICO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Masonry--bT8SICO.js","sources":["../src/components/Masonry/Masonry.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { space, type Spacing } from '../Flex/Flex'\n\n// nominal height for a not-yet-measured item, so the first (pre-measure) pass spreads items across\n// columns round-robin instead of dumping them all into the first one; corrected on the layout pass.\nconst ESTIMATED_ITEM_HEIGHT = 200\n\nexport interface MasonryProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed number of columns. Defaults to `3`. Ignored when `minColumnWidth` is set. */\n  columns?: number\n  /** Responsive: fit as many equal columns as this min pixel width allows (overrides `columns`). */\n  minColumnWidth?: number\n  /** Gap between items, horizontally and vertically (token key, px number, or CSS value). Defaults to `md`. */\n  gap?: Spacing\n  /** Padding around the grid (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** The items to lay out. */\n  children?: ReactNode\n}\n\nconst arraysEqual = (a: number[], b: number[]) =>\n  a.length === b.length && a.every((v, i) => v === b[i])\n\n/**\n * A masonry layout — packs items of varying heights into balanced columns, always adding the next item\n * to the **shortest** column (Pinterest-style), so columns stay level rather than following a fixed\n * grid. Item heights are measured in the DOM (a `ResizeObserver` re-balances on content/size changes),\n * so it works with any children. Use a fixed `columns` count or a responsive `minColumnWidth`; `gap`\n * spaces items on both axes. Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer\n * `style` merges last. Reading order flows left-to-right across the columns.\n */\nexport const Masonry = forwardRef<HTMLDivElement, MasonryProps>(function Masonry(\n  { columns = 3, minColumnWidth, gap = 'md', padding, className, style, children, ...props },\n  ref,\n) {\n  const items = useMemo(() => Children.toArray(children), [children])\n  const count = items.length\n\n  const [colCount, setColCount] = useState(() => Math.max(1, columns))\n  const [heights, setHeights] = useState<number[]>([])\n\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const itemRefs = useRef<Array<HTMLDivElement | null>>([])\n\n  // merge the internal measuring ref with the forwarded ref\n  const setRootRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  // measure the container width → column count, and each item's height → the balance\n  const measure = useCallback(() => {\n    const root = rootRef.current\n    if (!root) return\n\n    let nextCols = Math.max(1, columns)\n    if (minColumnWidth != null) {\n      const g = parseFloat(getComputedStyle(root).columnGap) || 0\n      const width = root.clientWidth\n      nextCols = Math.max(1, Math.floor((width + g) / (minColumnWidth + g)))\n    }\n    setColCount((prev) => (prev === nextCols ? prev : nextCols))\n\n    const next = itemRefs.current.slice(0, count).map((el) => (el ? el.offsetHeight : 0))\n    setHeights((prev) => (arraysEqual(prev, next) ? prev : next))\n  }, [columns, minColumnWidth, count])\n\n  // measure before paint (mount + whenever the item set or column count changes)\n  useLayoutEffect(measure, [measure, items, colCount])\n\n  // re-balance on container resize and on any item resizing (image loads, dynamic content, …)\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root || typeof ResizeObserver === 'undefined') return\n    const ro = new ResizeObserver(() => measure())\n    ro.observe(root)\n    itemRefs.current.slice(0, count).forEach((el) => el && ro.observe(el))\n    return () => ro.disconnect()\n  }, [measure, count, colCount])\n\n  // greedily assign each item (in order) to the currently shortest column\n  const columnsItems = useMemo(() => {\n    const buckets: number[][] = Array.from({ length: colCount }, () => [])\n    const acc = new Array(colCount).fill(0)\n    for (let i = 0; i < count; i++) {\n      let min = 0\n      for (let c = 1; c < colCount; c++) if (acc[c] < acc[min]) min = c\n      buckets[min].push(i)\n      acc[min] += heights[i] || ESTIMATED_ITEM_HEIGHT\n    }\n    return buckets\n  }, [colCount, count, heights])\n\n  const gapValue = space(gap)\n\n  return (\n    <div\n      ref={setRootRef}\n      className={className}\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: gapValue,\n        padding: space(padding),\n        ...style,\n      }}\n      {...props}\n    >\n      {columnsItems.map((indices, c) => (\n        <div\n          key={c}\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: gapValue,\n            flex: '1 1 0',\n            minWidth: 0,\n          }}\n        >\n          {indices.map((i) => (\n            <div\n              key={i}\n              ref={(el) => {\n                itemRefs.current[i] = el\n              }}\n              style={{ minWidth: 0 } as CSSProperties}\n            >\n              {items[i]}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n})\n"],"names":["ESTIMATED_ITEM_HEIGHT","arraysEqual","a","b","v","i","Masonry","forwardRef","columns","minColumnWidth","gap","padding","className","style","children","props","ref","items","useMemo","Children","count","colCount","setColCount","useState","heights","setHeights","rootRef","useRef","itemRefs","setRootRef","useCallback","node","measure","root","nextCols","g","width","prev","next","el","useLayoutEffect","useEffect","ro","columnsItems","buckets","acc","min","c","gapValue","space","jsx","indices"],"mappings":"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"}

package/dist/Masonry-DlD-rIQX.cjs

@@ -1,2 +0,0 @@
-"use strict";const x=require("react/jsx-runtime"),r=require("react"),E=require("./Flex-CqL3Ghda.cjs"),H=200,S=(h,o)=>h.length===o.length&&h.every((u,m)=>u===o[m]),T=r.forwardRef(function({columns:o=3,minColumnWidth:u,gap:m="md",padding:b,className:v,style:C,children:g,...I},i){const y=r.useMemo(()=>r.Children.toArray(g),[g]),c=y.length,[a,j]=r.useState(()=>Math.max(1,o)),[M,q]=r.useState([]),d=r.useRef(null),p=r.useRef([]),w=r.useCallback(t=>{d.current=t,typeof i=="function"?i(t):i&&(i.current=t)},[i]),f=r.useCallback(()=>{const t=d.current;if(!t)return;let n=Math.max(1,o);if(u!=null){const e=parseFloat(getComputedStyle(t).columnGap)||0,l=t.clientWidth;n=Math.max(1,Math.floor((l+e)/(u+e)))}j(e=>e===n?e:n);const s=p.current.slice(0,c).map(e=>e?e.offsetHeight:0);q(e=>S(e,s)?e:s)},[o,u,c]);r.useLayoutEffect(f,[f,y,a]),r.useEffect(()=>{const t=d.current;if(!t||typeof ResizeObserver>"u")return;const n=new ResizeObserver(()=>f());return n.observe(t),p.current.slice(0,c).forEach(s=>s&&n.observe(s)),()=>n.disconnect()},[f,c,a]);const A=r.useMemo(()=>{const t=Array.from({length:a},()=>[]),n=new Array(a).fill(0);for(let s=0;s<c;s++){let e=0;for(let l=1;l<a;l++)n[l]<n[e]&&(e=l);t[e].push(s),n[e]+=M[s]||H}return t},[a,c,M]),R=E.space(m);return x.jsx("div",{ref:w,className:v,style:{display:"flex",alignItems:"flex-start",gap:R,padding:E.space(b),...C},...I,children:A.map((t,n)=>x.jsx("div",{style:{display:"flex",flexDirection:"column",gap:R,flex:"1 1 0",minWidth:0},children:t.map(s=>x.jsx("div",{ref:e=>{p.current[s]=e},style:{minWidth:0},children:y[s]},s))},n))})});exports.Masonry=T;
-//# sourceMappingURL=Masonry-DlD-rIQX.cjs.map

package/dist/Masonry-DlD-rIQX.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Masonry-DlD-rIQX.cjs","sources":["../src/components/Masonry/Masonry.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { space, type Spacing } from '../Flex/Flex'\n\n// nominal height for a not-yet-measured item, so the first (pre-measure) pass spreads items across\n// columns round-robin instead of dumping them all into the first one; corrected on the layout pass.\nconst ESTIMATED_ITEM_HEIGHT = 200\n\nexport interface MasonryProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed number of columns. Defaults to `3`. Ignored when `minColumnWidth` is set. */\n  columns?: number\n  /** Responsive: fit as many equal columns as this min pixel width allows (overrides `columns`). */\n  minColumnWidth?: number\n  /** Gap between items, horizontally and vertically (token key, px number, or CSS value). Defaults to `md`. */\n  gap?: Spacing\n  /** Padding around the grid (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** The items to lay out. */\n  children?: ReactNode\n}\n\nconst arraysEqual = (a: number[], b: number[]) =>\n  a.length === b.length && a.every((v, i) => v === b[i])\n\n/**\n * A masonry layout — packs items of varying heights into balanced columns, always adding the next item\n * to the **shortest** column (Pinterest-style), so columns stay level rather than following a fixed\n * grid. Item heights are measured in the DOM (a `ResizeObserver` re-balances on content/size changes),\n * so it works with any children. Use a fixed `columns` count or a responsive `minColumnWidth`; `gap`\n * spaces items on both axes. Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer\n * `style` merges last. Reading order flows left-to-right across the columns.\n */\nexport const Masonry = forwardRef<HTMLDivElement, MasonryProps>(function Masonry(\n  { columns = 3, minColumnWidth, gap = 'md', padding, className, style, children, ...props },\n  ref,\n) {\n  const items = useMemo(() => Children.toArray(children), [children])\n  const count = items.length\n\n  const [colCount, setColCount] = useState(() => Math.max(1, columns))\n  const [heights, setHeights] = useState<number[]>([])\n\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const itemRefs = useRef<Array<HTMLDivElement | null>>([])\n\n  // merge the internal measuring ref with the forwarded ref\n  const setRootRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  // measure the container width → column count, and each item's height → the balance\n  const measure = useCallback(() => {\n    const root = rootRef.current\n    if (!root) return\n\n    let nextCols = Math.max(1, columns)\n    if (minColumnWidth != null) {\n      const g = parseFloat(getComputedStyle(root).columnGap) || 0\n      const width = root.clientWidth\n      nextCols = Math.max(1, Math.floor((width + g) / (minColumnWidth + g)))\n    }\n    setColCount((prev) => (prev === nextCols ? prev : nextCols))\n\n    const next = itemRefs.current.slice(0, count).map((el) => (el ? el.offsetHeight : 0))\n    setHeights((prev) => (arraysEqual(prev, next) ? prev : next))\n  }, [columns, minColumnWidth, count])\n\n  // measure before paint (mount + whenever the item set or column count changes)\n  useLayoutEffect(measure, [measure, items, colCount])\n\n  // re-balance on container resize and on any item resizing (image loads, dynamic content, …)\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root || typeof ResizeObserver === 'undefined') return\n    const ro = new ResizeObserver(() => measure())\n    ro.observe(root)\n    itemRefs.current.slice(0, count).forEach((el) => el && ro.observe(el))\n    return () => ro.disconnect()\n  }, [measure, count, colCount])\n\n  // greedily assign each item (in order) to the currently shortest column\n  const columnsItems = useMemo(() => {\n    const buckets: number[][] = Array.from({ length: colCount }, () => [])\n    const acc = new Array(colCount).fill(0)\n    for (let i = 0; i < count; i++) {\n      let min = 0\n      for (let c = 1; c < colCount; c++) if (acc[c] < acc[min]) min = c\n      buckets[min].push(i)\n      acc[min] += heights[i] || ESTIMATED_ITEM_HEIGHT\n    }\n    return buckets\n  }, [colCount, count, heights])\n\n  const gapValue = space(gap)\n\n  return (\n    <div\n      ref={setRootRef}\n      className={className}\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: gapValue,\n        padding: space(padding),\n        ...style,\n      }}\n      {...props}\n    >\n      {columnsItems.map((indices, c) => (\n        <div\n          key={c}\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: gapValue,\n            flex: '1 1 0',\n            minWidth: 0,\n          }}\n        >\n          {indices.map((i) => (\n            <div\n              key={i}\n              ref={(el) => {\n                itemRefs.current[i] = el\n              }}\n              style={{ minWidth: 0 } as CSSProperties}\n            >\n              {items[i]}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n})\n"],"names":["ESTIMATED_ITEM_HEIGHT","arraysEqual","a","b","v","i","Masonry","forwardRef","columns","minColumnWidth","gap","padding","className","style","children","props","ref","items","useMemo","Children","count","colCount","setColCount","useState","heights","setHeights","rootRef","useRef","itemRefs","setRootRef","useCallback","node","measure","root","nextCols","g","width","prev","next","el","useLayoutEffect","useEffect","ro","columnsItems","buckets","acc","min","c","gapValue","space","jsx","indices"],"mappings":"sGAiBMA,EAAwB,IAexBC,EAAc,CAACC,EAAaC,IAChCD,EAAE,SAAWC,EAAE,QAAUD,EAAE,MAAM,CAACE,EAAGC,IAAMD,IAAMD,EAAEE,CAAC,CAAC,EAU1CC,EAAUC,EAAAA,WAAyC,SAC9D,CAAE,QAAAC,EAAU,EAAG,eAAAC,EAAgB,IAAAC,EAAM,KAAM,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAA,EACnFC,EACA,CACA,MAAMC,EAAQC,EAAAA,QAAQ,IAAMC,EAAAA,SAAS,QAAQL,CAAQ,EAAG,CAACA,CAAQ,CAAC,EAC5DM,EAAQH,EAAM,OAEd,CAACI,EAAUC,CAAW,EAAIC,EAAAA,SAAS,IAAM,KAAK,IAAI,EAAGf,CAAO,CAAC,EAC7D,CAACgB,EAASC,CAAU,EAAIF,EAAAA,SAAmB,CAAA,CAAE,EAE7CG,EAAUC,EAAAA,OAA8B,IAAI,EAC5CC,EAAWD,EAAAA,OAAqC,EAAE,EAGlDE,EAAaC,EAAAA,YAChBC,GAAgC,CAC/BL,EAAQ,QAAUK,EACd,OAAOf,GAAQ,WAAYA,EAAIe,CAAI,EAC9Bf,MAAS,QAAUe,EAC9B,EACA,CAACf,CAAG,CAAA,EAIAgB,EAAUF,EAAAA,YAAY,IAAM,CAChC,MAAMG,EAAOP,EAAQ,QACrB,GAAI,CAACO,EAAM,OAEX,IAAIC,EAAW,KAAK,IAAI,EAAG1B,CAAO,EAClC,GAAIC,GAAkB,KAAM,CAC1B,MAAM0B,EAAI,WAAW,iBAAiBF,CAAI,EAAE,SAAS,GAAK,EACpDG,EAAQH,EAAK,YACnBC,EAAW,KAAK,IAAI,EAAG,KAAK,OAAOE,EAAQD,IAAM1B,EAAiB0B,EAAE,CAAC,CACvE,CACAb,EAAae,GAAUA,IAASH,EAAWG,EAAOH,CAAS,EAE3D,MAAMI,EAAOV,EAAS,QAAQ,MAAM,EAAGR,CAAK,EAAE,IAAKmB,GAAQA,EAAKA,EAAG,aAAe,CAAE,EACpFd,EAAYY,GAAUpC,EAAYoC,EAAMC,CAAI,EAAID,EAAOC,CAAK,CAC9D,EAAG,CAAC9B,EAASC,EAAgBW,CAAK,CAAC,EAGnCoB,EAAAA,gBAAgBR,EAAS,CAACA,EAASf,EAAOI,CAAQ,CAAC,EAGnDoB,EAAAA,UAAU,IAAM,CACd,MAAMR,EAAOP,EAAQ,QACrB,GAAI,CAACO,GAAQ,OAAO,eAAmB,IAAa,OACpD,MAAMS,EAAK,IAAI,eAAe,IAAMV,GAAS,EAC7C,OAAAU,EAAG,QAAQT,CAAI,EACfL,EAAS,QAAQ,MAAM,EAAGR,CAAK,EAAE,QAASmB,GAAOA,GAAMG,EAAG,QAAQH,CAAE,CAAC,EAC9D,IAAMG,EAAG,WAAA,CAClB,EAAG,CAACV,EAASZ,EAAOC,CAAQ,CAAC,EAG7B,MAAMsB,EAAezB,EAAAA,QAAQ,IAAM,CACjC,MAAM0B,EAAsB,MAAM,KAAK,CAAE,OAAQvB,CAAA,EAAY,IAAM,EAAE,EAC/DwB,EAAM,IAAI,MAAMxB,CAAQ,EAAE,KAAK,CAAC,EACtC,QAAShB,EAAI,EAAGA,EAAIe,EAAOf,IAAK,CAC9B,IAAIyC,EAAM,EACV,QAASC,EAAI,EAAGA,EAAI1B,EAAU0B,IAASF,EAAIE,CAAC,EAAIF,EAAIC,CAAG,IAAGA,EAAMC,GAChEH,EAAQE,CAAG,EAAE,KAAKzC,CAAC,EACnBwC,EAAIC,CAAG,GAAKtB,EAAQnB,CAAC,GAAKL,CAC5B,CACA,OAAO4C,CACT,EAAG,CAACvB,EAAUD,EAAOI,CAAO,CAAC,EAEvBwB,EAAWC,EAAAA,MAAMvC,CAAG,EAE1B,OACEwC,EAAAA,IAAC,MAAA,CACC,IAAKrB,EACL,UAAAjB,EACA,MAAO,CACL,QAAS,OACT,WAAY,aACZ,IAAKoC,EACL,QAASC,EAAAA,MAAMtC,CAAO,EACtB,GAAGE,CAAA,EAEJ,GAAGE,EAEH,SAAA4B,EAAa,IAAI,CAACQ,EAASJ,IAC1BG,EAAAA,IAAC,MAAA,CAEC,MAAO,CACL,QAAS,OACT,cAAe,SACf,IAAKF,EACL,KAAM,QACN,SAAU,CAAA,EAGX,SAAAG,EAAQ,IAAK9C,GACZ6C,EAAAA,IAAC,MAAA,CAEC,IAAMX,GAAO,CACXX,EAAS,QAAQvB,CAAC,EAAIkC,CACxB,EACA,MAAO,CAAE,SAAU,CAAA,EAElB,WAAMlC,CAAC,CAAA,EANHA,CAAA,CAQR,CAAA,EAnBI0C,CAAA,CAqBR,CAAA,CAAA,CAGP,CAAC"}