@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.15

package/dist/components/Form/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.js","names":[],"sources":["../../../src/components/Form/validate.ts"],"sourcesContent":["/**\n * Rule engine: a behavioural port of the slice of async-validator that\n * rc-field-form uses, for the rule keys `required`, `message`, `validator`,\n * `type`, `max`, `min`, `pattern`, `warningOnly` and `whitespace`, and the\n * `type` values `number`, `string`, `email`, `url` and `object`.\n *\n * Two upstream quirks are reproduced on purpose, because the messages users\n * see depend on them:\n *\n * 1. Method dispatch by key shape. async-validator picks its validator from\n *    `Object.keys(rule)` minus `message`: exactly `['required']` uses the bare\n *    required check, anything else falls through to `rule.type ?? 'string'`\n *    (or `'pattern'` for a RegExp `pattern` without a `type`). So `{ max: 64 }`\n *    on a non-string value also reports \"is not a valid string\", and\n *    `{ pattern, max }` ignores `max`.\n * 2. `message` replaces, and `''` is a message. Once a rule produces an error,\n *    a non-null `rule.message` replaces the generated text, so an empty-string\n *    message yields an error state without an error line.\n */\nimport type { RuleObject, RuleType, StoreValue, ValidateMessages } from \"./interface\";\nimport type { InternalNamePath } from \"./namePath\";\nimport { toArray } from \"./namePath\";\nimport { isValidElement, cloneElement } from \"react\";\n\n/** Sentinel used when a validator throws synchronously. */\nconst CODE_LOGIC_ERROR = \"CODE_LOGIC_ERROR\";\n\n// ============================ Message formatting ============================\n\nconst formatRegExp = /%[sdj%]/g;\n\n/**\n * async-validator's `format`. Our templates use `${}` placeholders (resolved\n * later by `replaceMessage`), so in practice this only matters for the\n * function-template form that a locale may supply.\n */\nfunction format(template: any, ...args: any[]): any {\n  let i = 0;\n  const len = args.length;\n  if (typeof template === \"function\") {\n    return template(...args);\n  }\n  if (typeof template === \"string\") {\n    return template.replace(formatRegExp, (x) => {\n      if (x === \"%%\") return \"%\";\n      if (i >= len) return x;\n      switch (x) {\n        case \"%s\":\n          return String(args[i++]);\n        case \"%d\":\n          return String(Number(args[i++]));\n        case \"%j\":\n          try {\n            return JSON.stringify(args[i++]);\n          } catch {\n            return \"[Circular]\";\n          }\n        default:\n          return x;\n      }\n    });\n  }\n  return template;\n}\n\n/** `I'm ${name}` + `{ name: 'bamboo' }` => `I'm bamboo`. `\\${x}` escapes. */\nfunction replaceMessage(template: string, kv: Record<string, any>): string {\n  return template.replace(/\\\\?\\$\\{\\w+\\}/g, (str) => {\n    if (str.startsWith(\"\\\\\")) {\n      return str.slice(1);\n    }\n    const key = str.slice(2, -1);\n    return kv[key];\n  });\n}\n\n// ================================ Type checks ===============================\n\n// http://emailregex.com/ — copied verbatim from async-validator so the same\n// addresses pass/fail as before the migration.\nconst EMAIL_PATTERN =\n  /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF]+\\.)+[a-zA-Z\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF]{2,}))$/;\n\nlet urlReg: RegExp | undefined;\n/** Lazily built URL regex (kevva/url-regex), same construction as upstream. */\nfunction getUrlRegex(): RegExp {\n  if (urlReg) return urlReg;\n  const v4 =\n    \"(?:25[0-5]|2[0-4]\\\\d|1\\\\d\\\\d|[1-9]\\\\d|\\\\d)(?:\\\\.(?:25[0-5]|2[0-4]\\\\d|1\\\\d\\\\d|[1-9]\\\\d|\\\\d)){3}\";\n  const v6seg = \"[a-fA-F\\\\d]{1,4}\";\n  const v6List = [\n    `(?:${v6seg}:){7}(?:${v6seg}|:)`,\n    `(?:${v6seg}:){6}(?:${v4}|:${v6seg}|:)`,\n    `(?:${v6seg}:){5}(?::${v4}|(?::${v6seg}){1,2}|:)`,\n    `(?:${v6seg}:){4}(?:(?::${v6seg}){0,1}:${v4}|(?::${v6seg}){1,3}|:)`,\n    `(?:${v6seg}:){3}(?:(?::${v6seg}){0,2}:${v4}|(?::${v6seg}){1,4}|:)`,\n    `(?:${v6seg}:){2}(?:(?::${v6seg}){0,3}:${v4}|(?::${v6seg}){1,5}|:)`,\n    `(?:${v6seg}:){1}(?:(?::${v6seg}){0,4}:${v4}|(?::${v6seg}){1,6}|:)`,\n    `(?::(?:(?::${v6seg}){0,5}:${v4}|(?::${v6seg}){1,7}|:))`,\n  ];\n  const v6 = `(?:${v6List.join(\"|\")})(?:%[0-9a-zA-Z]{1,})?`;\n  const protocol = \"(?:(?:[a-z]+:)?//)\";\n  const auth = \"(?:\\\\S+(?::\\\\S*)?@)?\";\n  const host = \"(?:(?:[a-z\\\\u00a1-\\\\uffff0-9][-_]*)*[a-z\\\\u00a1-\\\\uffff0-9]+)\";\n  const domain = \"(?:\\\\.(?:[a-z\\\\u00a1-\\\\uffff0-9]-*)*[a-z\\\\u00a1-\\\\uffff0-9]+)*\";\n  const tld = \"(?:\\\\.(?:[a-z\\\\u00a1-\\\\uffff]{2,}))\";\n  const port = \"(?::\\\\d{2,5})?\";\n  const path = '(?:[/?#][^\\\\s\"]*)?';\n  const regex = `(?:${protocol}|www\\\\.)${auth}(?:localhost|${v4}|${v6}|${host}${domain}${tld})${port}${path}`;\n  urlReg = new RegExp(`(?:^${regex}$)`, \"i\");\n  return urlReg;\n}\n\nconst TYPE_CHECKS: Partial<Record<string, (value: any) => boolean>> = {\n  number: (value) => !isNaN(value) && typeof value === \"number\",\n  object: (value) => typeof value === \"object\" && !Array.isArray(value),\n  email: (value) =>\n    typeof value === \"string\" && value.length <= 320 && EMAIL_PATTERN.test(value),\n  url: (value) =>\n    typeof value === \"string\" && value.length <= 2048 && getUrlRegex().test(value),\n};\n\n/** Types whose \"empty\" notion includes the empty string. */\nfunction isNativeStringType(type?: string) {\n  return type === \"string\" || type === \"url\" || type === \"email\" || type === \"pattern\";\n}\n\nfunction isEmptyValue(value: any, type?: string): boolean {\n  if (value === undefined || value === null) return true;\n  if (type === \"array\" && Array.isArray(value) && !value.length) return true;\n  if (isNativeStringType(type) && typeof value === \"string\" && !value) return true;\n  return false;\n}\n\n// ============================= Declarative rules ============================\n\n/**\n * `type` widens to `string` here because the dispatcher normalises it the way\n * async-validator does: an absent type becomes `'string'` and a bare RegExp\n * `pattern` becomes `'pattern'` — neither of which is a public `RuleType`.\n */\ntype NormalizedRule = Omit<RuleObject, \"type\"> & { type?: string };\n\ninterface RuleCtx {\n  rule: NormalizedRule;\n  value: StoreValue;\n  name: string;\n  messages: ValidateMessages;\n  errors: any[];\n}\n\nfunction checkRequired(\n  { rule, value, name, messages, errors }: RuleCtx,\n  type?: string,\n) {\n  if (rule.required && isEmptyValue(value, type || rule.type)) {\n    errors.push(format(messages.required, name));\n  }\n}\n\nfunction checkType({ rule, value, name, messages, errors }: RuleCtx) {\n  if (rule.required && value === undefined) {\n    checkRequired({ rule, value, name, messages, errors });\n    return;\n  }\n  const ruleType = rule.type;\n  const custom = TYPE_CHECKS[ruleType as string];\n  if (custom) {\n    if (!custom(value)) {\n      errors.push(format(messages.types?.[ruleType as RuleType], name, ruleType));\n    }\n  } else if (ruleType && typeof value !== ruleType) {\n    errors.push(format(messages.types?.[ruleType as RuleType], name, ruleType));\n  }\n}\n\n// Surrogate pairs count as one character, matching upstream's `range`.\nconst SP_REGEXP = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g;\n\nfunction checkRange({ rule, value, name, messages, errors }: RuleCtx) {\n  const hasMin = typeof rule.min === \"number\";\n  const hasMax = typeof rule.max === \"number\";\n  let val: number;\n  let key: \"number\" | \"string\" | \"array\";\n  if (typeof value === \"number\") {\n    key = \"number\";\n    val = value;\n  } else if (typeof value === \"string\") {\n    key = \"string\";\n    val = value.replace(SP_REGEXP, \"_\").length;\n  } else if (Array.isArray(value)) {\n    key = \"array\";\n    val = value.length;\n  } else {\n    // Unsupported type for range validation — upstream bails out silently.\n    return;\n  }\n  const section = messages[key] as Record<string, any> | undefined;\n  if (hasMin && !hasMax && val < (rule.min as number)) {\n    errors.push(format(section?.min, name, rule.min));\n  } else if (hasMax && !hasMin && val > (rule.max as number)) {\n    errors.push(format(section?.max, name, rule.max));\n  } else if (\n    hasMin &&\n    hasMax &&\n    (val < (rule.min as number) || val > (rule.max as number))\n  ) {\n    errors.push(format(section?.range, name, rule.min, rule.max));\n  }\n}\n\nfunction checkPattern({ rule, value, name, messages, errors }: RuleCtx) {\n  if (rule.pattern instanceof RegExp) {\n    // Reset in case the RegExp carries the `g` flag — a stateful `lastIndex`\n    // makes the same rule pass and fail alternately.\n    rule.pattern.lastIndex = 0;\n    if (!rule.pattern.test(value)) {\n      errors.push(format(messages.pattern?.mismatch, name, value, rule.pattern));\n    }\n  }\n}\n\nfunction checkWhitespace({ value, name, messages, errors }: RuleCtx) {\n  if (/^\\s+$/.test(value) || value === \"\") {\n    errors.push(format(messages.whitespace, name));\n  }\n}\n\n/**\n * Run the declarative validator async-validator would have selected.\n * `ctx.rule.type` is already normalised by the caller.\n */\nfunction runDeclarative(method: string, ctx: RuleCtx) {\n  const { rule, value } = ctx;\n  switch (method) {\n    case \"required\": {\n      checkRequired(ctx, Array.isArray(value) ? \"array\" : typeof value);\n      return;\n    }\n    case \"number\": {\n      const numeric = { ...ctx, value: value === \"\" ? undefined : value };\n      if (isEmptyValue(numeric.value) && !rule.required) return;\n      checkRequired(numeric);\n      if (numeric.value !== undefined) {\n        checkType(numeric);\n        checkRange(numeric);\n      }\n      return;\n    }\n    case \"object\": {\n      if (isEmptyValue(value) && !rule.required) return;\n      checkRequired(ctx);\n      if (value !== undefined) {\n        checkType(ctx);\n      }\n      return;\n    }\n    case \"email\":\n    case \"url\": {\n      if (isEmptyValue(value, method) && !rule.required) return;\n      checkRequired(ctx, method);\n      if (!isEmptyValue(value, method)) {\n        checkType(ctx);\n      }\n      return;\n    }\n    case \"pattern\": {\n      if (isEmptyValue(value, \"string\") && !rule.required) return;\n      checkRequired(ctx);\n      if (!isEmptyValue(value, \"string\")) {\n        checkPattern(ctx);\n      }\n      return;\n    }\n    // 'string' and anything else fall back to the string validator, which is\n    // also async-validator's default when no `type` is declared.\n    default: {\n      if (isEmptyValue(value, \"string\") && !rule.required) return;\n      checkRequired(ctx, \"string\");\n      if (!isEmptyValue(value, \"string\")) {\n        checkType(ctx);\n        checkRange(ctx);\n        checkPattern(ctx);\n        if (rule.whitespace === true) {\n          checkWhitespace(ctx);\n        }\n      }\n    }\n  }\n}\n\n// ============================= Custom validators ============================\n\n/**\n * Collapse the promise/callback bridge rc-component's `form` builds around a\n * user `validator` into a single promise for the raw \"callback argument\".\n *\n * Net semantics preserved from the two-layer upstream wrapping:\n *   resolve()                -> no error\n *   reject('msg') / Error    -> that message\n *   reject()                 -> one error whose text is a single space, i.e.\n *                               an error STATE with no readable line\n *   callback('msg')          -> that message, one microtask later\n *   synchronous throw        -> the generic `default` message\n * A validator that both returns a promise and calls `callback` has its\n * callback ignored, exactly as upstream warns.\n */\nfunction runCustomValidator(rule: RuleObject, value: StoreValue): Promise<any> {\n  return new Promise((resolve) => {\n    let settled = false;\n    let hasPromise = false;\n    const finish = (arg: any) => {\n      if (settled) return;\n      settled = true;\n      resolve(arg);\n    };\n    const userCallback = (...args: any[]) => {\n      Promise.resolve().then(() => {\n        if (!hasPromise) {\n          finish(args.length ? args[0] : undefined);\n        }\n      });\n    };\n    let returned: any;\n    try {\n      returned = rule.validator!(rule, value, userCallback);\n    } catch (error) {\n      // Upstream logs and converts a thrown validator into the generic\n      // `default` message; swallowing it silently would hide real bugs.\n      console.error(error);\n      finish(CODE_LOGIC_ERROR);\n      return;\n    }\n    hasPromise =\n      !!returned &&\n      typeof returned.then === \"function\" &&\n      typeof returned.catch === \"function\";\n    if (hasPromise) {\n      returned.then(\n        () => finish(undefined),\n        (err: any) => finish(err || \" \"),\n      );\n    }\n  });\n}\n\n// ================================ Rule driver ===============================\n\n/** Which async-validator method would handle this rule? */\nfunction pickMethod(rule: RuleObject): string {\n  const keys = Object.keys(rule).filter((key) => key !== \"message\");\n  if (keys.length === 1 && keys[0] === \"required\") {\n    return \"required\";\n  }\n  if (rule.type === undefined && rule.pattern instanceof RegExp) {\n    return \"pattern\";\n  }\n  return rule.type ?? \"string\";\n}\n\nasync function validateRule(\n  name: string,\n  value: StoreValue,\n  rule: RuleObject,\n  messages: ValidateMessages,\n  messageVariables?: Record<string, string>,\n): Promise<any[]> {\n  let rawErrors: any[] = [];\n  // Kept in sync with the declarative branch so `${type}` interpolates the\n  // normalised type, not `undefined`, when the rule's type was inferred.\n  let effectiveRule: NormalizedRule = rule;\n\n  if (rule.validator) {\n    const cbArg = await runCustomValidator(rule, value);\n    rawErrors = cbArg === undefined ? [] : Array.isArray(cbArg) ? cbArg : [cbArg];\n  } else {\n    const method = pickMethod(rule);\n    // `getType` normalises the rule's own `type` before the validators read\n    // it — `undefined` becomes `'string'`, a bare RegExp becomes `'pattern'`.\n    effectiveRule = {\n      ...rule,\n      type: method === \"required\" ? rule.type : method,\n    };\n    const ctx: RuleCtx = {\n      rule: effectiveRule,\n      value,\n      name,\n      messages,\n      errors: [],\n    };\n    runDeclarative(method, ctx);\n    rawErrors = ctx.errors;\n  }\n\n  // A declared `message` replaces the generated text — including `''`.\n  if (rawErrors.length && rule.message !== undefined && rule.message !== null) {\n    rawErrors = ([] as any[]).concat(rule.message);\n  }\n\n  const result = rawErrors.map((entry, index) => {\n    // Mirrors async-validator's `isErrorObj` + `complementError`: anything\n    // carrying a defined `.message` (an `Error`, a rejected object) is read\n    // through it; a thunk is invoked; everything else is the message itself.\n    const message =\n      entry && entry.message !== undefined\n        ? entry.message\n        : typeof entry === \"function\"\n          ? entry()\n          : entry;\n    const merged = message === CODE_LOGIC_ERROR ? messages.default : message;\n    return isValidElement(merged)\n      ? cloneElement(merged as any, { key: `error_${index}` })\n      : merged;\n  });\n\n  // `label` falls back to the field's name, so a template never prints\n  // `undefined` for a field rendered without a label.\n  const kv: Record<string, any> = {\n    ...effectiveRule,\n    name,\n    label: name,\n    ...messageVariables,\n  };\n  return result.map((error) =>\n    typeof error === \"string\" ? replaceMessage(error, kv) : error,\n  );\n}\n\n/**\n * Validate one field's value against its rules.\n *\n * ALWAYS REJECTS in the default (parallel) mode — with a `RuleError[]` that\n * may well be empty. This is upstream's contract and both `Field` and\n * `FormStore` are written against it: the caller partitions the array into\n * errors and warnings by each rule's `warningOnly`, and an empty array means\n * \"valid\". `validateFirst === true` instead resolves `[]` on success.\n */\nexport function validateRules(\n  namePath: InternalNamePath,\n  value: StoreValue,\n  rules: RuleObject[],\n  messages: ValidateMessages,\n  validateFirst?: boolean | \"parallel\",\n  messageVariables?: Record<string, string>,\n): Promise<{ errors: any[]; rule: RuleObject }[]> {\n  const name = namePath.join(\".\");\n\n  // Non-warning rules first; ties keep declaration order. This is what makes\n  // a hard error win over a `warningOnly` rule on the same field.\n  const filledRules = rules\n    .map((rule, ruleIndex) => ({ rule, ruleIndex }))\n    .sort((a, b) => {\n      if (!!a.rule.warningOnly === !!b.rule.warningOnly) {\n        return a.ruleIndex - b.ruleIndex;\n      }\n      return a.rule.warningOnly ? 1 : -1;\n    })\n    .map(({ rule }) => rule);\n\n  let summaryPromise: Promise<{ errors: any[]; rule: RuleObject }[]>;\n\n  if (validateFirst === true) {\n    summaryPromise = new Promise((resolve, reject) => {\n      (async () => {\n        for (let i = 0; i < filledRules.length; i += 1) {\n          const rule = filledRules[i]!;\n          // Serial ON PURPOSE: `validateFirst` means \"stop at the first\n          // failing rule\", so the rules must not run in parallel.\n          const errors = await validateRule(\n            name,\n            value,\n            rule,\n            messages,\n            messageVariables,\n          );\n          if (errors.length) {\n            reject([{ errors, rule }]);\n            return;\n          }\n        }\n        resolve([]);\n      })();\n    });\n  } else {\n    const rulePromises = filledRules.map((rule) =>\n      validateRule(name, value, rule, messages, messageVariables).then((errors) => ({\n        errors,\n        rule,\n      })),\n    );\n    summaryPromise = (\n      validateFirst ? finishOnFirstFailed(rulePromises) : Promise.all(rulePromises)\n    ).then((errors) => Promise.reject(errors));\n  }\n\n  // Keep the rejection from surfacing as an unhandled rejection; every real\n  // consumer attaches its own handler.\n  summaryPromise.catch((e) => e);\n  return summaryPromise;\n}\n\nfunction finishOnFirstFailed(\n  rulePromises: Promise<{ errors: any[]; rule: RuleObject }>[],\n): Promise<{ errors: any[]; rule: RuleObject }[]> {\n  let count = 0;\n  return new Promise((resolve) => {\n    rulePromises.forEach((promise) => {\n      promise.then((ruleError) => {\n        if (ruleError.errors.length) {\n          resolve([ruleError]);\n        }\n        count += 1;\n        if (count === rulePromises.length) {\n          resolve([]);\n        }\n      });\n    });\n  });\n}\n\nexport { toArray };\n"],"mappings":"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"}

