@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/dist/components/ui/textarea.d.ts

@@ -38,14 +38,5 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     hideBorder?: boolean;
 }
 declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-/**
- * A plain `Textarea` while its value is read: the textarea's own box (`TEXTAREA_BOX_CLASS`) at the height `rows` lines
- * take, never under its minimum. The border is transparent so the one skeleton surface fills the whole box. The label
- * is the host's: it is static copy and renders for real.
- */
-declare function TextareaSkeleton({ rows, className }: {
-    rows?: number;
-    className?: string;
-}): import("react").JSX.Element;
-export { Textarea, TextareaSkeleton };
+export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

package/dist/components/ui/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,KAAK,sBAAsB,EAAqB,MAAM,OAAO,CAAC;AAOlH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAA0E,CAAC;AAM1G,0HAA0H;AAC1H,wBAAgB,iBAAiB,CAAC,IAAI,GAAE,MAA8B,GAAG,MAAM,CAE9E;AAED,MAAM,WAAW,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAChF,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yGAAyG;IACzG,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;IAC/E;;;kFAG8E;IAC9E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;iDAG6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,+GAsLZ,CAAC;AAGH;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EAAE,IAA4B,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO3G;AAED,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/ui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,KAAK,sBAAsB,EAAqB,MAAM,OAAO,CAAC;AAUlH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAA0E,CAAC;AAM1G,0HAA0H;AAC1H,wBAAgB,iBAAiB,CAAC,IAAI,GAAE,MAA8B,GAAG,MAAM,CAE9E;AAED,MAAM,WAAW,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAChF,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yGAAyG;IACzG,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;IAC/E;;;kFAG8E;IAC9E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;iDAG6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,+GAwLZ,CAAC;AAmBH,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ui/textarea.js

@@ -4,7 +4,10 @@ import { forwardRef, useId } from "react";
 import { CONTROL_SIZE } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { Button } from "./button/index.js";
 import { FieldWrapper } from "./field-wrapper.js";
+import { Label } from "./label.js";
+import { useLoadingScope } from "./loading-scope.js";
 const TEXTAREA_BOX_CLASS = `flex ${CONTROL_SIZE.textarea} w-full rounded-[6px] border p-3 text-h4`;
 const TEXTAREA_BOX_CHROME_PX = 2 * 12 + 2 * 1;
 const TEXTAREA_DEFAULT_ROWS = 2;
