@keboola/design 13.2.0 → 15.0.0

package/dist/InputGroup-CZv_7QlM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup-CZv_7QlM.js","names":[],"sources":["../src/components/InputGroup/InputGroupAddon.tsx","../src/components/InputGroup/InputGroupButton.tsx","../src/components/InputGroup/InputGroupInput.tsx","../src/components/InputGroup/InputGroupText.tsx","../src/components/InputGroup/InputGroupTextArea.tsx","../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\n// Padding only fires when the addon actually has content — keeps an empty\n// `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.\nconst addonVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-1',\n\n    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.\n    \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      align: 'inline-start',\n    },\n    variants: {\n      align: {\n        'inline-start': ['tw:order-first', 'tw:shrink-0', 'tw:[&:not(:empty)]:pl-4'],\n        'inline-end': ['tw:order-last', 'tw:shrink-0', 'tw:[&:not(:empty)]:pr-4'],\n        'block-start': [\n          'tw:order-first',\n          // `tw:w-full` needs to be empty-conditional too — when the addon\n          // has no content the root stays in flex-row, and a 100%-wide\n          // empty addon would claim half of the input row beside the input.\n          'tw:[&:not(:empty)]:w-full',\n          'tw:[&:not(:empty)]:px-4',\n          'tw:[&:not(:empty)]:py-1.5',\n        ],\n        'block-end': [\n          'tw:order-last',\n          'tw:[&:not(:empty)]:w-full',\n          'tw:[&:not(:empty)]:px-4',\n          'tw:[&:not(:empty)]:py-1.5',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const InputGroupAddon = ({\n  children,\n  align = 'inline-start',\n  className,\n  ...props\n}: Props) => (\n  <div {...props} data-align={align} className={cn(addonVariants({ align, className }))}>\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype ButtonProps = ComponentProps<typeof Button>;\n\ntype Props = Omit<ButtonProps, 'size' | 'block' | 'variant'>;\n\nexport const InputGroupButton = ({ ref, className, tabIndex = -1, ...props }: Props) => (\n  <Button\n    {...props}\n    tabIndex={tabIndex}\n    ref={ref}\n    variant=\"invisible\"\n    size=\"icon-sm\"\n    className={cn('tw:size-5', 'tw:[&_svg]:text-muted-foreground', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'input'>;\n\nexport const InputGroupInput = ({ ref, className, ...inputProps }: Props) => (\n  <input\n    {...inputProps}\n    ref={ref}\n    className={cn(\n      'tw:flex-1',\n      'tw:min-w-0',\n      'tw:bg-transparent',\n      'tw:outline-hidden',\n\n      // font\n      'tw:font-sans',\n      'tw:text-sm',\n\n      // placeholder\n      'tw:placeholder:text-neutral-400',\n      'tw:placeholder:font-normal',\n\n      // disabled\n      'tw:disabled:cursor-not-allowed',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const InputGroupText = ({ className, ...props }: Props) => (\n  <span\n    className={cn(\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-2',\n      'tw:text-sm',\n      'tw:text-muted-foreground',\n      'tw:[&_svg]:pointer-events-none',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { cn } from '../../utils';\n\ntype TextareaNativeProps = Omit<\n  ComponentProps<typeof TextareaAutosize>,\n  'value' | 'defaultValue' | 'rows' | 'maxRows'\n>;\n\ntype Props = TextareaNativeProps & {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string) => void;\n  onValueBlur?: (value: string) => void;\n  maxRows?: number | 'unlimited';\n  disableResize?: boolean;\n};\n\nexport const InputGroupTextArea = ({\n  ref,\n  className,\n  onChange,\n  onValueChange,\n  value,\n  defaultValue,\n  onBlur,\n  onValueBlur,\n  disableResize = false,\n  minRows = 1,\n  maxRows = 4,\n  ...props\n}: Props) => {\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {\n    onValueChange?.(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  return (\n    <TextareaAutosize\n      {...props}\n      ref={ref}\n      value={value ?? undefined}\n      defaultValue={defaultValue ?? undefined}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      minRows={minRows}\n      maxRows={maxRows === 'unlimited' ? undefined : maxRows}\n      className={cn(\n        'tw:w-full',\n        'tw:bg-transparent',\n        'tw:outline-hidden',\n        'tw:px-4',\n\n        // font\n        'tw:font-sans',\n        'tw:text-sm',\n\n        // placeholder\n        'tw:placeholder:text-neutral-400',\n        'tw:placeholder:font-normal',\n\n        // disabled\n        'tw:disabled:cursor-not-allowed',\n        {\n          'tw:resize-none': disableResize,\n        },\n\n        className,\n      )}\n    />\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport { InputGroupAddon } from './InputGroupAddon';\nimport { InputGroupButton } from './InputGroupButton';\nimport { InputGroupInput } from './InputGroupInput';\nimport { InputGroupText } from './InputGroupText';\nimport { InputGroupTextArea } from './InputGroupTextArea';\n\nconst inputGroupVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group',\n\n    'tw:overflow-hidden',\n    'tw:box-border',\n\n    // positioning\n    'tw:flex',\n    'tw:items-center',\n    // A flex item's default `min-width: auto` floors the group at its content's intrinsic width,\n    // so a constrained row (several groups side by side) overflows rather than sharing the space.\n    // The group clips its own content anyway, and the input inside already carries `min-w-0`.\n    'tw:min-w-0',\n\n    'tw:rounded-[var(--radius-lg,0.25rem)]',\n    'tw:border',\n    'tw:border-solid',\n    'tw:border-input',\n    // A grey inset field, distinct from white containers.\n    'tw:bg-muted',\n    'tw:text-foreground',\n    'tw:transition',\n\n    // focus\n    'tw:has-[:is(input,textarea):focus]:ring-4',\n\n    // readonly — higher specificity than the focus border, so a readonly field never takes it.\n    'tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0',\n    'tw:has-[:is(input,textarea)[readonly]]:border-input',\n    'tw:has-[:is(input,textarea)[readonly]:focus]:border-input',\n\n    // disabled\n    'tw:has-[:is(input,textarea):disabled]:cursor-not-allowed',\n    'tw:has-[:is(input,textarea):disabled]:opacity-disabled',\n\n    // `aria-invalid` on the control surfaces the error chrome without a `state` prop.\n    'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive',\n    'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive',\n    'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20',\n\n    // textarea: top-align addons, allow vertical expansion, own its y-padding\n    'tw:has-[textarea]:items-start',\n\n    'tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap',\n    'tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap',\n    'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto',\n    'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1',\n    'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto',\n    'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1',\n\n    'tw:[&_input]:px-4',\n    'tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2',\n    'tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2',\n\n    'tw:[&_:is(input,textarea)]:py-2',\n    'tw:[&_:is(input,textarea)]:leading-[18px]',\n    'tw:[&_textarea]:!min-h-[calc(2.25rem-2px)]',\n  ],\n  {\n    defaultVariants: {\n      state: 'default',\n      focusVariant: 'default',\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        focusVariant: 'on',\n        className: ['tw:!border-destructive', 'tw:!ring-destructive/20'],\n      },\n      {\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-input'],\n      },\n    ],\n    variants: {\n      focusVariant: {\n        default: [],\n        on: ['tw:!border-primary', 'tw:!ring-ring/50', 'tw:!ring-4'],\n        off: ['tw:has-[:is(input,textarea):focus]:!ring-0'],\n      },\n      state: {\n        default: [\n          'tw:has-[:is(input,textarea):focus]:border-primary',\n          'tw:has-[:is(input,textarea):focus]:ring-ring/50',\n        ],\n        error: [\n          'tw:border-destructive',\n          'tw:has-[:is(input,textarea):focus]:border-destructive',\n          'tw:has-[:is(input,textarea):focus]:ring-destructive/20',\n        ],\n        warning: [\n          'tw:border-warning-500',\n          'tw:has-[:is(input,textarea):focus]:border-warning-500',\n          'tw:has-[:is(input,textarea):focus]:ring-warning/20',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentPropsWithRef<'div'> & VariantProps<typeof inputGroupVariants>;\n\nconst InputGroupRoot = ({ ref, children, state, focusVariant, className, ...props }: Props) => (\n  <div {...props} ref={ref} className={cn(inputGroupVariants({ state, focusVariant, className }))}>\n    {children}\n  </div>\n);\n\nexport const InputGroup = InputGroupRoot as typeof InputGroupRoot & {\n  Input: typeof InputGroupInput;\n  Addon: typeof InputGroupAddon;\n  Button: typeof InputGroupButton;\n  TextArea: typeof InputGroupTextArea;\n  Text: typeof InputGroupText;\n};\n\nInputGroup.Input = InputGroupInput;\nInputGroup.Addon = InputGroupAddon;\nInputGroup.Button = InputGroupButton;\nInputGroup.TextArea = InputGroupTextArea;\nInputGroup.Text = InputGroupText;\n"],"mappings":"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"}

