@choice-ui/react 1.6.1 → 1.6.2

package/dist/components/slot/dist/index.js

@@ -1,57 +1,76 @@
-import * as React from "react";
-import { forwardRef } from "react";
+import React__default, { forwardRef, useMemo } from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
+var REACT_MAJOR = parseInt(React__default.version.split(".")[0], 10);
+var IS_REACT_19 = REACT_MAJOR >= 19;
+function getChildRef(children) {
+  if (IS_REACT_19) {
+    return children.props.ref;
+  }
+  return void 0;
+}
 var Slot = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
-    if (React.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
+    const slottedChild = useMemo(() => {
+      if (!React__default.isValidElement(children)) {
+        return children;
+      }
+      const childRef = getChildRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
-      return React.cloneElement(children, {
+      return React__default.cloneElement(children, {
         ...mergedProps,
-        ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
+        ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
       });
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children });
+    }, [children, slotProps, forwardedRef]);
+    return /* @__PURE__ */ jsx(Fragment, { children: slottedChild });
   }
 );
 Slot.displayName = "Slot";
 var SlotClone = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
-    if (React.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
+    const slottedChild = useMemo(() => {
+      if (!React__default.isValidElement(children)) {
+        return children;
+      }
+      const childRef = getChildRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
-      return React.cloneElement(children, {
+      return React__default.cloneElement(children, {
         ...mergedProps,
-        ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
+        ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
       });
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children });
+    }, [children, slotProps, forwardedRef]);
+    return /* @__PURE__ */ jsx(Fragment, { children: slottedChild });
   }
 );
 SlotClone.displayName = "SlotClone";
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
+  if (slotProps.className && childProps.className) {
+    overrideProps.className = `${slotProps.className} ${childProps.className}`;
+  } else if (slotProps.className) {
+    overrideProps.className = slotProps.className;
+  }
+  if (slotProps.style && childProps.style) {
+    overrideProps.style = { ...slotProps.style, ...childProps.style };
+  } else if (slotProps.style) {
+    overrideProps.style = slotProps.style;
+  }
+  for (const propName in slotProps) {
+    if (propName.startsWith("on") && typeof slotProps[propName] === "function") {
+      const slotHandler = slotProps[propName];
+      const childHandler = childProps[propName];
+      if (childHandler && typeof childHandler === "function") {
         overrideProps[propName] = (...args) => {
-          const result = childPropValue(...args);
-          slotPropValue(...args);
-          return result;
+          childHandler(...args);
+          slotHandler(...args);
         };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
+      } else {
+        overrideProps[propName] = slotHandler;
       }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    } else if (propName !== "className" && propName !== "style") {
+      overrideProps[propName] = slotProps[propName];
     }
   }
-  return { ...slotProps, ...overrideProps };
+  return overrideProps;
 }
 function composeRefs(...refs) {
   return (node) => {
@@ -59,25 +78,12 @@ function composeRefs(...refs) {
       if (typeof ref === "function") {
         ref(node);
       } else if (ref != null) {
-        ref.current = node;
+        const mutableRef = ref;
+        mutableRef.current = node;
       }
     });
   };
 }