@@ -30,33 +33,39 @@ const Textarea = forwardRef((allProps, ref) => {
   const hasAdornment = !!endIcon || !!startIcon;
   const reactId = useId();
   const fieldId = props.id ?? reactId;
+  const inScope = useLoadingScope();
   if (!hasAdornment) {
-    return /* @__PURE__ */ jsx(FieldWrapper, { label, labelVariant, error, errorSlot, children: /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        className: cn(
-          TEXTAREA_BOX_CLASS,
-          "focus:border-ods-accent focus-visible:outline-none",
-          "touch-manipulation transition-colors duration-200",
-          "border-ods-border bg-ods-card text-ods-text-primary placeholder:text-ods-text-secondary",
-          !props.disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
-          props.disabled && "!cursor-not-allowed bg-ods-bg disabled:placeholder:text-ods-border",
-          "relative z-10 cursor-text",
-          "resize-y",
-          isInvalid && "border-ods-error hover:border-ods-error focus:border-ods-error",
-          className
-        ),
-        ref,
-        ...props
-      }
-    ) });
+    return /* @__PURE__ */ jsxs(FieldWrapper, { label, labelVariant, error, errorSlot, children: [
+      inScope && /* @__PURE__ */ jsx(TextareaSkeleton, { rows: props.rows, className }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          hidden: inScope || props.hidden,
+          className: cn(
+            TEXTAREA_BOX_CLASS,
+            "focus:border-ods-accent focus-visible:outline-none",
+            "touch-manipulation transition-colors duration-200",
+            "border-ods-border bg-ods-card text-ods-text-primary placeholder:text-ods-text-secondary",
+            !props.disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
+            props.disabled && "!cursor-not-allowed bg-ods-bg disabled:placeholder:text-ods-border",
+            "relative z-10 cursor-text",
+            "resize-y",
+            isInvalid && "border-ods-error hover:border-ods-error focus:border-ods-error",
+            className
+          ),
+          ref,
+          ...props
+        }
+      )
+    ] });
   }
   const accentBorder = startIcon ? "has-[textarea:focus]:border-ods-accent" : "has-[:focus]:border-ods-accent";
   const accentBorderError = startIcon ? "has-[textarea:focus]:border-ods-error" : "has-[:focus]:border-ods-error";
   const adornmentAccent = startIcon ? "group-has-[textarea:focus]:text-ods-accent" : "group-has-[:focus]:text-ods-accent";
   const content = /* @__PURE__ */ jsxs(
-    "label",
+    Label,
     {
+      variant: "surface",
       htmlFor: fieldId,
       "data-invalid": isInvalid || void 0,
       className: cn(
@@ -123,23 +132,17 @@ const Textarea = forwardRef((allProps, ref) => {
           }
         ),
         endIconAsButton ? /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "transparent",
+            size: "icon-sm",
             type: "button",
             "aria-label": endIconButtonProps?.["aria-label"] ?? "Submit",
             ...endIconButtonProps,
             className: cn(
-              // `h-6` matches the textarea's `leading-6` line box so the icon's
-              // visual center lines up with the text on the first line. Without
-              // it, `items-end` bottom-aligns the smaller mobile icon (size-4)
-              // against the 24px text line and drops it below the text center.
-              "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
-              adornmentAccent,
-              "group-data-[invalid]:text-ods-error",
-              "[&_svg]:size-4 md:[&_svg]:size-6",
-              "cursor-pointer hover:text-ods-text-primary",
-              "focus-visible:text-ods-accent focus-visible:outline-none",
-              "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary",
+              // The 32px target overhangs the textarea's 24px `leading-6` line box by 4px on each side (`-my-1`), so the
+              // icon's centre stays on the first line's centre.
+              "-my-1 shrink-0",
               endIconButtonProps?.className
             ),
             children: endIcon
@@ -162,18 +165,18 @@ const Textarea = forwardRef((allProps, ref) => {
   return /* @__PURE__ */ jsx(FieldWrapper, { label, labelVariant, error, errorSlot, children: content });
 });
 Textarea.displayName = "Textarea";
-function TextareaSkeleton({ rows = TEXTAREA_DEFAULT_ROWS, className }) {
+function TextareaSkeleton({ rows, className }) {
+  const sizedByClasses = rows === void 0 && !!className;
   return /* @__PURE__ */ jsx(
     UnifiedSkeleton,
     {
       className: cn(TEXTAREA_BOX_CLASS, "border-transparent", className),
-      style: { height: textareaBoxHeight(rows) }
+      style: sizedByClasses ? void 0 : { height: textareaBoxHeight(rows ?? TEXTAREA_DEFAULT_ROWS) }
     }
   );
 }
 export {
   TEXTAREA_BOX_CLASS,
   Textarea,
-  TextareaSkeleton,
   textareaBoxHeight
 };

package/dist/components/ui/ticket-attachments-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-attachments-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-attachments-list.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,gBAAgB,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;yDAEqD;IACrD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAC9B;AAED,wBAAgB,qBAAqB,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,IAAgB,EAAE,EAAE,0BAA0B,sCAiE7G"}
+{"version":3,"file":"ticket-attachments-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-attachments-list.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,gBAAgB,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;yDAEqD;IACrD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAC9B;AAED,wBAAgB,qBAAqB,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,IAAgB,EAAE,EAAE,0BAA0B,sCAqE7G"}

package/dist/components/ui/ticket-attachments-list.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { Download02Icon, FileIcon, TrashIcon } from "../icons-v2-generated/index.js";
+import { Button } from "./button/index.js";
 import { SquareAvatar } from "./square-avatar.js";
 function TicketAttachmentsList({ attachments, className, size = "default" }) {
   if (attachments.length === 0) return null;
@@ -45,23 +46,27 @@ function TicketAttachmentsList({ attachments, className, size = "default" }) {
           attachment.fileSize && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: attachment.fileSize })
         ] }),
         attachment.onDelete && /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "transparent",
+            size: "icon-sm",
             type: "button",
             onClick: attachment.onDelete,
-            className: "shrink-0 text-ods-text-secondary transition-colors hover:text-ods-error",
+            className: "shrink-0",
             "aria-label": `Delete ${attachment.fileName}`,
-            children: /* @__PURE__ */ jsx(TrashIcon, { className: compact ? "size-4" : "size-5" })
+            children: /* @__PURE__ */ jsx(TrashIcon, {})
           }
         ),
         attachment.onDownload && /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "transparent",