package/dist/components/IconWithTooltip/IconWithTooltip.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TooltipProps } from '@astryxdesign/core/Tooltip';
+export interface IconWithTooltipProps extends Omit<TooltipProps, "children" | "anchorRef"> {
+    /** The glyph the tooltip is attached to. */
+    icon: ReactNode;
+    /**
+     * `false` renders the trigger as a plain `<span>` (hover only) instead of a
+     * focusable `<button>`. @default true
+     */
+    focusable?: boolean;
+    /** Extra class names on the trigger. */
+    className?: string;
+    /** Inline styles on the trigger. */
+    style?: CSSProperties;
+}
+export declare function IconWithTooltip({ icon, focusable, style, className, ...tooltipProps }: IconWithTooltipProps): import("react").JSX.Element;
+export declare namespace IconWithTooltip {
+    var displayName: string;
+}

package/dist/components/IconWithTooltip/IconWithTooltip2.js

@@ -0,0 +1,38 @@
+import { nodeToAccessibleLabel as e } from "./accessibleLabel.js";
+/* empty css                */
+import { Text as t } from "@astryxdesign/core/Text";
+import { jsx as n } from "react/jsx-runtime";
+import { Tooltip as r } from "@astryxdesign/core/Tooltip";
+//#region src/components/IconWithTooltip/IconWithTooltip.tsx
+function i({ icon: i, focusable: a = !0, style: o, className: s, ...c }) {
+	let l = e(c.content) || void 0, u = /* @__PURE__ */ n(t, {
+		color: "placeholder",
+		className: "uic-icon-with-tooltip__icon",
+		children: i
+	}), d = (e) => [
+		"uic-icon-with-tooltip",
+		e,
+		s
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n(r, {
+		...c,
+		children: a ? /* @__PURE__ */ n("button", {
+			type: "button",
+			"aria-label": l,
+			className: d("uic-icon-with-tooltip--button"),
+			style: o,
+			children: u
+		}) : /* @__PURE__ */ n("span", {
+			"aria-label": l,
+			className: d(""),
+			style: o,
+			children: u
+		})
+	});
+}
+i.displayName = "IconWithTooltip";
+//#endregion
+export { i as IconWithTooltip };
+
+//# sourceMappingURL=IconWithTooltip2.js.map
+import "../../assets/components/IconWithTooltip/IconWithTooltip.css";

package/dist/components/IconWithTooltip/IconWithTooltip2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconWithTooltip2.js","names":[],"sources":["../../../src/components/IconWithTooltip/IconWithTooltip.tsx"],"sourcesContent":["/**\n * IconWithTooltip\n *\n * A glyph that explains itself on hover and focus: any icon (or a status\n * mark) wrapped in an unstyled, focusable button, so the hint is reachable\n * from the keyboard. The button's accessible name is the tooltip's text.\n *\n * `focusable={false}` renders a plain `<span>` instead (hover only), for use\n * inside another interactive element such as a link or an option, where a\n * nested button is invalid.\n *\n * @example\n * <IconWithTooltip icon={<CircleHelp />} content=\"Counts only running sessions.\" />\n */\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { Text } from \"@astryxdesign/core/Text\";\nimport { Tooltip, type TooltipProps } from \"@astryxdesign/core/Tooltip\";\n\nimport { nodeToAccessibleLabel } from \"./accessibleLabel\";\nimport \"./IconWithTooltip.css\";\n\nexport interface IconWithTooltipProps extends Omit<\n  TooltipProps,\n  \"children\" | \"anchorRef\"\n> {\n  /** The glyph the tooltip is attached to. */\n  icon: ReactNode;\n  /**\n   * `false` renders the trigger as a plain `<span>` (hover only) instead of a\n   * focusable `<button>`. @default true\n   */\n  focusable?: boolean;\n  /** Extra class names on the trigger. */\n  className?: string;\n  /** Inline styles on the trigger. */\n  style?: CSSProperties;\n}\n\nexport function IconWithTooltip({\n  icon,\n  focusable = true,\n  style,\n  className,\n  ...tooltipProps\n}: IconWithTooltipProps) {\n  const label = nodeToAccessibleLabel(tooltipProps.content) || undefined;\n  const iconNode = (\n    <Text color=\"placeholder\" className=\"uic-icon-with-tooltip__icon\">\n      {icon}\n    </Text>\n  );\n  const triggerClassName = (base: string) =>\n    [\"uic-icon-with-tooltip\", base, className].filter(Boolean).join(\" \");\n\n  return (\n    <Tooltip {...tooltipProps}>\n      {focusable ? (\n        <button\n          type=\"button\"\n          aria-label={label}\n          className={triggerClassName(\"uic-icon-with-tooltip--button\")}\n          style={style}\n        >\n          {iconNode}\n        </button>\n      ) : (\n        <span aria-label={label} className={triggerClassName(\"\")} style={style}>\n          {iconNode}\n        </span>\n      )}\n    </Tooltip>\n  );\n}\n\nIconWithTooltip.displayName = \"IconWithTooltip\";\n"],"mappings":";;;;;;AAsCA,SAAgB,EAAgB,EAC9B,SACA,eAAY,IACZ,UACA,cACA,GAAG,KACoB;CACvB,IAAM,IAAQ,EAAsB,EAAa,OAAO,KAAK,KAAA,GACvD,IACJ,kBAAC,GAAD;EAAM,OAAM;EAAc,WAAU;EACjC,UAAA;CACG,CAAA,GAEF,KAAoB,MACxB;EAAC;EAAyB;EAAM;CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErE,OACE,kBAAC,GAAD;EAAS,GAAI;EACV,UAAA,IACC,kBAAC,UAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAW,EAAiB,+BAA+B;GACpD;GAEN,UAAA;EACK,CAAA,IAER,kBAAC,QAAD;GAAM,cAAY;GAAO,WAAW,EAAiB,EAAE;GAAU;GAC9D,UAAA;EACG,CAAA;CAED,CAAA;AAEb;AAEA,EAAgB,cAAc"}

