@lobehub/ui 5.59.0 → 5.61.0

package/es/dashboard/Surface/style.mjs

@@ -3,18 +3,55 @@ import { createStaticStyles } from "antd-style";
 /**
 * A content card sitting on the workspace.
 *
-* Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.
-* The workspace is already that container, so a card inside it steps up to
-* `colorBgElevated` and `colorBorder`.
+* Backgrounds: light mode uses `colorBgContainer`. Dark mode uses the translucent
+* `colorFillTertiary` (white 6%): on the #0d0d0d workspace it reads as about #1c1c1c, a subtle
+* raised step. `colorFillQuaternary` (white 2%, about #111) would barely separate from the page.
+*
+* Borders and inner dividers (table, header and cell lines, PageSkeleton) use `colorFillSecondary`
+* (white 10% / black 6%); hover and focus use the stronger `colorFill`. Painted over the dark card
+* the border lands near #2f2f2f against #1c1c1c, and in light near #f0f0f0 against #ffffff.
+*
+* Anything that must hide content scrolled beneath it (table header cells, pinned and sticky
+* cells, their scroll shadows) uses `--lobe-surface-bg-solid`: the same white 6% blended onto
+* `--lobe-surface-canvas` (default `colorBgContainer`, the ConsoleShell workspace). `color-mix`
+* in srgb with an opaque base is plain alpha compositing, so it matches the translucent card.
+* Set `--lobe-surface-canvas` when a card sits on another page color.
+*
+* A Surface inside another Surface (`useSurfaceDepth() > 0`) drops its own fill so fills do not
+* stack. Row hover backgrounds keep their own mix. Layout containers (ConsoleShell, ConsoleNav,
+* FilterSidebar split divider, AuthLayout page canvas) keep their own tokens.
+*
+* Apply the card with `useSurfaceCardClassName()`; plain `surfaceStyles.card` is the light look.
 */
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	card: css`
+    --lobe-surface-bg: ${cssVar.colorBgContainer};
+    --lobe-surface-bg-solid: ${cssVar.colorBgContainer};
+
     &&,
     &&:hover {
-      border: 1px solid ${cssVar.colorBorder};
+      border: 1px solid ${cssVar.colorFillSecondary};
       border-radius: ${cssVar.borderRadiusLG};
-      background: ${cssVar.colorBgElevated};
-      box-shadow: ${cssVar.boxShadowTertiary};
+      background: var(--lobe-surface-bg);
+      box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;
+    }
+  `,
+	cardDark: css`
+    &&& {
+      --lobe-surface-bg: ${cssVar.colorFillTertiary};
+
+      /* colorFillTertiary is white 6% in dark; blend the same amount onto the page. */
+      --lobe-surface-bg-solid: color-mix(
+        in srgb,
+        #fff 6%,
+        var(--lobe-surface-canvas, ${cssVar.colorBgContainer})
+      );
+    }
+  `,
+	cardNested: css`
+    &&&,
+    &&&:hover {
+      background: transparent;
     }
   `,
 	chart: css`
@@ -30,7 +67,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	arrow: css`
     flex: none;
 
-    margin-block-start: 2px;
+    margin-block-start: 8px;
     margin-inline-start: auto;
 
     color: ${cssVar.colorTextTertiary};
@@ -38,6 +75,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     transition:
       color 150ms ease-out,
       transform 150ms ease-out;
+  `,
+	arrowLink: css`
+    display: flex;
+    flex: none;
+    align-items: center;
+    color: inherit;
+
+    & [data-surface-arrow] {
+      margin-block-start: 0;
+    }
   `,
 	bleed: css`
     && th,