+            size: "icon-sm",
             type: "button",
             onClick: attachment.onDownload,
-            className: "shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary",
+            className: "shrink-0",
             "aria-label": `Download ${attachment.fileName}`,
-            children: /* @__PURE__ */ jsx(Download02Icon, { className: compact ? "size-4" : "size-6" })
+            children: /* @__PURE__ */ jsx(Download02Icon, {})
           }
         )
       ]

package/dist/components/ui/ticket-info-section.d.ts.map

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

package/dist/components/ui/ticket-info-section.js

@@ -4,6 +4,7 @@ import { cn } from "../../utils/cn.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-icon.js";
 import { UserIcon } from "../icons-v2-generated/users/user-icon.js";
 import { AssigneeDropdown } from "./assignee-dropdown.js";
+import { Button } from "./button/index.js";
 import { SimpleMarkdownRenderer } from "./markdown/simple-markdown-renderer.js";
 import { SquareAvatar } from "./square-avatar.js";
 import { Tag } from "./tag.js";
@@ -21,13 +22,16 @@ function InfoCell({
     /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-1", children: [
       icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-ods-text-secondary", children: icon }),
       onClick ? /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "link",
+          size: "compact",
+          noPaddingX: true,
           type: "button",
           onClick,
-          className: "cursor-pointer truncate text-left text-ods-text-primary transition-colors text-h4 hover:text-ods-accent",
+          className: "min-w-0 max-w-full justify-start",
           title: value,
-          children: value
+          children: /* @__PURE__ */ jsx("span", { className: "truncate", children: value })
         }
       ) : /* @__PURE__ */ jsx("span", { className: "truncate text-ods-text-primary text-h4", title: value, children: value })
     ] }),
@@ -106,25 +110,16 @@ function TicketInfoSection({
           }
         ) }),
         onExpand && /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "outline",
+            size: "icon",
             type: "button",
             onClick: onExpand,
-            className: cn(
-              "flex shrink-0 items-center justify-center rounded-[6px] p-3",
-              "border border-ods-border bg-ods-card",
-              "transition-colors duration-150 hover:bg-ods-bg-hover"
-            ),
+            className: "shrink-0",
             "aria-label": expanded ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ jsx(
-              Chevron02DownIcon,
-              {
-                className: cn(
-                  "size-6 text-ods-text-primary transition-transform duration-200",
-                  expanded && "rotate-180"
-                )
-              }
-            )
+            "aria-expanded": expanded,
+            children: /* @__PURE__ */ jsx(Chevron02DownIcon, { className: cn("transition-transform duration-200", expanded && "rotate-180") })
           }
         )
       ] })

package/dist/components/ui/ticket-note-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-note-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-note-card.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BA+FxF"}
+{"version":3,"file":"ticket-note-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-note-card.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BAqGxF"}

package/dist/components/ui/ticket-note-card.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { CheckIcon, PenEditIcon, TrashIcon, XmarkIcon } from "../icons-v2-generated/index.js";
+import { Button } from "./button/index.js";
 import { Input } from "./input.js";
 import { SquareAvatar } from "./square-avatar.js";
 function TicketNoteCard({ note, onEdit, onDelete, className }) {
@@ -42,24 +43,28 @@ function TicketNoteCard({ note, onEdit, onDelete, className }) {
     /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 overflow-hidden", children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Input, { value: editText, onChange: (e) => setEditText(e.target.value), onKeyDown: handleKeyDown, autoFocus: true }) }),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "transparent",
+          size: "icon-sm",
           type: "button",
           onClick: handleSave,
           disabled: !editText.trim(),
-          className: "shrink-0 text-ods-success transition-colors hover:text-ods-success/80 disabled:opacity-50",
+          className: "shrink-0",
           "aria-label": "Save note",
-          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-5" })
+          children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-ods-success" })
         }
       ),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "transparent",
+          size: "icon-sm",
           type: "button",
           onClick: handleCancel,
-          className: "shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary",
+          className: "shrink-0",
           "aria-label": "Cancel editing",