package/dist/{Kbd-Du93F3o4.js → Kbd-CflKthfu.js}

@@ -1,18 +1,13 @@
 import { cn } from "./classNames-DcGnTh2N.js";
-import { isMac } from "./utils-p6tjltbX.js";
+import { isMac } from "./utils-DwC9u0tM.js";
 import { Children, Fragment } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Kbd/KbdSeparator.tsx
-/**
-* The `+` / `then` glue between two `Kbd` keys.
-*
-* - Follows the muted chrome token by default.
-* - Turns white inside the legacy dark tooltip, which sets `data-tooltip-content`.
-*/
+/** The `+` / `then` glue between two `Kbd` keys, in the muted chrome token. */
 const KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
 	...props,
-	className: cn("tw:text-xs tw:text-muted-foreground", "tw:[[data-tooltip-content=true]_&]:text-white/70", className)
+	className: cn("tw:text-xs tw:text-muted-foreground", className)
 });
 //#endregion
 //#region src/components/Kbd/KbdGroup.tsx
@@ -54,11 +49,7 @@ const kbdVariants = cva([
 		},
 		variant: {
 			default: "tw:bg-muted tw:text-muted-foreground",
-			primary: [
-				"tw:bg-muted tw:text-muted-foreground",
-				"tw:[[data-tooltip-content=true]_&]:bg-white/20",
-				"tw:[[data-tooltip-content=true]_&]:text-white"
-			]
+			primary: "tw:bg-muted tw:text-muted-foreground"
 		}
 	}
 });
@@ -128,4 +119,4 @@ const keys = createKeyboardKeys();
 //#endregion
 export { Kbd, kbdVariants, keys };
 
-//# sourceMappingURL=Kbd-Du93F3o4.js.map
+//# sourceMappingURL=Kbd-CflKthfu.js.map