@@ -59,9 +106,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	content: css`
     min-inline-size: 0;
 
-    /* Table cells default to colorBgContainer, a step darker than this card.
-       Ant Design paints that color on .ant-table itself, so the body stays dark
-       even after the cells are cleared. */
+    /* Ant Design paints its own container color on .ant-table and the cells.
+       Clear it so the card background shows through; the card owns the fill. */
     && .ant-table,
     && th,
     && td {
@@ -70,7 +116,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     && .ant-table-css-var,
     && .ant-table-wrapper {
-      --ant-table-border-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+      --ant-table-border-color: ${cssVar.colorFillSecondary};
       --ant-table-row-hover-bg: color-mix(
         in srgb,
         ${cssVar.colorText} 6%,
@@ -83,8 +129,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       color: ${cssVar.colorTextSecondary};
       white-space: nowrap;
 
-      background: ${cssVar.colorBgElevated};
-      box-shadow: inset 0 -1px 0 color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+      background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
+      box-shadow: inset 0 -1px 0 ${cssVar.colorFillSecondary};
     }
 
     /* Pinned body cells inherit the transparent body, so a scrolled cell paints
@@ -93,14 +139,18 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
        as a lighter strip in dark mode. */
     && td.ant-table-cell-fix-start,
     && td.ant-table-cell-fix-end {
-      background: color-mix(in srgb, ${cssVar.colorBgElevated} 82%, transparent);
+      background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
       backdrop-filter: blur(12px);
     }
 
     && td.ant-table-cell-fix-end-shadow-show::after {
       background: linear-gradient(
         to left,
-        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        color-mix(
+          in srgb,
+          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,
+          transparent
+        ),
         transparent
       );
       backdrop-filter: blur(8px);
@@ -109,7 +159,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     && td.ant-table-cell-fix-start-shadow-show::after {
       background: linear-gradient(
         to right,
-        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        color-mix(
+          in srgb,
+          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,
+          transparent
+        ),
         transparent
       );
       backdrop-filter: blur(8px);
@@ -118,7 +172,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     [dir='rtl'] && td.ant-table-cell-fix-end-shadow-show::after {
       background: linear-gradient(
         to right,
-        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        color-mix(
+          in srgb,
+          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,
+          transparent
+        ),
         transparent
       );
     }
@@ -126,13 +184,17 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {
       background: linear-gradient(
         to left,
-        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        color-mix(
+          in srgb,
+          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,
+          transparent
+        ),
         transparent
       );
     }
 
     && td {
-      border-block-end-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+      border-block-end-color: ${cssVar.colorFillSecondary};
     }
 
     && tr:hover > td,
@@ -143,7 +205,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     /* base-ui Table pins with inline position:sticky, not .ant-table-cell-fix-*.
        The transparent body rule above would let scrolled text show through. */
     && td[style*='sticky'] {
-      background: ${cssVar.colorBgElevated};
+      background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
     }
 
     && tr:hover > td[style*='sticky'] {
@@ -154,7 +216,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	cardLinked: css`
     &&:hover,
     &&:focus-within {
-      border-color: color-mix(in srgb, ${cssVar.colorText} 28%, transparent);
+      border-color: ${cssVar.colorFill};
     }
 
     &&:hover [data-surface-arrow] {
@@ -163,7 +225,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	desc: css`
-    margin-block-start: 2px;
+    margin-block-start: -4px;
 
     font-size: 13px;
     font-weight: 400;
@@ -175,16 +237,20 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     flex: none;
     gap: 8px;
     align-items: center;
+
+    block-size: 32px;
   `,
 	header: css`
     display: flex;
     gap: 12px;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
 
-    padding-block: 12px;
+    box-sizing: border-box;
+    min-block-size: 48px;
+    padding-block: 8px;
     padding-inline: 16px;
-    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+    border-block-end: 1px solid ${cssVar.colorFillSecondary};
   `,
 	heading: css`
     min-inline-size: 0;
@@ -291,7 +357,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     font-size: 14px;
     font-weight: 500;
-    line-height: 1.4;
+
+    /* The title line is the 32px control row; extra and the arrow center on it, and a
+       description adds its own line below without moving them. */
+    line-height: 32px;
     color: ${cssVar.colorText};
     text-overflow: ellipsis;
     white-space: nowrap;

package/es/dashboard/Surface/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/**\n * A content card sitting on the workspace.\n *\n * Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.\n * The workspace is already that container, so a card inside it steps up to\n * `colorBgElevated` and `colorBorder`.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  card: css`\n    &&,\n    &&:hover {\n      border: 1px solid ${cssVar.colorBorder};\n      border-radius: ${cssVar.borderRadiusLG};\n      background: ${cssVar.colorBgElevated};\n      box-shadow: ${cssVar.boxShadowTertiary};\n    }\n  `,\n  chart: css`\n    min-inline-size: 0;\n  `,\n  /** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */\n  clip: css`\n    overflow: hidden;\n  `,\n  loading: css`\n    padding-block: 4px 8px;\n  `,\n  arrow: css`\n    flex: none;\n\n    margin-block-start: 2px;\n    margin-inline-start: auto;\n\n    color: ${cssVar.colorTextTertiary};\n\n    transition:\n      color 150ms ease-out,\n      transform 150ms ease-out;\n  `,\n  bleed: css`\n    && th,\n    && td {\n      padding-inline: 16px;\n    }\n\n    && th {\n      white-space: nowrap;\n    }\n  `,\n  body: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 16px;\n\n    padding: 16px;\n  `,\n  /** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */\n  content: css`\n    min-inline-size: 0;\n\n    /* Table cells default to colorBgContainer, a step darker than this card.\n       Ant Design paints that color on .ant-table itself, so the body stays dark\n       even after the cells are cleared. */\n    && .ant-table,\n    && th,\n    && td {\n      background: transparent;\n    }\n\n    && .ant-table-css-var,\n    && .ant-table-wrapper {\n      --ant-table-border-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n      --ant-table-row-hover-bg: color-mix(\n        in srgb,\n        ${cssVar.colorText} 6%,\n        ${cssVar.colorBgElevated}\n      );\n    }\n\n    && th {\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      white-space: nowrap;\n\n      background: ${cssVar.colorBgElevated};\n      box-shadow: inset 0 -1px 0 color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n    }\n\n    /* Pinned body cells inherit the transparent body, so a scrolled cell paints\n       straight through them. Frost with the card color. Header pins stay the\n       same solid fill as the rest of the header — a translucent header reads\n       as a lighter strip in dark mode. */\n    && td.ant-table-cell-fix-start,\n    && td.ant-table-cell-fix-end {\n      background: color-mix(in srgb, ${cssVar.colorBgElevated} 82%, transparent);\n      backdrop-filter: blur(12px);\n    }\n\n    && td.ant-table-cell-fix-end-shadow-show::after {\n      background: linear-gradient(\n        to left,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n      backdrop-filter: blur(8px);\n    }\n\n    && td.ant-table-cell-fix-start-shadow-show::after {\n      background: linear-gradient(\n        to right,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n      backdrop-filter: blur(8px);\n    }\n\n    [dir='rtl'] && td.ant-table-cell-fix-end-shadow-show::after {\n      background: linear-gradient(\n        to right,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n    }\n\n    [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {\n      background: linear-gradient(\n        to left,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n    }\n\n    && td {\n      border-block-end-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n    }\n\n    && tr:hover > td,\n    && .ant-table-tbody > tr.ant-table-row:hover > td {\n      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n    }\n\n    /* base-ui Table pins with inline position:sticky, not .ant-table-cell-fix-*.\n       The transparent body rule above would let scrolled text show through. */\n    && td[style*='sticky'] {\n      background: ${cssVar.colorBgElevated};\n    }\n\n    && tr:hover > td[style*='sticky'] {\n      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n    }\n  `,\n  /** Whole card answers hover when its header drills into another page. */\n  cardLinked: css`\n    &&:hover,\n    &&:focus-within {\n      border-color: color-mix(in srgb, ${cssVar.colorText} 28%, transparent);\n    }\n\n    &&:hover [data-surface-arrow] {\n      transform: translate(1px, -1px);\n      color: ${cssVar.colorText};\n    }\n  `,\n  desc: css`\n    margin-block-start: 2px;\n\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.45;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  extra: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  heading: css`\n    min-inline-size: 0;\n  `,\n  headingLink: css`\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      color: inherit;\n    }\n  `,\n  /**\n   * A table inside padded card body meets the card's left, right, and bottom\n   * edges. A table that is the only body content also meets the header.\n   * Padding amounts come from `--surface-pad-*` on the same element.\n   */\n  tableBleed: css`\n    /* A table nested in a cell keeps the cell's own inset. */\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) {\n      width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):last-child {\n      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):first-child:last-child {\n      margin-block-start: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    /* ProTable keeps its search and toolbar in the padding. The table itself\n       meets the card's left, right, and bottom edges. Lower-specificity\n       selectors stay above the :has(th/td) rules for stylelint. */\n    && .ant-table-css-var,\n    && .ant-table-wrapper {\n      --ant-table-cell-padding-inline: var(--surface-pad-inline, 16px);\n      --ant-table-cell-padding-inline-md: var(--surface-pad-inline, 16px);\n      --ant-table-cell-padding-inline-sm: var(--surface-pad-inline, 16px);\n      --ant-table-header-border-radius: 0;\n    }\n\n    && .ant-table-wrapper {\n      width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n      max-width: none;\n      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n    }\n\n    /* A plain table that is the card body meets the header and the bottom edge.\n       Its own corner radius would otherwise float inside the card padding. */\n    && > .lobe-flex:only-child > .ant-table-wrapper:only-child {\n      margin-block: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && .ant-pro-table:last-child {\n      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && .ant-table-wrapper .ant-table,\n    && .ant-table-wrapper .ant-table-container,\n    && .ant-table-thead > tr > th,\n    && .ant-table-thead > tr > th:first-child,\n    && .ant-table-thead > tr > th:last-child {\n      border-radius: 0;\n    }\n\n    && .ant-table-wrapper .ant-table-cell {\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    && .ant-table-wrapper .ant-pagination {\n      margin-block: 0;\n      padding-block: 12px;\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) th,\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) td {\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    /* The root's negative bottom margin includes this sibling. Without block\n       padding the pager sits on the card edge. Same inset as the ant pagination. */\n    &&\n      :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper]))\n      > :not([data-table-wrapper]) {\n      margin-block: 0;\n      padding-block: 12px;\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n  `,\n  title: css`\n    overflow: hidden;\n\n    min-inline-size: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;;;;;;;AASA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;0BAGe,OAAO,YAAY;uBACtB,OAAO,eAAe;oBACzB,OAAO,gBAAgB;oBACvB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;CAIV,MAAM,GAAG;;;CAGT,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;aAMC,OAAO,kBAAkB;;;;;;CAMpC,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;CAOT,SAAS,GAAG;;;;;;;;;;;;;;qDAcuC,OAAO,UAAU;;;UAG5D,OAAO,UAAU;UACjB,OAAO,gBAAgB;;;;;;eAMlB,OAAO,mBAAmB;;;oBAGrB,OAAO,gBAAgB;sDACW,OAAO,UAAU;;;;;;;;;uCAShC,OAAO,gBAAgB;;;;;;;6BAOjC,OAAO,gBAAgB;;;;;;;;;6BASvB,OAAO,gBAAgB;;;;;;;;;6BASvB,OAAO,gBAAgB;;;;;;;;6BAQvB,OAAO,gBAAgB;;;;;;mDAMD,OAAO,UAAU;;;;;uCAK7B,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;;;oBAMlE,OAAO,gBAAgB;;;;uCAIJ,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;CAIpF,YAAY,GAAG;;;yCAGwB,OAAO,UAAU;;;;;eAK3C,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;;;CAMV,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,SAAS,GAAG;;;CAGZ,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;CAoBhB,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ef,OAAO,GAAG;;;;;;;;aAQC,OAAO,UAAU;;;;AAI9B,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/**\n * A content card sitting on the workspace.\n *\n * Backgrounds: light mode uses `colorBgContainer`. Dark mode uses the translucent\n * `colorFillTertiary` (white 6%): on the #0d0d0d workspace it reads as about #1c1c1c, a subtle\n * raised step. `colorFillQuaternary` (white 2%, about #111) would barely separate from the page.\n *\n * Borders and inner dividers (table, header and cell lines, PageSkeleton) use `colorFillSecondary`\n * (white 10% / black 6%); hover and focus use the stronger `colorFill`. Painted over the dark card\n * the border lands near #2f2f2f against #1c1c1c, and in light near #f0f0f0 against #ffffff.\n *\n * Anything that must hide content scrolled beneath it (table header cells, pinned and sticky\n * cells, their scroll shadows) uses `--lobe-surface-bg-solid`: the same white 6% blended onto\n * `--lobe-surface-canvas` (default `colorBgContainer`, the ConsoleShell workspace). `color-mix`\n * in srgb with an opaque base is plain alpha compositing, so it matches the translucent card.\n * Set `--lobe-surface-canvas` when a card sits on another page color.\n *\n * A Surface inside another Surface (`useSurfaceDepth() > 0`) drops its own fill so fills do not\n * stack. Row hover backgrounds keep their own mix. Layout containers (ConsoleShell, ConsoleNav,\n * FilterSidebar split divider, AuthLayout page canvas) keep their own tokens.\n *\n * Apply the card with `useSurfaceCardClassName()`; plain `surfaceStyles.card` is the light look.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  card: css`\n    --lobe-surface-bg: ${cssVar.colorBgContainer};\n    --lobe-surface-bg-solid: ${cssVar.colorBgContainer};\n\n    &&,\n    &&:hover {\n      border: 1px solid ${cssVar.colorFillSecondary};\n      border-radius: ${cssVar.borderRadiusLG};\n      background: var(--lobe-surface-bg);\n      box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;\n    }\n  `,\n  cardDark: css`\n    &&& {\n      --lobe-surface-bg: ${cssVar.colorFillTertiary};\n\n      /* colorFillTertiary is white 6% in dark; blend the same amount onto the page. */\n      --lobe-surface-bg-solid: color-mix(\n        in srgb,\n        #fff 6%,\n        var(--lobe-surface-canvas, ${cssVar.colorBgContainer})\n      );\n    }\n  `,\n  cardNested: css`\n    &&&,\n    &&&:hover {\n      background: transparent;\n    }\n  `,\n  chart: css`\n    min-inline-size: 0;\n  `,\n  /** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */\n  clip: css`\n    overflow: hidden;\n  `,\n  loading: css`\n    padding-block: 4px 8px;\n  `,\n  arrow: css`\n    flex: none;\n\n    margin-block-start: 8px;\n    margin-inline-start: auto;\n\n    color: ${cssVar.colorTextTertiary};\n\n    transition:\n      color 150ms ease-out,\n      transform 150ms ease-out;\n  `,\n  arrowLink: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n    color: inherit;\n\n    & [data-surface-arrow] {\n      margin-block-start: 0;\n    }\n  `,\n  bleed: css`\n    && th,\n    && td {\n      padding-inline: 16px;\n    }\n\n    && th {\n      white-space: nowrap;\n    }\n  `,\n  body: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 16px;\n\n    padding: 16px;\n  `,\n  /** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */\n  content: css`\n    min-inline-size: 0;\n\n    /* Ant Design paints its own container color on .ant-table and the cells.\n       Clear it so the card background shows through; the card owns the fill. */\n    && .ant-table,\n    && th,\n    && td {\n      background: transparent;\n    }\n\n    && .ant-table-css-var,\n    && .ant-table-wrapper {\n      --ant-table-border-color: ${cssVar.colorFillSecondary};\n      --ant-table-row-hover-bg: color-mix(\n        in srgb,\n        ${cssVar.colorText} 6%,\n        ${cssVar.colorBgElevated}\n      );\n    }\n\n    && th {\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      white-space: nowrap;\n\n      background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});\n      box-shadow: inset 0 -1px 0 ${cssVar.colorFillSecondary};\n    }\n\n    /* Pinned body cells inherit the transparent body, so a scrolled cell paints\n       straight through them. Frost with the card color. Header pins stay the\n       same solid fill as the rest of the header — a translucent header reads\n       as a lighter strip in dark mode. */\n    && td.ant-table-cell-fix-start,\n    && td.ant-table-cell-fix-end {\n      background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});\n      backdrop-filter: blur(12px);\n    }\n\n    && td.ant-table-cell-fix-end-shadow-show::after {\n      background: linear-gradient(\n        to left,\n        color-mix(\n          in srgb,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,\n          transparent\n        ),\n        transparent\n      );\n      backdrop-filter: blur(8px);\n    }\n\n    && td.ant-table-cell-fix-start-shadow-show::after {\n      background: linear-gradient(\n        to right,\n        color-mix(\n          in srgb,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,\n          transparent\n        ),\n        transparent\n      );\n      backdrop-filter: blur(8px);\n    }\n\n    [dir='rtl'] && td.ant-table-cell-fix-end-shadow-show::after {\n      background: linear-gradient(\n        to right,\n        color-mix(\n          in srgb,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,\n          transparent\n        ),\n        transparent\n      );\n    }\n\n    [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {\n      background: linear-gradient(\n        to left,\n        color-mix(\n          in srgb,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer}) 72%,\n          transparent\n        ),\n        transparent\n      );\n    }\n\n    && td {\n      border-block-end-color: ${cssVar.colorFillSecondary};\n    }\n\n    && tr:hover > td,\n    && .ant-table-tbody > tr.ant-table-row:hover > td {\n      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n    }\n\n    /* base-ui Table pins with inline position:sticky, not .ant-table-cell-fix-*.\n       The transparent body rule above would let scrolled text show through. */\n    && td[style*='sticky'] {\n      background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});\n    }\n\n    && tr:hover > td[style*='sticky'] {\n      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n    }\n  `,\n  /** Whole card answers hover when its header drills into another page. */\n  cardLinked: css`\n    &&:hover,\n    &&:focus-within {\n      border-color: ${cssVar.colorFill};\n    }\n\n    &&:hover [data-surface-arrow] {\n      transform: translate(1px, -1px);\n      color: ${cssVar.colorText};\n    }\n  `,\n  desc: css`\n    margin-block-start: -4px;\n\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.45;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  /* One fixed control row (32px, the height of a small Segmented or a default ActionIcon), so a\n     header with controls is exactly as tall as one without, and the controls sit centered with\n     8px clear above the divider. */\n  extra: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n\n    block-size: 32px;\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-block-size: 48px;\n    padding-block: 8px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  heading: css`\n    min-inline-size: 0;\n  `,\n  headingLink: css`\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      color: inherit;\n    }\n  `,\n  /**\n   * A table inside padded card body meets the card's left, right, and bottom\n   * edges. A table that is the only body content also meets the header.\n   * Padding amounts come from `--surface-pad-*` on the same element.\n   */\n  tableBleed: css`\n    /* A table nested in a cell keeps the cell's own inset. */\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) {\n      width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):last-child {\n      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):first-child:last-child {\n      margin-block-start: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    /* ProTable keeps its search and toolbar in the padding. The table itself\n       meets the card's left, right, and bottom edges. Lower-specificity\n       selectors stay above the :has(th/td) rules for stylelint. */\n    && .ant-table-css-var,\n    && .ant-table-wrapper {\n      --ant-table-cell-padding-inline: var(--surface-pad-inline, 16px);\n      --ant-table-cell-padding-inline-md: var(--surface-pad-inline, 16px);\n      --ant-table-cell-padding-inline-sm: var(--surface-pad-inline, 16px);\n      --ant-table-header-border-radius: 0;\n    }\n\n    && .ant-table-wrapper {\n      width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n      max-width: none;\n      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n    }\n\n    /* A plain table that is the card body meets the header and the bottom edge.\n       Its own corner radius would otherwise float inside the card padding. */\n    && > .lobe-flex:only-child > .ant-table-wrapper:only-child {\n      margin-block: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && .ant-pro-table:last-child {\n      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && .ant-table-wrapper .ant-table,\n    && .ant-table-wrapper .ant-table-container,\n    && .ant-table-thead > tr > th,\n    && .ant-table-thead > tr > th:first-child,\n    && .ant-table-thead > tr > th:last-child {\n      border-radius: 0;\n    }\n\n    && .ant-table-wrapper .ant-table-cell {\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    && .ant-table-wrapper .ant-pagination {\n      margin-block: 0;\n      padding-block: 12px;\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) th,\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) td {\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    /* The root's negative bottom margin includes this sibling. Without block\n       padding the pager sits on the card edge. Same inset as the ant pagination. */\n    &&\n      :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper]))\n      > :not([data-table-wrapper]) {\n      margin-block: 0;\n      padding-block: 12px;\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n  `,\n  title: css`\n    overflow: hidden;\n\n    min-inline-size: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n\n    /* The title line is the 32px control row; extra and the arrow center on it, and a\n       description adds its own line below without moving them. */\n    line-height: 32px;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;yBACc,OAAO,iBAAiB;+BAClB,OAAO,iBAAiB;;;;0BAI7B,OAAO,mBAAmB;uBAC7B,OAAO,eAAe;;;;;CAK3C,UAAU,GAAG;;2BAEY,OAAO,kBAAkB;;;;;;qCAMf,OAAO,iBAAiB;;;;CAI3D,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;CAIV,MAAM,GAAG;;;CAGT,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;aAMC,OAAO,kBAAkB;;;;;;CAMpC,WAAW,GAAG;;;;;;;;;;CAUd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;CAOT,SAAS,GAAG;;;;;;;;;;;;;kCAaoB,OAAO,mBAAmB;;;UAGlD,OAAO,UAAU;UACjB,OAAO,gBAAgB;;;;;;eAMlB,OAAO,mBAAmB;;;iDAGQ,OAAO,iBAAiB;mCACtC,OAAO,mBAAmB;;;;;;;;;iDASZ,OAAO,iBAAiB;;;;;;;;;yCAShC,OAAO,iBAAiB;;;;;;;;;;;;;yCAaxB,OAAO,iBAAiB;;;;;;;;;;;;;yCAaxB,OAAO,iBAAiB;;;;;;;;;;;;yCAYxB,OAAO,iBAAiB;;;;;;;;gCAQjC,OAAO,mBAAmB;;;;;uCAKnB,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;;;iDAMrC,OAAO,iBAAiB;;;;uCAIlC,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;CAIpF,YAAY,GAAG;;;sBAGK,OAAO,UAAU;;;;;eAKxB,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;CAKrC,OAAO,GAAG;;;;;;;;CAQV,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,SAAS,GAAG;;;CAGZ,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;CAoBhB,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ef,OAAO,GAAG;;;;;;;;;;;aAWC,OAAO,UAAU;;;;AAI9B,EAAE"}

package/es/dashboard/index.d.mts

@@ -1,15 +1,21 @@
-import { AuthLayoutProps } from "./AuthLayout/type.mjs";
+import { AuthLayoutAsideProps, AuthLayoutBackground, AuthLayoutProps, AuthLayoutVariant } from "./AuthLayout/type.mjs";
+import AuthLayoutAside from "./AuthLayout/Aside.mjs";
 import AuthLayout from "./AuthLayout/AuthLayout.mjs";
 import "./AuthLayout/index.mjs";
+import { AuthLocaleOption, AuthLocaleSwitchProps, AuthThemeMode, AuthThemeSwitchProps } from "./AuthTools/type.mjs";
+import AuthLocaleSwitch from "./AuthTools/AuthLocaleSwitch.mjs";
+import AuthThemeSwitch from "./AuthTools/AuthThemeSwitch.mjs";
+import "./AuthTools/index.mjs";
 import { BreadcrumbItem, BreadcrumbProps } from "./Breadcrumb/type.mjs";
 import Breadcrumb from "./Breadcrumb/Breadcrumb.mjs";
 import "./Breadcrumb/index.mjs";
 import { ChartGridProps } from "./ChartGrid/type.mjs";
 import ChartGrid from "./ChartGrid/ChartGrid.mjs";
 import "./ChartGrid/index.mjs";
-import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavProps } from "./ConsoleNav/type.mjs";
+import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavProps, ConsoleNavSkeletonProps } from "./ConsoleNav/type.mjs";
 import { resolveActiveHref } from "./ConsoleNav/active.mjs";
 import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "./ConsoleNav/Skeleton.mjs";
 import "./ConsoleNav/index.mjs";
 import { ConsoleBrandProps, ConsoleShellProps, ConsoleShellState } from "./ConsoleShell/type.mjs";
 import ConsoleBrand from "./ConsoleShell/ConsoleBrand.mjs";
@@ -52,7 +58,7 @@ import "./Section/index.mjs";
 import { StatCardProps, StatDirection } from "./StatCard/type.mjs";
 import StatCard from "./StatCard/StatCard.mjs";
 import "./StatCard/index.mjs";
-import { SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
+import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
 import { styles } from "./Surface/style.mjs";
 import Surface from "./Surface/Surface.mjs";
 import "./Surface/index.mjs";
@@ -62,4 +68,4 @@ import "./TableIconActions/index.mjs";
 import { TitleWithTipsProps } from "./TitleWithTips/type.mjs";
 import TitleWithTips from "./TitleWithTips/TitleWithTips.mjs";
 import "./TitleWithTips/index.mjs";
-export { AuthLayout, type AuthLayoutProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, ChartGrid, type ChartGridProps, ConsoleBrand, type ConsoleBrandProps, ConsoleNav, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleShell, type ConsoleShellProps, type ConsoleShellState, FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, FilterSidebar, type FilterSidebarProps, FilterStrip, type FilterStripItem, type FilterStripProps, LabelWithKey, type LabelWithKeyProps, LoadingAnnouncer, type MetricItem, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageHeaderSkeleton, PageLoading, type PageLoadingProps, type PageTab, PageTabs, type PageTabsProps, PageToolbar, type PageToolbarProps, PanelSurface, type PanelSurfaceProps, RouteProgress, type RouteProgressProps, Section, type SectionProps, StatCard, type StatCardProps, StatCardSkeleton, type StatDirection, Surface, type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, TableIconAction, type TableIconActionProps, TableIconActions, type TableIconActionsProps, TableSkeleton, TitleWithTips, type TitleWithTipsProps, formatInteger, resolveActiveHref, styles as surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceDepth, useSurfaceLink };
+export { AuthLayout, AuthLayoutAside, type AuthLayoutAsideProps, type AuthLayoutBackground, type AuthLayoutProps, type AuthLayoutVariant, type AuthLocaleOption, AuthLocaleSwitch, type AuthLocaleSwitchProps, type AuthThemeMode, AuthThemeSwitch, type AuthThemeSwitchProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, ChartGrid, type ChartGridProps, ConsoleBrand, type ConsoleBrandProps, ConsoleFooterSkeleton, ConsoleNav, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleNavSkeleton, type ConsoleNavSkeletonProps, ConsoleShell, type ConsoleShellProps, type ConsoleShellState, FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, FilterSidebar, type FilterSidebarProps, FilterStrip, type FilterStripItem, type FilterStripProps, LabelWithKey, type LabelWithKeyProps, LoadingAnnouncer, type MetricItem, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageHeaderSkeleton, PageLoading, type PageLoadingProps, type PageTab, PageTabs, type PageTabsProps, PageToolbar, type PageToolbarProps, PanelSurface, type PanelSurfaceProps, RouteProgress, type RouteProgressProps, Section, type SectionProps, StatCard, type StatCardProps, StatCardSkeleton, type StatDirection, Surface, type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, TableIconAction, type TableIconActionProps, TableIconActions, type TableIconActionsProps, TableSkeleton, TitleWithTips, type TitleWithTipsProps, formatInteger, resolveActiveHref, styles as surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };

package/es/dashboard/index.mjs

@@ -1,21 +1,25 @@
+import AuthLayoutAside from "./AuthLayout/Aside.mjs";
 import { styles } from "./Surface/style.mjs";
+import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
 import AuthLayout from "./AuthLayout/AuthLayout.mjs";
+import AuthLocaleSwitch from "./AuthTools/AuthLocaleSwitch.mjs";
+import AuthThemeSwitch from "./AuthTools/AuthThemeSwitch.mjs";
 import Breadcrumb from "./Breadcrumb/Breadcrumb.mjs";
 import ChartGrid from "./ChartGrid/ChartGrid.mjs";
 import { resolveActiveHref } from "./ConsoleNav/active.mjs";
 import { useConsoleShell } from "./ConsoleShell/context.mjs";
 import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "./ConsoleNav/Skeleton.mjs";
 import ConsoleBrand from "./ConsoleShell/ConsoleBrand.mjs";
+import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton } from "./PageSkeleton/PageSkeleton.mjs";
 import ConsoleShell from "./ConsoleShell/ConsoleShell.mjs";
 import { useInFilterSplit } from "./FilterSidebar/context.mjs";
 import FilterSidebar, { FilterOption, FilterRow } from "./FilterSidebar/FilterSidebar.mjs";
-import { SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
 import Surface from "./Surface/Surface.mjs";
 import FilterStrip, { formatInteger } from "./FilterStrip/FilterStrip.mjs";
 import LabelWithKey from "./LabelWithKey/LabelWithKey.mjs";
 import MetricStrip from "./MetricStrip/MetricStrip.mjs";
 import PageHeader from "./PageHeader/PageHeader.mjs";
-import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton } from "./PageSkeleton/PageSkeleton.mjs";
 import PageTabs from "./PageTabs/PageTabs.mjs";
 import PageToolbar from "./PageToolbar/PageToolbar.mjs";
 import PanelSurface from "./PanelSurface/PanelSurface.mjs";
@@ -24,4 +28,4 @@ import Section from "./Section/Section.mjs";
 import StatCard from "./StatCard/StatCard.mjs";
 import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions/TableIconActions.mjs";
 import TitleWithTips from "./TitleWithTips/TitleWithTips.mjs";
-export { AuthLayout, Breadcrumb, ChartGrid, ConsoleBrand, ConsoleNav, ConsoleShell, FilterOption, FilterRow, FilterSidebar, FilterStrip, LabelWithKey, LoadingAnnouncer, MetricStrip, PageHeader, PageHeaderSkeleton, PageLoading, PageTabs, PageToolbar, PanelSurface, RouteProgress, Section, StatCard, StatCardSkeleton, Surface, SurfaceLinkProvider, TableIconAction, TableIconActions, TableSkeleton, TitleWithTips, formatInteger, resolveActiveHref, styles as surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceDepth, useSurfaceLink };
+export { AuthLayout, AuthLayoutAside, AuthLocaleSwitch, AuthThemeSwitch, Breadcrumb, ChartGrid, ConsoleBrand, ConsoleFooterSkeleton, ConsoleNav, ConsoleNavSkeleton, ConsoleShell, FilterOption, FilterRow, FilterSidebar, FilterStrip, LabelWithKey, LoadingAnnouncer, MetricStrip, PageHeader, PageHeaderSkeleton, PageLoading, PageTabs, PageToolbar, PanelSurface, RouteProgress, Section, StatCard, StatCardSkeleton, Surface, SurfaceLinkProvider, TableIconAction, TableIconActions, TableSkeleton, TitleWithTips, formatInteger, resolveActiveHref, styles as surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };

package/es/i18n/resources/en/index.d.mts

@@ -11,9 +11,10 @@ import _default$9 from "./image.mjs";
 import _default$10 from "./messageModal.mjs";
 import _default$11 from "./qrCode.mjs";
 import _default$12 from "./sideNav.mjs";
+import _default$13 from "./table.mjs";
 declare namespace index_d_exports {
-  export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav };
+  export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav, _default$13 as table };
 }
 //#endregion
-export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, index_d_exports, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav };
+export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, index_d_exports, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav, _default$13 as table };
 //# sourceMappingURL=index.d.mts.map

package/es/i18n/resources/en/index.mjs

@@ -8,6 +8,7 @@ import image_default from "./image.mjs";
 import burger_default from "./burger.mjs";
 import datePicker_default from "./datePicker.mjs";
 import qrCode_default from "./qrCode.mjs";
+import table_default from "./table.mjs";
 import chat_default from "./chat.mjs";
 import messageModal_default from "./messageModal.mjs";
 import editableMessage_default from "./editableMessage.mjs";
@@ -26,9 +27,10 @@ var en_exports = /* @__PURE__ */ __exportAll({
 	image: () => image_default,
 	messageModal: () => messageModal_default,
 	qrCode: () => qrCode_default,
-	sideNav: () => sideNav_default
+	sideNav: () => sideNav_default,
+	table: () => table_default
 });
 //#endregion
-export { burger_default as burger, chat_default as chat, colorPicker_default as colorPicker, common_default as common, datePicker_default as datePicker, editableMessage_default as editableMessage, emojiPicker_default as emojiPicker, en_exports, form_default as form, hotkey_default as hotkey, image_default as image, messageModal_default as messageModal, qrCode_default as qrCode, sideNav_default as sideNav };
+export { burger_default as burger, chat_default as chat, colorPicker_default as colorPicker, common_default as common, datePicker_default as datePicker, editableMessage_default as editableMessage, emojiPicker_default as emojiPicker, en_exports, form_default as form, hotkey_default as hotkey, image_default as image, messageModal_default as messageModal, qrCode_default as qrCode, sideNav_default as sideNav, table_default as table };
 
 //# sourceMappingURL=index.mjs.map

