@keboola/design 13.2.0 → 15.0.0

package/dist/{Alert-DuAGeYyM.js → Alert-Chz6KZ7e.js}

@@ -1,9 +1,7 @@
 import { cn } from "./classNames-DcGnTh2N.js";
-import { Tooltip } from "./utils-p6tjltbX.js";
-import { useArgoDesign } from "./context-U293r3v-.js";
+import { Tooltip } from "./utils-DwC9u0tM.js";
 import { AlertTriangle, ChevronDown, CircleCheck, Info } from "./icons-ZIeZXXS7.js";
 import { Collapsible } from "./Collapsible-DD4xTL75.js";
-import { useThemeAttributes } from "./useThemeAttributes-B199Regy.js";
 import { useState } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,7 +19,7 @@ const AlertCollapsibleIcon = ({ open }) => /* @__PURE__ */ jsx(Tooltip, {
 	placement: "top",
 	tooltip: open ? "Collapse alert" : "Expand alert",
 	triggerAsChild: true,
-	children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:mt-px", "tw:size-5", "tw:text-neutral-400", "tw:group-data-[state=open]/alert:rotate-180", "tw:group-data-[variant=info]/alert:group-data-[tint=legacy]/alert:group-hover:text-blue-600", "tw:group-data-[variant=info]/alert:group-data-[tint=token]/alert:group-hover:text-info", "tw:group-data-[variant=warning]/alert:group-data-[tint=legacy]/alert:group-hover:text-warning-600", "tw:group-data-[variant=warning]/alert:group-data-[tint=token]/alert:group-hover:text-warning", "tw:group-data-[variant=error]/alert:group-data-[tint=legacy]/alert:group-hover:text-error-600", "tw:group-data-[variant=error]/alert:group-data-[tint=token]/alert:group-hover:text-destructive", "tw:group-data-[variant=success]/alert:group-data-[tint=legacy]/alert:group-hover:text-green-600", "tw:group-data-[variant=success]/alert:group-data-[tint=token]/alert:group-hover:text-success") })
+	children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:mt-px", "tw:size-5", "tw:text-muted-foreground", "tw:group-data-[state=open]/alert:rotate-180", "tw:group-data-[variant=info]/alert:group-hover:text-info", "tw:group-data-[variant=warning]/alert:group-hover:text-warning", "tw:group-data-[variant=error]/alert:group-hover:text-destructive", "tw:group-data-[variant=success]/alert:group-hover:text-success") })
 });
 //#endregion
 //#region src/components/Alert/AlertDescription.tsx
@@ -42,25 +40,18 @@ const VARIANT_ICONS = {
 const AlertIcon = ({ variant, icon, className, ...rest }) => /* @__PURE__ */ jsx("span", {
 	...rest,
 	"data-slot": "alert-icon",
-	className: cn("tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:self-start", "tw:p-0.5", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-4", "tw:group-data-[variant=info]/alert:group-data-[tint=legacy]/alert:text-blue-500", "tw:group-data-[variant=info]/alert:group-data-[tint=token]/alert:text-info", "tw:group-data-[variant=warning]/alert:group-data-[tint=legacy]/alert:text-warning-500", "tw:group-data-[variant=warning]/alert:group-data-[tint=token]/alert:text-warning", "tw:group-data-[variant=error]/alert:group-data-[tint=legacy]/alert:text-error-500", "tw:group-data-[variant=error]/alert:group-data-[tint=token]/alert:text-destructive", "tw:group-data-[variant=success]/alert:group-data-[tint=legacy]/alert:text-green-500", "tw:group-data-[variant=success]/alert:group-data-[tint=token]/alert:text-success", className),
+	className: cn("tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:self-start", "tw:p-0.5", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-4", "tw:group-data-[variant=info]/alert:text-info", "tw:group-data-[variant=warning]/alert:text-warning", "tw:group-data-[variant=error]/alert:text-destructive", "tw:group-data-[variant=success]/alert:text-success", className),
 	children: icon ?? VARIANT_ICONS[variant]
 });
 //#endregion
 //#region src/components/Alert/AlertRoot.tsx
-const AlertRoot = ({ ref, children, className, variant, ...rest }) => {
-	const renderArgo = useArgoDesign();
-	const { scheme } = useThemeAttributes();
-	const legacyTint = !renderArgo && scheme !== "dark";
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		ref,
-		"data-variant": variant,
-		"data-argo": renderArgo,
-		"data-tint": legacyTint ? "legacy" : "token",
-		className: cn("tw:group/alert", "tw:grid", "tw:grid-cols-[0_1fr_auto]", "tw:has-[[data-slot=alert-icon]]:grid-cols-[auto_1fr_auto]", "tw:has-[[data-slot=alert-icon]]:gap-x-2", "tw:text-sm", "tw:data-[tint=legacy]:text-neutral-800", "tw:data-[tint=token]:text-foreground", "tw:text-left", "tw:p-4", "tw:rounded", "tw:data-[argo=true]:rounded-[var(--radius-lg,0.25rem)]", "tw:border", "tw:border-solid", "tw:data-[variant=info]:data-[tint=legacy]:bg-blue-100", "tw:data-[variant=info]:data-[tint=legacy]:border-blue-200", "tw:data-[variant=info]:data-[tint=token]:bg-info/10", "tw:data-[variant=info]:data-[tint=token]:border-info/25", "tw:data-[variant=warning]:data-[tint=legacy]:bg-warning-100", "tw:data-[variant=warning]:data-[tint=legacy]:border-warning-300", "tw:data-[variant=warning]:data-[tint=token]:bg-warning/10", "tw:data-[variant=warning]:data-[tint=token]:border-warning/25", "tw:data-[variant=error]:data-[tint=legacy]:bg-error-100", "tw:data-[variant=error]:data-[tint=legacy]:border-error-200", "tw:data-[variant=error]:data-[tint=token]:bg-destructive/10", "tw:data-[variant=error]:data-[tint=token]:border-destructive/25", "tw:data-[variant=success]:data-[tint=legacy]:bg-green-100", "tw:data-[variant=success]:data-[tint=legacy]:border-green-200", "tw:data-[variant=success]:data-[tint=token]:bg-success/10", "tw:data-[variant=success]:data-[tint=token]:border-success/25", className),
-		children
-	});
-};
+const AlertRoot = ({ ref, children, className, variant, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	ref,
+	"data-variant": variant,
+	className: cn("tw:group/alert", "tw:grid", "tw:grid-cols-[0_1fr_auto]", "tw:has-[[data-slot=alert-icon]]:grid-cols-[auto_1fr_auto]", "tw:has-[[data-slot=alert-icon]]:gap-x-2", "tw:text-sm", "tw:text-foreground", "tw:text-left", "tw:p-4", "tw:rounded-[var(--radius-lg,0.25rem)]", "tw:border", "tw:border-solid", "tw:data-[variant=info]:bg-info/10", "tw:data-[variant=info]:border-info/25", "tw:data-[variant=warning]:bg-warning/10", "tw:data-[variant=warning]:border-warning/25", "tw:data-[variant=error]:bg-destructive/10", "tw:data-[variant=error]:border-destructive/25", "tw:data-[variant=success]:bg-success/10", "tw:data-[variant=success]:border-success/25", className),
+	children
+});
 //#endregion
 //#region src/components/Alert/AlertTitle.tsx
 const AlertTitle = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
@@ -130,4 +121,4 @@ const Alert = ({ title, variant = "info", children, hideIcon = false, icon, clas
 //#endregion
 export { Alert };
 
-//# sourceMappingURL=Alert-DuAGeYyM.js.map
+//# sourceMappingURL=Alert-Chz6KZ7e.js.map

package/dist/Alert-Chz6KZ7e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert-Chz6KZ7e.js","names":[],"sources":["../src/components/Alert/AlertAction.tsx","../src/components/Alert/AlertCollapsibleIcon.tsx","../src/components/Alert/AlertDescription.tsx","../src/components/Alert/AlertIcon.tsx","../src/components/Alert/AlertRoot.tsx","../src/components/Alert/AlertTitle.tsx","../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport const AlertAction = ({ ref, className, asChild = false, ...props }: Props) => {\n  const Comp = asChild ? Slot : 'div';\n  return (\n    <Comp\n      {...props}\n      ref={ref}\n      className={cn(\n        'tw:col-start-3',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:flex',\n        'tw:gap-2',\n        className,\n      )}\n    />\n  );\n};\n","import { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Tooltip } from '../Tooltip';\n\ntype Props = {\n  open: boolean;\n};\n\nexport const AlertCollapsibleIcon = ({ open }: Props) => (\n  <Tooltip placement=\"top\" tooltip={open ? 'Collapse alert' : 'Expand alert'} triggerAsChild>\n    <ChevronDown\n      className={cn(\n        'tw:mt-px',\n        'tw:size-5',\n        'tw:text-muted-foreground',\n        'tw:group-data-[state=open]/alert:rotate-180',\n\n        'tw:group-data-[variant=info]/alert:group-hover:text-info',\n        'tw:group-data-[variant=warning]/alert:group-hover:text-warning',\n        'tw:group-data-[variant=error]/alert:group-hover:text-destructive',\n        'tw:group-data-[variant=success]/alert:group-hover:text-success',\n      )}\n    />\n  </Tooltip>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertDescription = ({ ref, children, className, ...rest }: Props) => (\n  <div\n    {...rest}\n    ref={ref}\n    className={cn(\n      'tw:col-start-2',\n      'tw:group-has-[[data-slot=alert-title]]/alert:col-end-[-1]',\n\n      // spacer before description when a title exists (pseudo-element so it animates with Collapsible)\n      'tw:group-has-[[data-slot=alert-title]]/alert:before:block',\n      'tw:group-has-[[data-slot=alert-title]]/alert:before:h-1',\n      \"tw:group-has-[[data-slot=alert-title]]/alert:before:content-['']\",\n\n      'tw:wrap-anywhere',\n\n      // Default size for nested Lucide icons; callers can override on the icon.\n      \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n      'tw:[&_svg]:shrink-0',\n\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { Variant } from './AlertRoot';\n\nconst VARIANT_ICONS: Record<Variant, ReactNode> = {\n  info: <Info />,\n  warning: <AlertTriangle />,\n  error: <AlertTriangle />,\n  success: <CircleCheck />,\n};\n\ntype Props = {\n  variant: Variant;\n  icon?: ReactNode;\n} & Omit<ComponentProps<'span'>, 'children'>;\n\nexport const AlertIcon = ({ variant, icon, className, ...rest }: Props) => (\n  <span\n    {...rest}\n    data-slot=\"alert-icon\"\n    className={cn(\n      'tw:inline-flex',\n      'tw:items-center',\n      'tw:justify-center',\n      'tw:self-start',\n      'tw:p-0.5',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      'tw:group-data-[variant=info]/alert:text-info',\n      'tw:group-data-[variant=warning]/alert:text-warning',\n      'tw:group-data-[variant=error]/alert:text-destructive',\n      'tw:group-data-[variant=success]/alert:text-success',\n      className,\n    )}\n  >\n    {icon ?? VARIANT_ICONS[variant]}\n  </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport type Variant = 'info' | 'warning' | 'error' | 'success';\n\ntype Props = {\n  variant?: Variant;\n} & ComponentProps<'div'>;\n\nexport const AlertRoot = ({ ref, children, className, variant, ...rest }: Props) => (\n  <div\n    {...rest}\n    ref={ref}\n    data-variant={variant}\n    className={cn(\n      'tw:group/alert',\n\n      // layout\n      'tw:grid',\n      'tw:grid-cols-[0_1fr_auto]',\n      'tw:has-[[data-slot=alert-icon]]:grid-cols-[auto_1fr_auto]',\n      'tw:has-[[data-slot=alert-icon]]:gap-x-2',\n\n      // fonts\n      'tw:text-sm',\n      'tw:text-foreground',\n      'tw:text-left',\n\n      'tw:p-4',\n\n      // border\n      'tw:rounded-[var(--radius-lg,0.25rem)]',\n      'tw:border',\n      'tw:border-solid',\n\n      // Status tokens: background at 10%, border at 25%.\n      'tw:data-[variant=info]:bg-info/10',\n      'tw:data-[variant=info]:border-info/25',\n\n      'tw:data-[variant=warning]:bg-warning/10',\n      'tw:data-[variant=warning]:border-warning/25',\n\n      'tw:data-[variant=error]:bg-destructive/10',\n      'tw:data-[variant=error]:border-destructive/25',\n\n      'tw:data-[variant=success]:bg-success/10',\n      'tw:data-[variant=success]:border-success/25',\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertTitle = ({ ref, className, ...props }: Props) => (\n  <div\n    {...props}\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn(\n      'tw:group/alert-title',\n      'tw:flex',\n      'tw:col-start-2',\n      'tw:font-medium',\n      'tw:items-center',\n      className,\n    )}\n  />\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { Collapsible } from '../Collapsible';\n\nimport { AlertAction } from './AlertAction';\nimport { AlertCollapsibleIcon } from './AlertCollapsibleIcon';\nimport { AlertDescription } from './AlertDescription';\nimport { AlertIcon } from './AlertIcon';\nimport { AlertRoot } from './AlertRoot';\nimport { AlertTitle } from './AlertTitle';\n\ntype CommonProps = {\n  hideIcon?: boolean;\n  icon?: ReactNode;\n} & Pick<ComponentProps<typeof Collapsible>, 'open' | 'onOpenChange' | 'defaultOpen'> &\n  Omit<ComponentProps<typeof AlertRoot>, 'children'>;\n\ntype CollapsibleProps = {\n  mode: 'collapsible';\n  title: ReactNode;\n  children: ReactNode;\n  actions?: never;\n};\n\ntype DefaultProps = {\n  mode?: 'default';\n  title?: ReactNode;\n  children?: ReactNode;\n  actions?: ReactNode;\n};\n\n/** Discriminated by `mode`: `\"collapsible\"` requires `title` + `children` and takes no `actions`. */\ntype Props = CommonProps & (CollapsibleProps | DefaultProps);\n\n/**\n * Persistent inline banner for contextual messages tied to the page layout.\n *\n * **When to use:** in-page messages; `mode=\"collapsible\"` hides long error details.\n * **When NOT to use:** transient feedback (`toast()`), field errors (`FormGroup state=\"error\"`),\n * confirmations (`Popconfirm`).\n *\n * @see RECIPES.md#alert-with-action\n */\nexport const Alert = ({\n  title,\n  variant = 'info',\n  children,\n  hideIcon = false,\n  icon,\n  className,\n  actions,\n  mode = 'default',\n\n  // collapsible props\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n\n  ...rest\n}: Props) => {\n  const isControlled = openProp !== undefined;\n\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  const open = isControlled ? openProp : innerOpen;\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (!isControlled) {\n      setInnerOpen(nextOpen);\n    }\n    onOpenChangeProp?.(nextOpen);\n  };\n\n  const isCollapsible = mode === 'collapsible' && !!title && !!children && !actions;\n\n  if (isCollapsible)\n    return (\n      <Collapsible open={open} onOpenChange={handleOpenChange} asChild>\n        <AlertRoot {...rest} variant={variant} className={className}>\n          <Collapsible.Trigger\n            className={cn(\n              'tailwindcss-preflight',\n              'tw:group',\n              'tw:col-span-full',\n              'tw:grid',\n              'tw:grid-cols-subgrid',\n              'tw:rounded-sm',\n              'tw:focus-visible:outline',\n              'tw:focus-visible:outline-2',\n              'tw:focus-visible:outline-ring',\n            )}\n          >\n            {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n            <AlertTitle>{title}</AlertTitle>\n            <AlertCollapsibleIcon open={open} />\n          </Collapsible.Trigger>\n\n          <Collapsible.Content asChild>\n            <AlertDescription>{children}</AlertDescription>\n          </Collapsible.Content>\n        </AlertRoot>\n      </Collapsible>\n    );\n\n  return (\n    <AlertRoot {...rest} variant={variant} className={className}>\n      {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n      {title && <AlertTitle>{title}</AlertTitle>}\n      {children && <AlertDescription>{children}</AlertDescription>}\n      {actions && <AlertAction>{actions}</AlertAction>}\n    </AlertRoot>\n  );\n};\n"],"mappings":"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"}

package/dist/{AlertModal-BDle9ZVQ.js → AlertModal-D4AtpvLS.js}

@@ -1,26 +1,25 @@
 import { cn } from "./classNames-DcGnTh2N.js";
-import { useArgoDesign } from "./context-U293r3v-.js";
 import { AlertTriangle, CircleCheck, Info } from "./icons-ZIeZXXS7.js";
-import { Button } from "./Button-D2JqBAq7.js";
+import { Button } from "./Button-BNkyYU8u.js";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { Action, Cancel, Content, Overlay, Portal, Root, Title, Trigger } from "@radix-ui/react-alert-dialog";
 //#region src/components/AlertModal/AlertModalDescription.tsx
 const AlertModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
-	className: cn("tw:font-sans", "tw:tracking-normal", "tw:font-normal", "tw:text-muted-foreground", "tw:group-data-[design=default]/alert-modal:text-foreground", "tw:group-data-[design=default]/alert-modal:text-sm", className),
+	className: cn("tw:font-sans", "tw:tracking-normal", "tw:font-normal", "tw:text-muted-foreground", className),
 	...props
 });
 //#endregion
 //#region src/components/AlertModal/AlertModalFooter.tsx
 const AlertModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("tw:flex", "tw:gap-2", "tw:group-data-[design=default]/alert-modal:flex-col", "tw:group-data-[design=default]/alert-modal:sm:flex-row", "tw:group-data-[design=argo]/alert-modal:justify-end", className),
+	className: cn("tw:flex", "tw:gap-2", "tw:justify-end", className),
 	...props
 });
 //#endregion
 //#region src/components/AlertModal/AlertModalHeader.tsx
 const AlertModalHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("tw:grid", "tw:grid-cols-[auto_1fr]", "tw:items-start", "tw:gap-y-1", "tw:group-data-[design=default]/alert-modal:gap-y-4", "tw:group-data-[design=argo]/alert-modal:gap-x-3", className),
+	className: cn("tw:grid", "tw:grid-cols-[auto_1fr]", "tw:items-start", "tw:gap-y-1", "tw:gap-x-3", className),
 	...props
 });
 //#endregion
@@ -33,31 +32,16 @@ const VARIANT_ICONS = {
 };
 const AlertModalIcon = ({ variant, icon }) => {
 	const glyph = icon ?? VARIANT_ICONS[variant];
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "alert-modal-icon",
-		className: cn("tw:group-data-[design=argo]/alert-modal:hidden", "tw:absolute", "tw:top-0", "tw:left-8", "tw:translate-y-[-50%]", "tw:size-12"),
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn("tw:relative", "tw:rounded-full", "tw:size-12", {
-				"tw:bg-blue-500": variant === "info",
-				"tw:bg-warning-500": variant === "warning",
-				"tw:bg-error-500": variant === "danger",
-				"tw:bg-green-500": variant === "success"
-			}),
-			children: /* @__PURE__ */ jsx("span", {
-				className: cn("tw:absolute", "tw:inset-0", "tw:flex", "tw:items-center", "tw:justify-center", "tw:text-white", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-6", "tw:[&_svg]:aspect-square"),
-				children: glyph
-			})
-		})
-	}), /* @__PURE__ */ jsx("span", {
-		"data-slot": "alert-modal-icon",
-		className: cn("tw:hidden", "tw:group-data-[design=argo]/alert-modal:inline-flex", "tw:col-start-1", "tw:row-start-1", "tw:self-start", "tw:shrink-0", "tw:items-center", "tw:justify-center", "tw:rounded", "tw:size-8", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-5", {
-			"tw:bg-blue-100 tw:text-blue-600": variant === "info",
-			"tw:bg-warning-100 tw:text-warning-500": variant === "warning",
-			"tw:bg-error-100 tw:text-error-500": variant === "danger",
-			"tw:bg-green-100 tw:text-green-900": variant === "success"
+		className: cn("tw:inline-flex", "tw:col-start-1", "tw:row-start-1", "tw:self-start", "tw:shrink-0", "tw:items-center", "tw:justify-center", "tw:rounded", "tw:size-8", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-5", {
+			"tw:bg-info/10 tw:text-info": variant === "info",
+			"tw:bg-warning/10 tw:text-warning": variant === "warning",
+			"tw:bg-destructive/10 tw:text-destructive": variant === "danger",
+			"tw:bg-success/10 tw:text-success": variant === "success"
 		}),
 		children: glyph
-	})] });
+	});
 };
 //#endregion
 //#region src/components/AlertModal/AlertModalOverlay.tsx