package/dist/components/IconWithTooltip/accessibleLabel.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare function nodeToAccessibleLabel(node: ReactNode): string;

package/dist/components/IconWithTooltip/accessibleLabel.js

@@ -0,0 +1,33 @@
+import { isValidElement as e } from "react";
+//#region src/components/IconWithTooltip/accessibleLabel.ts
+var t = 6;
+function n(r, i, a) {
+	if (r != null && typeof r != "boolean") {
+		if (typeof r == "string") {
+			r.trim() !== "" && a.push(r);
+			return;
+		}
+		if (typeof r == "number") {
+			a.push(String(r));
+			return;
+		}
+		if (!(i >= t)) {
+			if (Array.isArray(r)) {
+				for (let e of r) n(e, i + 1, a);
+				return;
+			}
+			if (e(r)) {
+				let e = r.props;
+				n(e?.children, i + 1, a);
+			}
+		}
+	}
+}
+function r(e) {
+	let t = [];
+	return n(e, 0, t), t.join(" ").replace(/\s+/g, " ").trim();
+}
+//#endregion
+export { r as nodeToAccessibleLabel };
+
+//# sourceMappingURL=accessibleLabel.js.map

package/dist/components/IconWithTooltip/accessibleLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibleLabel.js","names":[],"sources":["../../../src/components/IconWithTooltip/accessibleLabel.ts"],"sourcesContent":["/**\n * Flattens a `ReactNode` into plain text for an accessible name: string and\n * number leaves, through fragments, arrays and elements' children, joined by\n * a space. A node with no text (an icon alone) yields `\"\"`. Text carried in\n * props rather than children is invisible to the walk.\n *\n * Internal: not exported from the package.\n */\nimport { isValidElement, type ReactNode } from \"react\";\n\nconst MAX_DEPTH = 6;\n\nfunction walk(node: ReactNode, depth: number, out: string[]): void {\n  if (node === null || node === undefined || typeof node === \"boolean\") return;\n  if (typeof node === \"string\") {\n    if (node.trim() !== \"\") out.push(node);\n    return;\n  }\n  if (typeof node === \"number\") {\n    out.push(String(node));\n    return;\n  }\n  if (depth >= MAX_DEPTH) return;\n  if (Array.isArray(node)) {\n    for (const child of node) walk(child as ReactNode, depth + 1, out);\n    return;\n  }\n  if (isValidElement(node)) {\n    const props = node.props as { children?: ReactNode } | undefined;\n    walk(props?.children, depth + 1, out);\n  }\n}\n\nexport function nodeToAccessibleLabel(node: ReactNode): string {\n  const out: string[] = [];\n  walk(node, 0, out);\n  return out.join(\" \").replace(/\\s+/g, \" \").trim();\n}\n"],"mappings":";;AAUA,IAAM,IAAY;AAElB,SAAS,EAAK,GAAiB,GAAe,GAAqB;CAC7D,SAAS,QAA8B,OAAO,KAAS,WAC3D;MAAI,OAAO,KAAS,UAAU;GAC5B,AAAI,EAAK,KAAK,MAAM,MAAI,EAAI,KAAK,CAAI;GACrC;EACF;EACA,IAAI,OAAO,KAAS,UAAU;GAC5B,EAAI,KAAK,OAAO,CAAI,CAAC;GACrB;EACF;EACI,WAAS,IACb;OAAI,MAAM,QAAQ,CAAI,GAAG;IACvB,KAAK,IAAM,KAAS,GAAM,EAAK,GAAoB,IAAQ,GAAG,CAAG;IACjE;GACF;GACA,IAAI,EAAe,CAAI,GAAG;IACxB,IAAM,IAAQ,EAAK;IACnB,EAAK,GAAO,UAAU,IAAQ,GAAG,CAAG;GACtC;EAJA;CATA;AAcF;AAEA,SAAgB,EAAsB,GAAyB;CAC7D,IAAM,IAAgB,CAAC;CAEvB,OADA,EAAK,GAAM,GAAG,CAAG,GACV,EAAI,KAAK,GAAG,CAAC,CAAC,QAAQ,QAAQ,GAAG,CAAC,CAAC,KAAK;AACjD"}