package/es/i18n/resources/en/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/i18n/resources/en/index.ts"],"sourcesContent":["export { default as burger } from './burger';\nexport { default as chat } from './chat';\nexport { default as colorPicker } from './colorPicker';\nexport { default as common } from './common';\nexport { default as datePicker } from './datePicker';\nexport { default as editableMessage } from './editableMessage';\nexport { default as emojiPicker } from './emojiPicker';\nexport { default as form } from './form';\nexport { default as hotkey } from './hotkey';\nexport { default as image } from './image';\nexport { default as messageModal } from './messageModal';\nexport { default as qrCode } from './qrCode';\nexport { default as sideNav } from './sideNav';\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/i18n/resources/en/index.ts"],"sourcesContent":["export { default as burger } from './burger';\nexport { default as chat } from './chat';\nexport { default as colorPicker } from './colorPicker';\nexport { default as common } from './common';\nexport { default as datePicker } from './datePicker';\nexport { default as editableMessage } from './editableMessage';\nexport { default as emojiPicker } from './emojiPicker';\nexport { default as form } from './form';\nexport { default as hotkey } from './hotkey';\nexport { default as image } from './image';\nexport { default as messageModal } from './messageModal';\nexport { default as qrCode } from './qrCode';\nexport { default as sideNav } from './sideNav';\nexport { default as table } from './table';\n"],"mappings":""}