-          children: /* @__PURE__ */ jsx(XmarkIcon, { className: "size-5" })
+          children: /* @__PURE__ */ jsx(XmarkIcon, {})
         }
       )
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -72,23 +77,25 @@ function TicketNoteCard({ note, onEdit, onDelete, className }) {
     ] }) }),
     note.isOwn && !isEditing && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [
       onDelete && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "transparent",
+          size: "icon-sm",
           type: "button",
           onClick: () => onDelete(note.id),
-          className: "text-ods-text-secondary transition-colors hover:text-ods-error",
           "aria-label": "Delete note",
-          children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-6" })
+          children: /* @__PURE__ */ jsx(TrashIcon, {})
         }
       ),
       onEdit && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "transparent",
+          size: "icon-sm",
           type: "button",
           onClick: () => setIsEditing(true),
-          className: "text-ods-text-secondary transition-colors hover:text-ods-text-primary",
           "aria-label": "Edit note",
-          children: /* @__PURE__ */ jsx(PenEditIcon, { className: "size-6" })
+          children: /* @__PURE__ */ jsx(PenEditIcon, {})
         }
       )
     ] })

package/dist/components/ui/ticket-notes-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-notes-section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-notes-section.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,oBAAoB,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,EAAE,uBAAuB,+BAoDzB"}
+{"version":3,"file":"ticket-notes-section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-notes-section.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,oBAAoB,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,EAAE,uBAAuB,+BAiDzB"}

package/dist/components/ui/ticket-notes-section.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { Send03Icon } from "../icons-v2-generated/index.js";
+import { Button } from "./button/index.js";
 import { Input } from "./input.js";
 import { TicketNoteCard } from "./ticket-note-card.js";
 function TicketNotesSection({
@@ -40,19 +41,16 @@ function TicketNotesSection({
         }
       ) }),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "outline",
+          size: "icon",
           type: "button",
           onClick: handleSend,
           disabled: !noteText.trim() || isAddingNote,
-          className: cn(
-            "flex h-11 w-11 shrink-0 items-center justify-center rounded-[6px] content-md:h-12 content-md:w-12",
-            "border border-ods-border bg-ods-card",
-            "transition-colors hover:bg-ods-bg-hover",
-            "disabled:cursor-not-allowed disabled:opacity-50"
-          ),
+          className: "shrink-0",
           "aria-label": "Send note",
-          children: /* @__PURE__ */ jsx(Send03Icon, { className: "size-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx(Send03Icon, {})
         }
       )
     ] })

package/dist/components/ui/ticket-status-config-row.d.ts

@@ -30,7 +30,12 @@ export interface TicketStatusConfigRowProps {
      * Rendered beside the delete button; the drag rail is hidden on touch anyway.
      */
     moveButtons?: ReactNode;
+    /**
+     * The status is still being read: the row keeps its layout, its labels and its delete button (real, inert), and
+     * every read part (the name, the color, the chip) draws its own loading form. A loading scope does the same.
+     */
+    loading?: boolean;
 }
