@aortl/admin-react 0.1.0 → 0.3.0

package/README.md

@@ -1,6 +1,8 @@
 # @aortl/admin-react
 
-React component library for the admin design system. Renders the same class names as `@aortl/admin-css`, so vanilla HTML and React look identical.
+React component library for the admin design system. Renders the same class names as [`@aortl/admin-css`](https://www.npmjs.com/package/@aortl/admin-css), so vanilla HTML and React look identical.
+
+[View on npm](https://www.npmjs.com/package/@aortl/admin-react) · [Docs](https://digital-udvikling.github.io/admin-design-system/)
 
 ## Install
 

package/dist/Dialog.d.ts

@@ -0,0 +1,73 @@
+import { ComponentProps, ReactNode } from 'react';
+import { IconProp } from './icon';
+export type DialogSize = "sm" | "md" | "lg";
+export type DialogClosedBy = "any" | "closerequest" | "none";
+export interface DialogContainerProps extends Omit<ComponentProps<"dialog">, "open"> {
+    /** Controlled open state. Omit for uncontrolled (e.g. driven by Invoker Commands). */
+    open?: boolean;
+    /** Fires when the dialog closes (Esc, backdrop, close button, form method="dialog"). */
+    onOpenChange?: (open: boolean) => void;
+    /** Width preset. Default: `"md"`. */
+    size?: DialogSize;
+    /**
+     * Native `closedby` attribute. `"any"` allows Esc + backdrop click,
+     * `"closerequest"` only Esc, `"none"` neither. Default: `"any"`.
+     */
+    closedby?: DialogClosedBy;
+}
+/**
+ * The bare `<dialog>` primitive — no opinions about header, body, or footer.
+ * Use this when the default `<Dialog>` layout doesn't fit (custom header,
+ * media block, multi-step content).
+ */
+declare function DialogContainer({ open, onOpenChange, size, closedby, className, children, ...rest }: DialogContainerProps): import("react/jsx-runtime").JSX.Element;
+export type DialogHeaderProps = ComponentProps<"div">;
+declare function DialogHeader({ className, ...rest }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface DialogTitleProps extends ComponentProps<"h2"> {
+    /** Leading icon. */
+    icon?: IconProp;
+}
+declare function DialogTitle({ icon, className, children, ...rest }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+export type DialogDescriptionProps = ComponentProps<"p">;
+declare function DialogDescription({ className, ...rest }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type DialogBodyProps = ComponentProps<"div">;
+declare function DialogBody({ className, ...rest }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
+export type DialogFooterProps = ComponentProps<"div">;
+declare function DialogFooter({ className, ...rest }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+export interface DialogCloseButtonProps extends ComponentProps<"button"> {
+    /** Override the default X icon. */
+    icon?: IconProp;
+}
+declare function DialogCloseButton({ icon, className, children, onClick, type, "aria-label": ariaLabel, ...rest }: DialogCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface DialogProps extends Omit<DialogContainerProps, "title" | "children"> {
+    /** Leading icon for the title row. */
+    icon?: IconProp;
+    /** Renders as `<Dialog.Title>`. */
+    title?: ReactNode;
+    /** Renders as `<Dialog.Description>`. */
+    description?: ReactNode;
+    /** Renders as `<Dialog.Footer>`. */
+    actions?: ReactNode;
+    /** Show the X close button in the header. Default: `true`. */
+    dismissible?: boolean;
+    /** aria-label for the close button. Default: `"Close"`. */
+    closeLabel?: string;
+    children?: ReactNode;
+}
+/**
+ * Standard modal: a `<dialog>` with an opinionated header / body / footer
+ * layout driven by shorthand props. For anything outside that shape, use
+ * `<Dialog.Container>` and compose by hand.
+ */
+declare function DialogRoot({ icon, title, description, actions, dismissible, closeLabel, children, ...containerProps }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: typeof DialogRoot & {
+    Container: typeof DialogContainer;
+    Header: typeof DialogHeader;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+    CloseButton: typeof DialogCloseButton;
+};
+export {};
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"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"}

package/dist/Tooltip.d.ts

@@ -0,0 +1,36 @@
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+export type TooltipProviderProps = ComponentProps<typeof BaseTooltip.Provider>;
+declare function TooltipProvider(props: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+export type TooltipRootProps = ComponentProps<typeof BaseTooltip.Root>;
+declare function TooltipRoot(props: TooltipRootProps): import("react/jsx-runtime").JSX.Element;
+export type TooltipTriggerProps = ComponentProps<typeof BaseTooltip.Trigger>;
+declare function TooltipTrigger(props: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type TooltipSize = "sm" | "md";
+type TooltipPositionerProps = ComponentProps<typeof BaseTooltip.Positioner>;
+export interface TooltipPopupProps extends ComponentProps<typeof BaseTooltip.Popup> {
+    size?: TooltipSize;
+    side?: TooltipPositionerProps["side"];
+    align?: TooltipPositionerProps["align"];
+    sideOffset?: TooltipPositionerProps["sideOffset"];
+}
+declare function TooltipPopup({ size, side, align, sideOffset, role, className, children, ...rest }: TooltipPopupProps): import("react/jsx-runtime").JSX.Element;
+export interface TooltipProps extends Omit<TooltipRootProps, "children"> {
+    /** Tooltip body — string or rich node. */
+    content: ReactNode;
+    side?: TooltipPopupProps["side"];
+    align?: TooltipPopupProps["align"];
+    sideOffset?: TooltipPopupProps["sideOffset"];
+    size?: TooltipSize;
+    /** The trigger element. Must be a single React element so Base UI can merge trigger props/refs into it. */
+    children: ReactElement;
+}
+declare function TooltipShorthand({ content, side, align, sideOffset, size, children, ...rootProps }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: typeof TooltipShorthand & {
+    Provider: typeof TooltipProvider;
+    Root: typeof TooltipRoot;
+    Trigger: typeof TooltipTrigger;
+    Popup: typeof TooltipPopup;
+};
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,QAAQ,CAAC,CAAC;AAE/E,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAEnD;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;AAEvE,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAE3C;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC;AAE7E,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAEjD;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5E,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC;IACjF,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,sBAAsB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED,iBAAS,YAAY,CAAC,EACpB,IAAW,EACX,IAAY,EACZ,KAAgB,EAChB,UAAc,EACd,IAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAcnB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACtE,0CAA0C;IAC1C,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2GAA2G;IAC3G,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,iBAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,YAAY,2CASd;AAED,eAAO,MAAM,OAAO;;;;;CAKlB,CAAC"}

package/dist/admin.css

@@ -7,6 +7,7 @@
     --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
     monospace;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -1908,6 +1909,137 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
+@layer components {
+  .dialog {
+    margin: auto;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: var(--radius-xl);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    padding: calc(var(--spacing) * 0);
+    color: var(--color-text);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    width: calc(100% - 2rem);
+    max-width: 32rem;
+    max-height: calc(100dvh - 2rem);
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
+  }
+  .dialog[open] {
+    display: flex;
+  }
+  .dialog::backdrop {
+    background: rgb(0 0 0 / 0.4);
+    transition: display 150ms allow-discrete, overlay 150ms allow-discrete, background 150ms ease-out;
+  }
+  @starting-style {
+    .dialog[open] {
+      opacity: 0;
+      transform: translateY(-0.5rem) scale(0.98);
+    }
+    .dialog[open]::backdrop {
+      background: rgb(0 0 0 / 0);
+    }
+  }
+  .dialog-sm {
+    max-width: 24rem;
+  }
+  .dialog-lg {
+    max-width: 48rem;
+  }
+  .dialog-header {
+    display: flex;
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-top: calc(var(--spacing) * 5);
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .dialog-title {
+    margin: calc(var(--spacing) * 0);
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .dialog-description {
+    margin-top: calc(var(--spacing) * -2);
+    margin-bottom: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 5);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text-muted);
+  }
+  .dialog-body {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 3);
+    overflow-y: auto;
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .dialog-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--spacing) * 2);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface-muted);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .dialog-close {
+    display: inline-flex;
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    background-color: transparent;
+    color: var(--color-text-muted);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-surface-strong);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text);
+      }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-primary);
+    }
+  }
+}
 @layer components {
   .field {
     display: flex;
@@ -3087,6 +3219,102 @@
     outline-color: var(--color-primary);
   }
 }
+@layer components {
+  .tooltip {
+    pointer-events: none;
+    display: inline-block;
+    max-width: var(--container-xs);
+    border-radius: var(--radius-md);
+    background-color: var(--color-text);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-surface);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    text-wrap: balance;
+  }
+  .tooltip-sm {
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .tooltip {
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+  }
+  .tooltip[data-starting-style], .tooltip[data-ending-style] {
+    opacity: 0;
+  }
+  .tooltip[data-side="top"][data-starting-style], .tooltip[data-side="top"][data-ending-style] {
+    transform: translateY(0.25rem);
+  }
+  .tooltip[data-side="bottom"][data-starting-style], .tooltip[data-side="bottom"][data-ending-style] {
+    transform: translateY(-0.25rem);
+  }
+  .tooltip[data-side="left"][data-starting-style], .tooltip[data-side="left"][data-ending-style] {
+    transform: translateX(0.25rem);
+  }
+  .tooltip[data-side="right"][data-starting-style], .tooltip[data-side="right"][data-ending-style] {
+    transform: translateX(-0.25rem);
+  }
+  .tooltip-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  .tooltip-wrap > .tooltip {
+    visibility: hidden;
+    position: absolute;
+    opacity: 0%;
+    left: 50%;
+    bottom: 100%;
+    margin-bottom: calc(var(--spacing) * 1.5);
+    transform: translateX(-50%);
+    transition: opacity 150ms ease-out 0ms, visibility 0s linear 150ms;
+  }
+  .tooltip-wrap-bottom > .tooltip {
+    top: 100%;
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    margin-top: calc(var(--spacing) * 1.5);
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    transform: translateX(-50%);
+  }
+  .tooltip-wrap-left > .tooltip {
+    top: 50%;
+    right: 100%;
+    bottom: auto;
+    left: auto;
+    margin-top: 0;
+    margin-right: calc(var(--spacing) * 1.5);
+    margin-bottom: 0;
+    margin-left: 0;
+    transform: translateY(-50%);
+  }
+  .tooltip-wrap-right > .tooltip {
+    top: 50%;
+    right: auto;
+    bottom: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: calc(var(--spacing) * 1.5);
+    transform: translateY(-50%);
+  }
+  .tooltip-wrap:hover > .tooltip, .tooltip-wrap:focus-within > .tooltip {
+    visibility: visible;
+    opacity: 100%;
+    transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
+  }
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

package/dist/admin.scoped.css

@@ -177,12 +177,16 @@
   inherits: false;
 }
 @scope (.admin-root) {
+  :scope, :scope * {
+    all: revert-layer;
+  }
 @layer theme {
   :scope, :host {
     --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
     monospace;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -2036,6 +2040,137 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
+@layer components {
+  .dialog {
+    margin: auto;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: var(--radius-xl);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    padding: calc(var(--spacing) * 0);
+    color: var(--color-text);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    width: calc(100% - 2rem);
+    max-width: 32rem;
+    max-height: calc(100dvh - 2rem);
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
+  }
+  .dialog[open] {
+    display: flex;
+  }
+  .dialog::backdrop {
+    background: rgb(0 0 0 / 0.4);
+    transition: display 150ms allow-discrete, overlay 150ms allow-discrete, background 150ms ease-out;
+  }
+  @starting-style {
+    .dialog[open] {
+      opacity: 0;
+      transform: translateY(-0.5rem) scale(0.98);
+    }
+    .dialog[open]::backdrop {
+      background: rgb(0 0 0 / 0);
+    }
+  }
+  .dialog-sm {
+    max-width: 24rem;
+  }
+  .dialog-lg {
+    max-width: 48rem;
+  }
+  .dialog-header {
+    display: flex;
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-top: calc(var(--spacing) * 5);
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .dialog-title {
+    margin: calc(var(--spacing) * 0);
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .dialog-description {
+    margin-top: calc(var(--spacing) * -2);
+    margin-bottom: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 5);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text-muted);
+  }
+  .dialog-body {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 3);
+    overflow-y: auto;
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .dialog-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--spacing) * 2);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface-muted);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .dialog-close {
+    display: inline-flex;
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    background-color: transparent;
+    color: var(--color-text-muted);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-surface-strong);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text);
+      }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-primary);
+    }
+  }
+}
 @layer components {
   .field {
     display: flex;
@@ -3215,6 +3350,102 @@
     outline-color: var(--color-primary);
   }
 }