package/dist/components/IconWithTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { IconWithTooltip } from './IconWithTooltip';
+export type { IconWithTooltipProps } from './IconWithTooltip';

package/dist/components/IconWithTooltip/index.js

@@ -0,0 +1,2 @@
+import { IconWithTooltip as e } from "./IconWithTooltip2.js";
+export { e as IconWithTooltip };

package/dist/components/ImageWithFallback/ImageWithFallback.d.ts

@@ -0,0 +1,11 @@
+import { ImgHTMLAttributes, ReactNode } from 'react';
+export interface ImageWithFallbackProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "onError"> {
+    src: string;
+    /** Rendered instead of the image once it fails to load. */
+    fallbackIcon: ReactNode;
+    alt: string;
+}
+export declare function ImageWithFallback({ src, fallbackIcon, alt, ...props }: ImageWithFallbackProps): import("react").JSX.Element;
+export declare namespace ImageWithFallback {
+    var displayName: string;
+}

package/dist/components/ImageWithFallback/ImageWithFallback2.js

@@ -0,0 +1,28 @@
+/* empty css                  */
+import { useState as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/ImageWithFallback/ImageWithFallback.tsx
+function n({ src: n, fallbackIcon: r, alt: i, ...a }) {
+	let [o, s] = e(null);
+	return o === n ? i === "" ? /* @__PURE__ */ t("span", {
+		className: "uic-image-with-fallback",
+		"aria-hidden": "true",
+		children: r
+	}) : /* @__PURE__ */ t("span", {
+		className: "uic-image-with-fallback",
+		role: "img",
+		"aria-label": i,
+		children: r
+	}) : /* @__PURE__ */ t("img", {
+		...a,
+		src: n,
+		alt: i,
+		onError: () => s(n)
+	});
+}
+n.displayName = "ImageWithFallback";
+//#endregion
+export { n as ImageWithFallback };
+
+//# sourceMappingURL=ImageWithFallback2.js.map
+import "../../assets/components/ImageWithFallback/ImageWithFallback.css";

package/dist/components/ImageWithFallback/ImageWithFallback2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback2.js","names":[],"sources":["../../../src/components/ImageWithFallback/ImageWithFallback.tsx"],"sourcesContent":["/**\n * ImageWithFallback\n *\n * An `<img>` that renders `fallbackIcon` in its place once the image fails to\n * load. The failure is remembered per `src`, so a new `src` gets a fresh try.\n * Astryx's `Avatar` and `Thumbnail` fall back to another image; this falls\n * back to any node, typically an icon.\n *\n * The fallback keeps the image's semantics: it is an `img` named by `alt`, or\n * hidden from assistive technology when `alt` is empty (a decorative image).\n *\n * @example\n * <ImageWithFallback src={logoUrl} alt=\"Vendor\" fallbackIcon={<Cpu />} width={16} />\n */\nimport { useState, type ImgHTMLAttributes, type ReactNode } from \"react\";\n\nimport \"./ImageWithFallback.css\";\n\nexport interface ImageWithFallbackProps extends Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  \"onError\"\n> {\n  src: string;\n  /** Rendered instead of the image once it fails to load. */\n  fallbackIcon: ReactNode;\n  alt: string;\n}\n\nexport function ImageWithFallback({\n  src,\n  fallbackIcon,\n  alt,\n  ...props\n}: ImageWithFallbackProps) {\n  const [errorSrc, setErrorSrc] = useState<string | null>(null);\n\n  if (errorSrc === src) {\n    return alt === \"\" ? (\n      <span className=\"uic-image-with-fallback\" aria-hidden=\"true\">\n        {fallbackIcon}\n      </span>\n    ) : (\n      <span className=\"uic-image-with-fallback\" role=\"img\" aria-label={alt}>\n        {fallbackIcon}\n      </span>\n    );\n  }\n\n  return <img {...props} src={src} alt={alt} onError={() => setErrorSrc(src)} />;\n}\n\nImageWithFallback.displayName = \"ImageWithFallback\";\n"],"mappings":";;;;AA4BA,SAAgB,EAAkB,EAChC,QACA,iBACA,QACA,GAAG,KACsB;CACzB,IAAM,CAAC,GAAU,KAAe,EAAwB,IAAI;CAc5D,OAZI,MAAa,IACR,MAAQ,KACb,kBAAC,QAAD;EAAM,WAAU;EAA0B,eAAY;EACnD,UAAA;CACG,CAAA,IAEN,kBAAC,QAAD;EAAM,WAAU;EAA0B,MAAK;EAAM,cAAY;EAC9D,UAAA;CACG,CAAA,IAIH,kBAAC,OAAD;EAAK,GAAI;EAAY;EAAU;EAAK,eAAe,EAAY,CAAG;CAAI,CAAA;AAC/E;AAEA,EAAkB,cAAc"}

package/dist/components/ImageWithFallback/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageWithFallback } from './ImageWithFallback';
+export type { ImageWithFallbackProps } from './ImageWithFallback';

package/dist/components/ImageWithFallback/index.js

@@ -0,0 +1,2 @@
+import { ImageWithFallback as e } from "./ImageWithFallback2.js";
+export { e as ImageWithFallback };

package/dist/components/ListBanner/ListBanner.d.ts

@@ -0,0 +1,17 @@
+import { Key, ReactElement, ReactNode } from 'react';
+import { BannerProps } from '@astryxdesign/core/Banner';
+export interface ListBannerItem {
+    /** Default: the item's position. */
+    key?: Key | null;
+    content: ReactNode;
+}
+export interface ListBannerProps extends Omit<BannerProps, "title" | "description"> {
+    title?: ReactNode;
+    items: ReadonlyArray<ListBannerItem>;
+    /** Height at which the list scrolls. Default: 165 (about seven rows) */
+    maxHeight?: number | string;
+}
+export declare function ListBanner({ title, items, maxHeight, ...bannerProps }: ListBannerProps): ReactElement;
+export declare namespace ListBanner {
+    var displayName: string;
+}

package/dist/components/ListBanner/ListBanner2.js

@@ -0,0 +1,27 @@
+/* empty css           */
+import { jsx as e } from "react/jsx-runtime";
+import { Banner as t } from "@astryxdesign/core/Banner";
+//#region src/components/ListBanner/ListBanner.tsx
+var n = 165;
+function r({ title: r, items: i, maxHeight: a = n, ...o }) {
+	let s = i.length === 0 ? void 0 : /* @__PURE__ */ e("ul", {
+		tabIndex: 0,
+		className: "uic-list-banner__list",
+		style: {
+			"--list-banner-max-height": typeof a == "number" ? `${a}px` : a,
+			listStyle: "circle inside"
+		},
+		children: i.map((t, n) => /* @__PURE__ */ e("li", { children: t.content }, t.key ?? `__index-${n}`))
+	}), c = r != null;
+	return /* @__PURE__ */ e(t, {
+		...o,
+		title: c ? r : s,
+		description: c ? s : void 0
+	});
+}
+r.displayName = "ListBanner";
+//#endregion
+export { r as ListBanner };
+
+//# sourceMappingURL=ListBanner2.js.map
+import "../../assets/components/ListBanner/ListBanner.css";