-export declare function TicketStatusConfigRow({ variant, statusKey, name, onNameChange, color, presetKey, onColorChange, systemTooltip, systemTagVariant, onDelete, deleteDisabled, deleteDisabledReason, dragHandleProps, isDragging, moveButtons, }: TicketStatusConfigRowProps): import("react").JSX.Element;
+export declare function TicketStatusConfigRow({ variant, statusKey, name, onNameChange, color, presetKey, onColorChange, systemTooltip, systemTagVariant, onDelete, deleteDisabled, deleteDisabledReason, dragHandleProps, isDragging, moveButtons, loading: loadingProp, }: TicketStatusConfigRowProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ticket-status-config-row.d.ts.map

package/dist/components/ui/ticket-status-config-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-status-config-row.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-status-config-row.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAQ3F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAItC,KAAK,gBAAgB,GAAG,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAE5E,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2EAA2E;IAC3E,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,WAAW,GACZ,EAAE,0BAA0B,+BA6L5B"}
+{"version":3,"file":"ticket-status-config-row.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-status-config-row.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAS3F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAItC,KAAK,gBAAgB,GAAG,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAE5E,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2EAA2E;IAC3E,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAKD,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,WAAW,EACX,OAAO,EAAE,WAAW,GACrB,EAAE,0BAA0B,+BAkN5B"}

package/dist/components/ui/ticket-status-config-row.js

@@ -10,8 +10,10 @@ import { Button } from "./button/index.js";
 import { ColorPresetSelect, ColorPickerInput } from "./color-preset-select.js";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
+import { InertWhileLoading, LOADING_NOOP, LoadingWhen, useLoadingScope } from "./loading-scope.js";
 import { TicketStatusTag } from "./ticket-status-tag.js";
 import { TouchFriendlyTooltip } from "./touch-friendly-tooltip.js";
+const DELETE_BUTTON_SIZE_CLASS = "size-11 content-md:size-12";
 function TicketStatusConfigRow({
   variant,
   statusKey,
@@ -27,19 +29,22 @@ function TicketStatusConfigRow({
   deleteDisabledReason,
   dragHandleProps,
   isDragging,
-  moveButtons
+  moveButtons,
+  loading: loadingProp
 }) {
+  const loading = useLoadingScope() || !!loadingProp;
   const dragAndDropEnabled = useDragAndDropEnabled();
   const nameInputId = useId();
   const isSystem = variant === "system";
   const isCustomColor = !isSystem && presetKey === void 0;
   const previewColor = isSystem ? void 0 : color;
-  const showColorPicker = !isSystem && onColorChange && color !== void 0;
+  const showColorPicker = !isSystem && !!onColorChange && (color !== void 0 || loading);
   const previewVariant = systemTagVariant ?? (isSystem ? void 0 : "primary");
   const fieldRowOffset = "mt-[calc(var(--font-line-space-h4-body)+0.25rem)]";
   const chip = /* @__PURE__ */ jsx(
     TicketStatusTag,
     {
+      loading,
       status: statusKey,
       label: name || " ",
       color: previewColor,
@@ -67,11 +72,13 @@ function TicketStatusConfigRow({
               fieldRowOffset
             ),
             children: isSystem ? /* @__PURE__ */ jsx(DraggerIcon, { size: 24, "aria-hidden": true, className: "opacity-40" }) : /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                variant: "transparent",
+                size: "icon-sm",
                 type: "button",
                 "aria-label": "Drag to reorder",
-                className: "flex size-6 cursor-grab items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ods-focus active:cursor-grabbing",
+                className: "shrink-0 cursor-grab",
                 ...dragHandleProps,
                 children: /* @__PURE__ */ jsx(DraggerIcon, { size: 24 })
               }
@@ -94,7 +101,7 @@ function TicketStatusConfigRow({
             children: [
               /* @__PURE__ */ jsxs("div", { className: "order-1 flex min-w-0 grow basis-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
                 /* @__PURE__ */ jsx(Label, { variant: "large", htmlFor: nameInputId, children: "Status Name" }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(LoadingWhen, { loading, children: /* @__PURE__ */ jsx(
                   Input,
                   {
                     id: nameInputId,
@@ -104,12 +111,19 @@ function TicketStatusConfigRow({
                     readOnly: isSystem,
                     maxLength: 50
                   }
-                )
+                ) })
               ] }),
               showColorPicker ? /* @__PURE__ */ jsxs("div", { className: "order-3 flex min-w-0 grow basis-full flex-col gap-[var(--spacing-system-xxs)] content-md:order-2 content-md:basis-0", children: [
                 /* @__PURE__ */ jsx(Label, { variant: "large", children: "Color" }),
-                /* @__PURE__ */ jsx(ColorPresetSelect, { value: color, presetKey, onChange: onColorChange }),
-                isCustomColor && /* @__PURE__ */ jsx("div", { className: "mt-[var(--spacing-system-xxs)] flex min-w-0", children: /* @__PURE__ */ jsx(ColorPickerInput, { value: color, onChange: (next) => onColorChange({ color: next, preset: void 0 }) }) })
+                /* @__PURE__ */ jsx(LoadingWhen, { loading: loading || !onColorChange || color === void 0, children: /* @__PURE__ */ jsx(ColorPresetSelect, { value: color ?? "", presetKey, onChange: onColorChange ?? LOADING_NOOP }) }),
+                onColorChange && color !== void 0 && isCustomColor && /* @__PURE__ */ jsx("div", { className: "mt-[var(--spacing-system-xxs)] flex min-w-0", children: /* @__PURE__ */ jsx(
+                  ColorPickerInput,
+                  {
+                    value: color,
+                    onChange: (next) => onColorChange({ color: next, preset: void 0 }),
+                    loading
+                  }
+                ) })
               ] }) : /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "hidden min-w-0 grow basis-0 content-lg:order-2 content-lg:block" }),
               /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "hidden min-w-0 grow basis-0 content-lg:order-3 content-lg:block" }),
               isSystem ? /* @__PURE__ */ jsx(
@@ -146,26 +160,30 @@ function TicketStatusConfigRow({
                   children: [
                     !isSystem && moveButtons,
                     isSystem ? /* @__PURE__ */ jsx("div", { className: "flex w-11 justify-center content-md:w-12", children: /* @__PURE__ */ jsx(TouchFriendlyTooltip, { content: systemTooltip, children: /* @__PURE__ */ jsx(
-                      "button",
+                      Button,
                       {
+                        variant: "transparent",
+                        size: "icon-sm",
                         type: "button",
                         "aria-label": systemTooltip ?? "System status",
-                        className: "flex size-6 items-center justify-center text-ods-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
                         children: /* @__PURE__ */ jsx(InfoCircleIcon, { size: 24 })
                       }
-                    ) }) }) : /* @__PURE__ */ jsx(TouchFriendlyTooltip, { content: deleteDisabled ? deleteDisabledReason : void 0, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "outline",
-                        size: "icon",
-                        "aria-label": "Delete status",
-                        disabled: deleteDisabled,
-                        onClick: deleteDisabled ? void 0 : onDelete,
-                        className: cn("size-11 content-md:size-12", deleteDisabled && "pointer-events-none"),
-                        children: /* @__PURE__ */ jsx(TrashIcon, { className: "text-ods-error" })
-                      }
-                    ) }) })
+                    ) }) }) : (
+                      // The delete button is a static control: drawn for real in both forms, inert while the status is read.
+                      /* @__PURE__ */ jsx(InertWhileLoading, { loading, className: "inline-flex", children: /* @__PURE__ */ jsx(TouchFriendlyTooltip, { content: deleteDisabled && !loading ? deleteDisabledReason : void 0, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "outline",
+                          size: "icon",
+                          "aria-label": "Delete status",
+                          disabled: deleteDisabled,
+                          onClick: deleteDisabled ? void 0 : onDelete,
+                          className: cn(DELETE_BUTTON_SIZE_CLASS, deleteDisabled && "pointer-events-none"),
+                          children: /* @__PURE__ */ jsx(TrashIcon, { className: "text-ods-error" })
+                        }
+                      ) }) }) })
+                    )
                   ]
                 }
               )

