@lobehub/ui 5.58.0 → 5.60.0

package/es/base-ui/ActionIcon/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/ActionIcon/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    active: lobeStaticStylish.active,\n    // && outranks base-ui Button's variant classes regardless of style insertion order\n    dangerRoot: css`\n      &&:hover {\n        color: ${cssVar.colorError};\n      }\n\n      &&:active {\n        color: ${cssVar.colorErrorActive};\n      }\n    `,\n    glass: lobeStaticStylish.blur,\n    root: css`\n      && {\n        color: ${cssVar.colorTextTertiary};\n      }\n\n      &&:hover {\n        color: ${cssVar.colorTextSecondary};\n      }\n\n      &&:active {\n        color: ${cssVar.colorText};\n      }\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    active: false,\n    danger: false,\n    glass: false,\n    shadow: false,\n  },\n\n  variants: {\n    active: {\n      false: null,\n      true: styles.active,\n    },\n    danger: {\n      false: null,\n      true: styles.dangerRoot,\n    },\n    glass: {\n      false: null,\n      true: styles.glass,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQA,cAAkB;EAE1B,YAAY,GAAG;;iBAEF,OAAO,WAAW;;;;iBAIlB,OAAO,iBAAiB;;;EAGrC,OAAOA,cAAkB;EACzB,MAAM,GAAG;;iBAEI,OAAO,kBAAkB;;;;iBAIzB,OAAO,mBAAmB;;;;iBAI1B,OAAO,UAAU;;;EAG9B,QAAQA,cAAkB;CAC5B;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;CACV;CAEA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/ActionIcon/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    active: lobeStaticStylish.active,\n    // &&& outranks both base-ui Button's variant classes and this file's own `root` color\n    // (same `&&` weight, inserted later), so the icon itself turns red, not just the fill.\n    dangerRoot: css`\n      /* Mirrors the neutral ladder (colorTextTertiary -> colorTextSecondary -> colorText):\n         a softened red at rest, full colorError on hover, colorErrorActive when pressed. */\n      &&& {\n        color: color-mix(in srgb, ${cssVar.colorError} 66%, transparent);\n      }\n\n      &&&:hover:not(:disabled, [aria-disabled='true']) {\n        color: ${cssVar.colorError};\n      }\n\n      &&&:active:not(:disabled, [aria-disabled='true']) {\n        color: ${cssVar.colorErrorActive};\n      }\n    `,\n    glass: lobeStaticStylish.blur,\n    root: css`\n      && {\n        color: ${cssVar.colorTextTertiary};\n      }\n\n      &&:hover {\n        color: ${cssVar.colorTextSecondary};\n      }\n\n      &&:active {\n        color: ${cssVar.colorText};\n      }\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    active: false,\n    danger: false,\n    glass: false,\n    shadow: false,\n  },\n\n  variants: {\n    active: {\n      false: null,\n      true: styles.active,\n    },\n    danger: {\n      false: null,\n      true: styles.dangerRoot,\n    },\n    glass: {\n      false: null,\n      true: styles.glass,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQA,cAAkB;EAG1B,YAAY,GAAG;;;;oCAIiB,OAAO,WAAW;;;;iBAIrC,OAAO,WAAW;;;;iBAIlB,OAAO,iBAAiB;;;EAGrC,OAAOA,cAAkB;EACzB,MAAM,GAAG;;iBAEI,OAAO,kBAAkB;;;;iBAIzB,OAAO,mBAAmB;;;;iBAI1B,OAAO,UAAU;;;EAG9B,QAAQA,cAAkB;CAC5B;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;CACV;CAEA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}

package/es/base-ui/Input/style.mjs