package/es/i18n/resources/en/table.d.mts

@@ -0,0 +1,23 @@
+//#region src/i18n/resources/en/table.d.ts
+declare const _default: {
+  readonly 'table.cancelSort': "Click to cancel sorting";
+  readonly 'table.collapse': "Collapse row";
+  readonly 'table.emptyText': "No data";
+  readonly 'table.expand': "Expand row";
+  readonly 'table.filterCheckAll': "Select all items";
+  readonly 'table.filterConfirm': "OK";
+  readonly 'table.filterEmptyText': "No filters";
+  readonly 'table.filterReset': "Reset";
+  readonly 'table.filterSearchPlaceholder': "Search in filters";
+  readonly 'table.filterTitle': "Filter menu";
+  readonly 'table.selectAll': "Select current page";
+  readonly 'table.selectInvert': "Invert current page";
+  readonly 'table.selectNone': "Clear all data";
+  readonly 'table.selectionAll': "Select all data";
+  readonly 'table.sortTitle': "Sort";
+  readonly 'table.triggerAsc': "Click to sort ascending";
+  readonly 'table.triggerDesc': "Click to sort descending";
+};
+//#endregion
+export { _default as default };
+//# sourceMappingURL=table.d.mts.map

package/es/i18n/resources/en/table.mjs