package/dist/components/ui/ticket-status-tag.d.ts

@@ -70,6 +70,8 @@ export interface TicketStatusTagOption {
 export interface TicketStatusTagProps {
     /** Ticket status in any known format (ACTIVE, active, ACTION_REQUIRED, etc.) */
     status: string;
+    /** The status is still being read: the tag draws its skeleton (no dropdown). A loading scope does the same. */
+    loading?: boolean;
     /** Override the default label */
     label?: string;
     /**
@@ -105,6 +107,6 @@ export interface TicketStatusTagProps {
  * Renders a styled Tag with the correct color variant and optional icon
  * for any ticket status value from any layer (backend, dialog, chat).
  */
-export declare function TicketStatusTag({ status, label, color, variant, className, showIcon, options, onSelect, isPending, disabled, disabledReason, }: TicketStatusTagProps): React.JSX.Element;
+export declare function TicketStatusTag({ status, label, color, variant, className, showIcon, options, onSelect, isPending, disabled, disabledReason, loading: loadingProp, }: TicketStatusTagProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ticket-status-tag.d.ts.map

package/dist/components/ui/ticket-status-tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticket-status-tag.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-status-tag.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ticket-status-tag.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ticket-status-tag.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAO,KAAK,QAAQ,EAAe,MAAM,OAAO,CAAC;AAGxD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,eAAe,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9G,KAAK,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;AAEnD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AA+DD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAEvE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,kBAAkB,CAMxE;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAGjH;AAMD,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG,eAAe,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAStG,kFAAkF;AAClF,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAG/F;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAEjF;AAED,MAAM,WAAW,iBAAiB;IAChC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,iBAAiB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAOlH;AAMD,wEAAwE;AACxE,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,gFAAgF;IAChF,MAAM,EAAE,MAAM,CAAC;IACf,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAClC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,KAAK,EACL,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAe,EACf,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,QAAgB,EAChB,cAAc,EACd,OAAO,EAAE,WAAmB,GAC7B,EAAE,oBAAoB,qBA8FtB"}