@@ -3,6 +3,12 @@ import { controlHeight } from "../controlSize.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Input/style.ts
+/**
+* Only the field's own control counts as disabled. NumberField disables its
+* increment / decrement buttons at max / min, and a bare `:has(:disabled)` greyed
+* the whole root whenever the value sat on a bound.
+*/
+const disabledControl = "input:disabled, textarea:disabled";
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	clear: css`
     cursor: pointer;
@@ -140,7 +146,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       box-shadow 150ms ${cssVar.motionEaseOut};
 
     &[data-disabled],
-    &:has(:disabled) {
+    &:has(${disabledControl}) {
       cursor: not-allowed;
       color: ${cssVar.colorTextQuaternary};
       opacity: 0.66;
@@ -306,6 +312,6 @@ const rootVariants = cva([styles.root, styles.invalid], {
 	}
 });
 //#endregion
-export { rootVariants, styles };
+export { disabledControl, rootVariants, styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/base-ui/Input/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Input/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  clear: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 16px;\n    height: 16px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    color: ${cssVar.colorBgContainer};\n\n    visibility: hidden;\n    background: ${cssVar.colorTextQuaternary};\n\n    &:hover {\n      background: ${cssVar.colorTextTertiary};\n    }\n  `,\n  count: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block-end: 6px;\n    inset-inline-end: 8px;\n\n    display: inline-flex;\n    align-items: center;\n\n    height: 20px;\n    padding-inline: 8px;\n    border-radius: 999px;\n\n    font-size: 11px;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorFillTertiary};\n\n    &[data-over] {\n      color: ${cssVar.colorWhite};\n      background: ${cssVar.colorError};\n    }\n  `,\n  textareaClear: css`\n    position: absolute;\n    inset-block-start: 10px;\n    inset-inline-end: 10px;\n  `,\n  textareaWithCount: css`\n    padding-block-end: 30px;\n  `,\n  borderless: css`\n    border: 1px solid transparent;\n    background: none;\n  `,\n  filled: css`\n    border: 1px solid transparent;\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover:not(:focus-within, [data-disabled]) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  input: css`\n    flex: 1;\n\n    min-width: 0;\n    padding: 0;\n    border: none;\n\n    font: inherit;\n    color: inherit;\n\n    appearance: none;\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n\n    /* the root shows focus via its border; outrank global :focus-visible rings */\n    &:focus-visible {\n      outline: none;\n    }\n  `,\n  invalid: css`\n    &:has([data-invalid], [aria-invalid='true']) {\n      border-color: ${cssVar.colorError};\n\n      &:focus-within {\n        border-color: ${cssVar.colorError};\n        box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};\n      }\n    }\n  `,\n  outlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:focus-within, [data-disabled]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    &:focus-within {\n      border-color: ${cssVar.colorPrimary};\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};\n    }\n  `,\n  root: css`\n    cursor: text;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut},\n      box-shadow 150ms ${cssVar.motionEaseOut};\n\n    &[data-disabled],\n    &:has(:disabled) {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n      opacity: 0.66;\n    }\n\n    &:hover [data-lobe-input-clear],\n    &:focus-within [data-lobe-input-clear] {\n      visibility: visible;\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  sizeLarge: css`\n    min-height: ${controlHeight.large}px;\n    border-radius: ${cssVar.borderRadiusLG};\n    font-size: 16px;\n  `,\n  sizeMiddle: css`\n    min-height: ${controlHeight.middle}px;\n  `,\n  sizeSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-inline: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n  numberControl: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 13px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: 4px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition:\n      color 150ms ${cssVar.motionEaseOut},\n      background 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.3;\n    }\n  `,\n  numberControlLarge: css`\n    width: 22px;\n    height: 15px;\n  `,\n  numberControlSmall: css`\n    width: 16px;\n    height: 10px;\n    border-radius: 3px;\n  `,\n  numberControls: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    margin-inline-end: -6px;\n  `,\n  numberControlsSmall: css`\n    margin-inline-end: -4px;\n  `,\n  numberInput: css`\n    font-variant-numeric: tabular-nums;\n  `,\n  otpCell: css`\n    flex: none;\n    width: ${controlHeight.middle}px;\n    padding-inline: 0;\n    text-align: center;\n  `,\n  otpRoot: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n  `,\n  passwordToggle: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition: color 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  slot: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  textarea: css`\n    position: relative;\n    height: auto;\n    padding-block: 8px;\n\n    textarea {\n      resize: none;\n      min-height: calc(1.5em * var(--textarea-min-rows, 2));\n      max-height: var(--textarea-max-height, none);\n      line-height: 1.5;\n    }\n  `,\n  textareaAutoSize: css`\n    textarea {\n      field-sizing: content;\n    }\n  `,\n  textareaResize: css`\n    textarea {\n      resize: vertical;\n    }\n  `,\n}));\n\nexport const rootVariants = cva([styles.root, styles.invalid], {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.sizeLarge,\n      middle: styles.sizeMiddle,\n      small: styles.sizeSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;aAcC,OAAO,iBAAiB;;;kBAGnB,OAAO,oBAAoB;;;oBAGzB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;;eAG5B,OAAO,WAAW;oBACb,OAAO,WAAW;;;CAGpC,eAAe,GAAG;;;;;CAKlB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB;;;;;;;;CAQzC,SAAS,GAAG;;sBAEQ,OAAO,WAAW;;;wBAGhB,OAAO,WAAW;gCACV,OAAO,aAAa;;;;CAIlD,UAAU,GAAG;wBACS,OAAO,qBAAqB;kBAClC,OAAO,iBAAiB;;;sBAGpB,OAAO,YAAY;;;;sBAInB,OAAO,aAAa;8BACZ,OAAO,eAAe;;;CAGlD,MAAM,GAAG;;;;;;;;;;qBAUU,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;yBAGL,OAAO,cAAc;2BACnB,OAAO,cAAc;yBACvB,OAAO,cAAc;;;;;eAK/B,OAAO,oBAAoB;;;;;;;;;CASxC,QAAQA,cAAkB;CAC1B,WAAW,GAAG;kBACE,cAAc,MAAM;qBACjB,OAAO,eAAe;;;CAGzC,YAAY,GAAG;kBACC,cAAc,OAAO;;CAErC,WAAW,GAAG;kBACE,cAAc,MAAM;;qBAEjB,OAAO,eAAe;;;CAGzC,eAAe,GAAG;;;;;;;;;;;;;;aAcP,OAAO,kBAAkB;;;;;;oBAMlB,OAAO,cAAc;yBAChB,OAAO,cAAc;;;eAG/B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;;CAQ5C,oBAAoB,GAAG;;;;CAIvB,oBAAoB,GAAG;;;;;CAKvB,gBAAgB,GAAG;;;;;;CAMnB,qBAAqB,GAAG;;;CAGxB,aAAa,GAAG;;;CAGhB,SAAS,GAAG;;aAED,cAAc,OAAO;;;;CAIhC,SAAS,GAAG;;;;;CAKZ,gBAAgB,GAAG;;;;;;;;;;;aAWR,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;;;;;;;;;CAYb,kBAAkB,GAAG;;;;;CAKrB,gBAAgB,GAAG;;;;;AAKrB,EAAE;AAEF,MAAa,eAAe,IAAI,CAAC,OAAO,MAAM,OAAO,OAAO,GAAG;CAC7D,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Input/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\n/**\n * Only the field's own control counts as disabled. NumberField disables its\n * increment / decrement buttons at max / min, and a bare `:has(:disabled)` greyed\n * the whole root whenever the value sat on a bound.\n */\nexport const disabledControl = 'input:disabled, textarea:disabled';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  clear: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 16px;\n    height: 16px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    color: ${cssVar.colorBgContainer};\n\n    visibility: hidden;\n    background: ${cssVar.colorTextQuaternary};\n\n    &:hover {\n      background: ${cssVar.colorTextTertiary};\n    }\n  `,\n  count: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block-end: 6px;\n    inset-inline-end: 8px;\n\n    display: inline-flex;\n    align-items: center;\n\n    height: 20px;\n    padding-inline: 8px;\n    border-radius: 999px;\n\n    font-size: 11px;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorFillTertiary};\n\n    &[data-over] {\n      color: ${cssVar.colorWhite};\n      background: ${cssVar.colorError};\n    }\n  `,\n  textareaClear: css`\n    position: absolute;\n    inset-block-start: 10px;\n    inset-inline-end: 10px;\n  `,\n  textareaWithCount: css`\n    padding-block-end: 30px;\n  `,\n  borderless: css`\n    border: 1px solid transparent;\n    background: none;\n  `,\n  filled: css`\n    border: 1px solid transparent;\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover:not(:focus-within, [data-disabled]) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  input: css`\n    flex: 1;\n\n    min-width: 0;\n    padding: 0;\n    border: none;\n\n    font: inherit;\n    color: inherit;\n\n    appearance: none;\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n\n    /* the root shows focus via its border; outrank global :focus-visible rings */\n    &:focus-visible {\n      outline: none;\n    }\n  `,\n  invalid: css`\n    &:has([data-invalid], [aria-invalid='true']) {\n      border-color: ${cssVar.colorError};\n\n      &:focus-within {\n        border-color: ${cssVar.colorError};\n        box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};\n      }\n    }\n  `,\n  outlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:focus-within, [data-disabled]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    &:focus-within {\n      border-color: ${cssVar.colorPrimary};\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};\n    }\n  `,\n  root: css`\n    cursor: text;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut},\n      box-shadow 150ms ${cssVar.motionEaseOut};\n\n    &[data-disabled],\n    &:has(${disabledControl}) {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n      opacity: 0.66;\n    }\n\n    &:hover [data-lobe-input-clear],\n    &:focus-within [data-lobe-input-clear] {\n      visibility: visible;\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  sizeLarge: css`\n    min-height: ${controlHeight.large}px;\n    border-radius: ${cssVar.borderRadiusLG};\n    font-size: 16px;\n  `,\n  sizeMiddle: css`\n    min-height: ${controlHeight.middle}px;\n  `,\n  sizeSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-inline: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n  numberControl: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 13px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: 4px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition:\n      color 150ms ${cssVar.motionEaseOut},\n      background 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.3;\n    }\n  `,\n  numberControlLarge: css`\n    width: 22px;\n    height: 15px;\n  `,\n  numberControlSmall: css`\n    width: 16px;\n    height: 10px;\n    border-radius: 3px;\n  `,\n  numberControls: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    margin-inline-end: -6px;\n  `,\n  numberControlsSmall: css`\n    margin-inline-end: -4px;\n  `,\n  numberInput: css`\n    font-variant-numeric: tabular-nums;\n  `,\n  otpCell: css`\n    flex: none;\n    width: ${controlHeight.middle}px;\n    padding-inline: 0;\n    text-align: center;\n  `,\n  otpRoot: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n  `,\n  passwordToggle: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition: color 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  slot: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  textarea: css`\n    position: relative;\n    height: auto;\n    padding-block: 8px;\n\n    textarea {\n      resize: none;\n      min-height: calc(1.5em * var(--textarea-min-rows, 2));\n      max-height: var(--textarea-max-height, none);\n      line-height: 1.5;\n    }\n  `,\n  textareaAutoSize: css`\n    textarea {\n      field-sizing: content;\n    }\n  `,\n  textareaResize: css`\n    textarea {\n      resize: vertical;\n    }\n  `,\n}));\n\nexport const rootVariants = cva([styles.root, styles.invalid], {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.sizeLarge,\n      middle: styles.sizeMiddle,\n      small: styles.sizeSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;AAWA,MAAa,kBAAkB;AAE/B,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;aAcC,OAAO,iBAAiB;;;kBAGnB,OAAO,oBAAoB;;;oBAGzB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;;eAG5B,OAAO,WAAW;oBACb,OAAO,WAAW;;;CAGpC,eAAe,GAAG;;;;;CAKlB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB;;;;;;;;CAQzC,SAAS,GAAG;;sBAEQ,OAAO,WAAW;;;wBAGhB,OAAO,WAAW;gCACV,OAAO,aAAa;;;;CAIlD,UAAU,GAAG;wBACS,OAAO,qBAAqB;kBAClC,OAAO,iBAAiB;;;sBAGpB,OAAO,YAAY;;;;sBAInB,OAAO,aAAa;8BACZ,OAAO,eAAe;;;CAGlD,MAAM,GAAG;;;;;;;;;;qBAUU,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;yBAGL,OAAO,cAAc;2BACnB,OAAO,cAAc;yBACvB,OAAO,cAAc;;;YAGlC,gBAAgB;;eAEb,OAAO,oBAAoB;;;;;;;;;CASxC,QAAQA,cAAkB;CAC1B,WAAW,GAAG;kBACE,cAAc,MAAM;qBACjB,OAAO,eAAe;;;CAGzC,YAAY,GAAG;kBACC,cAAc,OAAO;;CAErC,WAAW,GAAG;kBACE,cAAc,MAAM;;qBAEjB,OAAO,eAAe;;;CAGzC,eAAe,GAAG;;;;;;;;;;;;;;aAcP,OAAO,kBAAkB;;;;;;oBAMlB,OAAO,cAAc;yBAChB,OAAO,cAAc;;;eAG/B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;;CAQ5C,oBAAoB,GAAG;;;;CAIvB,oBAAoB,GAAG;;;;;CAKvB,gBAAgB,GAAG;;;;;;CAMnB,qBAAqB,GAAG;;;CAGxB,aAAa,GAAG;;;CAGhB,SAAS,GAAG;;aAED,cAAc,OAAO;;;;CAIhC,SAAS,GAAG;;;;;CAKZ,gBAAgB,GAAG;;;;;;;;;;;aAWR,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;;;;;;;;;CAYb,kBAAkB,GAAG;;;;;CAKrB,gBAAgB,GAAG;;;;;AAKrB,EAAE;AAEF,MAAa,eAAe,IAAI,CAAC,OAAO,MAAM,OAAO,OAAO,GAAG;CAC7D,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}

package/es/dashboard/AuthLayout/Aside.d.mts

@@ -0,0 +1,10 @@
+import { AuthLayoutAsideProps } from "./type.mjs";
+//#region src/dashboard/AuthLayout/Aside.d.ts
+/** Inset art panel for `AuthLayout`'s `aside` slot, with a scrim and copy at the bottom. */
+declare function AuthLayoutAside({ background, className, kicker, line, ...rest }: AuthLayoutAsideProps): import("react").JSX.Element;
+declare namespace AuthLayoutAside {
+  var displayName: string;
+}
+//#endregion
+export { AuthLayoutAside as default };
+//# sourceMappingURL=Aside.d.mts.map

package/es/dashboard/AuthLayout/Aside.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/AuthLayout/Aside.tsx
+/** Inset art panel for `AuthLayout`'s `aside` slot, with a scrim and copy at the bottom. */
+function AuthLayoutAside({ background, className, kicker, line, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.asidePlate, className),
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.asidePanel,
+			children: [background, kicker || line ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: styles.asideScrim }), /* @__PURE__ */ jsxs("div", {
+				className: styles.asideCopy,
+				children: [kicker ? /* @__PURE__ */ jsx("p", {
+					className: styles.asideKicker,
+					children: kicker
+				}) : null, line ? /* @__PURE__ */ jsx("p", {
+					className: styles.asideLine,
+					children: line
+				}) : null]
+			})] }) : null]
+		})
+	});
+}
+AuthLayoutAside.displayName = "AuthLayoutAside";
+//#endregion
+export { AuthLayoutAside as default };
+
+//# sourceMappingURL=Aside.mjs.map

package/es/dashboard/AuthLayout/Aside.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Aside.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/Aside.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { styles } from './style';\nimport type { AuthLayoutAsideProps } from './type';\n\n/** Inset art panel for `AuthLayout`'s `aside` slot, with a scrim and copy at the bottom. */\nfunction AuthLayoutAside({ background, className, kicker, line, ...rest }: AuthLayoutAsideProps) {\n  return (\n    <div className={cx(styles.asidePlate, className)} {...rest}>\n      <div className={styles.asidePanel}>\n        {background}\n        {kicker || line ? (\n          <>\n            <div className={styles.asideScrim} />\n            <div className={styles.asideCopy}>\n              {kicker ? <p className={styles.asideKicker}>{kicker}</p> : null}\n              {line ? <p className={styles.asideLine}>{line}</p> : null}\n            </div>\n          </>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nAuthLayoutAside.displayName = 'AuthLayoutAside';\n\nexport default AuthLayoutAside;\n"],"mappings":";;;;;;AAQA,SAAS,gBAAgB,EAAE,YAAY,WAAW,QAAQ,MAAM,GAAG,QAA8B;CAC/F,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,YAAY,SAAS;EAAG,GAAI;EACpD,UAAA,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACG,YACA,UAAU,OACT,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAW,OAAO,WAAa,CAAA,GACpC,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAW,OAAO;KAAc,UAAA;IAAU,CAAA,IAAI,MAC1D,OAAO,oBAAC,KAAD;KAAG,WAAW,OAAO;KAAY,UAAA;IAAQ,CAAA,IAAI,IAClD;GACL,CAAA,CAAA,EAAA,CAAA,IACA,IACD;;CACF,CAAA;AAET;AAEA,gBAAgB,cAAc"}

package/es/dashboard/AuthLayout/AuthLayout.d.mts

@@ -1,8 +1,10 @@
 import { AuthLayoutProps } from "./type.mjs";
+import AuthLayoutAside from "./Aside.mjs";
 //#region src/dashboard/AuthLayout/AuthLayout.d.ts
-declare function AuthLayout({ aside, brand, children, className, description, title, tools, ...rest }: AuthLayoutProps): import("react").JSX.Element;
+declare function AuthLayout({ alert, aside, background, brand, card, children, className, description, footer, loading, logo, title, tools, variant, ...rest }: AuthLayoutProps): import("react").JSX.Element;
 declare namespace AuthLayout {
   var displayName: string;
+  var Aside: typeof AuthLayoutAside;
 }
 //#endregion
 export { AuthLayout as default };

package/es/dashboard/AuthLayout/AuthLayout.mjs

@@ -1,53 +1,109 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
 import Text from "../../base-ui/Text/Text.mjs";
-import { styles } from "../Surface/style.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { styles } from "./style.mjs";
+import AuthLayoutAside from "./Aside.mjs";
+import { useSurfaceCardClassName } from "../Surface/link.mjs";
+import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 //#region src/dashboard/AuthLayout/AuthLayout.tsx
-function AuthLayout({ aside, brand, children, className, description, title, tools, ...rest }) {
+const FormSkeleton = () => /* @__PURE__ */ jsxs(FlexBasic_default, {
+	"aria-hidden": true,
+	gap: 12,
+	children: [
+		/* @__PURE__ */ jsx(Skeleton, {
+			height: 36,
+			radius: 8,
+			width: "100%"
+		}),
+		/* @__PURE__ */ jsx(Skeleton, {
+			height: 36,
+			radius: 8,
+			width: "100%"
+		}),
+		/* @__PURE__ */ jsx(Skeleton, {
+			height: 36,
+			radius: 8,
+			width: "100%"
+		})
+	]
+});
+function AuthLayout({ alert, aside, background = "plain", brand, card = true, children, className, description, footer, loading, logo, title, tools, variant = "default", ...rest }) {
+	const cardClassName = useSurfaceCardClassName();
 	const split = Boolean(aside);
+	const art = isValidElement(background) ? background : null;
+	const heading = title === void 0 || title === null ? null : typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
+		as: "h1",
+		className: styles.title,
+		weight: "bold",
+		children: title
+	}) : /* @__PURE__ */ jsx("div", {
+		className: styles.titleNode,
+		children: title
+	});
+	const intro = logo || heading || description ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+		gap: 8,
+		children: [
+			logo ? /* @__PURE__ */ jsx("div", {
+				className: styles.logo,
+				children: logo
+			}) : null,
+			heading,
+			description ? /* @__PURE__ */ jsx(Text, {
+				className: styles.description,
+				type: "secondary",
+				children: description
+			}) : null
+		]
+	}) : null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: className ? `${styles$1.page} ${className}` : styles$1.page,
+		className: cx(styles.page, background === "grid" && styles.grid, className),
+		"data-auth-layout": "",
 		...rest,
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: styles$1.header,
-			children: [brand, tools ? /* @__PURE__ */ jsx("div", {
-				className: styles$1.tools,
-				children: tools
-			}) : null]
-		}), /* @__PURE__ */ jsx("main", {
-			className: styles$1.main,
-			children: /* @__PURE__ */ jsx("div", {
-				className: cx(styles$1.lift, split && styles$1.liftSplit, styles.card),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: cx(styles$1.frame, split && styles$1.split),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: cx(styles$1.form, split && styles$1.formSplit),
-						children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-							gap: 8,
-							children: [/* @__PURE__ */ jsx(Text, {
-								as: "h1",
-								className: styles$1.title,
-								weight: "bold",
-								children: title
-							}), description ? /* @__PURE__ */ jsx(Text, {
-								className: styles$1.description,
-								type: "secondary",
-								children: description
-							}) : null]
-						}), children]
-					}), aside ? /* @__PURE__ */ jsx("div", {
-						className: styles$1.aside,
-						children: aside
-					}) : null]
-				})
+		children: [
+			art ? /* @__PURE__ */ jsx("div", {
+				className: styles.backdrop,
+				children: art
+			}) : null,
+			/* @__PURE__ */ jsxs("header", {
+				className: styles.header,
+				children: [brand, tools ? /* @__PURE__ */ jsx("div", {
+					className: styles.tools,
+					children: tools
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("main", {
+				className: styles.main,
+				children: card ? /* @__PURE__ */ jsx("div", {
+					"data-auth-card": "",
+					className: cx(styles.lift, split && styles.liftSplit, cardClassName, variant === "elevated" && styles.elevated),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cx(styles.frame, split && styles.split),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: cx(styles.form, split && styles.formSplit),
+							children: [
+								intro,
+								alert,
+								loading ? /* @__PURE__ */ jsx(FormSkeleton, {}) : children,
+								footer ? /* @__PURE__ */ jsx("div", {
+									className: styles.footer,
+									children: footer
+								}) : null
+							]
+						}), aside ? /* @__PURE__ */ jsx("div", {
+							className: styles.aside,
+							children: aside
+						}) : null]
+					})
+				}) : children
 			})
-		})]
+		]
 	});
 }
 AuthLayout.displayName = "AuthLayout";
+AuthLayout.Aside = AuthLayoutAside;
 //#endregion
 export { AuthLayout as default };
 

package/es/dashboard/AuthLayout/AuthLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthLayout.mjs","names":["styles","surfaceStyles","Flexbox"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nfunction AuthLayout({\n  aside,\n  brand,\n  children,\n  className,\n  description,\n  title,\n  tools,\n  ...rest\n}: AuthLayoutProps) {\n  const split = Boolean(aside);\n  return (\n    <div className={className ? `${styles.page} ${className}` : styles.page} {...rest}>\n      <header className={styles.header}>\n        {brand}\n        {tools ? <div className={styles.tools}>{tools}</div> : null}\n      </header>\n      <main className={styles.main}>\n        <div className={cx(styles.lift, split && styles.liftSplit, surfaceStyles.card)}>\n          <div className={cx(styles.frame, split && styles.split)}>\n            <div className={cx(styles.form, split && styles.formSplit)}>\n              <Flexbox gap={8}>\n                <Text as=\"h1\" className={styles.title} weight=\"bold\">\n                  {title}\n                </Text>\n                {description ? (\n                  <Text className={styles.description} type=\"secondary\">\n                    {description}\n                  </Text>\n                ) : null}\n              </Flexbox>\n              {children}\n            </div>\n            {aside ? <div className={styles.aside}>{aside}</div> : null}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n}\n\nAuthLayout.displayName = 'AuthLayout';\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;AAWA,SAAS,WAAW,EAClB,OACA,OACA,UACA,WACA,aACA,OACA,OACA,GAAG,QACe;CAClB,MAAM,QAAQ,QAAQ,KAAK;CAC3B,OACE,qBAAC,OAAD;EAAK,WAAW,YAAY,GAAGA,SAAO,KAAK,GAAG,cAAcA,SAAO;EAAM,GAAI;EAA7E,UAAA,CACE,qBAAC,UAAD;GAAQ,WAAWA,SAAO;GAA1B,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;IAAK,WAAWA,SAAO;IAAQ,UAAA;GAAW,CAAA,IAAI,IACjD;EACR,CAAA,GAAA,oBAAC,QAAD;GAAM,WAAWA,SAAO;GACtB,UAAA,oBAAC,OAAD;IAAK,WAAW,GAAGA,SAAO,MAAM,SAASA,SAAO,WAAWC,OAAc,IAAI;IAC3E,UAAA,qBAAC,OAAD;KAAK,WAAW,GAAGD,SAAO,OAAO,SAASA,SAAO,KAAK;KAAtD,UAAA,CACE,qBAAC,OAAD;MAAK,WAAW,GAAGA,SAAO,MAAM,SAASA,SAAO,SAAS;MAAzD,UAAA,CACE,qBAACE,mBAAD;OAAS,KAAK;OAAd,UAAA,CACE,oBAAC,MAAD;QAAM,IAAG;QAAK,WAAWF,SAAO;QAAO,QAAO;QAC3C,UAAA;OACG,CAAA,GACL,cACC,oBAAC,MAAD;QAAM,WAAWA,SAAO;QAAa,MAAK;QACvC,UAAA;OACG,CAAA,IACJ,IACG;MACR,CAAA,GAAA,QACE;KACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;MAAK,WAAWA,SAAO;MAAQ,UAAA;KAAW,CAAA,IAAI,IACpD;;GACF,CAAA;EACD,CAAA,CACH;;AAET;AAEA,WAAW,cAAc"}
+{"version":3,"file":"AuthLayout.mjs","names":["Flexbox","Aside"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isValidElement } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport Aside from './Aside';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nconst FormSkeleton = () => (\n  <Flexbox aria-hidden gap={12}>\n    <Skeleton height={36} radius={8} width=\"100%\" />\n    <Skeleton height={36} radius={8} width=\"100%\" />\n    <Skeleton height={36} radius={8} width=\"100%\" />\n  </Flexbox>\n);\n\nfunction AuthLayout({\n  alert,\n  aside,\n  background = 'plain',\n  brand,\n  card = true,\n  children,\n  className,\n  description,\n  footer,\n  loading,\n  logo,\n  title,\n  tools,\n  variant = 'default',\n  ...rest\n}: AuthLayoutProps) {\n  const cardClassName = useSurfaceCardClassName();\n  const split = Boolean(aside);\n  const art = isValidElement(background) ? background : null;\n  const heading =\n    title === undefined || title === null ? null : typeof title === 'string' ? (\n      <Text as=\"h1\" className={styles.title} weight=\"bold\">\n        {title}\n      </Text>\n    ) : (\n      <div className={styles.titleNode}>{title}</div>\n    );\n  const intro =\n    logo || heading || description ? (\n      <Flexbox gap={8}>\n        {logo ? <div className={styles.logo}>{logo}</div> : null}\n        {heading}\n        {description ? (\n          <Text className={styles.description} type=\"secondary\">\n            {description}\n          </Text>\n        ) : null}\n      </Flexbox>\n    ) : null;\n\n  return (\n    <div\n      className={cx(styles.page, background === 'grid' && styles.grid, className)}\n      data-auth-layout=\"\"\n      {...rest}\n    >\n      {art ? <div className={styles.backdrop}>{art}</div> : null}\n      <header className={styles.header}>\n        {brand}\n        {tools ? <div className={styles.tools}>{tools}</div> : null}\n      </header>\n      <main className={styles.main}>\n        {card ? (\n          <div\n            data-auth-card=\"\"\n            className={cx(\n              styles.lift,\n              split && styles.liftSplit,\n              cardClassName,\n              variant === 'elevated' && styles.elevated,\n            )}\n          >\n            <div className={cx(styles.frame, split && styles.split)}>\n              <div className={cx(styles.form, split && styles.formSplit)}>\n                {intro}\n                {alert}\n                {loading ? <FormSkeleton /> : children}\n                {footer ? <div className={styles.footer}>{footer}</div> : null}\n              </div>\n              {aside ? <div className={styles.aside}>{aside}</div> : null}\n            </div>\n          </div>\n        ) : (\n          children\n        )}\n      </main>\n    </div>\n  );\n}\n\nAuthLayout.displayName = 'AuthLayout';\nAuthLayout.Aside = Aside;\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,qBACJ,qBAACA,mBAAD;CAAS,eAAA;CAAY,KAAK;CAA1B,UAAA;EACE,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;CACxC;;AAGX,SAAS,WAAW,EAClB,OACA,OACA,aAAa,SACb,OACA,OAAO,MACP,UACA,WACA,aACA,QACA,SACA,MACA,OACA,OACA,UAAU,WACV,GAAG,QACe;CAClB,MAAM,gBAAgB,wBAAwB;CAC9C,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,MAAM,eAAe,UAAU,IAAI,aAAa;CACtD,MAAM,UACJ,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,OAAO,UAAU,WAC9D,oBAAC,MAAD;EAAM,IAAG;EAAK,WAAW,OAAO;EAAO,QAAO;EAC3C,UAAA;CACG,CAAA,IAEN,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAY,UAAA;CAAW,CAAA;CAElD,MAAM,QACJ,QAAQ,WAAW,cACjB,qBAACA,mBAAD;EAAS,KAAK;EAAd,UAAA;GACG,OAAO,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAU,CAAA,IAAI;GACnD;GACA,cACC,oBAAC,MAAD;IAAM,WAAW,OAAO;IAAa,MAAK;IACvC,UAAA;GACG,CAAA,IACJ;EACG;CACP,CAAA,IAAA;CAEN,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,eAAe,UAAU,OAAO,MAAM,SAAS;EAC1E,oBAAiB;EACjB,GAAI;EAHN,UAAA;GAKG,MAAM,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAW,UAAA;GAAS,CAAA,IAAI;GACtD,qBAAC,UAAD;IAAQ,WAAW,OAAO;IAA1B,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,IAAI,IACjD;;GACR,oBAAC,QAAD;IAAM,WAAW,OAAO;IACrB,UAAA,OACC,oBAAC,OAAD;KACE,kBAAe;KACf,WAAW,GACT,OAAO,MACP,SAAS,OAAO,WAChB,eACA,YAAY,cAAc,OAAO,QACnC;KAEA,UAAA,qBAAC,OAAD;MAAK,WAAW,GAAG,OAAO,OAAO,SAAS,OAAO,KAAK;MAAtD,UAAA,CACE,qBAAC,OAAD;OAAK,WAAW,GAAG,OAAO,MAAM,SAAS,OAAO,SAAS;OAAzD,UAAA;QACG;QACA;QACA,UAAU,oBAAC,cAAD,CAAe,CAAA,IAAI;QAC7B,SAAS,oBAAC,OAAD;SAAK,WAAW,OAAO;SAAS,UAAA;QAAY,CAAA,IAAI;OACvD;MACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAQ,UAAA;MAAW,CAAA,IAAI,IACpD;;IACF,CAAA,IAEL;GAEE,CAAA;EACH;;AAET;AAEA,WAAW,cAAc;AACzB,WAAW,QAAQC"}

package/es/dashboard/AuthLayout/index.d.mts

@@ -1,3 +1,4 @@
-import { AuthLayoutProps } from "./type.mjs";
+import { AuthLayoutAsideProps, AuthLayoutBackground, AuthLayoutProps, AuthLayoutVariant } from "./type.mjs";
+import AuthLayoutAside from "./Aside.mjs";
 import AuthLayout from "./AuthLayout.mjs";
-export { type AuthLayoutProps, AuthLayout as default };
+export { AuthLayoutAside, type AuthLayoutAsideProps, type AuthLayoutBackground, type AuthLayoutProps, type AuthLayoutVariant, AuthLayout as default };

package/es/dashboard/AuthLayout/style.mjs

@@ -16,10 +16,91 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     ${responsive.laptop} {
       display: none;
     }
+  `,
+	asideCopy: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 2;
+    inset-block-end: 64px;
+    inset-inline: 40px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `,
+	asideKicker: css`
+    margin: 0;
+
+    font-size: ${cssVar.fontSize};
+    line-height: 1.4;
+    color: #fff;
+
+    opacity: 0.82;
+  `,
+	asideLine: css`
+    margin: 0;
+
+    font-size: ${cssVar.fontSizeHeading2};
+    font-weight: 600;
+    line-height: 1.25;
+    color: #fff;
+    letter-spacing: -0.02em;
+  `,
+	asidePanel: css`
+    position: absolute;
+    inset: 8px;
+
+    overflow: hidden;
+
+    border-radius: 20px;
+
+    background: linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%);
+  `,
+	asidePlate: css`
+    position: absolute;
+    inset: 0;
+    background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
+  `,
+	asideScrim: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 1;
+    inset-block-end: 0;
+    inset-inline: 0;
+
+    block-size: 58%;
+
+    background: linear-gradient(to top, rgb(24 10 48 / 42%), transparent);
+  `,
+	backdrop: css`
+    pointer-events: none;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
   `,
 	description: css`
     line-height: 1.6;
     color: ${cssVar.colorTextSecondary};
+  `,
+	elevated: css`
+    &&&,
+    &&&:hover {
+      border-radius: 28px;
+    }
+  `,
+	footer: css`
+    margin: 0;
+    font-size: ${cssVar.fontSizeSM};
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+
+    a {
+      font-weight: 600;
+      color: ${cssVar.colorLink};
+      text-decoration: none;
+    }
   `,
 	form: css`
     display: flex;
@@ -56,8 +137,28 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     inline-size: 100%;
     min-inline-size: 0;
     border-radius: inherit;
+  `,
+	grid: css`
+    && {
+      background-color: color-mix(in srgb, ${cssVar.colorBgLayout}, ${cssVar.colorBgElevated} 70%);
+      background-image:
+        linear-gradient(
+          color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,
+          transparent 1px
+        ),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,
+          transparent 1px
+        );
+      background-position: -1px -1px;
+      background-size: 32px 32px;
+    }
   `,
 	header: css`
+    position: relative;
+    z-index: 1;
+
     display: flex;
     flex: none;
     gap: 12px;
@@ -68,6 +169,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     padding-inline: 16px;
   `,
 	lift: css`
+    position: relative;
     display: flex;
     inline-size: min(440px, 100%);
   `,