@@ -0,0 +1,24 @@
+//#region src/i18n/resources/en/table.ts
+var table_default = {
+	"table.cancelSort": "Click to cancel sorting",
+	"table.collapse": "Collapse row",
+	"table.emptyText": "No data",
+	"table.expand": "Expand row",
+	"table.filterCheckAll": "Select all items",
+	"table.filterConfirm": "OK",
+	"table.filterEmptyText": "No filters",
+	"table.filterReset": "Reset",
+	"table.filterSearchPlaceholder": "Search in filters",
+	"table.filterTitle": "Filter menu",
+	"table.selectAll": "Select current page",
+	"table.selectInvert": "Invert current page",
+	"table.selectNone": "Clear all data",
+	"table.selectionAll": "Select all data",
+	"table.sortTitle": "Sort",
+	"table.triggerAsc": "Click to sort ascending",
+	"table.triggerDesc": "Click to sort descending"
+};
+//#endregion
+export { table_default as default };
+
+//# sourceMappingURL=table.mjs.map

package/es/i18n/resources/en/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.mjs","names":[],"sources":["../../../../src/i18n/resources/en/table.ts"],"sourcesContent":["export default {\n  'table.cancelSort': 'Click to cancel sorting',\n  'table.collapse': 'Collapse row',\n  'table.emptyText': 'No data',\n  'table.expand': 'Expand row',\n  'table.filterCheckAll': 'Select all items',\n  'table.filterConfirm': 'OK',\n  'table.filterEmptyText': 'No filters',\n  'table.filterReset': 'Reset',\n  'table.filterSearchPlaceholder': 'Search in filters',\n  'table.filterTitle': 'Filter menu',\n  'table.selectAll': 'Select current page',\n  'table.selectInvert': 'Invert current page',\n  'table.selectNone': 'Clear all data',\n  'table.selectionAll': 'Select all data',\n  'table.sortTitle': 'Sort',\n  'table.triggerAsc': 'Click to sort ascending',\n  'table.triggerDesc': 'Click to sort descending',\n} as const;\n"],"mappings":";AAAA,IAAA,gBAAe;CACb,oBAAoB;CACpB,kBAAkB;CAClB,mBAAmB;CACnB,gBAAgB;CAChB,wBAAwB;CACxB,uBAAuB;CACvB,yBAAyB;CACzB,qBAAqB;CACrB,iCAAiC;CACjC,qBAAqB;CACrB,mBAAmB;CACnB,sBAAsB;CACtB,oBAAoB;CACpB,sBAAsB;CACtB,mBAAmB;CACnB,oBAAoB;CACpB,qBAAqB;AACvB"}