package/dist/components/ListBanner/ListBanner2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBanner2.js","names":[],"sources":["../../../src/components/ListBanner/ListBanner.tsx"],"sourcesContent":["/**\n * ListBanner\n *\n * A `Banner` whose description is a list of items, for \"these N things will\n * be affected\" notices in a dialog. The list scrolls once it passes\n * `maxHeight`, so the dialog does not grow with the selection, and the\n * scrolling list is reachable by keyboard. Say how many items there are in\n * the `title`.\n *\n * Without a `title` the list takes the banner's title slot. Without items\n * there is no list.\n *\n * @example\n * <ListBanner\n *   status=\"warning\"\n *   title={`${users.length} users will be updated`}\n *   items={users.map((user) => ({ key: user.id, content: user.email }))}\n * />\n */\nimport type { CSSProperties, Key, ReactElement, ReactNode } from \"react\";\nimport { Banner, type BannerProps } from \"@astryxdesign/core/Banner\";\n\nimport \"./ListBanner.css\";\n\nexport interface ListBannerItem {\n  /** Default: the item's position. */\n  key?: Key | null;\n  content: ReactNode;\n}\n\nexport interface ListBannerProps extends Omit<BannerProps, \"title\" | \"description\"> {\n  title?: ReactNode;\n  items: ReadonlyArray<ListBannerItem>;\n  /** Height at which the list scrolls. Default: 165 (about seven rows) */\n  maxHeight?: number | string;\n}\n\nconst DEFAULT_MAX_HEIGHT = 165;\n\nexport function ListBanner({\n  title,\n  items,\n  maxHeight = DEFAULT_MAX_HEIGHT,\n  ...bannerProps\n}: ListBannerProps): ReactElement {\n  const list =\n    items.length === 0 ? undefined : (\n      <ul\n        // Keyboard users can scroll it.\n        tabIndex={0}\n        className=\"uic-list-banner__list\"\n        style={\n          {\n            \"--list-banner-max-height\":\n              typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight,\n            // Inline: product sheets reset `ul` unlayered, which beats any layer.\n            listStyle: \"circle inside\",\n          } as CSSProperties\n        }\n      >\n        {items.map((item, index) => (\n          <li key={item.key ?? `__index-${index}`}>{item.content}</li>\n        ))}\n      </ul>\n    );\n  const hasTitle = title !== undefined && title !== null;\n\n  return (\n    <Banner\n      {...bannerProps}\n      title={hasTitle ? title : list}\n      description={hasTitle ? list : undefined}\n    />\n  );\n}\n\nListBanner.displayName = \"ListBanner\";\n"],"mappings":";;;;AAqCA,IAAM,IAAqB;AAE3B,SAAgB,EAAW,EACzB,UACA,UACA,eAAY,GACZ,GAAG,KAC6B;CAChC,IAAM,IACJ,EAAM,WAAW,IAAI,KAAA,IACnB,kBAAC,MAAD;EAEE,UAAU;EACV,WAAU;EACV,OACE;GACE,4BACE,OAAO,KAAc,WAAW,GAAG,EAAU,MAAM;GAErD,WAAW;EACb;EAGD,UAAA,EAAM,KAAK,GAAM,MAChB,kBAAC,MAAD,EAAA,UAA0C,EAAK,QAAY,GAAlD,EAAK,OAAO,WAAW,GAA2B,CAC5D;CACC,CAAA,GAEF,IAAW,KAAiC;CAElD,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,OAAO,IAAW,IAAQ;EAC1B,aAAa,IAAW,IAAO,KAAA;CAChC,CAAA;AAEL;AAEA,EAAW,cAAc"}