@@ -77,8 +179,15 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     ${responsive.laptop} {
       inline-size: min(440px, 100%);
     }
+  `,
+	logo: css`
+    display: flex;
+    margin-block-end: 8px;
   `,
 	main: css`
+    position: relative;
+    z-index: 1;
+
     display: grid;
     flex: 1;
     place-items: center;
@@ -87,11 +196,17 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     padding-inline: 16px;
   `,
 	page: css`
+    position: relative;
+
+    overflow: auto;
     display: flex;
+    flex: 1;
     flex-direction: column;
 
+    box-sizing: border-box;
+    inline-size: 100%;
     block-size: 100%;
-    min-block-size: 0;
+    min-block-size: 100dvh;
 
     background: ${cssVar.colorBgLayout};
   `,
@@ -106,6 +221,10 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     margin: 0;
     font-size: ${cssVar.fontSizeHeading3};
     line-height: ${cssVar.lineHeightHeading3};
+  `,
+	titleNode: css`
+    display: flex;
+    min-inline-size: 0;
   `,
 	tools: css`
     display: flex;

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  aside: css`\n    position: relative;\n\n    flex: none;\n\n    box-sizing: border-box;\n    inline-size: 50%;\n    min-inline-size: 0;\n    max-inline-size: 50%;\n\n    background: ${cssVar.colorFillSecondary};\n\n    ${responsive.laptop} {\n      display: none;\n    }\n  `,\n  description: css`\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  form: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: 24px;\n    justify-content: center;\n\n    box-sizing: border-box;\n    inline-size: 100%;\n    min-inline-size: 0;\n    padding-block: 40px;\n    padding-inline: 36px;\n\n    ${responsive.laptop} {\n      padding-block: 28px;\n      padding-inline: 24px;\n    }\n  `,\n  formSplit: css`\n    inline-size: 50%;\n    max-inline-size: 50%;\n\n    ${responsive.laptop} {\n      inline-size: 100%;\n      max-inline-size: 100%;\n    }\n  `,\n  frame: css`\n    overflow: hidden;\n    display: flex;\n    flex: none;\n\n    inline-size: 100%;\n    min-inline-size: 0;\n    border-radius: inherit;\n  `,\n  header: css`\n    display: flex;\n    flex: none;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    block-size: 56px;\n    padding-inline: 16px;\n  `,\n  lift: css`\n    display: flex;\n    inline-size: min(440px, 100%);\n  `,\n  liftSplit: css`\n    inline-size: min(880px, 100%);\n\n    ${responsive.laptop} {\n      inline-size: min(440px, 100%);\n    }\n  `,\n  main: css`\n    display: grid;\n    flex: 1;\n    place-items: center;\n\n    padding-block: 24px 48px;\n    padding-inline: 16px;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n\n    block-size: 100%;\n    min-block-size: 0;\n\n    background: ${cssVar.colorBgLayout};\n  `,\n  split: css`\n    min-block-size: 520px;\n\n    ${responsive.laptop} {\n      min-block-size: 0;\n    }\n  `,\n  title: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeHeading3};\n    line-height: ${cssVar.lineHeightHeading3};\n  `,\n  tools: css`\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    margin-inline-start: auto;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;;;;kBAUM,OAAO,mBAAmB;;MAEtC,WAAW,OAAO;;;;CAItB,aAAa,GAAG;;aAEL,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;;;;;;;;;MAaL,WAAW,OAAO;;;;;CAKtB,WAAW,GAAG;;;;MAIV,WAAW,OAAO;;;;;CAKtB,OAAO,GAAG;;;;;;;;;CASV,QAAQ,GAAG;;;;;;;;;;CAUX,MAAM,GAAG;;;;CAIT,WAAW,GAAG;;;MAGV,WAAW,OAAO;;;;CAItB,MAAM,GAAG;;;;;;;;CAQT,MAAM,GAAG;;;;;;;kBAOO,OAAO,cAAc;;CAErC,OAAO,GAAG;;;MAGN,WAAW,OAAO;;;;CAItB,OAAO,GAAG;;iBAEK,OAAO,iBAAiB;mBACtB,OAAO,mBAAmB;;CAE3C,OAAO,GAAG;;;;;;AAMZ,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  aside: css`\n    position: relative;\n\n    flex: none;\n\n    box-sizing: border-box;\n    inline-size: 50%;\n    min-inline-size: 0;\n    max-inline-size: 50%;\n\n    background: ${cssVar.colorFillSecondary};\n\n    ${responsive.laptop} {\n      display: none;\n    }\n  `,\n  asideCopy: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 2;\n    inset-block-end: 64px;\n    inset-inline: 40px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  `,\n  asideKicker: css`\n    margin: 0;\n\n    font-size: ${cssVar.fontSize};\n    line-height: 1.4;\n    color: #fff;\n\n    opacity: 0.82;\n  `,\n  asideLine: css`\n    margin: 0;\n\n    font-size: ${cssVar.fontSizeHeading2};\n    font-weight: 600;\n    line-height: 1.25;\n    color: #fff;\n    letter-spacing: -0.02em;\n  `,\n  asidePanel: css`\n    position: absolute;\n    inset: 8px;\n\n    overflow: hidden;\n\n    border-radius: 20px;\n\n    background: linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%);\n  `,\n  asidePlate: css`\n    position: absolute;\n    inset: 0;\n    background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});\n  `,\n  asideScrim: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset-block-end: 0;\n    inset-inline: 0;\n\n    block-size: 58%;\n\n    background: linear-gradient(to top, rgb(24 10 48 / 42%), transparent);\n  `,\n  backdrop: css`\n    pointer-events: none;\n    position: absolute;\n    z-index: 0;\n    inset: 0;\n  `,\n  description: css`\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  elevated: css`\n    &&&,\n    &&&:hover {\n      border-radius: 28px;\n    }\n  `,\n  footer: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n\n    a {\n      font-weight: 600;\n      color: ${cssVar.colorLink};\n      text-decoration: none;\n    }\n  `,\n  form: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: 24px;\n    justify-content: center;\n\n    box-sizing: border-box;\n    inline-size: 100%;\n    min-inline-size: 0;\n    padding-block: 40px;\n    padding-inline: 36px;\n\n    ${responsive.laptop} {\n      padding-block: 28px;\n      padding-inline: 24px;\n    }\n  `,\n  formSplit: css`\n    inline-size: 50%;\n    max-inline-size: 50%;\n\n    ${responsive.laptop} {\n      inline-size: 100%;\n      max-inline-size: 100%;\n    }\n  `,\n  frame: css`\n    overflow: hidden;\n    display: flex;\n    flex: none;\n\n    inline-size: 100%;\n    min-inline-size: 0;\n    border-radius: inherit;\n  `,\n  grid: css`\n    && {\n      background-color: color-mix(in srgb, ${cssVar.colorBgLayout}, ${cssVar.colorBgElevated} 70%);\n      background-image:\n        linear-gradient(\n          color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,\n          transparent 1px\n        ),\n        linear-gradient(\n          90deg,\n          color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,\n          transparent 1px\n        );\n      background-position: -1px -1px;\n      background-size: 32px 32px;\n    }\n  `,\n  header: css`\n    position: relative;\n    z-index: 1;\n\n    display: flex;\n    flex: none;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    block-size: 56px;\n    padding-inline: 16px;\n  `,\n  lift: css`\n    position: relative;\n    display: flex;\n    inline-size: min(440px, 100%);\n  `,\n  liftSplit: css`\n    inline-size: min(880px, 100%);\n\n    ${responsive.laptop} {\n      inline-size: min(440px, 100%);\n    }\n  `,\n  logo: css`\n    display: flex;\n    margin-block-end: 8px;\n  `,\n  main: css`\n    position: relative;\n    z-index: 1;\n\n    display: grid;\n    flex: 1;\n    place-items: center;\n\n    padding-block: 24px 48px;\n    padding-inline: 16px;\n  `,\n  page: css`\n    position: relative;\n\n    overflow: auto;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    inline-size: 100%;\n    block-size: 100%;\n    min-block-size: 100dvh;\n\n    background: ${cssVar.colorBgLayout};\n  `,\n  split: css`\n    min-block-size: 520px;\n\n    ${responsive.laptop} {\n      min-block-size: 0;\n    }\n  `,\n  title: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeHeading3};\n    line-height: ${cssVar.lineHeightHeading3};\n  `,\n  titleNode: css`\n    display: flex;\n    min-inline-size: 0;\n  `,\n  tools: css`\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    margin-inline-start: auto;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;;;;kBAUM,OAAO,mBAAmB;;MAEtC,WAAW,OAAO;;;;CAItB,WAAW,GAAG;;;;;;;;;;;;CAYd,aAAa,GAAG;;;iBAGD,OAAO,SAAS;;;;;;CAM/B,WAAW,GAAG;;;iBAGC,OAAO,iBAAiB;;;;;;CAMvC,YAAY,GAAG;;;;;;;;;;CAUf,YAAY,GAAG;;;+CAG8B,OAAO,iBAAiB;;CAErE,YAAY,GAAG;;;;;;;;;;;;CAYf,UAAU,GAAG;;;;;;CAMb,aAAa,GAAG;;aAEL,OAAO,mBAAmB;;CAErC,UAAU,GAAG;;;;;;CAMb,QAAQ,GAAG;;iBAEI,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;;eAIxB,OAAO,UAAU;;;;CAI9B,MAAM,GAAG;;;;;;;;;;;;;MAaL,WAAW,OAAO;;;;;CAKtB,WAAW,GAAG;;;;MAIV,WAAW,OAAO;;;;;CAKtB,OAAO,GAAG;;;;;;;;;CASV,MAAM,GAAG;;6CAEkC,OAAO,cAAc,IAAI,OAAO,gBAAgB;;;+BAG9D,OAAO,UAAU;;;;;+BAKjB,OAAO,UAAU;;;;;;;CAO9C,QAAQ,GAAG;;;;;;;;;;;;;CAaX,MAAM,GAAG;;;;;CAKT,WAAW,GAAG;;;MAGV,WAAW,OAAO;;;;CAItB,MAAM,GAAG;;;;CAIT,MAAM,GAAG;;;;;;;;;;;CAWT,MAAM,GAAG;;;;;;;;;;;;;kBAaO,OAAO,cAAc;;CAErC,OAAO,GAAG;;;MAGN,WAAW,OAAO;;;;CAItB,OAAO,GAAG;;iBAEK,OAAO,iBAAiB;mBACtB,OAAO,mBAAmB;;CAE3C,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;;;;AAMZ,EAAE"}