package/es/i18n/resources/zhCn/index.d.mts

@@ -11,9 +11,10 @@ import _default$9 from "./image.mjs";
 import _default$10 from "./messageModal.mjs";
 import _default$11 from "./qrCode.mjs";
 import _default$12 from "./sideNav.mjs";
+import _default$13 from "./table.mjs";
 declare namespace index_d_exports {
-  export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav };
+  export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav, _default$13 as table };
 }
 //#endregion
-export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, index_d_exports, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav };
+export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, index_d_exports, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav, _default$13 as table };
 //# sourceMappingURL=index.d.mts.map

package/es/i18n/resources/zhCn/index.mjs

@@ -12,6 +12,7 @@ import image_default from "./image.mjs";
 import messageModal_default from "./messageModal.mjs";
 import qrCode_default from "./qrCode.mjs";
 import sideNav_default from "./sideNav.mjs";
+import table_default from "./table.mjs";
 //#region src/i18n/resources/zhCn/index.ts
 var zhCn_exports = /* @__PURE__ */ __exportAll({
 	burger: () => burger_default,
@@ -26,9 +27,10 @@ var zhCn_exports = /* @__PURE__ */ __exportAll({
 	image: () => image_default,
 	messageModal: () => messageModal_default,
 	qrCode: () => qrCode_default,
-	sideNav: () => sideNav_default
+	sideNav: () => sideNav_default,
+	table: () => table_default
 });
 //#endregion
-export { burger_default as burger, chat_default as chat, colorPicker_default as colorPicker, common_default as common, datePicker_default as datePicker, editableMessage_default as editableMessage, emojiPicker_default as emojiPicker, form_default as form, hotkey_default as hotkey, image_default as image, messageModal_default as messageModal, qrCode_default as qrCode, sideNav_default as sideNav, zhCn_exports };
+export { burger_default as burger, chat_default as chat, colorPicker_default as colorPicker, common_default as common, datePicker_default as datePicker, editableMessage_default as editableMessage, emojiPicker_default as emojiPicker, form_default as form, hotkey_default as hotkey, image_default as image, messageModal_default as messageModal, qrCode_default as qrCode, sideNav_default as sideNav, table_default as table, zhCn_exports };
 
 //# sourceMappingURL=index.mjs.map

package/es/i18n/resources/zhCn/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/i18n/resources/zhCn/index.ts"],"sourcesContent":["export { default as burger } from './burger';\nexport { default as chat } from './chat';\nexport { default as colorPicker } from './colorPicker';\nexport { default as common } from './common';\nexport { default as datePicker } from './datePicker';\nexport { default as editableMessage } from './editableMessage';\nexport { default as emojiPicker } from './emojiPicker';\nexport { default as form } from './form';\nexport { default as hotkey } from './hotkey';\nexport { default as image } from './image';\nexport { default as messageModal } from './messageModal';\nexport { default as qrCode } from './qrCode';\nexport { default as sideNav } from './sideNav';\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/i18n/resources/zhCn/index.ts"],"sourcesContent":["export { default as burger } from './burger';\nexport { default as chat } from './chat';\nexport { default as colorPicker } from './colorPicker';\nexport { default as common } from './common';\nexport { default as datePicker } from './datePicker';\nexport { default as editableMessage } from './editableMessage';\nexport { default as emojiPicker } from './emojiPicker';\nexport { default as form } from './form';\nexport { default as hotkey } from './hotkey';\nexport { default as image } from './image';\nexport { default as messageModal } from './messageModal';\nexport { default as qrCode } from './qrCode';\nexport { default as sideNav } from './sideNav';\nexport { default as table } from './table';\n"],"mappings":""}

package/es/i18n/resources/zhCn/table.d.mts

@@ -0,0 +1,23 @@
+//#region src/i18n/resources/zhCn/table.d.ts
+declare const _default: {
+  readonly 'table.cancelSort': "取消排序";
+  readonly 'table.collapse': "关闭行";
+  readonly 'table.emptyText': "暂无数据";
+  readonly 'table.expand': "展开行";
+  readonly 'table.filterCheckAll': "全选";
+  readonly 'table.filterConfirm': "确定";
+  readonly 'table.filterEmptyText': "无筛选项";
+  readonly 'table.filterReset': "重置";
+  readonly 'table.filterSearchPlaceholder': "在筛选项中搜索";
+  readonly 'table.filterTitle': "筛选";
+  readonly 'table.selectAll': "全选当页";
+  readonly 'table.selectInvert': "反选当页";
+  readonly 'table.selectNone': "清空所有";
+  readonly 'table.selectionAll': "全选所有";
+  readonly 'table.sortTitle': "排序";
+  readonly 'table.triggerAsc': "点击升序";
+  readonly 'table.triggerDesc': "点击降序";
+};
+//#endregion
+export { _default as default };
+//# sourceMappingURL=table.d.mts.map

package/es/i18n/resources/zhCn/table.mjs

@@ -0,0 +1,24 @@
+//#region src/i18n/resources/zhCn/table.ts
+var table_default = {
+	"table.cancelSort": "取消排序",
+	"table.collapse": "关闭行",
+	"table.emptyText": "暂无数据",
+	"table.expand": "展开行",
+	"table.filterCheckAll": "全选",
+	"table.filterConfirm": "确定",
+	"table.filterEmptyText": "无筛选项",
+	"table.filterReset": "重置",
+	"table.filterSearchPlaceholder": "在筛选项中搜索",
+	"table.filterTitle": "筛选",
+	"table.selectAll": "全选当页",
+	"table.selectInvert": "反选当页",
+	"table.selectNone": "清空所有",
+	"table.selectionAll": "全选所有",
+	"table.sortTitle": "排序",
+	"table.triggerAsc": "点击升序",
+	"table.triggerDesc": "点击降序"
+};
+//#endregion
+export { table_default as default };
+
+//# sourceMappingURL=table.mjs.map

package/es/i18n/resources/zhCn/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.mjs","names":[],"sources":["../../../../src/i18n/resources/zhCn/table.ts"],"sourcesContent":["export default {\n  'table.cancelSort': '取消排序',\n  'table.collapse': '关闭行',\n  'table.emptyText': '暂无数据',\n  'table.expand': '展开行',\n  'table.filterCheckAll': '全选',\n  'table.filterConfirm': '确定',\n  'table.filterEmptyText': '无筛选项',\n  'table.filterReset': '重置',\n  'table.filterSearchPlaceholder': '在筛选项中搜索',\n  'table.filterTitle': '筛选',\n  'table.selectAll': '全选当页',\n  'table.selectInvert': '反选当页',\n  'table.selectNone': '清空所有',\n  'table.selectionAll': '全选所有',\n  'table.sortTitle': '排序',\n  'table.triggerAsc': '点击升序',\n  'table.triggerDesc': '点击降序',\n} as const;\n"],"mappings":";AAAA,IAAA,gBAAe;CACb,oBAAoB;CACpB,kBAAkB;CAClB,mBAAmB;CACnB,gBAAgB;CAChB,wBAAwB;CACxB,uBAAuB;CACvB,yBAAyB;CACzB,qBAAqB;CACrB,iCAAiC;CACjC,qBAAqB;CACrB,mBAAmB;CACnB,sBAAsB;CACtB,oBAAoB;CACpB,sBAAsB;CACtB,mBAAmB;CACnB,oBAAoB;CACpB,qBAAqB;AACvB"}

package/es/i18n/types.d.mts

@@ -11,9 +11,10 @@ import _default$9 from "./resources/en/image.mjs";
 import _default$10 from "./resources/en/messageModal.mjs";
 import _default$11 from "./resources/en/qrCode.mjs";
 import _default$12 from "./resources/en/sideNav.mjs";
+import _default$13 from "./resources/en/table.mjs";
 //#region src/i18n/types.d.ts
 type Locale = string;
-type BuiltinTranslationResources = typeof _default & typeof _default$1 & typeof _default$2 & typeof _default$3 & typeof _default$4 & typeof _default$5 & typeof _default$6 & typeof _default$7 & typeof _default$8 & typeof _default$9 & typeof _default$10 & typeof _default$11 & typeof _default$12;
+type BuiltinTranslationResources = typeof _default & typeof _default$1 & typeof _default$2 & typeof _default$3 & typeof _default$4 & typeof _default$5 & typeof _default$6 & typeof _default$7 & typeof _default$8 & typeof _default$9 & typeof _default$10 & typeof _default$11 & typeof _default$12 & typeof _default$13;
 type TranslationKey = keyof BuiltinTranslationResources;
 type TranslationValue = string;
 /**

package/es/index.mjs

@@ -38,6 +38,8 @@ import FluentEmoji from "./FluentEmoji/FluentEmoji.mjs";
 import AvatarGroup from "./Avatar/AvatarGroup/index.mjs";
 import Avatar from "./Avatar/index.mjs";
 import Badge from "./base-ui/Badge/Badge.mjs";
+import { I18nProvider } from "./i18n/context.mjs";
+import { useTranslation } from "./i18n/useTranslation.mjs";
 import Pagination from "./base-ui/Pagination/Pagination.mjs";
 import Progress from "./base-ui/Progress/Progress.mjs";
 import Result from "./base-ui/Result/Result.mjs";
@@ -57,8 +59,6 @@ import { highlighterThemes } from "./Highlighter/const.mjs";
 import SyntaxHighlighter from "./Highlighter/SyntaxHighlighter/index.mjs";
 import CodeEditor from "./CodeEditor/CodeEditor.mjs";
 import Collapse from "./Collapse/Collapse.mjs";
-import { I18nProvider } from "./i18n/context.mjs";
-import { useTranslation } from "./i18n/useTranslation.mjs";
 import { PopoverArrowIcon } from "./base-ui/Popover/ArrowIcon.mjs";
 import { usePopoverPortalContainer } from "./base-ui/Popover/PopoverPortal.mjs";
 import { PopoverArrow, PopoverBackdrop, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement, PopoverViewport } from "./base-ui/Popover/atoms.mjs";