@lobehub/ui 5.50.1 → 5.50.3

package/es/dashboard/ConsoleNav/style.mjs

@@ -1,282 +1,405 @@
 import { createStaticStyles } from "antd-style";
 //#region src/dashboard/ConsoleNav/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	badge: css`
-    flex: none;
-
-    min-inline-size: 20px;
-    padding-inline: 6px;
-    border-radius: 999px;
-
-    font-size: ${cssVar.fontSizeSM};
-    font-variant-numeric: tabular-nums;
-    color: ${cssVar.colorError};
-    text-align: center;
-
-    background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);
-  `,
-	chevron: css`
-    flex: none;
-    transition: transform 160ms ease;
-
-    &[data-expanded='false'] {
-      transform: rotate(-90deg);
+const styles = createStaticStyles(({ css, cssVar, responsive }) => {
+	const railFade = `
+    transition: opacity 120ms ease 80ms;
+
+    [data-collapsed='true'] & {
+      opacity: 0;
+      transition-delay: 0s;
     }
-  `,
-	indicator: css`
-    display: flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
 
-    width: 18px;
-    height: 18px;
-    margin-inline-start: -6px;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  `;
+	return {
+		badge: css`
+      flex: none;
 
-    color: ${cssVar.colorTextDescription};
+      min-inline-size: 20px;
+      padding-inline: 6px;
+      border-radius: 999px;
 
-    transition: transform 160ms ease;
+      font-size: ${cssVar.fontSizeSM};
+      font-variant-numeric: tabular-nums;
+      color: ${cssVar.colorError};
+      text-align: center;
 
-    &[data-expanded='true'] {
-      transform: rotate(90deg);
-    }
-  `,
-	dot: css`
-    position: absolute;
-    inset-block-start: 7px;
-    inset-inline-end: 9px;
-
-    inline-size: 7px;
-    block-size: 7px;
-    border-radius: 999px;
-
-    background: ${cssVar.colorError};
-  `,
-	group: css`
-    display: flex;
-    flex-direction: column;
-    margin-block-start: 12px;
-
-    &[data-level='0'][data-icon='true'] {
-      margin-block-start: 2px;
-    }
+      background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);
 
-    &:not([data-level='0']) {
-      margin-block-start: 6px;
-    }
-  `,
-	groupHeader: css`
-    cursor: pointer;
-
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: space-between;
-
-    min-block-size: 32px;
-    padding-inline: 10px;
-    border: none;
-    border-radius: ${cssVar.borderRadius};
-
-    font-size: ${cssVar.fontSizeSM};
-    font-weight: 500;
-    color: ${cssVar.colorTextSecondary};
-    text-align: start;
-
-    background: none;
-
-    &:hover,
-    &[data-active='true'] {
-      color: ${cssVar.colorText};
-    }
+      ${railFade}
+    `,
+		chevron: css`
+      flex: none;
+      transition:
+        transform 160ms ease,
+        opacity 120ms ease 80ms;
 
-    &[data-icon='true'] {
-      gap: 12px;
-      justify-content: flex-start;
-      min-block-size: 36px;
-      font-size: ${cssVar.fontSize};
-    }
+      &[data-expanded='false'] {
+        transform: rotate(-90deg);
+      }
 
-    &[data-level='0'][data-icon='true']:hover {
-      background: ${cssVar.colorFillTertiary};
-    }
+      [data-collapsed='true'] & {
+        opacity: 0;
+        transition-delay: 0s;
+      }
 
-    /* Nested groups read as quiet subheadings with the indicator right after the label. */
-    &:not([data-level='0']) {
-      gap: 8px;
-      justify-content: flex-start;
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `,
+		indicator: css`
+      display: flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
 
-      min-block-size: 26px;
+      width: 18px;
+      height: 18px;
+      margin-inline-start: -6px;
 
-      font-size: ${cssVar.fontSizeSM};
-      font-weight: 400;
       color: ${cssVar.colorTextDescription};
 
-      > [data-label] {
-        flex: 0 1 auto;
+      transition: transform 160ms ease;
+
+      &[data-expanded='true'] {
+        transform: rotate(90deg);
       }
+    `,
+		dot: css`
+      position: absolute;
+      inset-block-start: 7px;
+      inset-inline-end: 9px;
 
-      &:hover,
-      &[data-active='true'] {
-        color: ${cssVar.colorTextSecondary};
+      inline-size: 7px;
+      block-size: 7px;
+      border-radius: 999px;
+
+      opacity: 0;
+      background: ${cssVar.colorError};
+
+      transition: opacity 120ms ease;
+
+      [data-collapsed='true'] & {
+        opacity: 1;
       }
-    }
 
-    &[data-indent='1'] {
-      padding-inline-start: 38px;
-    }
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `,
+		fold: css`
+      display: grid;
+      grid-template-rows: 1fr;
+      transition:
+        grid-template-rows 200ms ease,
+        margin 200ms ease,
+        opacity 120ms ease;
+
+      > div {
+        overflow: hidden;
+        min-block-size: 0;
+      }
 
-    &[data-indent='2'] {
-      padding-inline-start: 56px;
-    }
+      &[data-folded='true'] {
+        grid-template-rows: 0fr;
+        opacity: 0;
+      }
+
+      &[data-folded='true']:not(:first-child) {
+        margin-block-start: -2px;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `,
+		group: css`
+      position: relative;
 
-    > [role='img'] {
       display: flex;
-      flex: none;
-    }
-  `,
-	groupItems: css`
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-block-size: 0;
-  `,
-	groupPanel: css`
-    display: grid;
-    grid-template-rows: 1fr;
-    transition: grid-template-rows 160ms ease;
-
-    > div {
-      overflow: hidden;
-    }
+      flex-direction: column;
 
-    &[data-expanded='false'] {
-      grid-template-rows: 0fr;
-    }
+      margin-block-start: 12px;
 
-    &[data-instant='true'] {
-      transition: none;
-    }
-  `,
-	item: css`
-    position: relative;
+      transition: margin 200ms ease;
 
-    display: flex;
-    gap: 10px;
-    align-items: center;
+      &::before {
+        content: '';
 
-    min-block-size: 36px;
-    padding-inline: 10px;
-    border-radius: ${cssVar.borderRadius};
+        position: absolute;
+        inset-block-start: -6px;
+        inset-inline: 0;
 
-    color: ${cssVar.colorTextSecondary};
-    text-decoration: none;
+        block-size: 1px;
 
-    transition:
-      background 120ms ease,
-      color 120ms ease;
+        opacity: 0;
+        background: ${cssVar.colorBorderSecondary};
 
-    &:hover {
-      color: ${cssVar.colorText};
-      background: ${cssVar.colorFillTertiary};
-    }
+        transition: opacity 200ms ease;
+      }
 
-    &[data-active='true'] {
-      font-weight: 500;
-      color: ${cssVar.colorText};
-      background: ${cssVar.colorFillSecondary};
-    }
+      &[data-level='0'][data-icon='true'] {
+        margin-block-start: 2px;
+      }
+
+      &:not([data-level='0']) {
+        margin-block-start: 6px;
+      }
+
+      [data-collapsed='true'] & + &[data-level='0'][data-icon='false']::before {
+        opacity: 1;
+      }
+
+      [data-collapsed='true'] &[data-rail-empty='true'] {
+        margin-block-start: 0;
+
+        &::before {
+          opacity: 0;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+
+        &::before {
+          transition: none;
+        }
+      }
+    `,
+		groupHead: css`
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    `,
+		groupHeader: css`
+      cursor: pointer;
+
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: space-between;
 
-    &[data-indent='1'],
-    &[data-indent='2'] {
       min-block-size: 32px;
-      color: ${cssVar.colorText};
-    }
+      padding-inline: 10px;
+      border: none;
+      border-radius: ${cssVar.borderRadius};
 
-    &[data-indent='1'] {
-      padding-inline-start: 38px;
-    }
+      font-size: ${cssVar.fontSizeSM};
+      font-weight: 500;
+      color: ${cssVar.colorTextSecondary};
+      text-align: start;
+      white-space: nowrap;
 
-    &[data-indent='2'] {
-      padding-inline-start: 56px;
-    }
+      background: none;
 
-    > [role='img'] {
+      &:hover,
+      &[data-active='true'] {
+        color: ${cssVar.colorText};
+      }
+
+      &[data-icon='true'] {
+        gap: 10px;
+        justify-content: flex-start;
+        min-block-size: 36px;
+        font-size: ${cssVar.fontSize};
+
+        > [role='img'] {
+          justify-content: center;
+          inline-size: 18px;
+        }
+      }
+
+      &[data-level='0'][data-icon='true']:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+
+      /* Nested groups read as quiet subheadings with the indicator right after the label. */
+      &:not([data-level='0']) {
+        gap: 8px;
+        justify-content: flex-start;
+
+        min-block-size: 26px;
+
+        font-size: ${cssVar.fontSizeSM};
+        font-weight: 400;
+        color: ${cssVar.colorTextDescription};
+
+        > [data-label] {
+          flex: 0 1 auto;
+        }
+
+        &:hover,
+        &[data-active='true'] {
+          color: ${cssVar.colorTextSecondary};
+        }
+      }
+
+      &[data-indent='1'] {
+        padding-inline-start: 38px;
+      }
+
+      &[data-indent='2'] {
+        padding-inline-start: 56px;
+      }
+
+      > [role='img'] {
+        display: flex;
+        flex: none;
+      }
+    `,
+		groupItems: css`
       display: flex;
-      flex: none;
-    }
+      flex-direction: column;
+      gap: 2px;
+      min-block-size: 0;
+    `,
+		groupPanel: css`
+      display: grid;
+      grid-template-rows: 1fr;
+      transition: grid-template-rows 160ms ease;
+
+      > div {
+        overflow: hidden;
+      }
 
-    &[data-collapsed='true'] {
-      justify-content: center;
-      min-block-size: 40px;
-      padding-inline: 0;
-    }
+      &[data-expanded='false'] {
+        grid-template-rows: 0fr;
+      }
 
-    ${responsive.mobile} {
-      min-block-size: 44px;
-    }
-  `,
-	itemLabel: css`
-    overflow: hidden;
-    flex: 1;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-	nav: css`
-    scrollbar-width: thin;
-
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: 2px;
-
-    min-block-size: 0;
-    padding-block-end: 12px;
-    padding-inline: 8px;
-  `,
-	railGroup: css`
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    margin-block-start: 6px;
-    padding-block-start: 6px;
-    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
-
-    &[data-first='true'] {
-      margin-block-start: 0;
-      border-block-start: none;
-    }
-  `,
-	railTop: css`
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  `,
-	topItems: css`
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    &[data-divided='true'] {
-      margin-block-end: 6px;
-      padding-block-end: 8px;
-      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-    }
-  `,
-	srOnly: css`
-    position: absolute;
+      &[data-instant='true'] {
+        transition: none;
+      }
+    `,
+		item: css`
+      position: relative;
 
-    overflow: hidden;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      min-block-size: 36px;
+      padding-inline: 10px;
+      border-radius: ${cssVar.borderRadius};
 
-    inline-size: 1px;
-    block-size: 1px;
+      color: ${cssVar.colorTextSecondary};
+      text-decoration: none;
+      white-space: nowrap;
 
-    white-space: nowrap;
+      transition:
+        background 120ms ease,
+        color 120ms ease;
 
-    clip-path: inset(50%);
-  `
-}));
+      &:hover {
+        color: ${cssVar.colorText};
+        background: ${cssVar.colorFillTertiary};
+      }
+
+      &[data-active='true'] {
+        font-weight: 500;
+        color: ${cssVar.colorText};
+        background: ${cssVar.colorFillSecondary};
+      }
+
+      &[data-indent='1'],
+      &[data-indent='2'] {
+        min-block-size: 32px;
+        color: ${cssVar.colorText};
+      }
+
+      &[data-indent='1'] {
+        padding-inline-start: 38px;
+      }
+
+      &[data-indent='2'] {
+        padding-inline-start: 56px;
+      }
+
+      [data-collapsed='true'] &:not([data-indent='0']) {
+        padding-inline-start: 10px;
+      }
+
+      > [role='img'] {
+        display: flex;
+        flex: none;
+      }
+
+      ${responsive.mobile} {
+        min-block-size: 44px;
+      }
+    `,
+		itemLabel: css`
+      overflow: hidden;
+      flex: 1;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      [data-collapsed='true'] & {
+        text-overflow: clip;
+      }
+
+      ${railFade}
+    `,
+		nav: css`
+      /* Scroll anchoring would jump the list in one frame while rail rows fold and unfold. */
+      overflow-anchor: none;
+      scrollbar-width: thin;
+
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: 2px;
+
+      min-block-size: 0;
+      padding-block-end: 12px;
+      padding-inline: 8px;
+    `,
+		railLink: css`
+      position: absolute;
+      inset: 0;
+      border-radius: ${cssVar.borderRadius};
+      transition: background 120ms ease;
+
+      &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+
+      &[data-active='true'] {
+        background: ${cssVar.colorFillSecondary};
+      }
+
+      @starting-style {
+        background: transparent;
+      }
+    `,
+		topItems: css`
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      transition:
+        margin 200ms ease,
+        padding 200ms ease,
+        border-color 200ms ease;
+
+      &[data-divided='true'] {
+        margin-block-end: 6px;
+        padding-block-end: 8px;
+        border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+      }
+
+      [data-collapsed='true'] &[data-rail-empty='true'] {
+        margin-block-end: 0;
+        padding-block-end: 0;
+        border-block-end-color: transparent;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `
+	};
+});
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  badge: css`\n    flex: none;\n\n    min-inline-size: 20px;\n    padding-inline: 6px;\n    border-radius: 999px;\n\n    font-size: ${cssVar.fontSizeSM};\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorError};\n    text-align: center;\n\n    background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n  `,\n  chevron: css`\n    flex: none;\n    transition: transform 160ms ease;\n\n    &[data-expanded='false'] {\n      transform: rotate(-90deg);\n    }\n  `,\n  indicator: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 18px;\n    height: 18px;\n    margin-inline-start: -6px;\n\n    color: ${cssVar.colorTextDescription};\n\n    transition: transform 160ms ease;\n\n    &[data-expanded='true'] {\n      transform: rotate(90deg);\n    }\n  `,\n  dot: css`\n    position: absolute;\n    inset-block-start: 7px;\n    inset-inline-end: 9px;\n\n    inline-size: 7px;\n    block-size: 7px;\n    border-radius: 999px;\n\n    background: ${cssVar.colorError};\n  `,\n  group: css`\n    display: flex;\n    flex-direction: column;\n    margin-block-start: 12px;\n\n    &[data-level='0'][data-icon='true'] {\n      margin-block-start: 2px;\n    }\n\n    &:not([data-level='0']) {\n      margin-block-start: 6px;\n    }\n  `,\n  groupHeader: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-block-size: 32px;\n    padding-inline: 10px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: ${cssVar.fontSizeSM};\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    text-align: start;\n\n    background: none;\n\n    &:hover,\n    &[data-active='true'] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-icon='true'] {\n      gap: 12px;\n      justify-content: flex-start;\n      min-block-size: 36px;\n      font-size: ${cssVar.fontSize};\n    }\n\n    &[data-level='0'][data-icon='true']:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    /* Nested groups read as quiet subheadings with the indicator right after the label. */\n    &:not([data-level='0']) {\n      gap: 8px;\n      justify-content: flex-start;\n\n      min-block-size: 26px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 400;\n      color: ${cssVar.colorTextDescription};\n\n      > [data-label] {\n        flex: 0 1 auto;\n      }\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorTextSecondary};\n      }\n    }\n\n    &[data-indent='1'] {\n      padding-inline-start: 38px;\n    }\n\n    &[data-indent='2'] {\n      padding-inline-start: 56px;\n    }\n\n    > [role='img'] {\n      display: flex;\n      flex: none;\n    }\n  `,\n  groupItems: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-block-size: 0;\n  `,\n  groupPanel: css`\n    display: grid;\n    grid-template-rows: 1fr;\n    transition: grid-template-rows 160ms ease;\n\n    > div {\n      overflow: hidden;\n    }\n\n    &[data-expanded='false'] {\n      grid-template-rows: 0fr;\n    }\n\n    &[data-instant='true'] {\n      transition: none;\n    }\n  `,\n  item: css`\n    position: relative;\n\n    display: flex;\n    gap: 10px;\n    align-items: center;\n\n    min-block-size: 36px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorTextSecondary};\n    text-decoration: none;\n\n    transition:\n      background 120ms ease,\n      color 120ms ease;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[data-active='true'] {\n      font-weight: 500;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-indent='1'],\n    &[data-indent='2'] {\n      min-block-size: 32px;\n      color: ${cssVar.colorText};\n    }\n\n    &[data-indent='1'] {\n      padding-inline-start: 38px;\n    }\n\n    &[data-indent='2'] {\n      padding-inline-start: 56px;\n    }\n\n    > [role='img'] {\n      display: flex;\n      flex: none;\n    }\n\n    &[data-collapsed='true'] {\n      justify-content: center;\n      min-block-size: 40px;\n      padding-inline: 0;\n    }\n\n    ${responsive.mobile} {\n      min-block-size: 44px;\n    }\n  `,\n  itemLabel: css`\n    overflow: hidden;\n    flex: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  nav: css`\n    scrollbar-width: thin;\n\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 2px;\n\n    min-block-size: 0;\n    padding-block-end: 12px;\n    padding-inline: 8px;\n  `,\n  railGroup: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n\n    margin-block-start: 6px;\n    padding-block-start: 6px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n\n    &[data-first='true'] {\n      margin-block-start: 0;\n      border-block-start: none;\n    }\n  `,\n  railTop: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  `,\n  topItems: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n\n    &[data-divided='true'] {\n      margin-block-end: 6px;\n      padding-block-end: 8px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;iBAOK,OAAO,WAAW;;aAEtB,OAAO,WAAW;;;qCAGM,OAAO,WAAW;;CAErD,SAAS,GAAG;;;;;;;;CAQZ,WAAW,GAAG;;;;;;;;;;aAUH,OAAO,qBAAqB;;;;;;;;CAQvC,KAAK,GAAG;;;;;;;;;kBASQ,OAAO,WAAW;;CAElC,OAAO,GAAG;;;;;;;;;;;;;CAaV,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,aAAa;;iBAExB,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;;;;;;;mBAOb,OAAO,SAAS;;;;oBAIf,OAAO,kBAAkB;;;;;;;;;;mBAU1B,OAAO,WAAW;;eAEtB,OAAO,qBAAqB;;;;;;;;iBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;CAiBzC,YAAY,GAAG;;;;;;CAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;CAiBf,MAAM,GAAG;;;;;;;;;qBASU,OAAO,aAAa;;aAE5B,OAAO,mBAAmB;;;;;;;;eAQxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;eAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;MAsB1B,WAAW,OAAO;;;;CAItB,WAAW,GAAG;;;;;;CAMd,KAAK,GAAG;;;;;;;;;;;;CAYR,WAAW,GAAG;;;;;;;oCAOoB,OAAO,qBAAqB;;;;;;;CAO9D,SAAS,GAAG;;;;;CAKZ,UAAU,GAAG;;;;;;;;oCAQqB,OAAO,qBAAqB;;;CAG9D,QAAQ,GAAG;;;;;;;;;;;;AAYb,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => {\n  // Fades out at once on collapse, but waits on expand until the width has room for the text.\n  const railFade = `\n    transition: opacity 120ms ease 80ms;\n\n    [data-collapsed='true'] & {\n      opacity: 0;\n      transition-delay: 0s;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `;\n\n  return {\n    badge: css`\n      flex: none;\n\n      min-inline-size: 20px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorError};\n      text-align: center;\n\n      background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n\n      ${railFade}\n    `,\n    chevron: css`\n      flex: none;\n      transition:\n        transform 160ms ease,\n        opacity 120ms ease 80ms;\n\n      &[data-expanded='false'] {\n        transform: rotate(-90deg);\n      }\n\n      [data-collapsed='true'] & {\n        opacity: 0;\n        transition-delay: 0s;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    indicator: css`\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 18px;\n      height: 18px;\n      margin-inline-start: -6px;\n\n      color: ${cssVar.colorTextDescription};\n\n      transition: transform 160ms ease;\n\n      &[data-expanded='true'] {\n        transform: rotate(90deg);\n      }\n    `,\n    dot: css`\n      position: absolute;\n      inset-block-start: 7px;\n      inset-inline-end: 9px;\n\n      inline-size: 7px;\n      block-size: 7px;\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorError};\n\n      transition: opacity 120ms ease;\n\n      [data-collapsed='true'] & {\n        opacity: 1;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    fold: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition:\n        grid-template-rows 200ms ease,\n        margin 200ms ease,\n        opacity 120ms ease;\n\n      > div {\n        overflow: hidden;\n        min-block-size: 0;\n      }\n\n      &[data-folded='true'] {\n        grid-template-rows: 0fr;\n        opacity: 0;\n      }\n\n      &[data-folded='true']:not(:first-child) {\n        margin-block-start: -2px;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    group: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      margin-block-start: 12px;\n\n      transition: margin 200ms ease;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-start: -6px;\n        inset-inline: 0;\n\n        block-size: 1px;\n\n        opacity: 0;\n        background: ${cssVar.colorBorderSecondary};\n\n        transition: opacity 200ms ease;\n      }\n\n      &[data-level='0'][data-icon='true'] {\n        margin-block-start: 2px;\n      }\n\n      &:not([data-level='0']) {\n        margin-block-start: 6px;\n      }\n\n      [data-collapsed='true'] & + &[data-level='0'][data-icon='false']::before {\n        opacity: 1;\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-start: 0;\n\n        &::before {\n          opacity: 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n\n        &::before {\n          transition: none;\n        }\n      }\n    `,\n    groupHead: css`\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    `,\n    groupHeader: css`\n      cursor: pointer;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      min-block-size: 32px;\n      padding-inline: 10px;\n      border: none;\n      border-radius: ${cssVar.borderRadius};\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      text-align: start;\n      white-space: nowrap;\n\n      background: none;\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorText};\n      }\n\n      &[data-icon='true'] {\n        gap: 10px;\n        justify-content: flex-start;\n        min-block-size: 36px;\n        font-size: ${cssVar.fontSize};\n\n        > [role='img'] {\n          justify-content: center;\n          inline-size: 18px;\n        }\n      }\n\n      &[data-level='0'][data-icon='true']:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      /* Nested groups read as quiet subheadings with the indicator right after the label. */\n      &:not([data-level='0']) {\n        gap: 8px;\n        justify-content: flex-start;\n\n        min-block-size: 26px;\n\n        font-size: ${cssVar.fontSizeSM};\n        font-weight: 400;\n        color: ${cssVar.colorTextDescription};\n\n        > [data-label] {\n          flex: 0 1 auto;\n        }\n\n        &:hover,\n        &[data-active='true'] {\n          color: ${cssVar.colorTextSecondary};\n        }\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n    `,\n    groupItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-block-size: 0;\n    `,\n    groupPanel: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition: grid-template-rows 160ms ease;\n\n      > div {\n        overflow: hidden;\n      }\n\n      &[data-expanded='false'] {\n        grid-template-rows: 0fr;\n      }\n\n      &[data-instant='true'] {\n        transition: none;\n      }\n    `,\n    item: css`\n      position: relative;\n\n      display: flex;\n      gap: 10px;\n      align-items: center;\n\n      min-block-size: 36px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadius};\n\n      color: ${cssVar.colorTextSecondary};\n      text-decoration: none;\n      white-space: nowrap;\n\n      transition:\n        background 120ms ease,\n        color 120ms ease;\n\n      &:hover {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        font-weight: 500;\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      &[data-indent='1'],\n      &[data-indent='2'] {\n        min-block-size: 32px;\n        color: ${cssVar.colorText};\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      [data-collapsed='true'] &:not([data-indent='0']) {\n        padding-inline-start: 10px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n\n      ${responsive.mobile} {\n        min-block-size: 44px;\n      }\n    `,\n    itemLabel: css`\n      overflow: hidden;\n      flex: 1;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      [data-collapsed='true'] & {\n        text-overflow: clip;\n      }\n\n      ${railFade}\n    `,\n    nav: css`\n      /* Scroll anchoring would jump the list in one frame while rail rows fold and unfold. */\n      overflow-anchor: none;\n      scrollbar-width: thin;\n\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: 2px;\n\n      min-block-size: 0;\n      padding-block-end: 12px;\n      padding-inline: 8px;\n    `,\n    railLink: css`\n      position: absolute;\n      inset: 0;\n      border-radius: ${cssVar.borderRadius};\n      transition: background 120ms ease;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      @starting-style {\n        background: transparent;\n      }\n    `,\n    topItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      transition:\n        margin 200ms ease,\n        padding 200ms ease,\n        border-color 200ms ease;\n\n      &[data-divided='true'] {\n        margin-block-end: 6px;\n        padding-block-end: 8px;\n        border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-end: 0;\n        padding-block-end: 0;\n        border-block-end-color: transparent;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,iBAAiB;CAExE,MAAM,WAAW;;;;;;;;;;;;CAajB,OAAO;EACL,OAAO,GAAG;;;;;;;mBAOK,OAAO,WAAW;;eAEtB,OAAO,WAAW;;;uCAGM,OAAO,WAAW;;QAEjD,SAAS;;EAEb,SAAS,GAAG;;;;;;;;;;;;;;;;;;;EAmBZ,WAAW,GAAG;;;;;;;;;;eAUH,OAAO,qBAAqB;;;;;;;;EAQvC,KAAK,GAAG;;;;;;;;;;oBAUQ,OAAO,WAAW;;;;;;;;;;;;EAYlC,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BT,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;sBAoBQ,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC9C,WAAW,GAAG;;;;;EAKd,aAAa,GAAG;;;;;;;;;;;uBAWG,OAAO,aAAa;;mBAExB,OAAO,WAAW;;eAEtB,OAAO,mBAAmB;;;;;;;;iBAQxB,OAAO,UAAU;;;;;;;qBAOb,OAAO,SAAS;;;;;;;;;sBASf,OAAO,kBAAkB;;;;;;;;;;qBAU1B,OAAO,WAAW;;iBAEtB,OAAO,qBAAqB;;;;;;;;mBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;EAiBzC,YAAY,GAAG;;;;;;EAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;EAiBf,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;eAE5B,OAAO,mBAAmB;;;;;;;;;iBASxB,OAAO,UAAU;sBACZ,OAAO,kBAAkB;;;;;iBAK9B,OAAO,UAAU;sBACZ,OAAO,mBAAmB;;;;;;iBAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;QAoB1B,WAAW,OAAO;;;;EAItB,WAAW,GAAG;;;;;;;;;;QAUV,SAAS;;EAEb,KAAK,GAAG;;;;;;;;;;;;;;EAcR,UAAU,GAAG;;;uBAGM,OAAO,aAAa;;;;sBAIrB,OAAO,kBAAkB;;;;sBAIzB,OAAO,mBAAmB;;;;;;;EAO5C,UAAU,GAAG;;;;;;;;;;;;sCAYqB,OAAO,qBAAqB;;;;;;;;;;;;;CAahE;AACF,CAAC"}

package/es/dashboard/ConsoleShell/ConsoleBrand.mjs

@@ -5,15 +5,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/dashboard/ConsoleShell/ConsoleBrand.tsx
 function ConsoleBrand({ href = "/", label, logo, renderLink, title }) {
 	const shell = useConsoleShellState();
-	const collapsed = shell?.collapsed ?? false;
-	const lockup = title == null || title === false || title === "" ? logo : /* @__PURE__ */ jsxs("span", {
+	const content = title == null || title === false || title === "" ? logo : /* @__PURE__ */ jsxs("span", {
 		className: styles.brandLockup,
 		children: [logo, /* @__PURE__ */ jsx("span", {
 			className: styles.brandName,
 			children: title
 		})]
 	});
-	const content = collapsed ? logo : lockup;
 	const linkProps = {
 		"aria-label": label ?? (typeof title === "string" ? title : "Home"),
 		"children": content,