@@ -71,7 +55,7 @@ const AlertModalOverlay = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
 const AlertModalTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Title, {
 	...props,
 	asChild: true,
-	className: cn("tw:font-medium", "tw:text-foreground", "tw:wrap-anywhere", "tw:group-data-[design=default]/alert-modal:border-b", "tw:group-data-[design=default]/alert-modal:border-neutral-150", "tw:group-data-[design=default]/alert-modal:pb-3", className),
+	className: cn("tw:font-medium", "tw:text-foreground", "tw:wrap-anywhere", className),
 	children: /* @__PURE__ */ jsx("h3", { children })
 });
 //#endregion
@@ -87,7 +71,6 @@ const useAlertModalContext = () => {
 //#region src/components/AlertModal/AlertModalContent.tsx
 const AlertModalContent = ({ variant = "info", icon, title, cancelLabel = "Cancel", confirmLabel: actionLabel = "Confirm", confirmDisabled = false, container, className, children, onEscapeKeyDown, ...props }) => {
 	const { isLoading, onConfirm, onCancel } = useAlertModalContext();
-	const designLanguage = useArgoDesign() ? "argo" : "default";
 	const handleEscapeKeyDown = (event) => {
 		event.stopPropagation();
 		if (isLoading) event.preventDefault();
@@ -101,10 +84,9 @@ const AlertModalContent = ({ variant = "info", icon, title, cancelLabel = "Cance
 				if (event.key !== "Escape") event.stopPropagation();
 			},
 			children: /* @__PURE__ */ jsxs(Content, {
-				"data-design": designLanguage,
 				...children ? {} : { "aria-describedby": void 0 },
 				onEscapeKeyDown: handleEscapeKeyDown,
-				className: cn("tailwindcss-preflight", "tw:group/alert-modal", "tw:text-base", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-[1051]", "tw:data-[design=default]:top-20", "tw:data-[design=argo]:top-1/2", "tw:data-[design=argo]:-translate-y-1/2", "tw:w-full", "tw:max-w-[480px]", "tw:max-h-[calc(100vh-2*theme(spacing.20))]", "tw:data-[design=argo]:overflow-y-auto", "tw:flex", "tw:flex-col", "tw:gap-4", "tw:data-[design=default]:rounded-lg", "tw:data-[design=argo]:rounded-modal", "tw:bg-popover", "tw:text-popover-foreground", "tw:data-[design=default]:px-7", "tw:data-[design=default]:py-8", "tw:data-[design=argo]:p-4", "tw:duration-200", "tw:data-[state=open]:animate-in", "tw:data-[state=open]:fade-in-0", "tw:data-[state=closed]:animate-out", "tw:data-[state=closed]:fade-out-0", "tw:data-[design=default]:data-[state=open]:zoom-in-80", "tw:data-[design=default]:data-[state=open]:slide-in-from-top-[48%]", "tw:data-[design=default]:data-[state=closed]:zoom-out-80", "tw:data-[design=default]:data-[state=closed]:slide-out-to-top-[48%]", "tw:data-[design=argo]:data-[state=open]:zoom-in-95", "tw:data-[design=argo]:data-[state=closed]:zoom-out-95", className),
+				className: cn("tailwindcss-preflight", "tw:text-base", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-[1051]", "tw:top-1/2", "tw:-translate-y-1/2", "tw:w-full", "tw:max-w-[480px]", "tw:max-h-[calc(100vh-2*theme(spacing.20))]", "tw:overflow-y-auto", "tw:flex", "tw:flex-col", "tw:gap-4", "tw:rounded-modal", "tw:bg-popover", "tw:text-popover-foreground", "tw:p-4", "tw:duration-200", "tw:data-[state=open]:animate-in", "tw:data-[state=open]:fade-in-0", "tw:data-[state=closed]:animate-out", "tw:data-[state=closed]:fade-out-0", "tw:data-[state=open]:zoom-in-95", "tw:data-[state=closed]:zoom-out-95", className),
 				...props,
 				children: [/* @__PURE__ */ jsxs(AlertModalHeader, { children: [
 					icon !== false && /* @__PURE__ */ jsx(AlertModalIcon, {
@@ -126,7 +108,6 @@ const AlertModalContent = ({ variant = "info", icon, title, cancelLabel = "Cance
 						variant: "outline",
 						disabled: isLoading,
 						onClick: onCancel,
-						className: "tw:group-data-[design=default]/alert-modal:flex-1",
 						children: cancelLabel
 					})
 				}), /* @__PURE__ */ jsx(Action, {
@@ -137,7 +118,6 @@ const AlertModalContent = ({ variant = "info", icon, title, cancelLabel = "Cance
 						isLoading,
 						disabled: isLoading || confirmDisabled,
 						onClick: onConfirm,
-						className: "tw:group-data-[design=default]/alert-modal:flex-1",
 						children: actionLabel
 					})
 				})] })]
@@ -216,4 +196,4 @@ AlertModal.Content = AlertModalContent;
 //#endregion
 export { AlertModal };
 
-//# sourceMappingURL=AlertModal-BDle9ZVQ.js.map
+//# sourceMappingURL=AlertModal-D4AtpvLS.js.map

package/dist/AlertModal-D4AtpvLS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal-D4AtpvLS.js","names":[],"sources":["../src/components/AlertModal/AlertModalDescription.tsx","../src/components/AlertModal/AlertModalFooter.tsx","../src/components/AlertModal/AlertModalHeader.tsx","../src/components/AlertModal/AlertModalIcon.tsx","../src/components/AlertModal/AlertModalOverlay.tsx","../src/components/AlertModal/AlertModalTitle.tsx","../src/components/AlertModal/context.ts","../src/components/AlertModal/AlertModalContent.tsx","../src/components/AlertModal/AlertModalTrigger.tsx","../src/components/AlertModal/AlertModal.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof AlertDialogPrimitive.Description>;\n\nexport const AlertModalDescription = ({ className, ...props }: Props) => (\n  <AlertDialogPrimitive.Description\n    className={cn(\n      'tw:font-sans',\n      'tw:tracking-normal',\n      'tw:font-normal',\n      'tw:text-muted-foreground',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalFooter = ({ className, ...props }: Props) => (\n  <div className={cn('tw:flex', 'tw:gap-2', 'tw:justify-end', className)} {...props} />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalHeader = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr]',\n      'tw:items-start',\n      'tw:gap-y-1',\n      'tw:gap-x-3',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { AlertModalVariant } from './variant';\n\nconst VARIANT_ICONS: Record<AlertModalVariant, ReactNode> = {\n  info: <Info />,\n  warning: <AlertTriangle />,\n  danger: <AlertTriangle />,\n  success: <CircleCheck />,\n};\n\ntype Props = {\n  variant: AlertModalVariant;\n  icon?: ReactNode;\n};\n\nexport const AlertModalIcon = ({ variant, icon }: Props) => {\n  const glyph = icon ?? VARIANT_ICONS[variant];\n\n  return (\n    // Inline badge on the status token's tint.\n    <span\n      data-slot=\"alert-modal-icon\"\n      className={cn(\n        'tw:inline-flex',\n        // grid placement: column 1 of the first row, top-aligned with the first line of content\n        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:shrink-0',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:rounded',\n        'tw:size-8',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n        {\n          'tw:bg-info/10 tw:text-info': variant === 'info',\n          'tw:bg-warning/10 tw:text-warning': variant === 'warning',\n          'tw:bg-destructive/10 tw:text-destructive': variant === 'danger',\n          'tw:bg-success/10 tw:text-success': variant === 'success',\n        },\n      )}\n    >\n      {glyph}\n    </span>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Overlay } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Overlay>;\n\nexport const AlertModalOverlay = ({ ref, className, ...props }: Props) => (\n  <Overlay\n    {...props}\n    ref={ref}\n    className={cn(\n      // positioning\n      'tw:fixed',\n      'tw:inset-0',\n      'tw:z-[1051]',\n\n      // background\n      'tw:bg-scrim',\n\n      // opening animation\n      'tw:data-[state=open]:duration-500',\n      'tw:data-[state=open]:fade-in-0',\n      'tw:data-[state=open]:animate-in',\n\n      // closing animation\n      'tw:data-[state=closed]:duration-500',\n      'tw:data-[state=closed]:fade-out-0',\n      'tw:data-[state=closed]:animate-out',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentPropsWithRef } from 'react';\nimport { Title } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Title>;\n\nexport const AlertModalTitle = ({ children, className, ...props }: Props) => (\n  <Title\n    {...props}\n    asChild\n    className={cn('tw:font-medium', 'tw:text-foreground', 'tw:wrap-anywhere', className)}\n  >\n    <h3>{children}</h3>\n  </Title>\n);\n","import { createContext, use } from 'react';\nimport type { MouseEvent } from 'react';\n\ntype AlertModalContextType = {\n  isLoading: boolean;\n  onConfirm: (event: MouseEvent<HTMLButtonElement>) => void;\n  onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst AlertModalContext = createContext<AlertModalContextType | null>(null);\n\nexport const AlertModalContextProvider = AlertModalContext.Provider;\n\nexport const useAlertModalContext = (): AlertModalContextType => {\n  const context = use(AlertModalContext);\n  if (context === null)\n    throw new Error('AlertModal compound components must be rendered inside <AlertModal>.');\n  return context;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Action, Cancel, Content, Portal } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\nimport { AlertModalDescription } from './AlertModalDescription';\nimport { AlertModalFooter } from './AlertModalFooter';\nimport { AlertModalHeader } from './AlertModalHeader';\nimport { AlertModalIcon } from './AlertModalIcon';\nimport { AlertModalOverlay } from './AlertModalOverlay';\nimport { AlertModalTitle } from './AlertModalTitle';\nimport { useAlertModalContext } from './context';\nimport type { AlertModalVariant } from './variant';\n\ntype Props = {\n  variant?: AlertModalVariant;\n  /** `false` draws no icon at all, and gives the title and body its column. */\n  icon?: ReactNode | false;\n  title?: ReactNode;\n  cancelLabel?: ReactNode;\n  confirmLabel?: ReactNode;\n  /** Disables confirm only; cancel stays available. */\n  confirmDisabled?: boolean;\n  container?: ComponentProps<typeof Portal>['container'];\n} & Omit<ComponentProps<typeof Content>, 'title'>;\n\nexport const AlertModalContent = ({\n  variant = 'info',\n  icon,\n  title,\n  cancelLabel = 'Cancel',\n  confirmLabel: actionLabel = 'Confirm',\n  confirmDisabled = false,\n  container,\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const { isLoading, onConfirm, onCancel } = useAlertModalContext();\n\n  const handleEscapeKeyDown: ComponentProps<typeof Content>['onEscapeKeyDown'] = (event) => {\n    // Keeps a parent Modal/Sheet open when this confirmation is nested.\n    event.stopPropagation();\n    if (isLoading) event.preventDefault();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal container={container}>\n      <AlertModalOverlay\n        // Portaled events still bubble to the host's React handlers; Escape passes so Radix can close.\n        onClick={(event) => event.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== 'Escape') event.stopPropagation();\n        }}\n      >\n        <Content\n          // Silences Radix's missing-description warning when there are no children.\n          {...(children ? {} : { 'aria-describedby': undefined })}\n          onEscapeKeyDown={handleEscapeKeyDown}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:text-base',\n\n            // positioning\n            'tw:fixed',\n            'tw:left-1/2',\n            'tw:-translate-x-1/2',\n            'tw:z-[1051]',\n            'tw:top-1/2',\n            'tw:-translate-y-1/2',\n\n            // sizing\n            'tw:w-full',\n            'tw:max-w-[480px]',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n            'tw:overflow-y-auto',\n\n            // layout\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n\n            'tw:rounded-modal',\n            'tw:bg-popover',\n            'tw:text-popover-foreground',\n            'tw:p-4',\n\n            // animation: fade + zoom; no slide, it would stack on the `translate` centring\n            'tw:duration-200',\n            'tw:data-[state=open]:animate-in',\n            'tw:data-[state=open]:fade-in-0',\n            'tw:data-[state=closed]:animate-out',\n            'tw:data-[state=closed]:fade-out-0',\n            'tw:data-[state=open]:zoom-in-95',\n            'tw:data-[state=closed]:zoom-out-95',\n\n            className,\n          )}\n          {...props}\n        >\n          <AlertModalHeader>\n            {icon !== false && <AlertModalIcon variant={variant} icon={icon} />}\n\n            {title && (\n              <AlertModalTitle\n                className={cn(\n                  icon === false ? 'tw:col-start-1' : 'tw:col-start-2',\n                  'tw:row-start-1 tw:self-center',\n                )}\n              >\n                {title}\n              </AlertModalTitle>\n            )}\n\n            {children && (\n              <AlertModalDescription\n                className={cn(\n                  icon === false ? 'tw:col-start-1' : 'tw:col-start-2',\n                  title ? 'tw:row-start-2' : 'tw:row-start-1 tw:self-center',\n                )}\n              >\n                {children}\n              </AlertModalDescription>\n            )}\n          </AlertModalHeader>\n\n          <AlertModalFooter>\n            <Cancel asChild>\n              <Button type=\"button\" variant=\"outline\" disabled={isLoading} onClick={onCancel}>\n                {cancelLabel}\n              </Button>\n            </Cancel>\n\n            <Action asChild>\n              <Button\n                type=\"button\"\n                variant={variant === 'danger' ? 'danger' : 'primary'}\n                isLoading={isLoading}\n                disabled={isLoading || confirmDisabled}\n                onClick={onConfirm}\n              >\n                {actionLabel}\n              </Button>\n            </Action>\n          </AlertModalFooter>\n        </Content>\n      </AlertModalOverlay>\n    </Portal>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Trigger } from '@radix-ui/react-alert-dialog';\n\ntype Props = ComponentPropsWithRef<typeof Trigger>;\n\nexport const AlertModalTrigger = ({ ref, onClick, onKeyDown, ...props }: Props) => (\n  <Trigger\n    {...props}\n    ref={ref}\n    onClick={(event) => {\n      // The trigger sits in the normal DOM tree, often inside a clickable row/card. Stop the\n      // open-click from bubbling to that ancestor's onClick. (Radix still opens the modal —\n      // stopPropagation only blocks ancestors, not the open handler on the same element.)\n      event.stopPropagation();\n      onClick?.(event);\n    }}\n    onKeyDown={(event) => {\n      // Only the activation keys open the modal and would leak; stop just those so Tab/arrows/etc.\n      // still reach ancestor keyboard handlers. The button still activates (stopPropagation only\n      // blocks ancestors).\n      if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();\n      onKeyDown?.(event);\n    }}\n  />\n);\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, MouseEvent } from 'react';\nimport { Root } from '@radix-ui/react-alert-dialog';\n\nimport { AlertModalContent } from './AlertModalContent';\nimport { AlertModalTrigger } from './AlertModalTrigger';\nimport { AlertModalContextProvider } from './context';\n\nconst noop = () => undefined;\n\ntype ConfirmHandler = (event: MouseEvent<HTMLButtonElement>) => void | Promise<unknown>;\ntype CancelHandler = (event: MouseEvent<HTMLButtonElement>) => void;\n\ntype Props = {\n  onConfirm?: ConfirmHandler;\n  onCancel?: CancelHandler;\n  skipAsyncWait?: boolean;\n  /** Marks the confirm action busy from the outside, on top of the state inferred from a thenable `onConfirm`. */\n  isLoading?: boolean;\n} & ComponentProps<typeof Root>;\n\nexport const AlertModal = ({\n  children,\n  onConfirm = noop,\n  onCancel = noop,\n  skipAsyncWait = false,\n  isLoading = false,\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...rest\n}: Props) => {\n  const [isConfirming, setIsConfirming] = useState(false);\n\n  // Controllable open state: when `open` is provided the parent owns it; otherwise we keep our own.\n  const isControlled = open !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n  const isOpen = isControlled ? open : uncontrolledOpen;\n\n  const confirmRef = useRef(onConfirm);\n  const cancelRef = useRef(onCancel);\n  const onOpenChangeRef = useRef(onOpenChange);\n\n  // Latest-ref pattern: keep the handlers out of `context`'s deps so its identity stays stable,\n  // without writing to refs during render (synced in an effect, before any handler can fire).\n  useEffect(() => {\n    confirmRef.current = onConfirm;\n    cancelRef.current = onCancel;\n    onOpenChangeRef.current = onOpenChange;\n  }, [onConfirm, onCancel, onOpenChange]);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChangeRef.current?.(next);\n    },\n    [isControlled],\n  );\n\n  const context = useMemo(\n    () => ({\n      // The two sources of \"the confirm action is running\" converge here, so every consumer\n      // downstream reads one answer regardless of which way the host drives it.\n      isLoading: isConfirming || isLoading,\n      onConfirm: (event: MouseEvent<HTMLButtonElement>) => {\n        const result = confirmRef.current(event);\n\n        // Treat any thenable as async, not just native promises.\n        const isThenable =\n          result !== null && typeof result === 'object' && typeof result.then === 'function';\n        if (!isThenable || skipAsyncWait) return;\n\n        // The async confirm's outcome drives the modal.\n        // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n        // - Resolved closes it; rejected leaves it up so the failure stays visible.\n        // - The rejection is deliberately not caught — the host's global handler reports it.\n        event.preventDefault();\n        setIsConfirming(true);\n        Promise.resolve(result)\n          .then(() => setOpen(false))\n          .finally(() => setIsConfirming(false));\n      },\n      onCancel: (event: MouseEvent<HTMLButtonElement>) => {\n        cancelRef.current(event);\n      },\n    }),\n    [isConfirming, isLoading, skipAsyncWait, setOpen],\n  );\n\n  return (\n    <Root {...rest} open={isOpen} onOpenChange={setOpen}>\n      <AlertModalContextProvider value={context}>{children}</AlertModalContextProvider>\n    </Root>\n  );\n};\n\nAlertModal.Trigger = AlertModalTrigger;\nAlertModal.Content = AlertModalContent;\n"],"mappings":"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"}

package/dist/{AppShell-B03fj1j7.js → AppShell-C8V1KRr_.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-DcGnTh2N.js";
-import { useTheme } from "./context-U293r3v-.js";
+import { useTheme } from "./ThemeProvider-BTK7AL-T.js";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 //#region src/blocks/AppShell/SidebarShell.tsx
@@ -122,4 +122,4 @@ const AppShell = Object.assign(Root$1, {
 //#endregion
 export { AppShell, appShellSlotSelector };
 
-//# sourceMappingURL=AppShell-B03fj1j7.js.map
+//# sourceMappingURL=AppShell-C8V1KRr_.js.map

package/dist/{AppShell-B03fj1j7.js.map → AppShell-C8V1KRr_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AppShell-B03fj1j7.js","names":["Root"],"sources":["../src/blocks/AppShell/SidebarShell.tsx","../src/blocks/AppShell/TopNavShell.tsx","../src/blocks/AppShell/AppShell.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport type { AppShellHeaderSpan } from './types';\n\n// Required: `AppShell` owns the default so the generated component API reports it.\ntype Props = ComponentProps<'div'> & { headerSpan: AppShellHeaderSpan };\n\n/**\n * Sidebar geometry: left rail + header + main, with an optional right rail.\n *\n * - Template area names match the slots' `[grid-area:*]` utilities, so source order does not matter.\n * - `headerSpan` ({@link AppShellHeaderSpan}) picks the row template; the columns stay the same.\n */\nexport const SidebarShell = ({ ref, className, headerSpan, children, ...props }: Props) => (\n  <div\n    ref={ref}\n    data-app-shell-geometry=\"sidebar\"\n    data-header-span={headerSpan}\n    className={cn(\n      'tw:relative tw:grid tw:h-svh tw:w-full tw:bg-background',\n      'tw:grid-cols-[auto_1fr_auto] tw:grid-rows-[auto_1fr]',\n      headerSpan === 'full'\n        ? cn(\n            'tw:[grid-template-areas:\"header_header_header\"_\"sidebar_main_aside\"]',\n            // `Sidebar`'s inner wrapper is `fixed inset-y-0` and would paint over the header;\n            // a containing block re-anchors it to the slot without knowing the header's height.\n            // `styles.css` relies on this to clip a parked off-canvas rail.\n            'tw:[&>[data-app-shell-slot=sidebar]]:[transform:translateZ(0)]',\n            'tw:[&>[data-app-shell-slot=aside]]:[transform:translateZ(0)]',\n            // The containing block is also a stacking context that traps the rails' own z-index:\n            // - `z-50`: an expand-on-hover left rail paints over `main`.\n            // - `z-30`: clears main's sticky `z-10`/`z-20` headers, stays under the left rail.\n            'tw:[&>[data-app-shell-slot=sidebar]]:z-50',\n            'tw:[&>[data-app-shell-slot=aside]]:z-30',\n          )\n        : 'tw:[grid-template-areas:\"sidebar_header_aside\"_\"sidebar_main_aside\"]',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Top-nav geometry: full-width header, main + aside below.\n *\n * - No `sidebar` area: that slot is hidden, so one composition works under either brand.\n * - No `headerSpan`: the header is already full width.\n */\nexport const TopNavShell = ({ ref, className, children, ...props }: Props) => (\n  <div\n    ref={ref}\n    data-app-shell-geometry=\"topnav\"\n    className={cn(\n      'tw:grid tw:h-svh tw:w-full tw:bg-background',\n      'tw:grid-cols-[1fr_auto] tw:grid-rows-[auto_1fr]',\n      'tw:[grid-template-areas:\"header_header\"_\"main_aside\"]',\n      'tw:[&>[data-app-shell-slot=sidebar]]:hidden',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\n\nimport { useTheme } from '../../components/ThemeProvider';\nimport { cn } from '../../utils';\n\nimport { SidebarShell } from './SidebarShell';\nimport { TopNavShell } from './TopNavShell';\nimport type { AppShellHeaderSpan, AppShellSlot } from './types';\n\n/**\n * Targets a shell slot from outside the shell.\n *\n * - Each slot component stamps `data-app-shell-slot` with its own name.\n * - Exported so a consumer never hand-types the attribute: renaming it then breaks the\n *   build instead of silently matching nothing.\n */\nexport const appShellSlotSelector = (slot: AppShellSlot) => `[data-app-shell-slot=\"${slot}\"]`;\n\ntype RootProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * `content`: middle column only; `full`: spans above both rails, for app-wide identity.\n   * No-op under the top-nav geometry.\n   */\n  headerSpan?: AppShellHeaderSpan;\n};\n\nconst Root = ({\n  ref,\n  className,\n  // Defaulted here so the generated component API records `content`.\n  headerSpan = 'content',\n  children,\n  ...props\n}: RootProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const { currentTheme: brand } = useTheme();\n\n  // Branch, not spread: forwarding `headerSpan` to the top-nav shell leaks a DOM attribute.\n  if (brand.shell === 'topnav') {\n    return (\n      <TopNavShell ref={ref} className={className} {...props}>\n        {children}\n      </TopNavShell>\n    );\n  }\n\n  return (\n    <SidebarShell ref={ref} className={className} headerSpan={headerSpan} {...props}>\n      {children}\n    </SidebarShell>\n  );\n};\n\ntype SlotProps = ComponentPropsWithoutRef<'div'> & {\n  /** Render as the child element (Radix-Slot pattern), forwarding props onto it. */\n  asChild?: boolean;\n};\n\ntype MainProps = SlotProps & {\n  /**\n   * Classes for the padded wrapper inside `Main` — override the gutter here, not in `className`,\n   * where a `p-*` breaks every sticky header.\n   */\n  contentClassName?: string;\n  /**\n   * Bounds the wrapper to `Main`'s height, for a page that owns its `overflow-auto` scroller.\n   * Loses the bottom-gutter guarantee — pair with a gutter-free `contentClassName`.\n   */\n  clampContent?: boolean;\n};\n\ntype ChromeSlotProps = SlotProps & {\n  /**\n   * Drops the slot's padding, background and border so a hosted `Navbar` / `Sidebar side=\"right\"`\n   * renders edge to edge. Prefer this over call-site overrides, which need `!` to win.\n   */\n  flush?: boolean;\n};\n\nconst Header = ({\n  ref,\n  className,\n  asChild,\n  flush = false,\n  children,\n  ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'header'>> }) => {\n  const Comp = asChild ? Slot : 'header';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"header\"\n      data-flush={flush || undefined}\n      className={cn(\n        'tw:flex',\n        flush\n          ? 'tw:items-stretch tw:gap-0'\n          : 'tw:items-center tw:gap-3 tw:border-b tw:border-border tw:bg-background tw:px-4',\n        'tw:[grid-area:header]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst SidebarSlot = ({\n  ref,\n  className,\n  asChild,\n  children,\n  ...props\n}: SlotProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const Comp = asChild ? Slot : 'div';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"sidebar\"\n      // The top-nav shell hides the `sidebar` grid area, so consumers pass the same JSX.\n      className={cn('tw:flex tw:min-h-0 tw:flex-col', 'tw:[grid-area:sidebar]', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst Main = ({\n  ref,\n  className,\n  contentClassName,\n  clampContent = false,\n  asChild,\n  children,\n  ...props\n}: MainProps & { ref?: Ref<ComponentRef<'main'>> }) => {\n  const Comp = asChild ? Slot : 'main';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"main\"\n      // The scroll container only; `className` lands here so `overflow-visible` can reset it.\n      className={cn(\n        'tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto',\n        'tw:[grid-area:main]',\n        className,\n      )}\n      {...props}\n    >\n      {/*\n        ⚠️ The gutter lives here, not on the scrollport: sticky insets resolve against its padding box.\n        - `shrink-0`: without it `min-h-full` lets the wrapper shrink, pushing its bottom padding out.\n        - `clampContent` swaps in `flex-1 min-h-0` for a page with its own scroller; the modes are exclusive.\n        - The `Slottable` render prop keeps `asChild` on the scroll container, not this wrapper.\n      */}\n      <Slottable child={children}>\n        {(content) => (\n          <div\n            className={cn(\n              'tw:flex tw:flex-col tw:p-6',\n              clampContent ? 'tw:min-h-0 tw:flex-1' : 'tw:min-h-full tw:shrink-0',\n              contentClassName,\n            )}\n          >\n            {content}\n          </div>\n        )}\n      </Slottable>\n    </Comp>\n  );\n};\n\nconst Aside = ({\n  ref,\n  className,\n  asChild,\n  flush = false,\n  children,\n  ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'aside'>> }) => {\n  const Comp = asChild ? Slot : 'aside';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"aside\"\n      data-flush={flush || undefined}\n      className={cn(\n        'tw:flex tw:min-h-0 tw:shrink-0 tw:flex-col',\n        // A hosted `Sidebar side=\"right\"` owns its width, border, background and scrolling.\n        flush\n          ? 'tw:w-auto tw:overflow-visible'\n          : 'tw:w-72 tw:overflow-auto tw:border-l tw:border-border tw:bg-background',\n        'tw:[grid-area:aside]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\n/**\n * App-shell layout: places the same slots in a sidebar or top-nav geometry per `useTheme().brand.shell`.\n *\n * - **When to use:** the root layout of a navigated app; host a `PageLayout` in `Main`.\n * - **When NOT to use:** standalone screens (sign-in, error pages).\n * - **Composition:** inside a `<ThemeProvider>`.\n */\nexport const AppShell = Object.assign(Root, {\n  /** Above `Main` in the sidebar shell; the full-width top bar in the top-nav shell. */\n  Header,\n  /** Left rail; hidden by the top-nav shell. */\n  Sidebar: SidebarSlot,\n  /** Scrolling content outlet with a `tw:p-6` gutter; override it via `contentClassName`. */\n  Main,\n  /** Optional right rail. Present in both shells. */\n  Aside,\n});\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,gBAAgB,EAAE,KAAK,WAAW,YAAY,UAAU,GAAG,YACtE,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,oBAAkB;CAClB,WAAW,GACT,2DACA,wDACA,eAAe,SACX,GACE,4EAIA,kEACA,gEAIA,6CACA,yCACF,IACA,4EACJ,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;AC/BP,MAAa,eAAe,EAAE,KAAK,WAAW,UAAU,GAAG,YACzD,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,WAAW,GACT,+CACA,mDACA,6DACA,+CACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;;ACTP,MAAa,wBAAwB,SAAuB,yBAAyB,KAAK;AAU1F,MAAMA,UAAQ,EACZ,KACA,WAEA,aAAa,WACb,UACA,GAAG,YACiD;CACpD,MAAM,EAAE,cAAc,UAAU,SAAS;CAGzC,IAAI,MAAM,UAAU,UAClB,OACE,oBAAC,aAAD;EAAkB;EAAgB;EAAW,GAAI;EAC9C;CACU,CAAA;CAIjB,OACE,oBAAC,cAAD;EAAmB;EAAgB;EAAuB;EAAY,GAAI;EACvE;CACW,CAAA;AAElB;AA4BA,MAAM,UAAU,EACd,KACA,WACA,SACA,QAAQ,OACR,UACA,GAAG,YAC0D;CAE7D,OACE,oBAFW,UAAU,OAAO,UAE5B;EACO;EACL,uBAAoB;EACpB,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,WACA,QACI,8BACA,kFACJ,yBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,eAAe,EACnB,KACA,WACA,SACA,UACA,GAAG,YACiD;CAEpD,OACE,oBAFW,UAAU,OAAO,OAE5B;EACO;EACL,uBAAoB;EAEpB,WAAW,GAAG,kCAAkC,0BAA0B,SAAS;EACnF,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,QAAQ,EACZ,KACA,WACA,kBACA,eAAe,OACf,SACA,UACA,GAAG,YACkD;CAErD,OACE,oBAFW,UAAU,OAAO,QAE5B;EACO;EACL,uBAAoB;EAEpB,WAAW,GACT,wEACA,uBACA,SACF;EACA,GAAI;EAQJ,UAAA,oBAAC,WAAD;GAAW,OAAO;GACd,WAAA,YACA,oBAAC,OAAD;IACE,WAAW,GACT,8BACA,eAAe,yBAAyB,6BACxC,gBACF;IAEC,UAAA;GACE,CAAA;EAEE,CAAA;CACP,CAAA;AAEV;AAEA,MAAM,SAAS,EACb,KACA,WACA,SACA,QAAQ,OACR,UACA,GAAG,YACyD;CAE5D,OACE,oBAFW,UAAU,OAAO,SAE5B;EACO;EACL,uBAAoB;EACpB,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,8CAEA,QACI,kCACA,0EACJ,wBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;;;;;AASA,MAAa,WAAW,OAAO,OAAOA,QAAM;;CAE1C;;CAEA,SAAS;;CAET;;CAEA;AACF,CAAC"}
+{"version":3,"file":"AppShell-C8V1KRr_.js","names":["Root"],"sources":["../src/blocks/AppShell/SidebarShell.tsx","../src/blocks/AppShell/TopNavShell.tsx","../src/blocks/AppShell/AppShell.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport type { AppShellHeaderSpan } from './types';\n\n// Required: `AppShell` owns the default so the generated component API reports it.\ntype Props = ComponentProps<'div'> & { headerSpan: AppShellHeaderSpan };\n\n/**\n * Sidebar geometry: left rail + header + main, with an optional right rail.\n *\n * - Template area names match the slots' `[grid-area:*]` utilities, so source order does not matter.\n * - `headerSpan` ({@link AppShellHeaderSpan}) picks the row template; the columns stay the same.\n */\nexport const SidebarShell = ({ ref, className, headerSpan, children, ...props }: Props) => (\n  <div\n    ref={ref}\n    data-app-shell-geometry=\"sidebar\"\n    data-header-span={headerSpan}\n    className={cn(\n      'tw:relative tw:grid tw:h-svh tw:w-full tw:bg-background',\n      'tw:grid-cols-[auto_1fr_auto] tw:grid-rows-[auto_1fr]',\n      headerSpan === 'full'\n        ? cn(\n            'tw:[grid-template-areas:\"header_header_header\"_\"sidebar_main_aside\"]',\n            // `Sidebar`'s inner wrapper is `fixed inset-y-0` and would paint over the header;\n            // a containing block re-anchors it to the slot without knowing the header's height.\n            // `styles.css` relies on this to clip a parked off-canvas rail.\n            'tw:[&>[data-app-shell-slot=sidebar]]:[transform:translateZ(0)]',\n            'tw:[&>[data-app-shell-slot=aside]]:[transform:translateZ(0)]',\n            // The containing block is also a stacking context that traps the rails' own z-index:\n            // - `z-50`: an expand-on-hover left rail paints over `main`.\n            // - `z-30`: clears main's sticky `z-10`/`z-20` headers, stays under the left rail.\n            'tw:[&>[data-app-shell-slot=sidebar]]:z-50',\n            'tw:[&>[data-app-shell-slot=aside]]:z-30',\n          )\n        : 'tw:[grid-template-areas:\"sidebar_header_aside\"_\"sidebar_main_aside\"]',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Top-nav geometry: full-width header, main + aside below.\n *\n * - No `sidebar` area: that slot is hidden, so one composition works under either brand.\n * - No `headerSpan`: the header is already full width.\n */\nexport const TopNavShell = ({ ref, className, children, ...props }: Props) => (\n  <div\n    ref={ref}\n    data-app-shell-geometry=\"topnav\"\n    className={cn(\n      'tw:grid tw:h-svh tw:w-full tw:bg-background',\n      'tw:grid-cols-[1fr_auto] tw:grid-rows-[auto_1fr]',\n      'tw:[grid-template-areas:\"header_header\"_\"main_aside\"]',\n      'tw:[&>[data-app-shell-slot=sidebar]]:hidden',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\n\nimport { useTheme } from '../../components/ThemeProvider';\nimport { cn } from '../../utils';\n\nimport { SidebarShell } from './SidebarShell';\nimport { TopNavShell } from './TopNavShell';\nimport type { AppShellHeaderSpan, AppShellSlot } from './types';\n\n/**\n * Targets a shell slot from outside the shell.\n *\n * - Each slot component stamps `data-app-shell-slot` with its own name.\n * - Exported so a consumer never hand-types the attribute: renaming it then breaks the\n *   build instead of silently matching nothing.\n */\nexport const appShellSlotSelector = (slot: AppShellSlot) => `[data-app-shell-slot=\"${slot}\"]`;\n\ntype RootProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * `content`: middle column only; `full`: spans above both rails, for app-wide identity.\n   * No-op under the top-nav geometry.\n   */\n  headerSpan?: AppShellHeaderSpan;\n};\n\nconst Root = ({\n  ref,\n  className,\n  // Defaulted here so the generated component API records `content`.\n  headerSpan = 'content',\n  children,\n  ...props\n}: RootProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const { currentTheme: brand } = useTheme();\n\n  // Branch, not spread: forwarding `headerSpan` to the top-nav shell leaks a DOM attribute.\n  if (brand.shell === 'topnav') {\n    return (\n      <TopNavShell ref={ref} className={className} {...props}>\n        {children}\n      </TopNavShell>\n    );\n  }\n\n  return (\n    <SidebarShell ref={ref} className={className} headerSpan={headerSpan} {...props}>\n      {children}\n    </SidebarShell>\n  );\n};\n\ntype SlotProps = ComponentPropsWithoutRef<'div'> & {\n  /** Render as the child element (Radix-Slot pattern), forwarding props onto it. */\n  asChild?: boolean;\n};\n\ntype MainProps = SlotProps & {\n  /**\n   * Classes for the padded wrapper inside `Main` — override the gutter here, not in `className`,\n   * where a `p-*` breaks every sticky header.\n   */\n  contentClassName?: string;\n  /**\n   * Bounds the wrapper to `Main`'s height, for a page that owns its `overflow-auto` scroller.\n   * Loses the bottom-gutter guarantee — pair with a gutter-free `contentClassName`.\n   */\n  clampContent?: boolean;\n};\n\ntype ChromeSlotProps = SlotProps & {\n  /**\n   * Drops the slot's padding, background and border so a hosted `Navbar` / `Sidebar side=\"right\"`\n   * renders edge to edge. Prefer this over call-site overrides, which need `!` to win.\n   */\n  flush?: boolean;\n};\n\nconst Header = ({\n  ref,\n  className,\n  asChild,\n  flush = false,\n  children,\n  ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'header'>> }) => {\n  const Comp = asChild ? Slot : 'header';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"header\"\n      data-flush={flush || undefined}\n      className={cn(\n        'tw:flex',\n        flush\n          ? 'tw:items-stretch tw:gap-0'\n          : 'tw:items-center tw:gap-3 tw:border-b tw:border-border tw:bg-background tw:px-4',\n        'tw:[grid-area:header]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst SidebarSlot = ({\n  ref,\n  className,\n  asChild,\n  children,\n  ...props\n}: SlotProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const Comp = asChild ? Slot : 'div';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"sidebar\"\n      // The top-nav shell hides the `sidebar` grid area, so consumers pass the same JSX.\n      className={cn('tw:flex tw:min-h-0 tw:flex-col', 'tw:[grid-area:sidebar]', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst Main = ({\n  ref,\n  className,\n  contentClassName,\n  clampContent = false,\n  asChild,\n  children,\n  ...props\n}: MainProps & { ref?: Ref<ComponentRef<'main'>> }) => {\n  const Comp = asChild ? Slot : 'main';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"main\"\n      // The scroll container only; `className` lands here so `overflow-visible` can reset it.\n      className={cn(\n        'tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto',\n        'tw:[grid-area:main]',\n        className,\n      )}\n      {...props}\n    >\n      {/*\n        ⚠️ The gutter lives here, not on the scrollport: sticky insets resolve against its padding box.\n        - `shrink-0`: without it `min-h-full` lets the wrapper shrink, pushing its bottom padding out.\n        - `clampContent` swaps in `flex-1 min-h-0` for a page with its own scroller; the modes are exclusive.\n        - The `Slottable` render prop keeps `asChild` on the scroll container, not this wrapper.\n      */}\n      <Slottable child={children}>\n        {(content) => (\n          <div\n            className={cn(\n              'tw:flex tw:flex-col tw:p-6',\n              clampContent ? 'tw:min-h-0 tw:flex-1' : 'tw:min-h-full tw:shrink-0',\n              contentClassName,\n            )}\n          >\n            {content}\n          </div>\n        )}\n      </Slottable>\n    </Comp>\n  );\n};\n\nconst Aside = ({\n  ref,\n  className,\n  asChild,\n  flush = false,\n  children,\n  ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'aside'>> }) => {\n  const Comp = asChild ? Slot : 'aside';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"aside\"\n      data-flush={flush || undefined}\n      className={cn(\n        'tw:flex tw:min-h-0 tw:shrink-0 tw:flex-col',\n        // A hosted `Sidebar side=\"right\"` owns its width, border, background and scrolling.\n        flush\n          ? 'tw:w-auto tw:overflow-visible'\n          : 'tw:w-72 tw:overflow-auto tw:border-l tw:border-border tw:bg-background',\n        'tw:[grid-area:aside]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\n/**\n * App-shell layout: places the same slots in a sidebar or top-nav geometry per `useTheme().brand.shell`.\n *\n * - **When to use:** the root layout of a navigated app; host a `PageLayout` in `Main`.\n * - **When NOT to use:** standalone screens (sign-in, error pages).\n * - **Composition:** inside a `<ThemeProvider>`.\n */\nexport const AppShell = Object.assign(Root, {\n  /** Above `Main` in the sidebar shell; the full-width top bar in the top-nav shell. */\n  Header,\n  /** Left rail; hidden by the top-nav shell. */\n  Sidebar: SidebarSlot,\n  /** Scrolling content outlet with a `tw:p-6` gutter; override it via `contentClassName`. */\n  Main,\n  /** Optional right rail. Present in both shells. */\n  Aside,\n});\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,gBAAgB,EAAE,KAAK,WAAW,YAAY,UAAU,GAAG,YACtE,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,oBAAkB;CAClB,WAAW,GACT,2DACA,wDACA,eAAe,SACX,GACE,4EAIA,kEACA,gEAIA,6CACA,yCACF,IACA,4EACJ,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;AC/BP,MAAa,eAAe,EAAE,KAAK,WAAW,UAAU,GAAG,YACzD,oBAAC,OAAD;CACO;CACL,2BAAwB;CACxB,WAAW,GACT,+CACA,mDACA,6DACA,+CACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;;;;;;;;ACTP,MAAa,wBAAwB,SAAuB,yBAAyB,KAAK;AAU1F,MAAMA,UAAQ,EACZ,KACA,WAEA,aAAa,WACb,UACA,GAAG,YACiD;CACpD,MAAM,EAAE,cAAc,UAAU,SAAS;CAGzC,IAAI,MAAM,UAAU,UAClB,OACE,oBAAC,aAAD;EAAkB;EAAgB;EAAW,GAAI;EAC9C;CACU,CAAA;CAIjB,OACE,oBAAC,cAAD;EAAmB;EAAgB;EAAuB;EAAY,GAAI;EACvE;CACW,CAAA;AAElB;AA4BA,MAAM,UAAU,EACd,KACA,WACA,SACA,QAAQ,OACR,UACA,GAAG,YAC0D;CAE7D,OACE,oBAFW,UAAU,OAAO,UAE5B;EACO;EACL,uBAAoB;EACpB,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,WACA,QACI,8BACA,kFACJ,yBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,eAAe,EACnB,KACA,WACA,SACA,UACA,GAAG,YACiD;CAEpD,OACE,oBAFW,UAAU,OAAO,OAE5B;EACO;EACL,uBAAoB;EAEpB,WAAW,GAAG,kCAAkC,0BAA0B,SAAS;EACnF,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,QAAQ,EACZ,KACA,WACA,kBACA,eAAe,OACf,SACA,UACA,GAAG,YACkD;CAErD,OACE,oBAFW,UAAU,OAAO,QAE5B;EACO;EACL,uBAAoB;EAEpB,WAAW,GACT,wEACA,uBACA,SACF;EACA,GAAI;EAQJ,UAAA,oBAAC,WAAD;GAAW,OAAO;GACd,WAAA,YACA,oBAAC,OAAD;IACE,WAAW,GACT,8BACA,eAAe,yBAAyB,6BACxC,gBACF;IAEC,UAAA;GACE,CAAA;EAEE,CAAA;CACP,CAAA;AAEV;AAEA,MAAM,SAAS,EACb,KACA,WACA,SACA,QAAQ,OACR,UACA,GAAG,YACyD;CAE5D,OACE,oBAFW,UAAU,OAAO,SAE5B;EACO;EACL,uBAAoB;EACpB,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,8CAEA,QACI,kCACA,0EACJ,wBACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;;;;;AASA,MAAa,WAAW,OAAO,OAAOA,QAAM;;CAE1C;;CAEA,SAAS;;CAET;;CAEA;AACF,CAAC"}

package/dist/{AutoSaveTextarea-jiqNeeE4.js → AutoSaveTextarea-BbMhC5Aq.js}

@@ -34,14 +34,14 @@ const AutoSaveTextarea = ({ savedValue, onSave, placeholder, disabled, grow = fa
 		}), /* @__PURE__ */ jsxs("div", {
 			className: cn("tw:mt-1 tw:flex tw:items-center tw:text-xs", maxLength != null ? "tw:justify-between" : "tw:justify-end"),
 			children: [maxLength != null && /* @__PURE__ */ jsxs("span", {
-				className: cn(isOverLimit ? "tw:text-error-500" : "tw:text-neutral-400"),
+				className: cn(isOverLimit ? "tw:text-destructive" : "tw:text-muted-foreground"),
 				children: [
 					currentValue.length,
 					" / ",
 					maxLength
 				]
 			}), /* @__PURE__ */ jsxs("span", {
-				className: "tw:flex tw:items-center tw:gap-1 tw:text-neutral-400",
+				className: "tw:flex tw:items-center tw:gap-1 tw:text-muted-foreground",
 				children: [
 					isOverLimit && "Character limit exceeded",
 					!isOverLimit && isChanged && !isSaving && "Unsaved",
@@ -55,4 +55,4 @@ const AutoSaveTextarea = ({ savedValue, onSave, placeholder, disabled, grow = fa
 //#endregion
 export { AutoSaveTextarea };
 
-//# sourceMappingURL=AutoSaveTextarea-jiqNeeE4.js.map
+//# sourceMappingURL=AutoSaveTextarea-BbMhC5Aq.js.map

package/dist/AutoSaveTextarea-BbMhC5Aq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSaveTextarea-BbMhC5Aq.js","names":[],"sources":["../src/blocks/AutoSaveTextarea/AutoSaveTextarea.tsx"],"sourcesContent":["import { type ComponentProps, useState } from 'react';\n\nimport { CircleCheck, Loader2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { Textarea } from '../Textarea';\n\ntype AutoSaveTextareaProps = {\n  savedValue?: string;\n  onSave: (value: string) => Promise<void>;\n  placeholder?: string;\n  disabled?: boolean;\n  grow?: boolean;\n} & Pick<\n  ComponentProps<typeof Textarea>,\n  'minRows' | 'maxRows' | 'className' | 'containerClassName' | 'maxLength'\n>;\n\nexport const AutoSaveTextarea = ({\n  savedValue,\n  onSave,\n  placeholder,\n  disabled,\n  grow = false,\n  ...textareaProps\n}: AutoSaveTextareaProps) => {\n  const { maxLength, ...restTextareaProps } = textareaProps;\n  const [value, setValue] = useState<string | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n\n  const currentValue = value ?? savedValue ?? '';\n  const isOverLimit = maxLength != null && currentValue.length > maxLength;\n  const isChanged = value !== null && savedValue !== value.trim();\n\n  const onSaveHandler = (blurValue = '') => {\n    if (!isChanged || isOverLimit) return;\n\n    setIsSaving(true);\n    onSave(blurValue.trim())\n      .catch(() => {})\n      .finally(() => {\n        setIsSaving(false);\n      });\n  };\n\n  return (\n    <div\n      className={cn(\n        'tw:relative',\n        // `-mx-1 + px-3` gives the focus ring 4px of horizontal breathing room inside\n        // ancestors that clip with `overflow: hidden` and no horizontal padding (e.g. the\n        // Kai sidebar's TabsContent). `-my-1 + py-1` keeps the original zero vertical inset.\n        grow &&\n          'tw:-m-1 tw:flex tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-hidden tw:px-3 tw:py-1',\n      )}\n    >\n      <Textarea\n        {...restTextareaProps}\n        containerClassName={cn(\n          // Descendant selectors match InputGroup's `tw:[&>textarea]:!min-h-[…]` specificity\n          // so the textarea fills the wrapper instead of being pinned to InputGroup's min-height.\n          grow &&\n            'tw:min-h-0 tw:flex-1 tw:overflow-hidden tw:[&>textarea]:!min-h-full tw:[&>textarea]:!max-h-full tw:[&>textarea]:overflow-y-auto',\n          restTextareaProps.containerClassName,\n        )}\n        state={isOverLimit ? 'error' : undefined}\n        value={currentValue}\n        onValueChange={setValue}\n        onValueBlur={() => onSaveHandler(value ?? '')}\n        placeholder={placeholder}\n        disabled={disabled || isSaving}\n        disableResize={grow}\n        // `grow` fills the container regardless of content length; skip the 4-row cap.\n        maxRows={grow ? 'unlimited' : restTextareaProps.maxRows}\n      />\n      <div\n        className={cn(\n          'tw:mt-1 tw:flex tw:items-center tw:text-xs',\n          maxLength != null ? 'tw:justify-between' : 'tw:justify-end',\n        )}\n      >\n        {maxLength != null && (\n          <span className={cn(isOverLimit ? 'tw:text-destructive' : 'tw:text-muted-foreground')}>\n            {currentValue.length} / {maxLength}\n          </span>\n        )}\n        <span className=\"tw:flex tw:items-center tw:gap-1 tw:text-muted-foreground\">\n          {isOverLimit && 'Character limit exceeded'}\n          {!isOverLimit && isChanged && !isSaving && 'Unsaved'}\n          {!isOverLimit && isChanged && isSaving && (\n            <>\n              <Loader2 className=\"tw:size-4 tw:animate-spin\" /> Saving\n            </>\n          )}\n          {!isOverLimit && value !== null && !isChanged && !isSaving && (\n            <>\n              <CircleCheck className=\"tw:size-4 tw:text-green-500\" /> Saved\n            </>\n          )}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAiBA,MAAa,oBAAoB,EAC/B,YACA,QACA,aACA,UACA,OAAO,OACP,GAAG,oBACwB;CAC3B,MAAM,EAAE,WAAW,GAAG,sBAAsB;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,MAAM,eAAe,SAAS,cAAc;CAC5C,MAAM,cAAc,aAAa,QAAQ,aAAa,SAAS;CAC/D,MAAM,YAAY,UAAU,QAAQ,eAAe,MAAM,KAAK;CAE9D,MAAM,iBAAiB,YAAY,OAAO;EACxC,IAAI,CAAC,aAAa,aAAa;EAE/B,YAAY,IAAI;EAChB,OAAO,UAAU,KAAK,CAAC,CAAC,CACrB,YAAY,CAAC,CAAC,CAAC,CACf,cAAc;GACb,YAAY,KAAK;EACnB,CAAC;CACL;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GACT,eAIA,QACE,qFACJ;EARF,UAAA,CAUE,oBAAC,UAAD;GACE,GAAI;GACJ,oBAAoB,GAGlB,QACE,mIACF,kBAAkB,kBACpB;GACA,OAAO,cAAc,UAAU,KAAA;GAC/B,OAAO;GACP,eAAe;GACf,mBAAmB,cAAc,SAAS,EAAE;GAC/B;GACb,UAAU,YAAY;GACtB,eAAe;GAEf,SAAS,OAAO,cAAc,kBAAkB;EACjD,CAAA,GACD,qBAAC,OAAD;GACE,WAAW,GACT,8CACA,aAAa,OAAO,uBAAuB,gBAC7C;GAJF,UAAA,CAMG,aAAa,QACZ,qBAAC,QAAD;IAAM,WAAW,GAAG,cAAc,wBAAwB,0BAA0B;IAApF,UAAA;KACG,aAAa;KAAO;KAAI;IACrB;GAER,CAAA,GAAA,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACG,eAAe;KACf,CAAC,eAAe,aAAa,CAAC,YAAY;KAC1C,CAAC,eAAe,aAAa,YAC5B,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAS,WAAU,4BAA6B,CAAA,GAAC,SACjD,EAAA,CAAA;KAEH,CAAC,eAAe,UAAU,QAAQ,CAAC,aAAa,CAAC,YAChD,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,8BAA+B,CAAA,GAAC,QACvD,EAAA,CAAA;IAEA;GACH,CAAA,CAAA;EACF,CAAA,CAAA;;AAET"}

package/dist/{Badge-Ba3epgcI.js → Badge-5GHIsgRS.js}

@@ -106,7 +106,7 @@ const badgeRootVariants = cva([
 	},
 	variants: {
 		variant: {
-			default: ["tw:rounded", "tw:[[data-brand^=keboola-legacy]_&]:uppercase"],
+			default: ["tw:rounded"],
 			tag: ["tw:rounded tw:normal-case"],
 			pill: ["tw:min-w-5 tw:rounded-full tw:normal-case tw:tracking-normal"]
 		},
@@ -120,6 +120,7 @@ const badgeRootVariants = cva([
 			blue: "tw:bg-blue-500 tw:text-white tw:decoration-blue-500",
 			"blue-inverse": "tw:bg-blue-100 tw:text-blue-800 tw:decoration-blue-100 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200 tw:[[data-theme=dark]_&]:decoration-blue-900",
 			red: "tw:bg-error-500 tw:text-white tw:decoration-error-500",
+			"red-inverse": "tw:bg-error-100 tw:text-error-800 tw:decoration-error-100 tw:[[data-theme=dark]_&]:bg-error-900 tw:[[data-theme=dark]_&]:text-error-200 tw:[[data-theme=dark]_&]:decoration-error-900",
 			orange: "tw:bg-warning-500 tw:text-white tw:decoration-warning-500",
 			"orange-inverse": "tw:bg-warning-100 tw:text-warning-800 tw:decoration-warning-100 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-900",
 			amber: "tw:bg-warning-300 tw:text-warning-800 tw:decoration-warning-300",
@@ -131,7 +132,17 @@ const badgeRootVariants = cva([
 			cyan: "tw:bg-cyan-500 tw:text-white tw:decoration-cyan-500",
 			"cyan-inverse": "tw:bg-cyan-100 tw:text-cyan-800 tw:decoration-cyan-100 tw:[[data-theme=dark]_&]:bg-cyan-900 tw:[[data-theme=dark]_&]:text-cyan-200 tw:[[data-theme=dark]_&]:decoration-cyan-900",
 			"sidebar-primary": "tw:bg-sidebar-primary tw:text-white tw:decoration-sidebar-primary",
-			white: "tw:bg-white/90 tw:text-neutral-600 tw:decoration-white/90"
+			white: "tw:bg-white/90 tw:text-neutral-600 tw:decoration-white/90",
+			success: "tw:bg-success tw:text-success-foreground tw:decoration-success tw:[[data-theme=dark]_&]:text-background",
+			"success-subtle": "tw:bg-success-subtle tw:text-success-subtle-foreground tw:decoration-success-subtle",
+			warning: "tw:bg-warning tw:text-warning-foreground tw:decoration-warning",
+			"warning-subtle": "tw:bg-warning-subtle tw:text-warning-subtle-foreground tw:decoration-warning-subtle",
+			info: "tw:bg-info tw:text-info-foreground tw:decoration-info tw:[[data-theme=dark]_&]:text-background",
+			"info-subtle": "tw:bg-info-subtle tw:text-info-subtle-foreground tw:decoration-info-subtle",
+			destructive: "tw:bg-destructive tw:text-destructive-foreground tw:decoration-destructive tw:[[data-theme=dark]_&]:text-background",
+			"destructive-subtle": "tw:bg-destructive-subtle tw:text-destructive-subtle-foreground tw:decoration-destructive-subtle",
+			neutral: "tw:bg-muted-foreground tw:text-background tw:decoration-muted-foreground",
+			"neutral-subtle": "tw:bg-neutral-subtle tw:text-neutral-subtle-foreground tw:decoration-neutral-subtle"
 		}
 	}
 });
@@ -187,4 +198,4 @@ const Badge = Object.assign(BadgeInner, {
 //#endregion
 export { Badge };
 
-//# sourceMappingURL=Badge-Ba3epgcI.js.map
+//# sourceMappingURL=Badge-5GHIsgRS.js.map

package/dist/Badge-5GHIsgRS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-5GHIsgRS.js","names":[],"sources":["../src/components/Badge/BadgeAddon.tsx","../src/components/Badge/BadgeButton.tsx","../src/components/Badge/BadgeLabel.tsx","../src/components/Badge/styles.ts","../src/components/Badge/BadgeRoot.tsx","../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst addonVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:shrink-0',\n    'tw:bg-inherit',\n    'tw:self-stretch',\n    'tw:px-1',\n    'tw:has-[button]:px-0',\n    'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n  ],\n  {\n    defaultVariants: {\n      align: 'inline-end',\n      variant: 'inline',\n    },\n    variants: {\n      align: {\n        'inline-start': ['tw:order-first'],\n        'inline-end': ['tw:order-last'],\n      },\n      variant: {\n        inline: [],\n        floating: [\n          'tw:hidden',\n          'tw:group-hover/badge:flex',\n\n          'tw:absolute',\n          'tw:top-0',\n          'tw:bottom-0',\n          'tw:focus-within:flex',\n        ],\n      },\n    },\n    compoundVariants: [\n      { variant: 'floating', align: 'inline-end', className: ['tw:right-0'] },\n      { variant: 'floating', align: 'inline-start', className: ['tw:left-0'] },\n    ],\n  },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const BadgeAddon = ({\n  ref,\n  align = 'inline-end',\n  variant = 'inline',\n  className,\n  ...rest\n}: Props) => (\n  <div\n    {...rest}\n    ref={ref}\n    data-align={align}\n    data-variant={variant}\n    className={cn(addonVariants({ align, variant, className }))}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const BadgeButton = ({ ref, className, type = 'button', children, ...rest }: Props) => (\n  <button\n    {...rest}\n    ref={ref}\n    type={type}\n    className={cn(\n      'tailwindcss-preflight',\n\n      'tw:inline-flex',\n      'tw:items-center',\n      'tw:justify-center',\n      'tw:cursor-pointer',\n\n      'tw:bg-inherit',\n      'tw:text-inherit',\n\n      'tw:hover:brightness-95',\n      'tw:px-1',\n\n      // The focus ring lives here rather than on `BadgeRoot`, whose own `focus-visible` block\n      // sits on a `div` that never takes focus. Inset, because a badge root clips its overflow —\n      // an outset ring on a nested button would be cut off.\n      'tw:focus-visible:outline-hidden',\n      'tw:focus-visible:ring-2',\n      'tw:focus-visible:ring-inset',\n      'tw:focus-visible:ring-ring',\n      // Default sizing for Lucide-icon children (which ship at 24×24); keeps\n      // the visual baseline aligned with the previous FA-icon API and other\n      // icon-wrapper components (ItemIcon, SidebarMenuIcon).\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n      className,\n    )}\n  >\n    {children}\n  </button>\n);\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'> & {\n  asChild?: boolean;\n};\n\nexport const BadgeLabel = ({ ref, className, asChild = false, ...rest }: Props) => {\n  const Comp = asChild ? Slot : 'span';\n  return (\n    <Comp\n      {...rest}\n      ref={ref}\n      data-slot=\"badge-label\"\n      className={cn(\n        'tw:max-w-56',\n        'tw:truncate',\n        'tw:px-2',\n        'tw:py-0.5',\n\n        // Drop side padding only when an *inline* addon is present —\n        // floating addons overlay the label without taking layout space,\n        // so the label still needs full padding behind them.\n        'tw:group-has-[[data-align=inline-start][data-variant=inline]:not(:empty)]/badge:pl-0',\n        'tw:group-has-[[data-align=inline-end][data-variant=inline]:not(:empty)]/badge:pr-0',\n        className,\n      )}\n    />\n  );\n};\n","import { cva } from 'class-variance-authority';\n\n/**\n * Badge's `color` variants: fill, foreground, and a `decoration-*` matching the fill.\n *\n * - Hues (`green`, `blue-inverse`, …) are fixed palette steps, for categorical labels.\n * - Status colours (`success`, `warning-subtle`, …) read brand tokens; use them for a state.\n * - Tinted (`-inverse`, `-subtle`) variants follow `[data-theme=dark]`; measured by the contrast audit and stories.\n */\nexport const badgeColors = {\n  gray: 'tw:bg-neutral-400 tw:text-white tw:decoration-neutral-400',\n  'gray-darker': 'tw:bg-neutral-500 tw:text-white tw:decoration-neutral-500',\n  'gray-inverse':\n    'tw:bg-neutral-100 tw:text-neutral-500 tw:decoration-neutral-100 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300 tw:[[data-theme=dark]_&]:decoration-neutral-700',\n  green: 'tw:bg-green-500 tw:text-white tw:decoration-green-500',\n  'green-darker': 'tw:bg-green-600 tw:text-white tw:decoration-green-600',\n  'green-inverse':\n    'tw:bg-green-100 tw:text-green-900 tw:decoration-green-100 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200 tw:[[data-theme=dark]_&]:decoration-green-900',\n  blue: 'tw:bg-blue-500 tw:text-white tw:decoration-blue-500',\n  'blue-inverse':\n    'tw:bg-blue-100 tw:text-blue-800 tw:decoration-blue-100 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200 tw:[[data-theme=dark]_&]:decoration-blue-900',\n  red: 'tw:bg-error-500 tw:text-white tw:decoration-error-500',\n  'red-inverse':\n    'tw:bg-error-100 tw:text-error-800 tw:decoration-error-100 tw:[[data-theme=dark]_&]:bg-error-900 tw:[[data-theme=dark]_&]:text-error-200 tw:[[data-theme=dark]_&]:decoration-error-900',\n  orange: 'tw:bg-warning-500 tw:text-white tw:decoration-warning-500',\n  'orange-inverse':\n    'tw:bg-warning-100 tw:text-warning-800 tw:decoration-warning-100 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-900',\n  amber: 'tw:bg-warning-300 tw:text-warning-800 tw:decoration-warning-300',\n  // One rung deeper than `orange-inverse` so caution stays distinct from warning (same hue).\n  'amber-inverse':\n    'tw:bg-warning-200 tw:text-warning-800 tw:decoration-warning-200 tw:[[data-theme=dark]_&]:bg-warning-800 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-800',\n  teal: 'tw:bg-teal-500 tw:text-white tw:decoration-teal-500',\n  'teal-inverse':\n    'tw:bg-teal-100 tw:text-teal-800 tw:decoration-teal-100 tw:[[data-theme=dark]_&]:bg-teal-900 tw:[[data-theme=dark]_&]:text-teal-200 tw:[[data-theme=dark]_&]:decoration-teal-900',\n  purple: 'tw:bg-purple-500 tw:text-white tw:decoration-purple-500',\n  'purple-inverse':\n    'tw:bg-purple-100 tw:text-purple-800 tw:decoration-purple-100 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200 tw:[[data-theme=dark]_&]:decoration-purple-900',\n  cyan: 'tw:bg-cyan-500 tw:text-white tw:decoration-cyan-500',\n  'cyan-inverse':\n    'tw:bg-cyan-100 tw:text-cyan-800 tw:decoration-cyan-100 tw:[[data-theme=dark]_&]:bg-cyan-900 tw:[[data-theme=dark]_&]:text-cyan-200 tw:[[data-theme=dark]_&]:decoration-cyan-900',\n  'sidebar-primary': 'tw:bg-sidebar-primary tw:text-white tw:decoration-sidebar-primary',\n  white: 'tw:bg-white/90 tw:text-neutral-600 tw:decoration-white/90',\n  // Dark mode lightens these tokens but keeps a white foreground, so solid fills take dark ink there.\n  success:\n    'tw:bg-success tw:text-success-foreground tw:decoration-success tw:[[data-theme=dark]_&]:text-background',\n  'success-subtle':\n    'tw:bg-success-subtle tw:text-success-subtle-foreground tw:decoration-success-subtle',\n  warning: 'tw:bg-warning tw:text-warning-foreground tw:decoration-warning',\n  'warning-subtle':\n    'tw:bg-warning-subtle tw:text-warning-subtle-foreground tw:decoration-warning-subtle',\n  info: 'tw:bg-info tw:text-info-foreground tw:decoration-info tw:[[data-theme=dark]_&]:text-background',\n  'info-subtle': 'tw:bg-info-subtle tw:text-info-subtle-foreground tw:decoration-info-subtle',\n  destructive:\n    'tw:bg-destructive tw:text-destructive-foreground tw:decoration-destructive tw:[[data-theme=dark]_&]:text-background',\n  'destructive-subtle':\n    'tw:bg-destructive-subtle tw:text-destructive-subtle-foreground tw:decoration-destructive-subtle',\n  // `neutral` has no status token: solid paints `muted-foreground`.\n  neutral: 'tw:bg-muted-foreground tw:text-background tw:decoration-muted-foreground',\n  'neutral-subtle':\n    'tw:bg-neutral-subtle tw:text-neutral-subtle-foreground tw:decoration-neutral-subtle',\n} as const;\n\n/** A `Badge` `color` value. */\nexport type BadgeColor = keyof typeof badgeColors;\n\n/** Tinted variants are held to WCAG-AA; solid fills are pinned, so only recorded. */\nexport const isTintedBadgeColor = (color: string): boolean =>\n  color.endsWith('-inverse') || color.endsWith('-subtle');\n\nexport const badgeRootVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/badge',\n\n    // display\n    'tw:relative',\n    'tw:inline-flex',\n    'tw:justify-center',\n    'tw:items-center',\n    'tw:min-h-5',\n    'tw:h-fit',\n    'tw:shrink-0',\n    'tw:overflow-hidden',\n\n    // text — weight/tracking are brand-overridable tokens\n    'tw:whitespace-pre-wrap',\n    'tw:break-normal',\n    'tw:text-xs',\n    'tw:font-medium',\n    'tw:tracking-chrome',\n    'tw:text-center',\n    'tw:underline',\n\n    // content\n    'tw:border-none',\n    'tw:[&>svg]:self-center',\n    'tw:[button&]:cursor-pointer',\n\n    // focus\n    'tw:focus-visible:outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-inset',\n    'tw:focus-visible:ring-ring',\n  ],\n  {\n    defaultVariants: {\n      color: 'gray',\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: ['tw:rounded'],\n        tag: ['tw:rounded tw:normal-case'],\n        pill: ['tw:min-w-5 tw:rounded-full tw:normal-case tw:tracking-normal'],\n      },\n      color: badgeColors,\n    },\n  },\n);\n","import type { ComponentProps } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport { badgeRootVariants } from './styles';\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof badgeRootVariants>;\n\nexport const BadgeRoot = ({ ref, variant, color, className, children, ...rest }: Props) => (\n  <div\n    {...rest}\n    ref={ref}\n    data-slot=\"badge\"\n    className={cn(badgeRootVariants({ variant, color, className }))}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { BadgeAddon } from './BadgeAddon';\nimport { BadgeButton } from './BadgeButton';\nimport { BadgeLabel } from './BadgeLabel';\nimport { BadgeRoot } from './BadgeRoot';\n\ntype AddonVariant = ComponentProps<typeof BadgeAddon>['variant'];\ntype BadgeRootProps = ComponentProps<typeof BadgeRoot>;\ntype BadgeLabelProps = ComponentProps<typeof BadgeLabel>;\n\n/**\n * - `color` status values (`success`, `warning-subtle`, …) follow the brand; use them for a state.\n * - `color` hues (`green`, `purple`, …) stay fixed; use them for categorical labels.\n */\ntype Props = Pick<BadgeRootProps, 'variant' | 'color'> &\n  Omit<BadgeLabelProps, 'prefix'> & {\n    prefix?: ReactNode;\n    prefixVariant?: AddonVariant;\n    suffix?: ReactNode;\n    suffixVariant?: AddonVariant;\n    labelClassName?: string;\n  };\n\n/**\n * Inline pill for a status, count or tag.\n *\n * - Not for actions (`Button` / `ButtonInline`) or banners (`Alert`).\n * - `Badge.Button` for a clickable badge.\n */\nconst BadgeInner = ({\n  ref,\n  variant = 'pill',\n  color,\n  prefix,\n  prefixVariant = 'inline',\n  suffix,\n  suffixVariant = 'inline',\n  className,\n  labelClassName,\n  ...labelProps\n}: Props) => (\n  <BadgeRoot className={className} variant={variant} color={color}>\n    {prefix && (\n      <BadgeAddon align=\"inline-start\" variant={prefixVariant}>\n        {prefix}\n      </BadgeAddon>\n    )}\n    <BadgeLabel {...labelProps} ref={ref} className={labelClassName} />\n    {suffix && (\n      <BadgeAddon align=\"inline-end\" variant={suffixVariant}>\n        {suffix}\n      </BadgeAddon>\n    )}\n  </BadgeRoot>\n);\n\nexport const Badge = Object.assign(BadgeInner, {\n  Root: BadgeRoot,\n  Button: BadgeButton,\n  Label: BadgeLabel,\n  Addon: BadgeAddon,\n});\n"],"mappings":";;;;;AAKA,MAAM,gBAAgB,IACpB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,OAAO;EACP,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,gBAAgB,CAAC,gBAAgB;GACjC,cAAc,CAAC,eAAe;EAChC;EACA,SAAS;GACP,QAAQ,CAAC;GACT,UAAU;IACR;IACA;IAEA;IACA;IACA;IACA;GACF;EACF;CACF;CACA,kBAAkB,CAChB;EAAE,SAAS;EAAY,OAAO;EAAc,WAAW,CAAC,YAAY;CAAE,GACtE;EAAE,SAAS;EAAY,OAAO;EAAgB,WAAW,CAAC,WAAW;CAAE,CACzE;AACF,CACF;AAIA,MAAa,cAAc,EACzB,KACA,QAAQ,cACR,UAAU,UACV,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,GAAI;CACC;CACL,cAAY;CACZ,gBAAc;CACd,WAAW,GAAG,cAAc;EAAE;EAAO;EAAS;CAAU,CAAC,CAAC;AAC3D,CAAA;;;ACvDH,MAAa,eAAe,EAAE,KAAK,WAAW,OAAO,UAAU,UAAU,GAAG,WAC1E,oBAAC,UAAD;CACE,GAAI;CACC;CACC;CACN,WAAW,GACT,yBAEA,kBACA,mBACA,qBACA,qBAEA,iBACA,mBAEA,0BACA,WAKA,mCACA,2BACA,+BACA,8BAIA,gDACA,SACF;CAEC;AACK,CAAA;;;AC/BV,MAAa,cAAc,EAAE,KAAK,WAAW,UAAU,OAAO,GAAG,WAAkB;CAEjF,OACE,oBAFW,UAAU,OAAO,QAE5B;EACE,GAAI;EACC;EACL,aAAU;EACV,WAAW,GACT,eACA,eACA,WACA,aAKA,wFACA,sFACA,SACF;CACD,CAAA;AAEL;ACsCA,MAAa,oBAAoB,IAC/B;CACE;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,OAAO;EACP,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS,CAAC,YAAY;GACtB,KAAK,CAAC,2BAA2B;GACjC,MAAM,CAAC,8DAA8D;EACvE;EACA,OAAO;GAzGX,MAAM;GACN,eAAe;GACf,gBACE;GACF,OAAO;GACP,gBAAgB;GAChB,iBACE;GACF,MAAM;GACN,gBACE;GACF,KAAK;GACL,eACE;GACF,QAAQ;GACR,kBACE;GACF,OAAO;GAEP,iBACE;GACF,MAAM;GACN,gBACE;GACF,QAAQ;GACR,kBACE;GACF,MAAM;GACN,gBACE;GACF,mBAAmB;GACnB,OAAO;GAEP,SACE;GACF,kBACE;GACF,SAAS;GACT,kBACE;GACF,MAAM;GACN,eAAe;GACf,aACE;GACF,sBACE;GAEF,SAAS;GACT,kBACE;EAwDS;CACT;AACF,CACF;;;AC7GA,MAAa,aAAa,EAAE,KAAK,SAAS,OAAO,WAAW,UAAU,GAAG,WACvE,oBAAC,OAAD;CACE,GAAI;CACC;CACL,aAAU;CACV,WAAW,GAAG,kBAAkB;EAAE;EAAS;EAAO;CAAU,CAAC,CAAC;CAE7D;AACE,CAAA;;;;;;;;;ACaP,MAAM,cAAc,EAClB,KACA,UAAU,QACV,OACA,QACA,gBAAgB,UAChB,QACA,gBAAgB,UAChB,WACA,gBACA,GAAG,iBAEH,qBAAC,WAAD;CAAsB;CAAoB;CAAgB;CAA1D,UAAA;EACG,UACC,oBAAC,YAAD;GAAY,OAAM;GAAe,SAAS;GACvC,UAAA;EACS,CAAA;EAEd,oBAAC,YAAD;GAAY,GAAI;GAAiB;GAAK,WAAW;EAAiB,CAAA;EACjE,UACC,oBAAC,YAAD;GAAY,OAAM;GAAa,SAAS;GACrC,UAAA;EACS,CAAA;CAEL;;AAGb,MAAa,QAAQ,OAAO,OAAO,YAAY;CAC7C,MAAM;CACN,QAAQ;CACR,OAAO;CACP,OAAO;AACT,CAAC"}

package/dist/{BrandEditor-Dq168RJc.js → BrandEditor-CTGtQUFZ.js}

@@ -1,17 +1,17 @@
-import { Button } from "./Button-D2JqBAq7.js";
+import { Button } from "./Button-BNkyYU8u.js";
 import { ToggleGroup } from "./ToggleGroup-BOz1yyz6.js";
 import { Label } from "./internal/components/Label.js";
-import { TextInput } from "./TextInput-B5TDDOty.js";
-import { Slider } from "./Slider-Rcc2qVct.js";
-import { Select } from "./Select-CjQgU_6K.js";
-import { Badge } from "./Badge-Ba3epgcI.js";
-import { ColorInput } from "./ColorInput-D1nC0X6i.js";
+import { TextInput } from "./TextInput-CR0_USaY.js";
+import { Slider } from "./Slider-DrcsM8_G.js";
+import { Select } from "./Select-B22hB_-w.js";
+import { Badge } from "./Badge-5GHIsgRS.js";
+import { ColorInput } from "./ColorInput-B_eZIu39.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { Collapsible } from "./Collapsible-DD4xTL75.js";
 import { useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { keboola } from "@keboola/brand-registry";
 import DOMPurify from "dompurify";
+import { keboola } from "@keboola/brand-registry";
 //#region src/blocks/BrandEditor/color.ts
 const hexToChannels = (hex) => {
 	let h = hex.trim().replace(/^#/, "");
@@ -40,7 +40,6 @@ const ColorField = ({ id, label, channels, onChange }) => {
 			children: label
 		}), /* @__PURE__ */ jsx(ColorInput, {
 			id,
-			sizing: "medium",
 			value: hex,
 			className: "tw:w-36",
 			onValueChange: (next) => {
@@ -116,7 +115,6 @@ const TextField = ({ id, label, value, onChange, placeholder }) => /* @__PURE__
 		children: label
 	}), /* @__PURE__ */ jsx(TextInput, {
 		id,
-		sizing: "small",
 		value,
 		onValueChange: onChange,
 		placeholder,
@@ -1038,4 +1036,4 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
 //#endregion
 export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
 
-//# sourceMappingURL=BrandEditor-Dq168RJc.js.map
+//# sourceMappingURL=BrandEditor-CTGtQUFZ.js.map