package/es/dashboard/AuthLayout/type.d.mts

@@ -1,16 +1,52 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/dashboard/AuthLayout/type.d.ts
+type AuthLayoutBackground = 'plain' | 'grid';
+type AuthLayoutVariant = 'default' | 'elevated';
 interface AuthLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /** Optional panel beside the form. Hidden below the laptop breakpoint. */
+  /** Message shown above the form, such as an error `Alert`. */
+  alert?: ReactNode;
+  /** Optional panel beside the form. Hidden below the laptop breakpoint. See `AuthLayout.Aside`. */
   aside?: ReactNode;
+  /**
+   * Page backdrop. `grid` draws a 32px line grid over a mix of the layout and elevated colors.
+   * Any other node is rendered behind the content.
+   * @default 'plain'
+   */
+  background?: AuthLayoutBackground | ReactNode;
   /** Home mark rendered in the corner. Pass your own logo. */
   brand?: ReactNode;
+  /**
+   * Render the sign-in card. Set `false` to keep only the header, tools and backdrop,
+   * for status pages that center their own content.
+   * @default true
+   */
+  card?: boolean;
   children?: ReactNode;
   description?: ReactNode;
-  title: ReactNode;
+  /** Small secondary line under the form, such as support links. */
+  footer?: ReactNode;
+  /** Replace the form with a skeleton. Title and description stay. */
+  loading?: boolean;
+  /** Mark shown above the title. */
+  logo?: ReactNode;
+  /** A string renders as the page heading. Other nodes render as is. */
+  title?: ReactNode;
   /** Corner actions, such as a theme switch. */
   tools?: ReactNode;
+  /**
+   * Card shape. `elevated` uses a 28px radius for standalone sign-in pages.
+   * @default 'default'
+   */
+  variant?: AuthLayoutVariant;
+}
+interface AuthLayoutAsideProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Art behind the copy, such as `<Grainient />`. Defaults to a static gradient. */
+  background?: ReactNode;
+  /** Small line above the headline. */
+  kicker?: ReactNode;
+  /** Headline at the bottom of the panel. */
+  line?: ReactNode;
 }
 //#endregion
-export { AuthLayoutProps };
+export { AuthLayoutAsideProps, AuthLayoutBackground, AuthLayoutProps, AuthLayoutVariant };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/AuthTools/AuthLocaleSwitch.d.mts

@@ -0,0 +1,10 @@
+import { AuthLocaleSwitchProps } from "./type.mjs";
+//#region src/dashboard/AuthTools/AuthLocaleSwitch.d.ts
+/** Pill language select for auth corner tools. Controlled; pass your locale list. */
+declare function AuthLocaleSwitch({ 'aria-label': ariaLabel, className, onChange, options, style, value }: AuthLocaleSwitchProps): import("react").JSX.Element;
+declare namespace AuthLocaleSwitch {
+  var displayName: string;
+}
+//#endregion
+export { AuthLocaleSwitch as default };
+//# sourceMappingURL=AuthLocaleSwitch.d.mts.map