package/dist/components/ListBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { ListBanner } from './ListBanner';
+export type { ListBannerItem, ListBannerProps } from './ListBanner';

package/dist/components/ListBanner/index.js

@@ -0,0 +1,2 @@
+import { ListBanner as e } from "./ListBanner2.js";
+export { e as ListBanner };

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode, Ref } from 'react';
+import { ButtonProps, ButtonVariant } from '@astryxdesign/core/Button';
+import { DialogProps } from '@astryxdesign/core/Dialog';
+/** Props for the primary action button, beyond what `Modal` sets itself. */
+export type ModalActionButtonProps = Partial<Omit<ButtonProps, "label" | "variant" | "clickAction" | "onClick" | "ref">>;
+export interface ModalProps extends Omit<DialogProps, "ref" | "children"> {
+    /** Ref to the element carrying `role="dialog"`: a `div`, not a `<dialog>`. */
+    ref?: Ref<HTMLDivElement>;
+    /** The body. Without `title`, `onAction` or `footer`, the whole surface. */
+    children?: ReactNode;
+    /**
+     * Asks for a z-index inside the modal band. The stack still places a modal
+     * opened later above this one, and a value outside the band is ignored.
+     */
+    zIndex?: number;
+    /**
+     * Called with the new visibility right after `isOpen` changes, never on
+     * mount. There is no exit animation, so a close edge is the end of the
+     * close.
+     */
+    afterOpenChange?: (isOpen: boolean) => void;
+    /** Unmount the content, and drop its state, when the modal closes. */
+    unmountOnClose?: boolean;
+    /** Header title. Names the dialog. A node is rendered as given. */
+    title?: ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: string;
+    /** Content before the title, e.g. a back button. */
+    headerStartContent?: ReactNode;
+    /** Content after the title, before the close button. */
+    headerEndContent?: ReactNode;
+    /** Whether the header shows a close button. Default: true */
+    hasCloseButton?: boolean;
+    /** Class name on the generated header, for a product's own header geometry. */
+    headerClassName?: string;
+    /**
+     * Replaces the generated footer. `null` removes the footer. Left
+     * `undefined`, a footer is generated when `onAction` is set.
+     */
+    footer?: ReactNode | null;
+    /** Primary action. Returning a promise shows the button pending until it settles. It does not close the modal. */
+    onAction?: () => unknown;
+    /** Primary action label. Default: the catalog's `uic.common.ok` ("OK") */
+    actionLabel?: string;
+    /** Primary action variant. Default: "primary" */
+    actionVariant?: ButtonVariant;
+    /** Shows the primary action as pending, for work the modal does not await. */
+    isActionLoading?: boolean;
+    /** Disables the primary action. */
+    isActionDisabled?: boolean;
+    /** More props for the primary action button (`type`, `form`, `icon`, ...). */
+    actionButtonProps?: ModalActionButtonProps;
+    /** Cancel label. Default: the catalog's `uic.common.cancel` ("Cancel") */
+    cancelLabel?: string;
+    /** Whether the generated footer has a Cancel button. Default: true */
+    hasCancelButton?: boolean;
+    /** Class name on the generated footer. */
+    footerClassName?: string;
+    /** Shows a text skeleton in place of the body. */
+    isLoading?: boolean;
+}
+export declare function Modal(props: ModalProps): import("react").JSX.Element;
+export declare namespace Modal {
+    var displayName: string;
+}

package/dist/components/Modal/Modal2.js

@@ -0,0 +1,226 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { SkeletonText as t } from "../Skeleton/SkeletonText2.js";
+import { MODAL_OPEN_ATTRIBUTE as n, ModalPortalContext as r, useModalLevel as i } from "./modalStack.js";
+/* empty css      */
+import { useContext as a, useEffect as o, useEffectEvent as ee, useId as te, useInsertionEffect as ne, useLayoutEffect as s, useRef as c, useState as re } from "react";
+import { Button as l } from "@astryxdesign/core/Button";
+import { Layout as ie, LayoutContent as ae, LayoutFooter as oe } from "@astryxdesign/core/Layout";
+import { HStack as se } from "@astryxdesign/core/Stack";
+import { createPortal as ce } from "react-dom";
+import { Dialog as u, DialogHeader as le } from "@astryxdesign/core/Dialog";
+import { useFocusTrap as ue, useScrollLock as de } from "@astryxdesign/core/hooks";
+import { useLayerDismissal as fe } from "@astryxdesign/core/Layer";
+import { dataAttr as pe } from "@astryxdesign/core/naming";
+import { useThemeName as me } from "@astryxdesign/core/theme";
+import { devWarn as he, isFocusDetached as d, mergeRefs as ge } from "@astryxdesign/core/utils";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/Modal/Modal.tsx
+var m = "[role=\"heading\"], h1, h2, h3, h4, h5, h6", h = "dialog, [role=\"dialog\"], [role=\"alertdialog\"]";
+function _e(e, t) {
+	(d() || t?.contains(document.activeElement) === !0) && e?.isConnected && e.focus();
+}
+function g(e) {
+	for (let t of e.querySelectorAll(m)) if (t.closest(h) === e) return t;
+	return null;
+}
+function ve(e, t = 16) {
+	let n = e.getBoundingClientRect(), r = n.left + n.width / 2 - window.innerWidth / 2, i = n.top + n.height / 2 - window.innerHeight / 2, a = Math.sqrt(r * r + i * i) || 1;
+	return {
+		x: Math.round(r / a * t),
+		y: Math.round(i / a * t)
+	};
+}
+function _(e) {
+	return typeof e == "number" ? `${e}px` : e;
+}
+function ye(e) {
+	let { top: t, bottom: n, start: r, end: i } = e;
+	return {
+		top: t === void 0 ? "auto" : _(t),
+		bottom: n === void 0 ? "auto" : _(n),
+		insetInlineStart: r === void 0 ? "auto" : _(r),
+		insetInlineEnd: i === void 0 ? "auto" : _(i)
+	};
+}
+var v = /* @__PURE__ */ new WeakMap(), y = 0;
+function b(e) {
+	if (!e) return "body";
+	let t = v.get(e);
+	return t || (y += 1, t = `dialog-${y}`, v.set(e, t)), t;
+}
+function x(e) {
+	let t = a(r);
+	return /* @__PURE__ */ f(S, {
+		...e,
+		dialogHost: t
+	}, b(t));
+}
+function S({ dialogHost: r, isOpen: a, onOpenChange: d, isInline: m = !1, width: h = 400, maxHeight: v, position: y, variant: b = "standard", purpose: x = "info", padding: S, zIndex: be, afterOpenChange: xe, unmountOnClose: Se = !1, title: C, subtitle: Ce, headerStartContent: w, headerEndContent: T, hasCloseButton: we = !0, headerClassName: Te, footer: E, onAction: D, actionLabel: O, actionVariant: Ee = "primary", isActionLoading: De, isActionDisabled: Oe, actionButtonProps: k, cancelLabel: ke, hasCancelButton: Ae = !0, footerClassName: je, isLoading: Me = !1, role: Ne, children: Pe, xstyle: A, className: j, style: M, ref: Fe, ...N }) {
+	let P = e(), [F, I] = re(a);
+	a && !F && I(!0);
+	let Ie = a || F && !Se, L = c(a), Le = ee((e) => xe?.(e));
+	o(() => {
+		L.current !== a && (L.current = a, Le(a));
+	}, [a]);
+	let Re = me(), ze = x !== "required", Be = x === "info", R = N["aria-label"] != null || N["aria-labelledby"] != null, Ve = te(), z = () => d(!1), B = c(null), V = c(null);
+	ne(() => {
+		if (!a || m) return;
+		let e = document.activeElement;
+		V.current = e instanceof HTMLElement && !B.current?.contains(e) ? e : null;
+	}, [a, m]);
+	let H = a && !m, U = i(B, H, be);
+	s(() => {
+		let e = B.current;
+		if (!(!H || !r || typeof e?.showPopover != "function")) return e.showPopover(), () => {
+			e.matches(":popover-open") && e.hidePopover();
+		};
+	}, [H, r]);
+	let { containerRef: W, focusFirst: G } = ue({ isActive: H && U });
+	fe({
+		isActive: H,
+		escapeBehavior: ze ? "close" : "block",
+		onDismiss: z,
+		getContainer: () => W.current
+	}), o(() => {
+		if (!H) return;
+		let e = B.current;
+		return () => _e(V.current, e);
+	}, [H]), de(H), o(() => {
+		let e = W.current;
+		if (!H || !e || R) return;
+		let t = g(e);
+		if (!t) {
+			e.removeAttribute("aria-labelledby");
+			return;
+		}
+		t.id ||= Ve, e.setAttribute("aria-labelledby", t.id);
+	}), s(() => {
+		let e = W.current;
+		if (!H || !e) return;
+		let t = V.current;
+		if (!(typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) && t instanceof HTMLElement && t !== document.body) {
+			let { x: n, y: r } = ve(t);
+			e.style.setProperty("--modal-dir-x", `${n}px`), e.style.setProperty("--modal-dir-y", `${r}px`);
+		}
+		return () => {
+			e.style.removeProperty("--modal-dir-x"), e.style.removeProperty("--modal-dir-y");
+		};
+	}, [H, W]), o(() => {
+		let e = W.current;
+		if (!H || !e) return;
+		let t = e.querySelector("[data-autofocus]") ?? g(e);
+		t?.focus(), document.activeElement !== t && G();
+	}, [
+		H,
+		W,
+		G
+	]);
+	let K = c(!1);
+	o(() => {
+		let e = W.current;
+		!H || R || K.current || !e || (g(e) ?? (K.current = !0, he("Modal", "open modal has no accessible name. Pass `title`, render a ModalHeader, or pass `aria-label`/`aria-labelledby`.")));
+	}, [
+		H,
+		R,
+		W
+	]);
+	let q = c(null), J = c(!1), He = (e) => {
+		J.current = e.target === q.current;
+	}, Ue = (e) => {
+		let t = J.current && e.target === q.current;
+		J.current = !1, t && Be && z();
+	}, We = C !== void 0 || D !== void 0 || E !== void 0, Ge = D === void 0 ? null : /* @__PURE__ */ p(se, {
+		justify: "end",
+		align: "center",
+		gap: 2,
+		children: [Ae && /* @__PURE__ */ f(l, {
+			variant: "secondary",
+			label: ke ?? P("uic.common.cancel"),
+			onClick: z
+		}), /* @__PURE__ */ f(l, {
+			...k,
+			variant: Ee,
+			label: O ?? P("uic.common.ok"),
+			isLoading: De ?? k?.isLoading,
+			isDisabled: Oe ?? k?.isDisabled,
+			clickAction: async () => {
+				await D();
+			}
+		})]
+	}), Y = E === void 0 ? Ge : E, X = Me ? /* @__PURE__ */ f(t, { lines: 4 }) : Pe, Z = We ? /* @__PURE__ */ f(ie, {
+		header: C !== void 0 || w || T ? /* @__PURE__ */ f(le, {
+			hasDivider: !0,
+			title: C ?? "",
+			subtitle: Ce,
+			startContent: w,
+			endContent: T,
+			onOpenChange: we ? (e) => !e && z() : void 0,
+			className: Te
+		}) : void 0,
+		content: /* @__PURE__ */ f(ae, { children: X }),
+		footer: Y ? /* @__PURE__ */ f(oe, {
+			hasDivider: !0,
+			className: je,
+			children: Y
+		}) : void 0
+	}) : X;
+	if (m) return /* @__PURE__ */ f(u, {
+		...N,
+		isInline: !0,
+		isOpen: a,
+		onOpenChange: d,
+		width: h,
+		maxHeight: v,
+		variant: b,
+		purpose: x,
+		padding: S,
+		xstyle: A,
+		className: j,
+		style: M,
+		children: Z
+	});
+	if (!Ie || typeof document > "u") return null;
+	let Q = b === "fullscreen", $ = y != null && !Q;
+	return ce(/* @__PURE__ */ p("div", {
+		ref: B,
+		popover: r ? "manual" : void 0,
+		className: ["uic-modal", !a && "uic-modal--closed"].filter(Boolean).join(" "),
+		onMouseDown: He,
+		onClick: Ue,
+		[n]: a ? "" : void 0,
+		[pe("theme")]: Re ?? void 0,
+		children: [/* @__PURE__ */ f("div", {
+			ref: q,
+			className: "uic-modal__mask"
+		}), /* @__PURE__ */ f("div", {
+			...N,
+			ref: ge(Fe, W),
+			className: ["uic-modal__wrap", $ && "uic-modal__wrap--positioned"].filter(Boolean).join(" "),
+			style: {
+				...$ ? ye(y) : null,
+				width: Q ? void 0 : _(h)
+			},
+			role: a ? Ne ?? (x === "required" ? "alertdialog" : "dialog") : void 0,
+			"aria-modal": a && U ? !0 : void 0,
+			children: /* @__PURE__ */ f(u, {
+				isInline: !0,
+				isOpen: !0,
+				onOpenChange: d,
+				width: "100%",
+				maxHeight: v,
+				variant: b,
+				padding: S,
+				xstyle: A,
+				className: j,
+				style: M,
+				children: Z
+			})
+		})]
+	}), r ?? document.body);
+}
+x.displayName = "Modal";
+//#endregion
+export { x as Modal };
+
+//# sourceMappingURL=Modal2.js.map
+import "../../assets/components/Modal/Modal.css";