package/dist/Kbd-CflKthfu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd-CflKthfu.js","names":[],"sources":["../src/components/Kbd/KbdSeparator.tsx","../src/components/Kbd/KbdGroup.tsx","../src/components/Kbd/styles.ts","../src/components/Kbd/Kbd.tsx","../src/components/Kbd/keyboardKeys.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\n/** The `+` / `then` glue between two `Kbd` keys, in the muted chrome token. */\nexport const KbdSeparator = ({ className, ...props }: Props) => (\n  <span {...props} className={cn('tw:text-xs tw:text-muted-foreground', className)} />\n);\n","import { Children, Fragment } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { KbdSeparator } from './KbdSeparator';\n\ntype Props = { separator?: string } & ComponentProps<'kbd'>;\n\nexport const KbdGroup = ({ ref, className, children, separator, ...props }: Props) => {\n  return (\n    <kbd\n      {...props}\n      ref={ref}\n      className={cn('tw:inline-flex', 'tw:items-center', 'tw:gap-1', className)}\n    >\n      {separator\n        ? // oxlint-disable-next-line react-x/no-children-to-array\n          Children.toArray(children).map((child, index) => (\n            // oxlint-disable-next-line\n            <Fragment key={index}>\n              {index > 0 && <KbdSeparator>{separator}</KbdSeparator>}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </kbd>\n  );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n  [\n    'tailwindcss-preflight',\n    // style\n    'tw:pointer-events-none',\n    'tw:w-fit',\n    'tw:h-5',\n    'tw:min-w-5',\n\n    // layout\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-1',\n    'tw:shrink-0',\n\n    // spacing\n    'tw:px-1',\n    'tw:[&_svg:not([class*=\"size-\"])]:size-2.5',\n\n    'tw:text-xs',\n    'tw:font-medium',\n\n    'tw:rounded',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n      casing: 'upper',\n    },\n    variants: {\n      // Uppercase like a keycap; `as-written` for layout-printed labels, where the transform\n      // changes glyph count (`ß` → `SS`).\n      casing: {\n        upper: 'tw:uppercase',\n        'as-written': '',\n      },\n      variant: {\n        default: 'tw:bg-muted tw:text-muted-foreground',\n        // Tooltip shortcut key.\n        primary: 'tw:bg-muted tw:text-muted-foreground',\n      },\n    },\n  },\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { KbdGroup } from './KbdGroup';\nimport { KbdSeparator } from './KbdSeparator';\nimport { kbdVariants } from './styles';\n\ntype Props = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;\n\nexport const Kbd = ({ children, className, variant, casing, ...rest }: Props) => (\n  <kbd {...rest} className={kbdVariants({ className, variant, casing })}>\n    {children}\n  </kbd>\n);\n\nKbd.Group = KbdGroup;\nKbd.Separator = KbdSeparator;\n","import { isMac } from '../../utils';\n\ntype KeyName = 'mod' | 'option' | 'shift' | 'enter';\ntype KeyRepresentation = { symbol: string; text: string };\n\ntype KeyDefinition = {\n  mac: KeyRepresentation;\n  windows: KeyRepresentation;\n};\n\nconst KEY_DEFINITIONS: Record<KeyName, KeyDefinition> = {\n  mod: {\n    mac: { symbol: '⌘', text: 'Command' },\n    windows: { symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  option: {\n    mac: { symbol: '⌥', text: 'Option' },\n    windows: { symbol: 'Alt', text: 'Alt' },\n  },\n  shift: {\n    mac: { symbol: '⇧', text: 'Shift' },\n    windows: { symbol: '⇧', text: 'Shift' },\n  },\n  enter: {\n    mac: { symbol: '⏎', text: 'Enter' },\n    windows: { symbol: '⏎', text: 'Enter' },\n  },\n};\n\nconst createKeyboardKeys = () => {\n  const keysObj: Record<KeyName, KeyRepresentation> = {} as Record<KeyName, KeyRepresentation>;\n\n  for (const keyName of Object.keys(KEY_DEFINITIONS) as KeyName[]) {\n    keysObj[keyName] = KEY_DEFINITIONS[keyName][isMac ? 'mac' : 'windows'];\n  }\n\n  return keysObj;\n};\n\nexport const keys = createKeyboardKeys();\n"],"mappings":";;;;;;;AAOA,MAAa,gBAAgB,EAAE,WAAW,GAAG,YAC3C,oBAAC,QAAD;CAAM,GAAI;CAAO,WAAW,GAAG,uCAAuC,SAAS;AAAI,CAAA;;;ACCrF,MAAa,YAAY,EAAE,KAAK,WAAW,UAAU,WAAW,GAAG,YAAmB;CACpF,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,kBAAkB,mBAAmB,YAAY,SAAS;EAEvE,UAAA,YAEG,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO,UAErC,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GACpD,KACO,EAAA,GAHK,KAGL,CACX,IACD;CACD,CAAA;AAET;;;AC1BA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EAGR,QAAQ;GACN,OAAO;GACP,cAAc;EAChB;EACA,SAAS;GACP,SAAS;GAET,SAAS;EACX;CACF;AACF,CACF;;;ACrCA,MAAa,OAAO,EAAE,UAAU,WAAW,SAAS,QAAQ,GAAG,WAC7D,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,YAAY;EAAE;EAAW;EAAS;CAAO,CAAC;CACjE;AACE,CAAA;AAGP,IAAI,QAAQ;AACZ,IAAI,YAAY;;;ACNhB,MAAM,kBAAkD;CACtD,KAAK;EACH,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAU;EACpC,SAAS;GAAE,QAAQ;GAAQ,MAAM;EAAO;CAC1C;CACA,QAAQ;EACN,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAS;EACnC,SAAS;GAAE,QAAQ;GAAO,MAAM;EAAM;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;AACF;AAEA,MAAM,2BAA2B;CAC/B,MAAM,UAA8C,CAAC;CAErD,KAAK,MAAM,WAAW,OAAO,KAAK,eAAe,GAC/C,QAAQ,WAAW,gBAAgB,QAAQ,CAAC,QAAQ,QAAQ;CAG9D,OAAO;AACT;AAEA,MAAa,OAAO,mBAAmB"}

package/dist/MermaidDiagram-Te-5gOCU.js

@@ -0,0 +1,199 @@
+import { __exportAll } from "./rolldown-runtime-Bdc48AWt.js";
+import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
+import { DiagramSource, makeResponsive } from "./svgTransforms-Hnvev3Vs.js";
+import { ZoomableSvg } from "./ZoomableSvg-DnFXo2L4.js";
+import { useThemeAttributes } from "./themeTokens-DCeb62ap.js";
+import { SERIES_TOKENS, createVegaColorResolver, tierTwoColour } from "./vegaTokens-DCkvpIVE.js";
+import { createSvgCache, diagramCacheKey } from "./svgCache-Dhmbe-7i.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PeleError, detectType, load, registered, render } from "pele/lazy";
+//#region src/blocks/MermaidDiagram/peleTheme.ts
+const DIAGRAM_FONT = "Inter, system-ui, sans-serif";
+/**
+* The `--pele-*` declarations for one scheme, as a `style` attribute fragment.
+*
+* - Resolved colours, not `var()` refs: an exported SVG or PNG has no page CSS to read.
+* - One `getComputedStyle` snapshot per call; never hoist — values follow scheme and brand.
+* - Series 6–8 are the charts' second tier, as in Flint charts.
+*/
+const peleThemeStyle = (scheme, from) => {
+	const token = createVegaColorResolver(scheme, from);
+	const series = SERIES_TOKENS.map((name) => token(name));
+	const vars = {
+		bg: token("card"),
+		fg: token("foreground"),
+		muted: token("muted-foreground"),
+		line: token("muted-foreground"),
+		surface: token("muted"),
+		"surface-alt": token("accent"),
+		border: token("border"),
+		accent: token("primary"),
+		critical: token("destructive"),
+		error: token("destructive"),
+		font: DIAGRAM_FONT,
+		radius: "6px"
+	};
+	[...series, ...series.map((colour) => tierTwoColour(colour, scheme))].slice(0, 8).forEach((colour, index) => {
+		vars[`series-${index + 1}`] = colour;
+	});
+	return Object.entries(vars).map(([name, value]) => `--pele-${name}:${value}`).join(";");
+};
+//#endregion
+//#region src/blocks/MermaidDiagram/MermaidDiagram.tsx
+var MermaidDiagram_exports = /* @__PURE__ */ __exportAll({ MermaidDiagram: () => MermaidDiagram });
+let lucidePack = null;
+let lucidePromise = null;
+const loadLucidePack = () => {
+	lucidePromise ??= import("@iconify-json/lucide/icons.json").then((mod) => {
+		lucidePack = mod.default;
+	}).catch((err) => {
+		lucidePromise = null;
+		throw err;
+	});
+	return lucidePromise;
+};
+const lucideIcon = (ref) => {
+	if (!lucidePack || !ref.startsWith("lucide:")) return null;
+	const name = ref.slice(7);
+	return (lucidePack.icons[name] ?? lucidePack.icons[lucidePack.aliases?.[name]?.parent ?? ""])?.body;
+};
+const usesLucide = (code) => code.includes("lucide:");
+const diagramType = (code) => {
+	try {
+		return detectType(code);
+	} catch (err) {
+		console.debug("[MermaidDiagram] no diagram type detected:", err);
+		return null;
+	}
+};
+/**
+* Whether a render error means "ran out of input" rather than "bad syntax".
+*
+* - A syntax error at the last non-blank character or past it, as in every streaming frame.
+* - No type yet and at most one line after the preamble: the header itself is still arriving.
+* - Lower bound only: a real error on the last character shows as truncated until the grace period.
+*/
+const PREAMBLE = /^(?:\s*---\n[\s\S]*?\n---[^\S\n]*(?:\n|$)|[^\S\n]*%%.*(?:\n|$)|\s*\n)*/;
+const isHeaderArriving = (code) => {
+	const rest = code.replace(PREAMBLE, "");
+	if (/^\s*---\n/.test(rest)) return true;
+	return !rest.trim().includes("\n");
+};
+const isTruncatedDiagram = (err, code) => {
+	if (!(err instanceof PeleError)) return false;
+	if (err.code === "unsupported-diagram") return isHeaderArriving(code);
+	if (err.code !== "syntax") return false;
+	return code.split("\n").slice(err.line - 1).join("\n").slice(Math.max(err.column - 1, 0)).trim().length <= 1;
+};
+const TRUNCATION_GRACE_MS = 2e3;
+const svgCache = createSvgCache();
+let lastTheme = {
+	key: "",
+	style: ""
+};
+const themeStyleFor = (themeKey, scheme, scope) => {
+	if (lastTheme.key !== themeKey) lastTheme = {
+		key: themeKey,
+		style: peleThemeStyle(scheme, scope)
+	};
+	return lastTheme.style;
+};
+/**
+* The diagram for `code`, rendered synchronously.
+*
+* 1. A cached SVG for this code and theme.
+* 2. `loading` while the diagram type's chunk or the icon pack is not loaded yet.
+* 3. A fresh render, or the error Pele threw.
+*/
+const renderNow = (code, theme) => {
+	const cacheKey = diagramCacheKey(code, theme.key);
+	const cached = svgCache.get(cacheKey);
+	if (cached) return { svg: cached };
+	const type = diagramType(code);
+	if (type !== null && !registered(type) || usesLucide(code) && lucidePack === null) return { loading: type };
+	try {
+		const { svg } = render(code, {
+			fontFamily: DIAGRAM_FONT,
+			icons: lucideIcon
+		});
+		const themed = makeResponsive(svg, themeStyleFor(theme.key, theme.scheme, theme.scope));
+		svgCache.set(cacheKey, themed);
+		return { svg: themed };
+	} catch (error) {
+		return {
+			error,
+			truncated: isTruncatedDiagram(error, code)
+		};
+	}
+};
+const MermaidDiagram = ({ code, renderActions }) => {
+	const { scheme, cacheKey: themeKey, scope } = useThemeAttributes();
+	const cacheKey = diagramCacheKey(code, themeKey);
+	const [state, setState] = useState(() => ({
+		key: cacheKey,
+		outcome: renderNow(code, {
+			key: themeKey,
+			scheme,
+			scope
+		})
+	}));
+	const [gaveUpKey, setGaveUpKey] = useState(null);
+	if (state.key !== cacheKey) setState({
+		key: cacheKey,
+		outcome: renderNow(code, {
+			key: themeKey,
+			scheme,
+			scope
+		})
+	});
+	const { outcome } = state;
+	useEffect(() => {
+		if (!("loading" in outcome)) return;
+		let cancelled = false;
+		Promise.all([load(outcome.loading), usesLucide(code) ? loadLucidePack() : null]).then(() => renderNow(code, {
+			key: themeKey,
+			scheme,
+			scope
+		})).catch((error) => ({
+			error,
+			truncated: false
+		})).then((next) => {
+			if (!cancelled) setState({
+				key: cacheKey,
+				outcome: next
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		outcome,
+		code,
+		cacheKey,
+		themeKey,
+		scheme,
+		scope
+	]);
+	useEffect(() => {
+		if (!("error" in outcome)) return;
+		if (!outcome.truncated) {
+			console.error("[MermaidDiagram] render failed:", outcome.error);
+			return;
+		}
+		const timer = setTimeout(() => setGaveUpKey(cacheKey), TRUNCATION_GRACE_MS);
+		return () => clearTimeout(timer);
+	}, [outcome, cacheKey]);
+	if ("svg" in outcome) return /* @__PURE__ */ jsx(ZoomableSvg, {
+		html: outcome.svg,
+		copyText: `\`\`\`mermaid\n${code}\n\`\`\``,
+		className: "tw:my-3",
+		renderActions
+	}, code);
+	if ("error" in outcome && (!outcome.truncated || gaveUpKey === cacheKey)) return /* @__PURE__ */ jsx(DiagramSource, { code });
+	return /* @__PURE__ */ jsx(DiagramSkeleton, {});
+};
+//#endregion
+export { MermaidDiagram, MermaidDiagram_exports };
+
+//# sourceMappingURL=MermaidDiagram-Te-5gOCU.js.map

package/dist/MermaidDiagram-Te-5gOCU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidDiagram-Te-5gOCU.js","names":[],"sources":["../src/blocks/MermaidDiagram/peleTheme.ts","../src/blocks/MermaidDiagram/MermaidDiagram.tsx"],"sourcesContent":["import type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { createVegaColorResolver, SERIES_TOKENS, tierTwoColour } from '../../vega/vegaTokens';\n\nexport const DIAGRAM_FONT = 'Inter, system-ui, sans-serif';\n\n/**\n * The `--pele-*` declarations for one scheme, as a `style` attribute fragment.\n *\n * - Resolved colours, not `var()` refs: an exported SVG or PNG has no page CSS to read.\n * - One `getComputedStyle` snapshot per call; never hoist — values follow scheme and brand.\n * - Series 6–8 are the charts' second tier, as in Flint charts.\n */\nexport const peleThemeStyle = (scheme: ResolvedColorScheme, from?: Element | null): string => {\n  const token = createVegaColorResolver(scheme, from);\n  const series = SERIES_TOKENS.map((name) => token(name));\n\n  const vars: Record<string, string> = {\n    bg: token('card'),\n    fg: token('foreground'),\n    muted: token('muted-foreground'),\n    line: token('muted-foreground'),\n    surface: token('muted'),\n    'surface-alt': token('accent'),\n    border: token('border'),\n    accent: token('primary'),\n    critical: token('destructive'),\n    error: token('destructive'),\n    font: DIAGRAM_FONT,\n    radius: '6px',\n  };\n  [...series, ...series.map((colour) => tierTwoColour(colour, scheme))]\n    .slice(0, 8)\n    .forEach((colour, index) => {\n      vars[`series-${index + 1}`] = colour;\n    });\n\n  return Object.entries(vars)\n    .map(([name, value]) => `--pele-${name}:${value}`)\n    .join(';');\n};\n","import { useEffect, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { DiagramType, IconResolver } from 'pele/lazy';\nimport { detectType, load, PeleError, registered, render } from 'pele/lazy';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { useThemeAttributes } from '../../components/ThemeProvider/useThemeAttributes';\nimport { ZoomableSvg } from '../../components/ZoomableSvg';\nimport { DiagramSkeleton } from '../DiagramShared/DiagramSkeleton';\nimport { DiagramSource } from '../DiagramShared/DiagramSource';\nimport { createSvgCache, diagramCacheKey } from '../DiagramShared/svgCache';\nimport { makeResponsive } from '../DiagramShared/svgTransforms';\n\nimport { DIAGRAM_FONT, peleThemeStyle } from './peleTheme';\n\ntype IconPack = {\n  icons: Record<string, { body: string }>;\n  aliases?: Record<string, { parent: string }>;\n};\n\nlet lucidePack: IconPack | null = null;\nlet lucidePromise: Promise<void> | null = null;\n\n// The pack is a lazy local chunk, so no CDN fetch and it works under strict CSP.\nconst loadLucidePack = (): Promise<void> => {\n  lucidePromise ??= import('@iconify-json/lucide/icons.json')\n    .then((mod) => {\n      lucidePack = mod.default;\n    })\n    .catch((err: unknown) => {\n      lucidePromise = null;\n      throw err;\n    });\n  return lucidePromise;\n};\n\n// `lucide:name` refs resolve to the pack's 24×24 stroke body, which is the frame Pele draws.\nconst lucideIcon: IconResolver = (ref) => {\n  if (!lucidePack || !ref.startsWith('lucide:')) return null;\n  const name = ref.slice('lucide:'.length);\n  return (lucidePack.icons[name] ?? lucidePack.icons[lucidePack.aliases?.[name]?.parent ?? ''])\n    ?.body;\n};\n\nconst usesLucide = (code: string): boolean => code.includes('lucide:');\n\nconst diagramType = (code: string): DiagramType | null => {\n  try {\n    return detectType(code);\n  } catch (err) {\n    console.debug('[MermaidDiagram] no diagram type detected:', err);\n    return null;\n  }\n};\n\n/**\n * Whether a render error means \"ran out of input\" rather than \"bad syntax\".\n *\n * - A syntax error at the last non-blank character or past it, as in every streaming frame.\n * - No type yet and at most one line after the preamble: the header itself is still arriving.\n * - Lower bound only: a real error on the last character shows as truncated until the grace period.\n */\n// Closed front matter and `%%` directive or comment lines before the type header.\nconst PREAMBLE = /^(?:\\s*---\\n[\\s\\S]*?\\n---[^\\S\\n]*(?:\\n|$)|[^\\S\\n]*%%.*(?:\\n|$)|\\s*\\n)*/;\n\nconst isHeaderArriving = (code: string): boolean => {\n  const rest = code.replace(PREAMBLE, '');\n  // Front matter whose closing `---` has not arrived yet.\n  if (/^\\s*---\\n/.test(rest)) return true;\n  return !rest.trim().includes('\\n');\n};\n\nconst isTruncatedDiagram = (err: unknown, code: string): boolean => {\n  if (!(err instanceof PeleError)) return false;\n  if (err.code === 'unsupported-diagram') return isHeaderArriving(code);\n  if (err.code !== 'syntax') return false;\n  const tail = code\n    .split('\\n')\n    .slice(err.line - 1)\n    .join('\\n');\n  return tail.slice(Math.max(err.column - 1, 0)).trim().length <= 1;\n};\n\n// Longer than the gap between streamed chunks, short enough for an abandoned stream.\nconst TRUNCATION_GRACE_MS = 2_000;\n\nconst svgCache = createSvgCache();\n\n// Every streamed frame shares one theme, so its palette is read once per theme key.\nlet lastTheme = { key: '', style: '' };\nconst themeStyleFor = (themeKey: string, scheme: ResolvedColorScheme, scope: Element | null) => {\n  if (lastTheme.key !== themeKey) {\n    lastTheme = { key: themeKey, style: peleThemeStyle(scheme, scope) };\n  }\n  return lastTheme.style;\n};\n\ntype Outcome =\n  | { svg: string }\n  | { error: unknown; truncated: boolean }\n  | { loading: DiagramType | null };\n\ntype Theme = { key: string; scheme: ResolvedColorScheme; scope: Element | null };\n\n/**\n * The diagram for `code`, rendered synchronously.\n *\n * 1. A cached SVG for this code and theme.\n * 2. `loading` while the diagram type's chunk or the icon pack is not loaded yet.\n * 3. A fresh render, or the error Pele threw.\n */\nconst renderNow = (code: string, theme: Theme): Outcome => {\n  const cacheKey = diagramCacheKey(code, theme.key);\n  const cached = svgCache.get(cacheKey);\n  if (cached) return { svg: cached };\n  const type = diagramType(code);\n  if ((type !== null && !registered(type)) || (usesLucide(code) && lucidePack === null)) {\n    return { loading: type };\n  }\n  try {\n    const { svg } = render(code, { fontFamily: DIAGRAM_FONT, icons: lucideIcon });\n    const themed = makeResponsive(svg, themeStyleFor(theme.key, theme.scheme, theme.scope));\n    svgCache.set(cacheKey, themed);\n    return { svg: themed };\n  } catch (error) {\n    return { error, truncated: isTruncatedDiagram(error, code) };\n  }\n};\n\ntype Props = {\n  /** Mermaid source. */\n  code: string;\n  /** Extra toolbar controls forwarded to `ZoomableSvg`; receives the sanitized SVG. */\n  renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const MermaidDiagram = ({ code, renderActions }: Props) => {\n  // - Scheme and key come from one read, so a palette is never cached under the wrong scheme.\n  // - `scope` is the element tokens are read off (`null` = `<html>`) and is part of `themeKey`.\n  const { scheme, cacheKey: themeKey, scope } = useThemeAttributes();\n  const cacheKey = diagramCacheKey(code, themeKey);\n\n  const [state, setState] = useState(() => ({\n    key: cacheKey,\n    outcome: renderNow(code, { key: themeKey, scheme, scope }),\n  }));\n  const [gaveUpKey, setGaveUpKey] = useState<string | null>(null);\n\n  // Render-phase reset avoids a one-frame flash of the previous diagram.\n  if (state.key !== cacheKey) {\n    setState({ key: cacheKey, outcome: renderNow(code, { key: themeKey, scheme, scope }) });\n  }\n  const { outcome } = state;\n\n  useEffect(() => {\n    if (!('loading' in outcome)) return;\n    let cancelled = false;\n    Promise.all([load(outcome.loading), usesLucide(code) ? loadLucidePack() : null])\n      .then(() => renderNow(code, { key: themeKey, scheme, scope }))\n      .catch((error: unknown) => ({ error, truncated: false }))\n      .then((next) => {\n        if (!cancelled) setState({ key: cacheKey, outcome: next });\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [outcome, code, cacheKey, themeKey, scheme, scope]);\n\n  useEffect(() => {\n    if (!('error' in outcome)) return;\n    if (!outcome.truncated) {\n      console.error('[MermaidDiagram] render failed:', outcome.error);\n      return;\n    }\n    // A streaming diagram is truncated at almost every frame; one that stops arriving shows its source.\n    const timer = setTimeout(() => setGaveUpKey(cacheKey), TRUNCATION_GRACE_MS);\n    return () => clearTimeout(timer);\n  }, [outcome, cacheKey]);\n\n  if ('svg' in outcome) {\n    return (\n      <ZoomableSvg\n        key={code}\n        html={outcome.svg}\n        copyText={`\\`\\`\\`mermaid\\n${code}\\n\\`\\`\\``}\n        className=\"tw:my-3\"\n        renderActions={renderActions}\n      />\n    );\n  }\n\n  if ('error' in outcome && (!outcome.truncated || gaveUpKey === cacheKey)) {\n    return <DiagramSource code={code} />;\n  }\n\n  return <DiagramSkeleton />;\n};\n"],"mappings":"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"}

package/dist/{Modal-DQIauzar.js → Modal-CbUz-5YH.js}

@@ -1,9 +1,7 @@
 import { cn } from "./classNames-DcGnTh2N.js";
-import { useArgoDesign } from "./context-U293r3v-.js";
 import { X } from "./icons-ZIeZXXS7.js";
-import { Button } from "./Button-D2JqBAq7.js";
-import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-CTECVgL8.js";
-import { Separator } from "./internal/components/Separator.js";
+import { Button } from "./Button-BNkyYU8u.js";
+import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-cy0Ht9VY.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Content, Portal, Root, Trigger } from "@radix-ui/react-dialog";
@@ -14,22 +12,21 @@ import { Close, Content, Portal, Root, Trigger } from "@radix-ui/react-dialog";
 */
 const ModalBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "modal-body",
-	className: cn("tw:flex-1", "tw:overflow-y-auto", "tw:group-data-[argo=true]/modal:scroll-fade-y", "tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", "tw:py-1", "tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4", "tw:[&_svg]:shrink-0", className),
+	className: cn("tw:flex-1", "tw:overflow-y-auto", "tw:scroll-fade-y", "tw:px-4", "tw:py-1", "tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4", "tw:[&_svg]:shrink-0", className),
 	...props
 });
 //#endregion
 //#region src/components/Modal/ModalContent.tsx
-const ModalContent = ({ size = "medium", className, children, onEscapeKeyDown, ...props }) => {
-	const renderArgo = useArgoDesign();
+const ModalContent = ({ size = "medium", align = "center", className, children, onEscapeKeyDown, ...props }) => {
 	const handleEscapeKeyDown = (event) => {
 		event.stopPropagation();
 		onEscapeKeyDown?.(event);
 	};
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsx(Content, {
 		...props,
-		"data-argo": renderArgo,
 		"data-size": size,
-		className: cn("tailwindcss-preflight", "tw:group/modal", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-[1051]", "tw:data-[argo=false]:top-20", "tw:data-[argo=true]:top-1/2", "tw:data-[argo=true]:-translate-y-1/2", "tw:w-full", "tw:max-w-2xl", "tw:max-h-[calc(100vh-2*theme(spacing.20))]", "tw:flex", "tw:flex-col", "tw:gap-4", "tw:data-[argo=false]:rounded-lg", "tw:data-[argo=true]:rounded-modal", "tw:bg-card", "tw:text-card-foreground", "tw:data-[argo=false]:py-8", "tw:data-[argo=true]:py-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-[argo=false]:data-[state=open]:zoom-in-80", "tw:data-[argo=false]:data-[state=open]:slide-in-from-top-[48%]", "tw:data-[argo=false]:data-[state=closed]:zoom-out-80", "tw:data-[argo=false]:data-[state=closed]:slide-out-to-top-[48%]", "tw:data-[argo=true]:data-[state=open]:zoom-in-95", "tw:data-[argo=true]:data-[state=closed]:zoom-out-95", {
+		"data-align": align,
+		className: cn("tailwindcss-preflight", "tw:group/modal", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-[1051]", "tw:top-1/2", "tw:-translate-y-1/2", "tw:data-[align=top]:top-20", "tw:data-[align=top]:translate-y-0", "tw:w-full", "tw:max-w-2xl", "tw:max-h-[calc(100vh-2*theme(spacing.20))]", "tw:flex", "tw:flex-col", "tw:gap-4", "tw:rounded-modal", "tw:bg-card", "tw:text-card-foreground", "tw:py-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", {
 			"tw:max-w-[480px]": size === "small",
 			"tw:max-w-4xl": size === "large"
 		}, className),
@@ -47,7 +44,7 @@ const ModalContent = ({ size = "medium", className, children, onEscapeKeyDown, .
 */
 const ModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	...props,
-	className: cn("tw:flex", "tw:items-center", "tw:justify-end", "tw:gap-2", "tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", className)
+	className: cn("tw:flex", "tw:items-center", "tw:justify-end", "tw:gap-2", "tw:px-4", className)
 });
 //#endregion
 //#region src/components/Modal/ModalActions.tsx
@@ -56,7 +53,7 @@ const ModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 * close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.
 */
 const ModalActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("tw:col-start-3", "tw:row-start-1", "tw:self-start", "tw:flex", "tw:items-center", "tw:gap-1", "tw:group-data-[argo=true]/modal:ml-3", className),
+	className: cn("tw:col-start-3", "tw:row-start-1", "tw:self-start", "tw:flex", "tw:items-center", "tw:gap-1", "tw:ml-3", className),
 	...props
 });
 //#endregion
@@ -65,7 +62,7 @@ const ModalActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 const ModalHeader = ({ className, icon, description, "aria-description": ariaDescription, actions, hideCloseIcon = false, children, ...props }) => /* @__PURE__ */ jsxs("div", {
 	...props,
 	"data-slot": "modal-header",
-	className: cn("tw:grid", "tw:grid-cols-[auto_1fr_auto]", "tw:items-center", "tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", className),
+	className: cn("tw:grid", "tw:grid-cols-[auto_1fr_auto]", "tw:items-center", "tw:px-4", className),
 	children: [
 		icon,
 		children && /* @__PURE__ */ jsx(ModalTitle, {
@@ -86,10 +83,6 @@ const ModalHeader = ({ className, icon, description, "aria-description": ariaDes
 		(description || ariaDescription) && /* @__PURE__ */ jsx(ModalDescription, {
 			className: cn("tw:col-start-1", "tw:col-end-4", "tw:row-start-2", description ? "tw:mt-1" : "tw:sr-only"),
 			children: description ?? ariaDescription
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: cn("tw:col-start-1", "tw:col-end-4", "tw:mt-5", "tw:hidden", "tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body])_&]:block", "tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body]_[data-slot=tabs-root])_&]:!hidden"),
-			children: /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })
 		})
 	]
 });
@@ -106,31 +99,20 @@ const NAMED_COLORS = /* @__PURE__ */ new Set([
 /**
 * Status-coloured icon for `Modal`, authored inside `Modal.Header`; remote images use `Modal.Image`.
 *
-* - Legacy: solid circular badge, absolutely docked to `Modal.Content`'s top-left.
-* - Argo (`data-argo` on `Modal.Content`): soft-tinted inline badge next to the title.
-* - CSS (`group-data-[argo=true]/modal:`) toggles the two, no context.
+* - Soft-tinted inline badge in the header grid's first column, next to the title.
 * - `color` is categorical (`red` destructive … `violet` agent), fixed across brand themes.
 */
 const ModalIcon = ({ color, icon }) => {
 	const customColor = color && !NAMED_COLORS.has(color) ? color : void 0;
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "modal-icon",
-		className: cn("tw:flex", "tw:shrink-0", "tw:items-center", "tw:justify-center", "tw:[&_svg]:aspect-square", "tw:group-data-[argo=false]/modal:absolute", "tw:group-data-[argo=false]/modal:top-0", "tw:group-data-[argo=false]/modal:left-8", "tw:group-data-[argo=false]/modal:-translate-y-1/2", "tw:group-data-[argo=false]/modal:size-12", "tw:group-data-[argo=false]/modal:rounded-full", "tw:group-data-[argo=false]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-6", "tw:group-data-[argo=true]/modal:col-start-1", "tw:group-data-[argo=true]/modal:row-start-1", "tw:group-data-[argo=true]/modal:self-start", "tw:group-data-[argo=true]/modal:mr-3", "tw:group-data-[argo=true]/modal:size-8", "tw:group-data-[argo=true]/modal:rounded", "tw:group-data-[argo=true]/modal:overflow-hidden", "tw:group-data-[argo=true]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-5", {
-			"tw:group-data-[argo=false]/modal:bg-warning-500": color === "orange",
-			"tw:group-data-[argo=false]/modal:bg-blue-500": color === "blue",
-			"tw:group-data-[argo=false]/modal:bg-green-500": color === "green",
-			"tw:group-data-[argo=false]/modal:bg-error-500": color === "red",
-			"tw:group-data-[argo=false]/modal:bg-neutral-150": color === "gray",
-			"tw:group-data-[argo=false]/modal:bg-purple-100": color === "violet",
-			"tw:group-data-[argo=false]/modal:text-white": color !== "violet",
-			"tw:group-data-[argo=false]/modal:text-purple-500": color === "violet"
-		}, {
-			"tw:group-data-[argo=true]/modal:bg-warning-100 tw:group-data-[argo=true]/modal:text-warning-500": color === "orange",
-			"tw:group-data-[argo=true]/modal:bg-blue-100 tw:group-data-[argo=true]/modal:text-blue-600": color === "blue",
-			"tw:group-data-[argo=true]/modal:bg-green-100 tw:group-data-[argo=true]/modal:text-green-900": color === "green",
-			"tw:group-data-[argo=true]/modal:bg-error-100 tw:group-data-[argo=true]/modal:text-error-500": color === "red",
-			"tw:group-data-[argo=true]/modal:bg-neutral-100 tw:group-data-[argo=true]/modal:text-neutral-500": color === "gray",
-			"tw:group-data-[argo=true]/modal:bg-purple-100 tw:group-data-[argo=true]/modal:text-purple-500": color === "violet"
+		className: cn("tw:flex", "tw:shrink-0", "tw:items-center", "tw:justify-center", "tw:[&_svg]:aspect-square", "tw:col-start-1", "tw:row-start-1", "tw:self-start", "tw:mr-3", "tw:size-8", "tw:rounded", "tw:overflow-hidden", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-5", {
+			"tw:bg-warning-100 tw:text-warning-500 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200": color === "orange",
+			"tw:bg-blue-100 tw:text-blue-600 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200": color === "blue",
+			"tw:bg-green-100 tw:text-green-900 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200": color === "green",
+			"tw:bg-error-100 tw:text-error-500 tw:[[data-theme=dark]_&]:bg-error-900 tw:[[data-theme=dark]_&]:text-error-200": color === "red",
+			"tw:bg-neutral-100 tw:text-neutral-500 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300": color === "gray",
+			"tw:bg-purple-100 tw:text-purple-500 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200": color === "violet"
 		}, { "tw:text-white": !!customColor }),
 		style: customColor ? { backgroundColor: customColor } : void 0,
 		children: icon
@@ -144,7 +126,7 @@ const ModalImage = ({ src, alt = "" }) => {
 	if (hasImageError) return null;
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "modal-image",
-		className: cn("tw:shrink-0", "tw:overflow-hidden", "tw:group-data-[argo=false]/modal:absolute", "tw:group-data-[argo=false]/modal:top-0", "tw:group-data-[argo=false]/modal:left-8", "tw:group-data-[argo=false]/modal:-translate-y-1/2", "tw:group-data-[argo=false]/modal:size-12", "tw:group-data-[argo=false]/modal:rounded-full", "tw:group-data-[argo=true]/modal:flex", "tw:group-data-[argo=true]/modal:col-start-1", "tw:group-data-[argo=true]/modal:row-start-1", "tw:group-data-[argo=true]/modal:self-start", "tw:group-data-[argo=true]/modal:mr-3", "tw:group-data-[argo=true]/modal:items-center", "tw:group-data-[argo=true]/modal:justify-center", "tw:group-data-[argo=true]/modal:rounded", "tw:group-data-[argo=true]/modal:size-8"),
+		className: cn("tw:shrink-0", "tw:overflow-hidden", "tw:flex", "tw:col-start-1", "tw:row-start-1", "tw:self-start", "tw:mr-3", "tw:items-center", "tw:justify-center", "tw:rounded", "tw:size-8"),
 		children: /* @__PURE__ */ jsx("img", {
 			src,
 			alt,
@@ -177,4 +159,4 @@ Modal.Overlay = ModalOverlay;
 //#endregion
 export { Modal };
 
-//# sourceMappingURL=Modal-DQIauzar.js.map
+//# sourceMappingURL=Modal-CbUz-5YH.js.map

package/dist/Modal-CbUz-5YH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-CbUz-5YH.js","names":[],"sources":["../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalContent.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/ModalActions.tsx","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalIcon.tsx","../src/components/Modal/ModalImage.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/** Props for `Modal.Body`. Accepts all `<div>` attributes; `as=\"form\"` is reserved for future use. */\ntype Props = ComponentProps<'div'> & {\n  as?: 'form';\n};\n\n/**\n * Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.\n * Takes available height inside `Modal.Content` and scrolls when content overflows.\n */\nexport const ModalBody = ({ className, ...props }: Props) => (\n  <div\n    data-slot=\"modal-body\"\n    className={cn(\n      // scrollable body - takes available space and scrolls when content overflows\n      'tw:flex-1',\n      'tw:overflow-y-auto',\n\n      // soft top/bottom edge fade in place of header/footer separators (pure-CSS utility)\n      'tw:scroll-fade-y',\n\n      // Own horizontal padding, matching Header/Footer so content edges align (ModalContent adds none)\n      'tw:px-4',\n      'tw:py-1',\n\n      // normalize nested Lucide icon sizing, matching Popover/HoverCard/Alert content surfaces\n      \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n      'tw:[&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Content> & {\n  size?: 'small' | 'medium' | 'large';\n  /** `top` keeps a form that changes height in place; ignored by the legacy brand (always top-anchored). */\n  align?: 'center' | 'top';\n};\n\nexport const ModalContent = ({\n  size = 'medium',\n  align = 'center',\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {\n    // Keeps parent modals (e.g. FullScreenModal) open\n    event.stopPropagation();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal>\n      <ModalOverlay>\n        <Content\n          // props first so callers can't override the computed data-size\n          {...props}\n          data-size={size}\n          data-align={align}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:group/modal',\n\n            'tw:fixed',\n            'tw:left-1/2',\n            'tw:-translate-x-1/2',\n            'tw:z-[1051]',\n\n            'tw:top-1/2',\n            'tw:-translate-y-1/2',\n            'tw:data-[align=top]:top-20',\n            'tw:data-[align=top]:translate-y-0',\n\n            'tw:w-full',\n            'tw:max-w-2xl',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n            'tw:rounded-modal',\n            'tw:bg-card',\n            'tw:text-card-foreground',\n\n            // Vertical padding here survives an omitted Header/Footer; horizontal is theirs, so the\n            // Body scrollbar sits at the modal edge.\n            'tw:py-4',\n\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\n            // No -1/2 slide classes: centring uses `translate`, the animation `transform`; they\n            // compose, so a -50% slide would stack to -100% and fly in from the top-left.\n            'tw:data-[state=open]:zoom-in-95',\n            'tw:data-[state=closed]:zoom-out-95',\n\n            {\n              'tw:max-w-[480px]': size === 'small',\n              'tw:max-w-4xl': size === 'large',\n            },\n\n            className,\n          )}\n          onEscapeKeyDown={handleEscapeKeyDown}\n        >\n          {children}\n        </Content>\n      </ModalOverlay>\n    </Portal>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\n/**\n * The modal's action row.\n *\n * - A child that should fill the row carries `tw:w-full` itself; the footer is already full width.\n * - tailwind-merge replaces only within a group: `tw:flex-col` keeps `items-center`, so add `tw:items-stretch`.\n */\nexport const ModalFooter = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    className={cn('tw:flex', 'tw:items-center', 'tw:justify-end', 'tw:gap-2', 'tw:px-4', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the\n * close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.\n */\nexport const ModalActions = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:col-start-3',\n      'tw:row-start-1',\n      'tw:self-start',\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-1',\n      // gutter from the title, carried here so the header grid needs no column gap\n      'tw:ml-3',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\nimport { ModalActions } from './ModalActions';\nimport { ModalDescription } from './ModalDescription';\nimport { ModalTitle } from './ModalTitle';\n\ntype Props = {\n  /** Status icon slot — `<Modal.Icon />` or `<Modal.Image />`. */\n  icon?: ReactNode;\n  /** Visible subtitle below the title (also fills `aria-describedby`). */\n  description?: ReactNode;\n  /** Screen-reader-only description; fills `aria-describedby` without rendering visibly. */\n  'aria-description'?: string;\n  /** Controls rendered top-right, before the close icon. */\n  actions?: ReactNode;\n  /** Hide the top-right close icon. */\n  hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\n/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */\nexport const ModalHeader = ({\n  className,\n  icon,\n  description,\n  'aria-description': ariaDescription,\n  actions,\n  hideCloseIcon = false,\n  children,\n  ...props\n}: Props) => (\n  <div\n    {...props}\n    data-slot=\"modal-header\"\n    className={cn(\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr_auto]',\n      'tw:items-center',\n      'tw:px-4',\n      className,\n    )}\n  >\n    {icon}\n\n    {children && <ModalTitle className=\"tw:col-start-2 tw:row-start-1\">{children}</ModalTitle>}\n    {(actions || !hideCloseIcon) && (\n      <ModalActions>\n        {actions}\n        {!hideCloseIcon && (\n          <Close asChild>\n            <Button variant=\"invisible\" size=\"icon-sm\">\n              <X />\n              <span className=\"tw:sr-only\">Close</span>\n            </Button>\n          </Close>\n        )}\n      </ModalActions>\n    )}\n    {(description || ariaDescription) && (\n      <ModalDescription\n        className={cn(\n          'tw:col-start-1',\n          'tw:col-end-4',\n          'tw:row-start-2',\n          description ? 'tw:mt-1' : 'tw:sr-only',\n        )}\n      >\n        {description ?? ariaDescription}\n      </ModalDescription>\n    )}\n  </div>\n);\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';\n\ntype Props = {\n  color: NamedColor | (string & {});\n  icon: ReactNode;\n};\n\nconst NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);\n\n/**\n * Status-coloured icon for `Modal`, authored inside `Modal.Header`; remote images use `Modal.Image`.\n *\n * - Soft-tinted inline badge in the header grid's first column, next to the title.\n * - `color` is categorical (`red` destructive … `violet` agent), fixed across brand themes.\n */\nexport const ModalIcon = ({ color, icon }: Props) => {\n  const customColor = color && !NAMED_COLORS.has(color) ? color : undefined;\n\n  return (\n    <span\n      data-slot=\"modal-icon\"\n      className={cn(\n        'tw:flex',\n        'tw:shrink-0',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:[&_svg]:aspect-square',\n        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:mr-3',\n        'tw:size-8',\n        'tw:rounded',\n        'tw:overflow-hidden',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n\n        {\n          'tw:bg-warning-100 tw:text-warning-500 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200':\n            color === 'orange',\n          'tw:bg-blue-100 tw:text-blue-600 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200':\n            color === 'blue',\n          'tw:bg-green-100 tw:text-green-900 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200':\n            color === 'green',\n          'tw:bg-error-100 tw:text-error-500 tw:[[data-theme=dark]_&]:bg-error-900 tw:[[data-theme=dark]_&]:text-error-200':\n            color === 'red',\n          'tw:bg-neutral-100 tw:text-neutral-500 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300':\n            color === 'gray',\n          'tw:bg-purple-100 tw:text-purple-500 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200':\n            color === 'violet',\n        },\n\n        // custom (non-named) colour\n        { 'tw:text-white': !!customColor },\n      )}\n      style={customColor ? { backgroundColor: customColor } : undefined}\n    >\n      {icon}\n    </span>\n  );\n};\n","import { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = {\n  src: string;\n  /** Accessible alt text. Defaults to `\"\"` (decorative) — provide it when the image carries meaning. */\n  alt?: string;\n};\n\nexport const ModalImage = ({ src, alt = '' }: Props) => {\n  const [hasImageError, setHasImageError] = useState(false);\n\n  // Reset the error state when the source changes, so a reused badge (new logo, or a retry after a\n  // transient failure) isn't permanently hidden by an earlier onError.\n  useEffect(() => setHasImageError(false), [src]);\n\n  if (hasImageError) return null;\n\n  return (\n    <span\n      data-slot=\"modal-image\"\n      className={cn(\n        'tw:shrink-0',\n        'tw:overflow-hidden',\n\n        // inline badge in the header grid's first column\n        'tw:flex',\n        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:mr-3',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:rounded',\n        'tw:size-8',\n      )}\n    >\n      <img\n        src={src}\n        alt={alt}\n        className=\"tw:size-full tw:object-contain\"\n        onError={() => setHasImageError(true)}\n      />\n    </span>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { ModalBody } from './ModalBody';\nimport { ModalContent } from './ModalContent';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalIcon } from './ModalIcon';\nimport { ModalImage } from './ModalImage';\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Root>;\n\n/**\n * Blocking dialog the user must act on before continuing. Built on Radix Dialog.\n *\n * - Not for side editing (`Sheet`), anchored confirms (`Popconfirm`) or hover previews (`HoverCard`).\n * - `Modal.Content` wraps Header + Body + Footer; a form's `FormBody` goes in Body, its buttons in Footer.\n *\n * @see RECIPES.md#modal-form\n * @see RECIPES.md#confirm-dialog\n */\nexport const Modal = (props: Props) => <Root {...props} />;\n\nModal.Close = Close;\nModal.Trigger = Trigger;\n\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Icon = ModalIcon;\nModal.Image = ModalImage;\nModal.Footer = ModalFooter;\nModal.Header = ModalHeader;\nModal.Overlay = ModalOverlay;\n"],"mappings":"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"}

package/dist/{ModalTitle-CTECVgL8.js → ModalTitle-cy0Ht9VY.js}

@@ -12,7 +12,7 @@ const ModalOverlay = ({ ref, className, disableTransition = false, ...props }) =
 //#endregion
 //#region src/components/Modal/ModalDescription.tsx
 const ModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
-	className: cn("tw:wrap-anywhere", "tw:text-sm", "tw:font-sans", "tw:tracking-normal", "tw:font-normal", "tw:text-neutral-400", className),
+	className: cn("tw:wrap-anywhere", "tw:text-sm", "tw:font-sans", "tw:tracking-normal", "tw:font-normal", "tw:text-muted-foreground", className),
 	...props
 });
 //#endregion
@@ -25,4 +25,4 @@ const ModalTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Ti
 //#endregion
 export { ModalDescription, ModalOverlay, ModalTitle };
 
-//# sourceMappingURL=ModalTitle-CTECVgL8.js.map
+//# sourceMappingURL=ModalTitle-cy0Ht9VY.js.map

package/dist/{ModalTitle-CTECVgL8.js.map → ModalTitle-cy0Ht9VY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ModalTitle-CTECVgL8.js","names":[],"sources":["../src/components/Modal/ModalOverlay.tsx","../src/components/Modal/ModalDescription.tsx","../src/components/Modal/ModalTitle.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Overlay } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Overlay> & {\n  disableTransition?: boolean;\n};\n\nexport const ModalOverlay = ({ ref, className, disableTransition = false, ...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\n      // closing animation\n      'tw:data-[state=closed]:duration-500',\n      'tw:data-[state=closed]:fade-out-0',\n      {\n        'tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out': !disableTransition,\n      },\n      className,\n    )}\n    onClick={(event) => event.stopPropagation()}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof DialogPrimitive.Description>;\n\nexport const ModalDescription = ({ className, ...props }: Props) => (\n  <DialogPrimitive.Description\n    className={cn(\n      // `wrap-anywhere` because the slot routinely carries an identifier — a Storage table id, a\n      // fully-qualified name — which offers no break opportunity and paints outside the frame\n      // without one. `ModalTitle` carries it for the same reason.\n      'tw:wrap-anywhere',\n      'tw:text-sm',\n      'tw:font-sans',\n      'tw:tracking-normal',\n      'tw:font-normal',\n      'tw:text-neutral-400',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Title } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Title>;\n\nexport const ModalTitle = ({ children, className, ...props }: Props) => (\n  <Title\n    {...props}\n    className={cn('tw:flex-1', 'tw:wrap-anywhere', 'tw:text-base', 'tw:font-semibold', className)}\n  >\n    {children}\n  </Title>\n);\n"],"mappings":";;;;;AASA,MAAa,gBAAgB,EAAE,KAAK,WAAW,oBAAoB,OAAO,GAAG,YAC3E,oBAAC,SAAD;CACE,GAAI;CACC;CACL,WAAW,GAET,YACA,cACA,eAGA,eAGA,qCACA,kCAGA,uCACA,qCACA,EACE,sEAAsE,CAAC,kBACzE,GACA,SACF;CACA,UAAU,UAAU,MAAM,gBAAgB;AAC3C,CAAA;;;AC5BH,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAC/C,oBAAC,gBAAgB,aAAjB;CACE,WAAW,GAIT,oBACA,cACA,gBACA,sBACA,kBACA,uBACA,SACF;CACA,GAAI;AACL,CAAA;;;ACfH,MAAa,cAAc,EAAE,UAAU,WAAW,GAAG,YACnD,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,GAAG,aAAa,oBAAoB,gBAAgB,oBAAoB,SAAS;CAE3F;AACI,CAAA"}
+{"version":3,"file":"ModalTitle-cy0Ht9VY.js","names":[],"sources":["../src/components/Modal/ModalOverlay.tsx","../src/components/Modal/ModalDescription.tsx","../src/components/Modal/ModalTitle.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Overlay } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Overlay> & {\n  disableTransition?: boolean;\n};\n\nexport const ModalOverlay = ({ ref, className, disableTransition = false, ...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\n      // closing animation\n      'tw:data-[state=closed]:duration-500',\n      'tw:data-[state=closed]:fade-out-0',\n      {\n        'tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out': !disableTransition,\n      },\n      className,\n    )}\n    onClick={(event) => event.stopPropagation()}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof DialogPrimitive.Description>;\n\nexport const ModalDescription = ({ className, ...props }: Props) => (\n  <DialogPrimitive.Description\n    className={cn(\n      // `wrap-anywhere` because the slot routinely carries an identifier — a Storage table id, a\n      // fully-qualified name — which offers no break opportunity and paints outside the frame\n      // without one. `ModalTitle` carries it for the same reason.\n      'tw:wrap-anywhere',\n      'tw:text-sm',\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 { ComponentProps } from 'react';\nimport { Title } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Title>;\n\nexport const ModalTitle = ({ children, className, ...props }: Props) => (\n  <Title\n    {...props}\n    className={cn('tw:flex-1', 'tw:wrap-anywhere', 'tw:text-base', 'tw:font-semibold', className)}\n  >\n    {children}\n  </Title>\n);\n"],"mappings":";;;;;AASA,MAAa,gBAAgB,EAAE,KAAK,WAAW,oBAAoB,OAAO,GAAG,YAC3E,oBAAC,SAAD;CACE,GAAI;CACC;CACL,WAAW,GAET,YACA,cACA,eAGA,eAGA,qCACA,kCAGA,uCACA,qCACA,EACE,sEAAsE,CAAC,kBACzE,GACA,SACF;CACA,UAAU,UAAU,MAAM,gBAAgB;AAC3C,CAAA;;;AC5BH,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAC/C,oBAAC,gBAAgB,aAAjB;CACE,WAAW,GAIT,oBACA,cACA,gBACA,sBACA,kBACA,4BACA,SACF;CACA,GAAI;AACL,CAAA;;;ACfH,MAAa,cAAc,EAAE,UAAU,WAAW,GAAG,YACnD,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,GAAG,aAAa,oBAAoB,gBAAgB,oBAAoB,SAAS;CAE3F;AACI,CAAA"}

package/dist/{MultiActionButtonGroup-xKqiucAN.js → MultiActionButtonGroup-Dzig87s1.js}

@@ -1,6 +1,6 @@
 import { cn } from "./classNames-DcGnTh2N.js";
-import { Tooltip } from "./utils-p6tjltbX.js";
-import { Button } from "./Button-D2JqBAq7.js";
+import { Tooltip } from "./utils-DwC9u0tM.js";
+import { Button } from "./Button-BNkyYU8u.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/blocks/MultiActionButtonGroup/MultiActionButton.tsx
@@ -30,4 +30,4 @@ MultiActionButtonGroup.Button = MultiActionButton;
 //#endregion
 export { MultiActionButtonGroup };
 
-//# sourceMappingURL=MultiActionButtonGroup-xKqiucAN.js.map
+//# sourceMappingURL=MultiActionButtonGroup-Dzig87s1.js.map

package/dist/{MultiActionButtonGroup-xKqiucAN.js.map → MultiActionButtonGroup-Dzig87s1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButtonGroup-xKqiucAN.js","names":[],"sources":["../src/blocks/MultiActionButtonGroup/MultiActionButton.tsx","../src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Tooltip } from '../../components/Tooltip';\n\ntype Props = {\n  disabled?: boolean;\n  icon: ReactNode;\n  isLoading?: boolean;\n  label: string;\n  onClick: ComponentProps<typeof Button>['onClick'];\n  tooltipContent: ReactNode;\n  tooltipVariant?: ComponentProps<typeof Tooltip>['variant'];\n  'data-testid'?: string;\n};\n\nexport const MultiActionButton = ({\n  disabled,\n  icon,\n  isLoading,\n  label,\n  onClick,\n  tooltipContent,\n  tooltipVariant,\n  'data-testid': dataTestId,\n}: Props) => (\n  <Tooltip placement=\"top\" tooltip={tooltipContent} triggerAsChild variant={tooltipVariant}>\n    <Button\n      disabled={disabled}\n      isLoading={isLoading}\n      aria-label={label}\n      onClick={onClick}\n      variant=\"invisible\"\n      size=\"icon\"\n      data-testid={dataTestId}\n    >\n      {icon}\n    </Button>\n  </Tooltip>\n);\n","import type { PropsWithChildren } from 'react';\n\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { cn } from '../../utils';\n\nimport { MultiActionButton } from './MultiActionButton';\n\ntype Props = {\n  className?: string;\n} & PropsWithChildren;\n\nexport const MultiActionButtonGroup = ({ children, className }: Props) => (\n  <ButtonGroup className={cn('tw:text-nowrap', className)}>{children}</ButtonGroup>\n);\n\nMultiActionButtonGroup.Button = MultiActionButton;\n"],"mappings":";;;;;;AAgBA,MAAa,qBAAqB,EAChC,UACA,MACA,WACA,OACA,SACA,gBACA,gBACA,eAAe,iBAEf,oBAAC,SAAD;CAAS,WAAU;CAAM,SAAS;CAAgB,gBAAA;CAAe,SAAS;CACxE,UAAA,oBAAC,QAAD;EACY;EACC;EACX,cAAY;EACH;EACT,SAAQ;EACR,MAAK;EACL,eAAa;EAEZ,UAAA;CACK,CAAA;AACD,CAAA;;;AC3BX,MAAa,0BAA0B,EAAE,UAAU,gBACjD,oBAAC,aAAD;CAAa,WAAW,GAAG,kBAAkB,SAAS;CAAI;AAAsB,CAAA;AAGlF,uBAAuB,SAAS"}
+{"version":3,"file":"MultiActionButtonGroup-Dzig87s1.js","names":[],"sources":["../src/blocks/MultiActionButtonGroup/MultiActionButton.tsx","../src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Tooltip } from '../../components/Tooltip';\n\ntype Props = {\n  disabled?: boolean;\n  icon: ReactNode;\n  isLoading?: boolean;\n  label: string;\n  onClick: ComponentProps<typeof Button>['onClick'];\n  tooltipContent: ReactNode;\n  tooltipVariant?: ComponentProps<typeof Tooltip>['variant'];\n  'data-testid'?: string;\n};\n\nexport const MultiActionButton = ({\n  disabled,\n  icon,\n  isLoading,\n  label,\n  onClick,\n  tooltipContent,\n  tooltipVariant,\n  'data-testid': dataTestId,\n}: Props) => (\n  <Tooltip placement=\"top\" tooltip={tooltipContent} triggerAsChild variant={tooltipVariant}>\n    <Button\n      disabled={disabled}\n      isLoading={isLoading}\n      aria-label={label}\n      onClick={onClick}\n      variant=\"invisible\"\n      size=\"icon\"\n      data-testid={dataTestId}\n    >\n      {icon}\n    </Button>\n  </Tooltip>\n);\n","import type { PropsWithChildren } from 'react';\n\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { cn } from '../../utils';\n\nimport { MultiActionButton } from './MultiActionButton';\n\ntype Props = {\n  className?: string;\n} & PropsWithChildren;\n\nexport const MultiActionButtonGroup = ({ children, className }: Props) => (\n  <ButtonGroup className={cn('tw:text-nowrap', className)}>{children}</ButtonGroup>\n);\n\nMultiActionButtonGroup.Button = MultiActionButton;\n"],"mappings":";;;;;;AAgBA,MAAa,qBAAqB,EAChC,UACA,MACA,WACA,OACA,SACA,gBACA,gBACA,eAAe,iBAEf,oBAAC,SAAD;CAAS,WAAU;CAAM,SAAS;CAAgB,gBAAA;CAAe,SAAS;CACxE,UAAA,oBAAC,QAAD;EACY;EACC;EACX,cAAY;EACH;EACT,SAAQ;EACR,MAAK;EACL,eAAa;EAEZ,UAAA;CACK,CAAA;AACD,CAAA;;;AC3BX,MAAa,0BAA0B,EAAE,UAAU,gBACjD,oBAAC,aAAD;CAAa,WAAW,GAAG,kBAAkB,SAAS;CAAI;AAAsB,CAAA;AAGlF,uBAAuB,SAAS"}

package/dist/{Navbar-CtVYcRFn.js → Navbar-DHUS7XiU.js}

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-DcGnTh2N.js";
 import { Search } from "./icons-ZIeZXXS7.js";
 import { ScrollArea } from "./internal/components/ScrollArea.js";
-import { BrandLogo } from "./BrandLogo-BfITD0im.js";
+import { BrandLogo } from "./BrandLogo-DkESE19K.js";
 import { Root, Slot, Slottable } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -322,4 +322,4 @@ Navbar.MenuAvatar = NavbarMenuAvatar;
 //#endregion
 export { Navbar };
 
-//# sourceMappingURL=Navbar-CtVYcRFn.js.map
+//# sourceMappingURL=Navbar-DHUS7XiU.js.map