package/es/dashboard/AuthTools/AuthLocaleSwitch.mjs

@@ -0,0 +1,32 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Select from "../../base-ui/Select/Select.mjs";
+import { styles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { GlobeIcon } from "lucide-react";
+//#region src/dashboard/AuthTools/AuthLocaleSwitch.tsx
+/** Pill language select for auth corner tools. Controlled; pass your locale list. */
+function AuthLocaleSwitch({ "aria-label": ariaLabel = "Language", className, onChange, options, style, value }) {
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": ariaLabel,
+		className: cx(styles.locale, className),
+		options,
+		prefix: /* @__PURE__ */ jsx(Icon, {
+			className: styles.localeIcon,
+			icon: GlobeIcon
+		}),
+		size: "small",
+		style,
+		value,
+		variant: "outlined",
+		onChange: (next) => {
+			if (typeof next === "string") onChange?.(next);
+		}
+	});
+}
+AuthLocaleSwitch.displayName = "AuthLocaleSwitch";
+//#endregion
+export { AuthLocaleSwitch as default };
+
+//# sourceMappingURL=AuthLocaleSwitch.mjs.map

package/es/dashboard/AuthTools/AuthLocaleSwitch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthLocaleSwitch.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/AuthLocaleSwitch.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { GlobeIcon } from 'lucide-react';\n\nimport Select from '@/base-ui/Select';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { AuthLocaleSwitchProps } from './type';\n\n/** Pill language select for auth corner tools. Controlled; pass your locale list. */\nfunction AuthLocaleSwitch({\n  'aria-label': ariaLabel = 'Language',\n  className,\n  onChange,\n  options,\n  style,\n  value,\n}: AuthLocaleSwitchProps) {\n  return (\n    <Select\n      aria-label={ariaLabel}\n      className={cx(styles.locale, className)}\n      options={options}\n      prefix={<Icon className={styles.localeIcon} icon={GlobeIcon} />}\n      size=\"small\"\n      style={style}\n      value={value}\n      variant=\"outlined\"\n      onChange={(next: unknown) => {\n        if (typeof next === 'string') onChange?.(next);\n      }}\n    />\n  );\n}\n\nAuthLocaleSwitch.displayName = 'AuthLocaleSwitch';\n\nexport default AuthLocaleSwitch;\n"],"mappings":";;;;;;;;;AAYA,SAAS,iBAAiB,EACxB,cAAc,YAAY,YAC1B,WACA,UACA,SACA,OACA,SACwB;CACxB,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GAAG,OAAO,QAAQ,SAAS;EAC7B;EACT,QAAQ,oBAAC,MAAD;GAAM,WAAW,OAAO;GAAY,MAAM;EAAY,CAAA;EAC9D,MAAK;EACE;EACA;EACP,SAAQ;EACR,WAAW,SAAkB;GAC3B,IAAI,OAAO,SAAS,UAAU,WAAW,IAAI;EAC/C;CACD,CAAA;AAEL;AAEA,iBAAiB,cAAc"}