-function getElementRef(element) {
-  var _a, _b;
-  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
 export {
   Slot
 };

package/dist/components/tooltip/dist/index.js

@@ -184,17 +184,12 @@ var TooltipTrigger = forwardRef(
   function TooltipTrigger2({ children, ...props }, propRef) {
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setReference, propRef]);
-    const slotProps = useMemo(() => {
-      return {
-        ...state.disabled && { disabled: true },
-        ...state.getReferenceProps(props)
-      };
-    }, [state.disabled, state.getReferenceProps, props]);
     return /* @__PURE__ */ jsx(
       Slot,
       {
         ref,
-        ...slotProps,
+        ...state.disabled && { disabled: true },
+        ...state.getReferenceProps(props),
         children
       }
     );

package/dist/components/virtual-select/dist/index.d.ts

@@ -0,0 +1,48 @@
+import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
+import { FloatingFocusManagerProps } from '@floating-ui/react';
+import { default as React } from 'react';
+interface VirtualSelectOption<T = unknown> {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    data?: T;
+}
+interface VirtualSelectProps<T = unknown> {
+    className?: string;
+    closeOnEscape?: boolean;
+    disabled?: boolean;
+    emptyText?: string;
+    focusManagerProps?: Partial<FloatingFocusManagerProps>;
+    matchTriggerWidth?: boolean;
+    maxHeight?: number;
+    onChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    options: VirtualSelectOption<T>[];
+    overscan?: number;
+    placeholder?: string;
+    placement?: "bottom-start" | "bottom-end";
+    portalId?: string;
+    readOnly?: boolean;
+    renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
+    renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
+    root?: HTMLElement | null;
+    searchPlaceholder?: string;
+    size?: "default" | "large";
+    value?: string | null;
+    variant?: "default" | "light" | "reset";
+}
+interface VirtualSelectComponentType {
+    <T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
+    displayName?: string;
+    Content: typeof MenuContextContent;
+    Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
+    Item: typeof MenuContextItem;
+    Search: typeof MenuSearch;
+    Trigger: typeof MenuTrigger;
+    Value: typeof MenuValue;
+}
+declare const VirtualSelect: VirtualSelectComponentType;
+
+export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };

package/dist/styles/components.css

@@ -1,22 +1,156 @@
+@theme {
+  --sash-size: 8px;
+  --sash-hover-size: 4px;
+  --focus-border: var(--color-accent-background);
+  --sash-hover-transition-duration: 0.1s;
+  --separator-border: var(--color-default-boundary);
+
+  --shadow-border-white: 0 0 0 1px var(--color-white);
+  --shadow-border-white-inset: inset 0 0 0 1px var(--color-white);
+
+  --shadow-range-thumb:
+    0 0 0 2px rgb(255 255 255), 0 1px 4px 2px rgba(0 0 0 / 0.1), 0 4px 8px 2px rgba(0 0 0 / 0.1),
+    0 0 1px 2px rgba(0 0 0 / 0.3);
+
+  --shadow-checked-focused:
+    inset 0 0 0 1px var(--color-default-background), inset 0 0 0 8px var(--color-accent-background);
+
+  --shadow-switch-focused:
+    inset 0 0 0 1px var(--color-default-background), inset 0 0 0 8px var(--color-default-foreground);
+
+  --animate-spinner-spin-shape1: spinner-spin-shape1 2s linear 0s infinite normal;
+  --animate-spinner-spin-shape2: spinner-spin-shape2 2s linear 0s infinite normal;
+  --animate-spinner-spin-shape3: spinner-spin-shape3 2s linear 0s infinite normal;
+  --animate-spinner-spin-shape4: spinner-spin-shape4 2s linear 0s infinite normal;
+  --animate-spinner-bounce-left: spinner-bounce-left 0.5s infinite alternate ease;
+  --animate-spinner-bounce-right: spinner-bounce-right 0.5s infinite alternate ease;
+  --animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+    infinite normal none running;
+}
+
+/* Base styles */
 @layer components {
-  .skeleton {
-    transition: all 0.2s ease-in-out !important;
-    outline: none !important;
-    box-shadow: none !important;
-    border-color: transparent !important;
-    border-radius: var(--radius-md);
-    background-color: var(--color-secondary-background) !important;
-    resize: none !important;
-    pointer-events: none !important;
-    color: transparent !important;
-    &::placeholder,
-    &:placeholder-shown {
-      color: transparent !important;
+  .scrollbar-hide {
+    /* IE and Edge */
+    -ms-overflow-style: none;
+    /* Firefox */
+    scrollbar-width: none;
+    /* Safari and Chrome */
+    &::-webkit-scrollbar {
+      display: none;
     }
-    & * {
-      visibility: hidden !important;
+  }
+
+  .press-move-cursor {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10000001;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23fff' d='M5.41 12 9 8.41V11h16V8.42L28.58 12 25 15.59V13H9v2.59L5.41 12ZM4 12l6 6v-4h14v4l6-6-6-6v4H10V6l-6 6Z'/%3E%3Cpath fill='%23202125' d='M12.5 13h12.52v2.59L28.58 12l-3.56-3.58v2.6H9v-2.6L5.41 12 9 15.59V13h3.5Z'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='29.6' height='15.6' x='2.2' y='5.2' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_504_477'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_504_477' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 34px;
+    height: 24px;
+    pointer-events: none;
+  }
+}
+
+/* Animations */
+@layer components {
+  @keyframes spinner-spin-shape1 {
+    0% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(0, var(--bounce));
+    }
+    50% {
+      transform: translate(var(--bounce), var(--bounce));
+    }
+    75% {
+      transform: translate(var(--bounce), 0);
+    }
+  }
+  @keyframes spinner-spin-shape2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(calc(var(--bounce) * -1), 0);
+    }
+    50% {
+      transform: translate(calc(var(--bounce) * -1), var(--bounce));
+    }
+    75% {
+      transform: translate(0, var(--bounce));
+    }
+  }
+  @keyframes spinner-spin-shape3 {
+    0% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(var(--bounce), 0);
+    }
+    50% {
+      transform: translate(var(--bounce), calc(var(--bounce) * -1));
+    }
+    75% {
+      transform: translate(0, calc(var(--bounce) * -1));
+    }
+  }
+  @keyframes spinner-spin-shape4 {
+    0% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(0, calc(var(--bounce) * -1));
+    }
+    50% {
+      transform: translate(calc(var(--bounce) * -1), calc(var(--bounce) * -1));
+    }
+    75% {
+      transform: translate(calc(var(--bounce) * -1), 0);
     }
   }