+@layer components {
+  .tooltip {
+    pointer-events: none;
+    display: inline-block;
+    max-width: var(--container-xs);
+    border-radius: var(--radius-md);
+    background-color: var(--color-text);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-surface);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    text-wrap: balance;
+  }
+  .tooltip-sm {
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .tooltip {
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+  }
+  .tooltip[data-starting-style], .tooltip[data-ending-style] {
+    opacity: 0;
+  }
+  .tooltip[data-side="top"][data-starting-style], .tooltip[data-side="top"][data-ending-style] {
+    transform: translateY(0.25rem);
+  }
+  .tooltip[data-side="bottom"][data-starting-style], .tooltip[data-side="bottom"][data-ending-style] {
+    transform: translateY(-0.25rem);
+  }
+  .tooltip[data-side="left"][data-starting-style], .tooltip[data-side="left"][data-ending-style] {
+    transform: translateX(0.25rem);
+  }
+  .tooltip[data-side="right"][data-starting-style], .tooltip[data-side="right"][data-ending-style] {
+    transform: translateX(-0.25rem);
+  }
+  .tooltip-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  .tooltip-wrap > .tooltip {
+    visibility: hidden;
+    position: absolute;
+    opacity: 0%;
+    left: 50%;
+    bottom: 100%;
+    margin-bottom: calc(var(--spacing) * 1.5);
+    transform: translateX(-50%);
+    transition: opacity 150ms ease-out 0ms, visibility 0s linear 150ms;
+  }
+  .tooltip-wrap-bottom > .tooltip {
+    top: 100%;
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    margin-top: calc(var(--spacing) * 1.5);
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    transform: translateX(-50%);
+  }
+  .tooltip-wrap-left > .tooltip {
+    top: 50%;
+    right: 100%;
+    bottom: auto;
+    left: auto;
+    margin-top: 0;
+    margin-right: calc(var(--spacing) * 1.5);
+    margin-bottom: 0;
+    margin-left: 0;
+    transform: translateY(-50%);
+  }
+  .tooltip-wrap-right > .tooltip {
+    top: 50%;
+    right: auto;
+    bottom: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: calc(var(--spacing) * 1.5);
+    transform: translateY(-50%);
+  }
+  .tooltip-wrap:hover > .tooltip, .tooltip-wrap:focus-within > .tooltip {
+    visibility: visible;
+    opacity: 100%;
+    transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {