moduix 0.11.2 → 1.0.0

package/README.md

@@ -42,6 +42,13 @@ it helps another team build consistent interfaces faster, that is already a good
 
 ## Installation
 
+moduix supports two installation paths:
+
+- Install the library as a regular npm package when you want package-managed updates.
+- Install component source into your own project with `shadcn` when you want direct ownership.
+
+### npm package
+
 ```bash
 npm install moduix @base-ui/react
 ```
@@ -49,6 +56,59 @@ npm install moduix @base-ui/react
 `react`, `react-dom`, and `@base-ui/react` are peer dependencies. They stay in your application
 bundle, so moduix does not ship duplicate React or Base UI runtimes.
 
+### shadcn copy-owned install
+
+`shadcn` can install selected moduix components from the GitHub registry directly into your project.
+The files become part of your codebase instead of staying in `node_modules`.
+
+Make sure your project resolves the `@/*` alias to `src/*` in both `tsconfig.json` and
+`tsconfig.app.json`, and mirror it in your bundler config.
+
+Create `components.json` in the project root. Current workaround while `shadcn` custom registry
+base init still fails for this setup:
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
+```
+
+```bash
+npx shadcn@latest add Blinks44/moduix/button
+npx shadcn@latest add Blinks44/moduix/accordion
+```
+
+The registry install also pulls in the shared moduix foundation files those components need, such as
+styles, icons, and small utilities.
+
+Import the generated foundation stylesheet once in your application entry point:
+
+```tsx
+import '@/lib/moduix/styles/style.css';
+```
+
+With the aliases above, generated files land in `src/components/moduix/*` and `src/lib/moduix/*`.
+
 ## Usage
 
 Import the required foundation stylesheet once in your application entry point:

package/dist/components/{Accordion → accordion}/Accordion.css

@@ -1,22 +1,24 @@
 @layer ui.components {
-  .BP0x5G_root {
+  .w4lmKG_root {
     box-sizing: border-box;
     min-width: 0;
+    width: var(--accordion-width, 22rem);
+    max-width: var(--accordion-max-width, 100%);
     color: var(--accordion-color, var(--color-foreground));
     flex-direction: column;
     display: flex;
   }
 
-  .BP0x5G_item:not(:last-child) {
+  .w4lmKG_item:not(:last-child) {
     border-bottom: var(--accordion-item-border-width, var(--border-width-sm)) solid
       var(--accordion-item-border-color, var(--color-border));
   }
 
-  .BP0x5G_header {
+  .w4lmKG_header {
     margin: 0;
   }
 
-  .BP0x5G_trigger {
+  .w4lmKG_trigger {
     box-sizing: border-box;
     justify-content: space-between;
     align-items: center;
@@ -59,7 +61,7 @@
     }
   }
 
-  .BP0x5G_triggerIcon {
+  .w4lmKG_triggerIcon {
     box-sizing: border-box;
     width: var(--accordion-icon-size, .75rem);
     height: var(--accordion-icon-size, .75rem);
@@ -79,7 +81,7 @@
     }
   }
 
-  .BP0x5G_panel {
+  .w4lmKG_panel {
     box-sizing: border-box;
     height: var(--accordion-panel-height);
     color: var(--accordion-panel-color, var(--color-muted-foreground));

package/dist/components/{Accordion → accordion}/Accordion.d.ts

@@ -1,7 +1,7 @@
 import { Accordion } from "@base-ui/react/accordion";
 import { ComponentProps } from "react";
 
-//#region src/components/Accordion/Accordion.d.ts
+//#region src/components/accordion/Accordion.d.ts
 declare const Accordion$1: import("react").ForwardRefExoticComponent<Omit<Accordion.Root.Props<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const AccordionHeader: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/components/{Accordion → accordion}/Accordion.js

@@ -1,11 +1,11 @@
-import { PlusIcon } from "../../icons/ui/Icons.js";
-import { mergeClassName } from "../../utils/mergeClassName.js";
+import { PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
 import Accordion_module_default from "./Accordion.module.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Accordion } from "@base-ui/react/accordion";
 import { forwardRef } from "react";
-//#region src/components/Accordion/Accordion.tsx
+//#region src/components/accordion/Accordion.tsx
 const Accordion$1 = forwardRef(function Accordion$2({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Accordion.Root, {
 		ref,

package/dist/components/accordion/Accordion.module.js

@@ -0,0 +1,12 @@
+import './Accordion.css';
+//#region src/components/accordion/Accordion.module.css
+var Accordion_module_default = {
+	"header": "w4lmKG_header",
+	"item": "w4lmKG_item",
+	"panel": "w4lmKG_panel",
+	"root": "w4lmKG_root",
+	"trigger": "w4lmKG_trigger",
+	"triggerIcon": "w4lmKG_triggerIcon"
+};
+//#endregion
+export { Accordion_module_default as default };

package/dist/components/{Alert → alert}/Alert.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .Rbv-4q_root {
+  .qvul9W_root {
     box-sizing: border-box;
     align-items: start;
     gap: var(--alert-gap, var(--spacing-3));
@@ -59,7 +59,7 @@
     }
   }
 
-  .Rbv-4q_icon {
+  .qvul9W_icon {
     width: var(--alert-icon-size, 1rem);
     height: var(--alert-icon-size, 1rem);
     color: var(--alert-icon-color, var(--alert-icon-color-default, currentColor));
@@ -76,13 +76,13 @@
     }
   }
 
-  .Rbv-4q_content {
+  .qvul9W_content {
     gap: var(--alert-content-gap, var(--spacing-1));
     min-width: 0;
     display: grid;
   }
 
-  .Rbv-4q_title {
+  .qvul9W_title {
     min-width: 0;
     color: var(--alert-title-color, var(--alert-color, var(--alert-color-default)));
     font-size: var(--alert-title-font-size, var(--text-sm));
@@ -92,7 +92,7 @@
     margin: 0;
   }
 
-  .Rbv-4q_description {
+  .qvul9W_description {
     min-width: 0;
     color: var(--alert-description-color, var(--color-muted-foreground));
     font-size: var(--alert-description-font-size, var(--text-sm));
@@ -108,7 +108,7 @@
     }
   }
 
-  .Rbv-4q_root:not(:has([data-slot="alert-icon"])) .Rbv-4q_content {
+  .qvul9W_root:not(:has([data-slot="alert-icon"])) .qvul9W_content {
     grid-column: 1 / -1;
   }
 }

package/dist/components/{Alert → alert}/Alert.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, ComponentPropsWithoutRef } from "react";
 
-//#region src/components/Alert/Alert.d.ts
+//#region src/components/alert/Alert.d.ts
 type AlertVariant = 'default' | 'info' | 'success' | 'warning' | 'destructive';
 type AlertTitleElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 declare function Alert({

package/dist/components/{Alert → alert}/Alert.js

@@ -1,7 +1,7 @@
 import Alert_module_default from "./Alert.module.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
-//#region src/components/Alert/Alert.tsx
+//#region src/components/alert/Alert.tsx
 function Alert({ className, role, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: role ?? (variant === "destructive" ? "alert" : "status"),

package/dist/components/alert/Alert.module.js

@@ -0,0 +1,11 @@
+import './Alert.css';
+//#region src/components/alert/Alert.module.css
+var Alert_module_default = {
+	"content": "qvul9W_content",
+	"description": "qvul9W_description",
+	"icon": "qvul9W_icon",
+	"root": "qvul9W_root",
+	"title": "qvul9W_title"
+};
+//#endregion
+export { Alert_module_default as default };

package/dist/components/{AlertDialog → alert-dialog}/AlertDialog.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .ktfPPa_trigger, .ktfPPa_close {
+  .uWgiba_trigger, .uWgiba_close {
     box-sizing: border-box;
     min-height: var(--alert-dialog-control-height, var(--size-lg));
     padding: var(--alert-dialog-control-padding-y, .5rem)
@@ -41,11 +41,11 @@
     }
   }
 
-  .ktfPPa_trigger {
+  .uWgiba_trigger {
     color: var(--alert-dialog-trigger-color, var(--color-destructive));
   }
 
-  .ktfPPa_backdrop {
+  .uWgiba_backdrop {
     z-index: var(--z-backdrop);
     background-color: var(--alert-dialog-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
     min-height: 100dvh;
@@ -61,7 +61,7 @@
     }
   }
 
-  .ktfPPa_viewport {
+  .uWgiba_viewport {
     box-sizing: border-box;
     z-index: var(--z-modal);
     overscroll-behavior: contain;
@@ -73,7 +73,7 @@
     overflow-y: auto;
   }
 
-  .ktfPPa_popup {
+  .uWgiba_popup {
     box-sizing: border-box;
     gap: var(--spacing-4);
     width: min(var(--alert-dialog-width, 24rem),
@@ -98,36 +98,36 @@
     }
   }
 
-  .ktfPPa_header {
+  .uWgiba_header {
     gap: var(--alert-dialog-header-gap, var(--spacing-1));
     display: grid;
   }
 
-  .ktfPPa_title {
+  .uWgiba_title {
     color: var(--alert-dialog-title-color, var(--alert-dialog-color, var(--color-popover-foreground)));
     font-size: var(--alert-dialog-title-font-size, var(--text-lg));
     font-weight: var(--alert-dialog-title-font-weight, var(--weight-semibold));
     line-height: var(--alert-dialog-title-line-height, var(--line-height-text-lg));
   }
 
-  .ktfPPa_description {
+  .uWgiba_description {
     color: var(--alert-dialog-description-color, var(--alert-dialog-muted-color, var(--color-muted-foreground)));
     font-size: var(--alert-dialog-description-font-size, var(--text-md));
     line-height: var(--alert-dialog-description-line-height, var(--line-height-text-md));
   }
 
-  .ktfPPa_title, .ktfPPa_description {
+  .uWgiba_title, .uWgiba_description {
     margin: 0;
   }
 
-  .ktfPPa_footer {
+  .uWgiba_footer {
     justify-content: flex-end;
     gap: var(--alert-dialog-footer-gap, var(--spacing-2));
     flex-wrap: wrap;
     display: flex;
   }
 
-  .ktfPPa_cancel {
+  .uWgiba_cancel {
     border-color: var(--alert-dialog-cancel-border-color, var(--color-border));
     background-color: var(--alert-dialog-cancel-bg, var(--alert-dialog-control-bg, var(--color-background)));
     color: var(--alert-dialog-cancel-color, var(--alert-dialog-control-color, var(--color-foreground)));
@@ -139,7 +139,7 @@
     }
   }
 
-  .ktfPPa_action {
+  .uWgiba_action {
     border-color: var(--alert-dialog-action-border-color, var(--color-primary));
     background-color: var(--alert-dialog-action-bg, var(--color-primary));
     color: var(--alert-dialog-action-color, var(--color-primary-foreground));
@@ -151,7 +151,7 @@
     }
   }
 
-  .ktfPPa_body {
+  .uWgiba_body {
     color: var(--alert-dialog-description-color, var(--alert-dialog-muted-color, var(--color-muted-foreground)));
     font-size: var(--alert-dialog-description-font-size, var(--text-md));
     line-height: var(--alert-dialog-description-line-height, var(--line-height-text-md));

package/dist/components/{AlertDialog → alert-dialog}/AlertDialog.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 
-//#region src/components/AlertDialog/AlertDialog.d.ts
+//#region src/components/alert-dialog/AlertDialog.d.ts
 declare const AlertDialog$1: typeof AlertDialog.Root;
 declare const createAlertDialogHandle: typeof AlertDialog.createHandle;
 declare function AlertDialogPortal({

package/dist/components/{AlertDialog → alert-dialog}/AlertDialog.js

@@ -1,9 +1,9 @@
-import { mergeClassName } from "../../utils/mergeClassName.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
 import AlertDialog_module_default from "./AlertDialog.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
-//#region src/components/AlertDialog/AlertDialog.tsx
+//#region src/components/alert-dialog/AlertDialog.tsx
 const AlertDialog$1 = AlertDialog.Root;
 const createAlertDialogHandle = AlertDialog.createHandle;
 function AlertDialogPortal({ className, ...props }) {

package/dist/components/alert-dialog/AlertDialog.module.js

@@ -0,0 +1,18 @@
+import './AlertDialog.css';
+//#region src/components/alert-dialog/AlertDialog.module.css
+var AlertDialog_module_default = {
+	"action": "uWgiba_action",
+	"backdrop": "uWgiba_backdrop",
+	"body": "uWgiba_body",
+	"cancel": "uWgiba_cancel",
+	"close": "uWgiba_close",
+	"description": "uWgiba_description",
+	"footer": "uWgiba_footer",
+	"header": "uWgiba_header",
+	"popup": "uWgiba_popup",
+	"title": "uWgiba_title",
+	"trigger": "uWgiba_trigger",
+	"viewport": "uWgiba_viewport"
+};
+//#endregion
+export { AlertDialog_module_default as default };

package/dist/components/{AspectRatio → aspect-ratio}/AspectRatio.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._700akW_root {
+  .V0jbLW_root {
     border-radius: var(--aspect-ratio-radius, var(--radius-md));
     width: 100%;
     position: relative;

package/dist/components/{AspectRatio → aspect-ratio}/AspectRatio.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from "react";
 
-//#region src/components/AspectRatio/AspectRatio.d.ts
+//#region src/components/aspect-ratio/AspectRatio.d.ts
 type RatioPreset = 'square' | 'video' | 'portrait' | 'photo';
 declare function AspectRatio({
   ratio,

package/dist/components/{AspectRatio → aspect-ratio}/AspectRatio.js

@@ -1,7 +1,7 @@
 import AspectRatio_module_default from "./AspectRatio.module.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-//#region src/components/AspectRatio/AspectRatio.tsx
+//#region src/components/aspect-ratio/AspectRatio.tsx
 const PRESETS = {
 	square: 1,
 	video: 16 / 9,

package/dist/components/aspect-ratio/AspectRatio.module.js

@@ -0,0 +1,5 @@
+import './AspectRatio.css';
+//#region src/components/aspect-ratio/AspectRatio.module.css
+var AspectRatio_module_default = { "root": "V0jbLW_root" };
+//#endregion
+export { AspectRatio_module_default as default };

package/dist/components/{Autocomplete → autocomplete}/Autocomplete.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .TIf05q_inputGroup {
+  .EXUTcW_inputGroup {
     width: var(--autocomplete-width, 16rem);
     min-height: var(--autocomplete-control-height, var(--size-lg));
     padding-inline: var(--autocomplete-input-group-padding-x, 0);
@@ -28,7 +28,7 @@
     }
   }
 
-  .TIf05q_input {
+  .EXUTcW_input {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -48,13 +48,13 @@
     }
   }
 
-  .TIf05q_inputGroup:has( > [data-slot="autocomplete-control-actions"]) {
-    & .TIf05q_input {
+  .EXUTcW_inputGroup:has( > [data-slot="autocomplete-control-actions"]) {
+    & .EXUTcW_input {
       padding-inline-end: var(--autocomplete-input-padding-x-end-with-actions, 3.25rem);
     }
   }
 
-  .TIf05q_trigger, .TIf05q_clear {
+  .EXUTcW_trigger, .EXUTcW_clear {
     box-sizing: border-box;
     width: var(--autocomplete-action-size, 1.5rem);
     height: var(--autocomplete-action-size, 1.5rem);
@@ -88,7 +88,7 @@
     }
   }
 
-  .TIf05q_icon {
+  .EXUTcW_icon {
     width: var(--autocomplete-icon-size, .875rem);
     height: var(--autocomplete-icon-size, .875rem);
     color: var(--autocomplete-icon-color, var(--color-muted-foreground));
@@ -98,12 +98,12 @@
     display: inline-flex;
   }
 
-  .TIf05q_iconSvg {
+  .EXUTcW_iconSvg {
     width: var(--autocomplete-icon-svg-size, 1rem);
     height: var(--autocomplete-icon-svg-size, 1rem);
   }
 
-  .TIf05q_backdrop {
+  .EXUTcW_backdrop {
     z-index: var(--z-backdrop);
     background-color: var(--autocomplete-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
     min-height: 100dvh;
@@ -119,12 +119,12 @@
     }
   }
 
-  .TIf05q_positioner {
+  .EXUTcW_positioner {
     z-index: var(--z-popup);
     outline: 0;
   }
 
-  .TIf05q_popup {
+  .EXUTcW_popup {
     box-sizing: border-box;
     width: var(--anchor-width);
     min-width: min(var(--anchor-width), var(--available-width));
@@ -155,7 +155,7 @@
     }
   }
 
-  .TIf05q_arrow {
+  .EXUTcW_arrow {
     color: var(--autocomplete-popup-bg, var(--color-popover));
     display: flex;
 
@@ -180,26 +180,26 @@
     }
   }
 
-  .TIf05q_arrowSvg {
+  .EXUTcW_arrowSvg {
     width: var(--autocomplete-arrow-width, 1.25rem);
     height: var(--autocomplete-arrow-height, .625rem);
     display: block;
     overflow: visible;
   }
 
-  .TIf05q_arrowFill {
+  .EXUTcW_arrowFill {
     fill: currentColor;
   }
 
-  .TIf05q_arrowOuterStroke {
+  .EXUTcW_arrowOuterStroke {
     fill: var(--autocomplete-arrow-stroke-color, var(--autocomplete-popup-border-color, var(--color-border)));
   }
 
-  .TIf05q_arrowInnerStroke {
+  .EXUTcW_arrowInnerStroke {
     fill: var(--autocomplete-popup-bg, var(--color-popover));
   }
 
-  .TIf05q_status {
+  .EXUTcW_status {
     margin: 0;
     padding: 0;
 
@@ -217,7 +217,7 @@
     }
   }
 
-  .TIf05q_empty {
+  .EXUTcW_empty {
     margin: 0;
     padding: 0;
 
@@ -230,7 +230,7 @@
     }
   }
 
-  .TIf05q_list {
+  .EXUTcW_list {
     box-sizing: border-box;
     max-height: min(var(--autocomplete-list-max-height, var(--autocomplete-popup-max-height, 24rem)),
       var(--available-height));
@@ -255,13 +255,13 @@
     }
   }
 
-  .TIf05q_row {
+  .EXUTcW_row {
     align-items: center;
     gap: var(--autocomplete-row-gap, var(--spacing-1));
     padding-inline: var(--autocomplete-row-padding-x, var(--spacing-1));
     display: flex;
 
-    & > .TIf05q_item {
+    & > .EXUTcW_item {
       width: var(--autocomplete-grid-item-width, 2.5rem);
       min-height: var(--autocomplete-grid-item-min-height, 2.5rem);
       padding-inline: var(--autocomplete-grid-item-padding-x, var(--spacing-2));
@@ -273,7 +273,7 @@
     }
   }
 
-  .TIf05q_item {
+  .EXUTcW_item {
     box-sizing: border-box;
     width: 100%;
     min-height: var(--autocomplete-item-min-height, var(--popup-item-min-height, 2rem));
@@ -313,18 +313,18 @@
     }
   }
 
-  .TIf05q_separator {
+  .EXUTcW_separator {
     height: var(--autocomplete-separator-size, var(--border-width-sm));
     margin: var(--autocomplete-separator-margin-y, var(--popup-separator-margin-y, .375rem))
       var(--autocomplete-separator-margin-x, var(--popup-separator-margin-x-start, 1rem));
     background-color: var(--autocomplete-border-color, var(--color-border));
   }
 
-  .TIf05q_group {
+  .EXUTcW_group {
     padding-bottom: var(--autocomplete-group-padding-bottom, var(--spacing-1));
   }
 
-  .TIf05q_groupLabel {
+  .EXUTcW_groupLabel {
     z-index: 1;
     padding: var(--autocomplete-group-label-padding-top, var(--popup-group-label-padding-y, .35rem))
       var(--autocomplete-group-label-padding-x, var(--popup-group-label-padding-x-start, .625rem))
@@ -340,13 +340,13 @@
     top: 0;
   }
 
-  .TIf05q_field {
+  .EXUTcW_field {
     gap: var(--autocomplete-field-gap, .375rem);
     flex-direction: column;
     display: inline-flex;
   }
 
-  .TIf05q_fieldLabel {
+  .EXUTcW_fieldLabel {
     font-size: var(--autocomplete-label-font-size, var(--text-sm));
     line-height: var(--autocomplete-label-line-height, var(--line-height-text-sm));
     font-weight: var(--autocomplete-label-font-weight, var(--weight-medium));
@@ -356,7 +356,7 @@
     display: inline-flex;
   }
 
-  .TIf05q_controlActions {
+  .EXUTcW_controlActions {
     right: var(--autocomplete-actions-offset-right, .5rem);
     align-items: center;
     gap: var(--autocomplete-actions-gap, .125rem);
@@ -366,14 +366,14 @@
     transform: translateY(-50%);
   }
 
-  .TIf05q_itemText {
+  .EXUTcW_itemText {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
     overflow: hidden;
   }
 
-  .TIf05q_itemTextContent {
+  .EXUTcW_itemTextContent {
     align-items: center;
     gap: var(--autocomplete-item-text-content-gap, var(--spacing-2));
     vertical-align: top;
@@ -382,7 +382,7 @@
     display: inline-flex;
   }
 
-  .TIf05q_itemTextIcon {
+  .EXUTcW_itemTextIcon {
     width: var(--autocomplete-item-text-icon-size, 1rem);
     height: var(--autocomplete-item-text-icon-size, 1rem);
     color: var(--autocomplete-item-text-icon-color, currentColor);
@@ -392,14 +392,14 @@
     display: inline-flex;
   }
 
-  .TIf05q_itemTextLabel {
+  .EXUTcW_itemTextLabel {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
     overflow: hidden;
   }
 
-  .TIf05q_fieldTrigger {
+  .EXUTcW_fieldTrigger {
     width: var(--autocomplete-width, 16rem);
     min-height: var(--autocomplete-control-height, var(--size-lg));
     justify-content: space-between;
@@ -435,7 +435,7 @@
     }
   }
 
-  .TIf05q_inlineInputContainer {
+  .EXUTcW_inlineInputContainer {
     box-sizing: border-box;
     padding: var(--autocomplete-inline-input-container-padding-top, var(--spacing-2))
       var(--autocomplete-inline-input-container-padding-x, var(--spacing-2))
@@ -444,7 +444,7 @@
     border-bottom-style: var(--autocomplete-inline-input-divider-style, solid);
     border-bottom-color: var(--autocomplete-inline-input-divider-color, var(--autocomplete-border-color, var(--color-border)));
 
-    & > .TIf05q_input {
+    & > .EXUTcW_input {
       padding-inline: var(--autocomplete-inline-input-padding-x, .75rem);
       border: var(--autocomplete-inline-input-border-width, var(--border-width-sm)) solid
         var(--autocomplete-border-color, var(--color-border));