+
+  @keyframes spinner-bounce-left {
+    0% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    25% {
+      background-color: currentColor;
+    }
+    100% {
+      transform: translate3d(calc(var(--shape) / -1), 0, 0) scale(0.64);
+      background-color: transparent;
+    }
+  }
+  @keyframes spinner-bounce-right {
+    0% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    25% {
+      background-color: currentColor;
+    }
+    100% {
+      transform: translate3d(var(--shape), 0, 0) scale(0.64);
+      background-color: transparent;
+    }
+  }
+
+  @keyframes indeterminate-bar {
+    0% {
+      transform: translateX(-50%) scaleX(0.2);
+    }
+    100% {
+      transform: translateX(100%) scaleX(1);
+    }
+  }
+}
+
+/* Allotment styles */
+@layer components {
   .allotment-module_splitView__L-yRc {
     position: relative;
     width: 100%;
@@ -228,31 +362,8 @@
   }
 }
 
+/* Panel row styles */
 @layer components {
-  .scrollbar-hide {
-    /* IE and Edge */
-    -ms-overflow-style: none;
-    /* Firefox */
-    scrollbar-width: none;
-    /* Safari and Chrome */
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .press-move-cursor {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 10000001;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23fff' d='M5.41 12 9 8.41V11h16V8.42L28.58 12 25 15.59V13H9v2.59L5.41 12ZM4 12l6 6v-4h14v4l6-6-6-6v4H10V6l-6 6Z'/%3E%3Cpath fill='%23202125' d='M12.5 13h12.52v2.59L28.58 12l-3.56-3.58v2.6H9v-2.6L5.41 12 9 15.59V13h3.5Z'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='29.6' height='15.6' x='2.2' y='5.2' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_504_477'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_504_477' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 34px;
-    height: 24px;
-    pointer-events: none;
-  }
-
   .properties-panel {
     @apply relative flex min-w-0 flex-col;
     &:not(:last-child) {
@@ -341,42 +452,10 @@
     grid-template-columns: 1fr 1fr 1.5rem;
     grid-template-areas: "label-1 label-2 ." "input-1 input-3 icon-1" "input-2 input-3 icon-2";
   }
+}
 
-  .fields__text-field {
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas: "prefix input suffix";
-    &::before {
-      @apply pointer-events-none z-2 h-full border transform-3d;
-      grid-row: 1 / 2;
-      grid-column: 1 / 4;
-      border-radius: inherit;
-      content: "";
-    }
-  }
-
-  .input__number {
-    grid-template-rows: 1.5rem;
-    grid-template-columns: auto auto 1fr auto auto;
-    grid-template-areas: "prefix-handler variable input action suffix-handler";
-    &::before {
-      @apply pointer-events-none z-3 h-6 rounded-md border;
-      grid-row: 1 / 2;
-      grid-column: 1 / 6;
-      content: "";
-    }
-  }
-
-  .input-search {
-    @apply relative grid;
-    grid-template-columns: 1.5rem 1fr auto;
-    grid-template-areas: "icon input action";
-    &::before {
-      @apply pointer-events-none z-2 h-full rounded-md border border-transparent;
-      grid-row: 1 / 2;
-      grid-column: 1 / 4;
-    }
-  }
-
+/* Condition styles */
+@layer components {
   .condition__group {
     grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
     grid-template-columns: 1fr 1.5rem;
@@ -402,7 +481,10 @@
       bottom: 2.25rem;
     }
   }
+}
 
+/* Tree list styles */
+@layer components {
   .tree-list {
     &[data-has-horizontal-scroll="true"] {
       & .tree-list_node::after {
@@ -422,7 +504,32 @@
     width: var(--tree-node-width);
     height: var(--tree-list-height);
   }
+}
 
+/* Skeleton styles */
+@layer components {
+  .skeleton {
+    transition: all 0.2s ease-in-out !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: transparent !important;
+    border-radius: var(--radius-md);
+    background-color: var(--color-secondary-background) !important;
+    resize: none !important;
+    pointer-events: none !important;
+    color: transparent !important;
+    &::placeholder,
+    &:placeholder-shown {
+      color: transparent !important;
+    }
+    & * {
+      visibility: hidden !important;
+    }
+  }
+}
+
+/* Comments styles */
+@layer components {
   .comments__input {
     grid-template-columns: calc(var(--spacing) * 6) 1fr;
   }
@@ -434,135 +541,55 @@
     grid-template-areas: "avatar meta action" ". content reaction" ". reactions .";
     column-gap: calc(var(--spacing) * 2);
   }
+}
 
-  .modal__header {
-    @apply grid;
-    grid-template-rows: minmax(2.5rem, auto);
-    grid-template-areas: "title . close" "input input input";
-  }
-
-  .modal__header--action {
-    grid-template-columns: auto 1fr 2.5rem;
-  }
-
-  @keyframes spinner-spin-shape1 {
-    0% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(0, var(--bounce));
-    }
-    50% {
-      transform: translate(var(--bounce), var(--bounce));
-    }
-    75% {
-      transform: translate(var(--bounce), 0);
-    }
-  }
-  @keyframes spinner-spin-shape2 {
-    0% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(calc(var(--bounce) * -1), 0);
-    }
-    50% {
-      transform: translate(calc(var(--bounce) * -1), var(--bounce));
-    }
-    75% {
-      transform: translate(0, var(--bounce));
-    }
-  }
-  @keyframes spinner-spin-shape3 {
-    0% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(var(--bounce), 0);
-    }
-    50% {
-      transform: translate(var(--bounce), calc(var(--bounce) * -1));
-    }
-    75% {
-      transform: translate(0, calc(var(--bounce) * -1));
-    }
-  }
-  @keyframes spinner-spin-shape4 {
-    0% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(0, calc(var(--bounce) * -1));
-    }
-    50% {
-      transform: translate(calc(var(--bounce) * -1), calc(var(--bounce) * -1));
-    }
-    75% {
-      transform: translate(calc(var(--bounce) * -1), 0);
+/* Fields styles */
+@layer components {
+  .fields__text-field {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: "prefix input suffix";
+    &::before {
+      @apply pointer-events-none z-2 h-full border transform-3d;
+      grid-row: 1 / 2;
+      grid-column: 1 / 4;
+      border-radius: inherit;
+      content: "";
     }
   }
 
-  @keyframes spinner-bounce-left {
-    0% {
-      transform: translate3d(0, 0, 0) scale(1);
-    }
-    25% {
-      background-color: currentColor;
-    }
-    100% {
-      transform: translate3d(calc(var(--shape) / -1), 0, 0) scale(0.64);
-      background-color: transparent;
-    }
-  }
-  @keyframes spinner-bounce-right {
-    0% {
-      transform: translate3d(0, 0, 0) scale(1);
-    }
-    25% {
-      background-color: currentColor;
-    }
-    100% {
-      transform: translate3d(var(--shape), 0, 0) scale(0.64);
-      background-color: transparent;
+  .input__number {
+    grid-template-rows: 1.5rem;
+    grid-template-columns: auto auto 1fr auto auto;
+    grid-template-areas: "prefix-handler variable input action suffix-handler";
+    &::before {
+      @apply pointer-events-none z-3 h-6 rounded-md border;
+      grid-row: 1 / 2;
+      grid-column: 1 / 6;
+      content: "";
     }
   }
 
-  @keyframes indeterminate-bar {
-    0% {
-      transform: translateX(-50%) scaleX(0.2);
-    }
-    100% {
-      transform: translateX(100%) scaleX(1);
+  .input-search {
+    @apply relative grid;
+    grid-template-columns: 1.5rem 1fr auto;
+    grid-template-areas: "icon input action";
+    &::before {
+      @apply pointer-events-none z-2 h-full rounded-md border border-transparent;
+      grid-row: 1 / 2;
+      grid-column: 1 / 4;
     }
   }
 }
 
-@theme {
-  --sash-size: 8px;
-  --sash-hover-size: 4px;
-  --focus-border: var(--color-accent-background);
-  --sash-hover-transition-duration: 0.1s;
-  --separator-border: var(--color-default-boundary);
-
-  --shadow-border-white: 0 0 0 1px var(--color-white);
-  --shadow-border-white-inset: inset 0 0 0 1px var(--color-white);
-
-  --shadow-range-thumb:
-    0 0 0 2px rgb(255 255 255), 0 1px 4px 2px rgba(0 0 0 / 0.1), 0 4px 8px 2px rgba(0 0 0 / 0.1),
-    0 0 1px 2px rgba(0 0 0 / 0.3);
-
-  --shadow-checked-focused:
-    inset 0 0 0 1px var(--color-default-background), inset 0 0 0 8px var(--color-accent-background);
-
-  --shadow-switch-focused:
-    inset 0 0 0 1px var(--color-default-background), inset 0 0 0 8px var(--color-default-foreground);
+/* Modal styles */
+@layer components {
+  .modal__header {
+    @apply grid;
+    grid-template-rows: minmax(2.5rem, auto);
+    grid-template-areas: "title . close" "input input input";
+  }
 
-  --animate-spinner-spin-shape1: spinner-spin-shape1 2s linear 0s infinite normal;
-  --animate-spinner-spin-shape2: spinner-spin-shape2 2s linear 0s infinite normal;
-  --animate-spinner-spin-shape3: spinner-spin-shape3 2s linear 0s infinite normal;
-  --animate-spinner-spin-shape4: spinner-spin-shape4 2s linear 0s infinite normal;
-  --animate-spinner-bounce-left: spinner-bounce-left 0.5s infinite alternate ease;
-  --animate-spinner-bounce-right: spinner-bounce-right 0.5s infinite alternate ease;
-  --animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395)
-    infinite normal none running;
+  .modal__header--action {
+    grid-template-columns: auto 1fr 2.5rem;
+  }
 }