moduix 0.11.2 → 1.0.0

package/dist/components/{Meter → meter}/Meter.js

@@ -1,9 +1,9 @@
-import { mergeClassName } from "../../utils/mergeClassName.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
 import Meter_module_default from "./Meter.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Meter } from "@base-ui/react/meter";
-//#region src/components/Meter/Meter.tsx
+//#region src/components/meter/Meter.tsx
 const Meter$1 = forwardRef(function Meter({ children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(MeterRoot, {
 		ref,

package/dist/components/meter/Meter.module.js

@@ -0,0 +1,11 @@
+import './Meter.css';
+//#region src/components/meter/Meter.module.css
+var Meter_module_default = {
+	"indicator": "NCdhpW_indicator",
+	"label": "NCdhpW_label",
+	"root": "NCdhpW_root",
+	"track": "NCdhpW_track",
+	"value": "NCdhpW_value"
+};
+//#endregion
+export { Meter_module_default as default };

package/dist/components/{NavigationMenu → navigation-menu}/NavigationMenu.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .BPQarq_root {
+  .z6kKla_root {
     box-sizing: border-box;
     min-width: var(--navigation-menu-min-width, max-content);
     padding: var(--navigation-menu-padding, var(--spacing-1));
@@ -8,7 +8,7 @@
     color: var(--navigation-menu-color, var(--color-foreground));
   }
 
-  .BPQarq_list {
+  .z6kKla_list {
     justify-content: var(--navigation-menu-list-justify, flex-start);
     gap: var(--navigation-menu-list-gap, 0);
     margin: 0;
@@ -17,15 +17,15 @@
     display: flex;
     position: relative;
 
-    .BPQarq_root[data-orientation="vertical"] & {
+    .z6kKla_root[data-orientation="vertical"] & {
       flex-direction: column;
       align-items: stretch;
     }
   }
 
-  .BPQarq_trigger, .BPQarq_link {
+  .z6kKla_trigger, .z6kKla_link {
     box-sizing: border-box;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     gap: var(--navigation-menu-trigger-gap, .375rem);
     min-height: var(--navigation-menu-trigger-height, var(--size-md));
@@ -40,6 +40,7 @@
     font: inherit;
     font-size: var(--navigation-menu-trigger-font-size, var(--text-sm));
     line-height: var(--navigation-menu-trigger-line-height, var(--line-height-text-sm));
+    text-align: left;
     user-select: none;
     cursor: pointer;
     transition: background-color var(--navigation-menu-transition, var(--transition-default)),
@@ -71,8 +72,8 @@
     }
   }
 
-  .BPQarq_trigger {
-    .BPQarq_root .BPQarq_root & {
+  .z6kKla_trigger {
+    .z6kKla_root .z6kKla_root & {
       width: 100%;
       min-width: var(--navigation-menu-submenu-trigger-min-width, 9rem);
       text-align: left;
@@ -83,14 +84,14 @@
       justify-content: flex-start;
     }
 
-    .BPQarq_root .BPQarq_root &:active, .BPQarq_root .BPQarq_root &[data-popup-open], .BPQarq_root .BPQarq_root &[data-active] {
+    .z6kKla_root .z6kKla_root &:active, .z6kKla_root .z6kKla_root &[data-popup-open], .z6kKla_root .z6kKla_root &[data-active] {
       background-color: var(--navigation-menu-submenu-trigger-bg-active, var(--navigation-menu-popup-bg, var(--color-background)));
       box-shadow: var(--navigation-menu-submenu-trigger-shadow-active, 0 1px 2px #00000014,
         0 1px 1px #0000000a);
     }
   }
 
-  .BPQarq_icon {
+  .z6kKla_icon {
     box-sizing: border-box;
     width: var(--navigation-menu-icon-size, .875rem);
     height: var(--navigation-menu-icon-size, .875rem);
@@ -109,16 +110,16 @@
       height: 100%;
     }
 
-    .BPQarq_root .BPQarq_root & {
+    .z6kKla_root .z6kKla_root & {
       margin-left: auto;
     }
   }
 
-  .BPQarq_portal {
+  .z6kKla_portal {
     z-index: var(--z-popup);
   }
 
-  .BPQarq_backdrop {
+  .z6kKla_backdrop {
     z-index: var(--z-backdrop);
     pointer-events: none;
     background-color: var(--navigation-menu-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
@@ -137,7 +138,7 @@
     }
   }
 
-  .BPQarq_positioner {
+  .z6kKla_positioner {
     --_navigation-menu-positioner-duration: var(--navigation-menu-popup-transition-duration, var(--duration-slow));
     --_navigation-menu-positioner-easing: var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1));
     box-sizing: border-box;
@@ -190,7 +191,7 @@
     }
   }
 
-  .BPQarq_popup {
+  .z6kKla_popup {
     box-sizing: border-box;
     width: var(--popup-width);
     height: var(--popup-height);
@@ -223,7 +224,7 @@
     }
   }
 
-  .BPQarq_content {
+  .z6kKla_content {
     box-sizing: border-box;
     width: min(var(--navigation-menu-content-width-mobile, calc(100vw - var(--spacing-8))),
       var(--available-width, 100vw));
@@ -265,14 +266,14 @@
     }
   }
 
-  .BPQarq_viewport {
+  .z6kKla_viewport {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
   }
 
-  .BPQarq_arrow {
+  .z6kKla_arrow {
     color: var(--navigation-menu-popup-bg, var(--color-popover));
     transition: left var(--navigation-menu-arrow-transition-duration, var(--duration-slow))
       var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1));
@@ -305,15 +306,15 @@
     }
   }
 
-  .BPQarq_arrowFill {
+  .z6kKla_arrowFill {
     fill: currentColor;
   }
 
-  .BPQarq_arrowOuterStroke {
+  .z6kKla_arrowOuterStroke {
     fill: var(--navigation-menu-arrow-stroke-color, var(--navigation-menu-popup-border-color, var(--color-border)));
   }
 
-  .BPQarq_arrowInnerStroke {
+  .z6kKla_arrowInnerStroke {
     fill: var(--navigation-menu-popup-bg, var(--color-popover));
   }
 }

package/dist/components/{NavigationMenu → navigation-menu}/NavigationMenu.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { NavigationMenu } from "@base-ui/react/navigation-menu";
 
-//#region src/components/NavigationMenu/NavigationMenu.d.ts
+//#region src/components/navigation-menu/NavigationMenu.d.ts
 type NavigationMenuPositionerProps = Pick<NavigationMenu.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'arrowPadding' | 'anchor' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'positionMethod' | 'disableAnchorTracking'>;
 type NavigationMenuProps = NavigationMenu.Root.Props & NavigationMenuPositionerProps & {
   showArrow?: boolean;

package/dist/components/{NavigationMenu → navigation-menu}/NavigationMenu.js

@@ -1,9 +1,9 @@
-import { ChevronDownIcon, PopupArrowIcon } from "../../icons/ui/Icons.js";
-import { mergeClassName } from "../../utils/mergeClassName.js";
+import { ChevronDownIcon, PopupArrowIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
 import NavigationMenu_module_default from "./NavigationMenu.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu } from "@base-ui/react/navigation-menu";
-//#region src/components/NavigationMenu/NavigationMenu.tsx
+//#region src/components/navigation-menu/NavigationMenu.tsx
 const DEFAULT_SIDE_OFFSET = 10;
 const DEFAULT_COLLISION_AVOIDANCE = { side: "none" };
 const DEFAULT_COLLISION_PADDING = {

package/dist/components/navigation-menu/NavigationMenu.module.js

@@ -0,0 +1,21 @@
+import './NavigationMenu.css';
+//#region src/components/navigation-menu/NavigationMenu.module.css
+var NavigationMenu_module_default = {
+	"arrow": "z6kKla_arrow",
+	"arrowFill": "z6kKla_arrowFill",
+	"arrowInnerStroke": "z6kKla_arrowInnerStroke",
+	"arrowOuterStroke": "z6kKla_arrowOuterStroke",
+	"backdrop": "z6kKla_backdrop",
+	"content": "z6kKla_content",
+	"icon": "z6kKla_icon",
+	"link": "z6kKla_link",
+	"list": "z6kKla_list",
+	"popup": "z6kKla_popup",
+	"portal": "z6kKla_portal",
+	"positioner": "z6kKla_positioner",
+	"root": "z6kKla_root",
+	"trigger": "z6kKla_trigger",
+	"viewport": "z6kKla_viewport"
+};
+//#endregion
+export { NavigationMenu_module_default as default };

package/dist/components/{NumberField → number-field}/NumberField.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .YMhIBW_root {
+  .TlakAG_root {
     align-items: flex-start;
     gap: var(--number-field-gap, var(--spacing-1));
     width: var(--number-field-width, auto);
@@ -8,7 +8,7 @@
     display: flex;
   }
 
-  .YMhIBW_scrubArea {
+  .TlakAG_scrubArea {
     align-items: center;
     gap: var(--number-field-scrub-area-gap, var(--spacing-2));
     color: var(--number-field-scrub-area-color, var(--color-foreground));
@@ -22,7 +22,7 @@
     }
   }
 
-  .YMhIBW_scrubAreaCursor {
+  .TlakAG_scrubAreaCursor {
     width: var(--number-field-scrub-area-cursor-size, 1.5rem);
     height: var(--number-field-scrub-area-cursor-size, 1.5rem);
     flex-shrink: 0;
@@ -36,12 +36,12 @@
     }
   }
 
-  .YMhIBW_group {
+  .TlakAG_group {
     align-items: stretch;
     display: inline-flex;
   }
 
-  .YMhIBW_decrement, .YMhIBW_increment {
+  .TlakAG_decrement, .TlakAG_increment {
     --_number-field-focus-ring-width: var(--number-field-focus-ring-width, var(--number-field-border-width, var(--border-width-sm)));
     box-sizing: border-box;
     width: var(--number-field-control-height, var(--size-lg));
@@ -97,19 +97,19 @@
     }
   }
 
-  .YMhIBW_decrement {
+  .TlakAG_decrement {
     border-radius: var(--number-field-radius, var(--radius-md)) 0 0
       var(--number-field-radius, var(--radius-md));
     border-right: 0;
   }
 
-  .YMhIBW_increment {
+  .TlakAG_increment {
     border-radius: 0 var(--number-field-radius, var(--radius-md))
       var(--number-field-radius, var(--radius-md)) 0;
     border-left: 0;
   }
 
-  .YMhIBW_input {
+  .TlakAG_input {
     --_number-field-focus-ring-width: var(--number-field-focus-ring-width, var(--number-field-border-width, var(--border-width-sm)));
     box-sizing: border-box;
     width: var(--number-field-input-width, 6rem);

package/dist/components/{NumberField → number-field}/NumberField.d.ts

@@ -1,6 +1,6 @@
 import { NumberField } from "@base-ui/react/number-field";
 
-//#region src/components/NumberField/NumberField.d.ts
+//#region src/components/number-field/NumberField.d.ts
 type NumberFieldProps = NumberField.Root.Props & {
   decrementLabel?: string;
   incrementLabel?: string;

package/dist/components/{NumberField → number-field}/NumberField.js

@@ -1,9 +1,9 @@
-import { MinusIcon, PlusIcon, ScrubCursorIcon } from "../../icons/ui/Icons.js";
-import { mergeClassName } from "../../utils/mergeClassName.js";
+import { MinusIcon, PlusIcon, ScrubCursorIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
 import NumberField_module_default from "./NumberField.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField } from "@base-ui/react/number-field";
-//#region src/components/NumberField/NumberField.tsx
+//#region src/components/number-field/NumberField.tsx
 const DEFAULT_DECREMENT_LABEL = "Decrease value";
 const DEFAULT_INCREMENT_LABEL = "Increase value";
 function NumberFieldRoot({ className, ...props }) {

package/dist/components/number-field/NumberField.module.js

@@ -0,0 +1,13 @@
+import './NumberField.css';
+//#region src/components/number-field/NumberField.module.css
+var NumberField_module_default = {
+	"decrement": "TlakAG_decrement",
+	"group": "TlakAG_group",
+	"increment": "TlakAG_increment",
+	"input": "TlakAG_input",
+	"root": "TlakAG_root",
+	"scrubArea": "TlakAG_scrubArea",
+	"scrubAreaCursor": "TlakAG_scrubAreaCursor"
+};
+//#endregion
+export { NumberField_module_default as default };

package/dist/components/{OTPField → otp-field}/OTPField.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .aEYTXG_root {
+  .dgqS-q_root {
     align-items: center;
     gap: var(--otp-field-gap, var(--spacing-2));
     width: var(--otp-field-width, auto);
@@ -11,7 +11,7 @@
     }
   }
 
-  .aEYTXG_input {
+  .dgqS-q_input {
     box-sizing: border-box;
     width: var(--otp-field-input-width, var(--otp-field-input-size, 2.5rem));
     min-width: var(--otp-field-input-width, var(--otp-field-input-size, 2.5rem));
@@ -66,7 +66,7 @@
     }
   }
 
-  .aEYTXG_separator {
+  .dgqS-q_separator {
     width: var(--otp-field-separator-width, var(--otp-field-separator-size, 1rem));
     height: var(--otp-field-separator-height, var(--otp-field-separator-size, 1rem));
     color: var(--otp-field-separator-color, var(--color-muted-foreground));

package/dist/components/{OTPField → otp-field}/OTPField.d.ts

@@ -1,6 +1,6 @@
 import { OTPFieldPreview } from "@base-ui/react/otp-field";
 
-//#region src/components/OTPField/OTPField.d.ts
+//#region src/components/otp-field/OTPField.d.ts
 declare function OTPField({
   children,
   className,

package/dist/components/{OTPField → otp-field}/OTPField.js

@@ -1,8 +1,8 @@
-import { mergeClassName } from "../../utils/mergeClassName.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
 import OTPField_module_default from "./OTPField.module.js";
 import { jsx } from "react/jsx-runtime";
 import { OTPFieldPreview } from "@base-ui/react/otp-field";
-//#region src/components/OTPField/OTPField.tsx
+//#region src/components/otp-field/OTPField.tsx
 function OTPField({ children, className, length, ...props }) {
 	return /* @__PURE__ */ jsx(OTPFieldPreview.Root, {
 		"data-slot": "otp-field-root",

package/dist/components/otp-field/OTPField.module.js

@@ -0,0 +1,9 @@
+import './OTPField.css';
+//#region src/components/otp-field/OTPField.module.css
+var OTPField_module_default = {
+	"input": "dgqS-q_input",
+	"root": "dgqS-q_root",
+	"separator": "dgqS-q_separator"
+};
+//#endregion
+export { OTPField_module_default as default };

package/dist/components/{Pagination → pagination}/Pagination.css

@@ -1,19 +1,19 @@
 @layer ui.components {
-  .Etg_Eq_root {
+  .bMHAlW_root {
     display: flex;
   }
 
-  .Etg_Eq_content {
+  .bMHAlW_content {
     align-items: center;
     gap: var(--pagination-gap, var(--spacing-1));
     display: inline-flex;
   }
 
-  .Etg_Eq_item {
+  .bMHAlW_item {
     display: inline-flex;
   }
 
-  .Etg_Eq_link, .Etg_Eq_ellipsis {
+  .bMHAlW_link, .bMHAlW_ellipsis {
     box-sizing: border-box;
     min-width: var(--pagination-item-size, var(--size-lg));
     min-height: var(--pagination-item-size, var(--size-lg));
@@ -26,7 +26,7 @@
     display: inline-flex;
   }
 
-  .Etg_Eq_link {
+  .bMHAlW_link {
     gap: var(--spacing-2);
     border: var(--border-width-sm) solid var(--pagination-item-border-color, var(--color-border));
     padding-inline: var(--pagination-item-padding-inline, .75rem);
@@ -63,7 +63,7 @@
     }
   }
 
-  .Etg_Eq_linkActive, .Etg_Eq_link[aria-current="page"] {
+  .bMHAlW_linkActive, .bMHAlW_link[aria-current="page"] {
     border-color: var(--pagination-item-border-color-active, var(--color-foreground));
     background-color: var(--pagination-item-bg-active, var(--color-foreground));
     color: var(--pagination-item-color-active, var(--color-background));
@@ -75,21 +75,21 @@
     }
   }
 
-  .Etg_Eq_previous, .Etg_Eq_next {
+  .bMHAlW_previous, .bMHAlW_next {
     padding-inline: max(var(--pagination-item-padding-inline, .75rem), var(--spacing-3));
   }
 
-  .Etg_Eq_iconOnly {
+  .bMHAlW_iconOnly {
     width: var(--pagination-item-size, var(--size-lg));
     padding-inline: 0;
   }
 
-  .Etg_Eq_ellipsis {
+  .bMHAlW_ellipsis {
     color: var(--pagination-ellipsis-color, var(--color-muted-foreground));
     user-select: none;
   }
 
-  .Etg_Eq_visuallyHidden {
+  .bMHAlW_visuallyHidden {
     clip: rect(0 0 0 0);
     white-space: nowrap;
     border: 0;

package/dist/components/{Pagination → pagination}/Pagination.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 import { Toolbar } from "@base-ui/react/toolbar";
 
-//#region src/components/Pagination/Pagination.d.ts
+//#region src/components/pagination/Pagination.d.ts
 declare function usePagination({
   count,
   page,

package/dist/components/{Pagination → pagination}/Pagination.js

@@ -1,11 +1,11 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "../../icons/ui/Icons.js";
-import { mergeClassName } from "../../utils/mergeClassName.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
 import Pagination_module_default from "./Pagination.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useMemo } from "react";
 import { Toolbar } from "@base-ui/react/toolbar";
-//#region src/components/Pagination/Pagination.tsx
+//#region src/components/pagination/Pagination.tsx
 function clampPage(page, count) {
 	return Math.min(Math.max(page, 1), count);
 }

package/dist/components/pagination/Pagination.module.js

@@ -0,0 +1,16 @@
+import './Pagination.css';
+//#region src/components/pagination/Pagination.module.css
+var Pagination_module_default = {
+	"content": "bMHAlW_content",
+	"ellipsis": "bMHAlW_ellipsis",
+	"iconOnly": "bMHAlW_iconOnly",
+	"item": "bMHAlW_item",
+	"link": "bMHAlW_link",
+	"linkActive": "bMHAlW_linkActive",
+	"next": "bMHAlW_next",
+	"previous": "bMHAlW_previous",
+	"root": "bMHAlW_root",
+	"visuallyHidden": "bMHAlW_visuallyHidden"
+};
+//#endregion
+export { Pagination_module_default as default };

package/dist/components/{PasswordInput → password-input}/PasswordInput.css

@@ -1,19 +1,19 @@
 @layer ui.components {
-  ._72aPqG_root {
+  .GsCkpW_root {
     width: var(--input-width, 100%);
     max-width: var(--input-max-width, none);
   }
 
-  ._72aPqG_input {
+  .GsCkpW_input {
     min-width: 0;
   }
 
-  ._72aPqG_toggle {
+  .GsCkpW_toggle {
     --button-icon-size: var(--input-group-icon-size, 1rem);
     color: var(--color-muted-foreground);
   }
 
-  ._72aPqG_toggle[aria-pressed="true"] {
+  .GsCkpW_toggle[aria-pressed="true"] {
     color: var(--color-foreground);
   }
 }

package/dist/components/{PasswordInput → password-input}/PasswordInput.d.ts

@@ -1,7 +1,7 @@
-import { InputProps } from "../Input/Input.js";
+import { InputProps } from "../input/Input.js";
 import { ComponentProps } from "react";
 
-//#region src/components/PasswordInput/PasswordInput.d.ts
+//#region src/components/password-input/PasswordInput.d.ts
 type PasswordInputProps = Omit<InputProps, 'className' | 'type'> & {
   className?: ComponentProps<'div'>['className'];
   defaultVisible?: boolean;

package/dist/components/{PasswordInput → password-input}/PasswordInput.js

@@ -1,10 +1,10 @@
-import { EyeClosedIcon, EyeIcon } from "../../icons/ui/Icons.js";
-import { InputGroup, InputGroupButton, InputGroupInput } from "../InputGroup/InputGroup.js";
+import { EyeClosedIcon, EyeIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { InputGroup, InputGroupButton, InputGroupInput } from "../input-group/InputGroup.js";
 import PasswordInput_module_default from "./PasswordInput.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef, useState } from "react";
-//#region src/components/PasswordInput/PasswordInput.tsx
+//#region src/components/password-input/PasswordInput.tsx
 const DEFAULT_VISIBILITY_TOGGLE_LABELS = {
 	show: "Show password",
 	hide: "Hide password"

package/dist/components/password-input/PasswordInput.module.js

@@ -0,0 +1,9 @@
+import './PasswordInput.css';
+//#region src/components/password-input/PasswordInput.module.css
+var PasswordInput_module_default = {
+	"input": "GsCkpW_input",
+	"root": "GsCkpW_root",
+	"toggle": "GsCkpW_toggle"
+};
+//#endregion
+export { PasswordInput_module_default as default };

package/dist/components/{Popover → popover}/Popover.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._7iI68a_trigger, ._7iI68a_close {
+  ._5v_BDW_trigger, ._5v_BDW_close {
     box-sizing: border-box;
     min-height: var(--popover-control-height, var(--size-lg));
     padding: var(--popover-control-padding-y, .5rem) var(--popover-control-padding-x, .875rem);
@@ -45,7 +45,7 @@
     }
   }
 
-  ._7iI68a_backdrop {
+  ._5v_BDW_backdrop {
     z-index: var(--z-backdrop);
     background-color: var(--popover-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
     min-height: 100dvh;
@@ -61,7 +61,7 @@
     }
   }
 
-  ._7iI68a_positioner {
+  ._5v_BDW_positioner {
     z-index: var(--z-popup);
     width: var(--positioner-width);
     height: var(--positioner-height);
@@ -69,7 +69,7 @@
     outline: 0;
   }
 
-  ._7iI68a_popup {
+  ._5v_BDW_popup {
     box-sizing: border-box;
     width: var(--popup-width, var(--popover-width, auto));
     height: var(--popup-height, var(--popover-height, auto));
@@ -95,7 +95,7 @@
     }
   }
 
-  ._7iI68a_viewport {
+  ._5v_BDW_viewport {
     width: 100%;
     height: 100%;
     position: relative;
@@ -123,7 +123,7 @@
     }
   }
 
-  ._7iI68a_arrow {
+  ._5v_BDW_arrow {
     color: var(--popover-bg, var(--color-popover));
     display: flex;
 
@@ -147,26 +147,26 @@
     }
   }
 
-  ._7iI68a_arrowSvg {
+  ._5v_BDW_arrowSvg {
     width: var(--popover-arrow-width, 1.25rem);
     height: var(--popover-arrow-height, .625rem);
     display: block;
     overflow: visible;
   }
 
-  ._7iI68a_arrowFill {
+  ._5v_BDW_arrowFill {
     fill: currentColor;
   }
 
-  ._7iI68a_arrowOuterStroke {
+  ._5v_BDW_arrowOuterStroke {
     fill: var(--popover-arrow-stroke-color, var(--popover-border-color, var(--color-border)));
   }
 
-  ._7iI68a_arrowInnerStroke {
+  ._5v_BDW_arrowInnerStroke {
     fill: var(--popover-bg, var(--color-popover));
   }
 
-  ._7iI68a_title {
+  ._5v_BDW_title {
     color: var(--popover-title-color, var(--popover-color, var(--color-popover-foreground)));
     font-size: var(--popover-title-font-size, var(--text-md));
     font-weight: var(--popover-title-font-weight, var(--weight-semibold));
@@ -174,23 +174,23 @@
     margin: 0;
   }
 
-  ._7iI68a_description {
+  ._5v_BDW_description {
     margin: var(--popover-description-margin, 0);
     color: var(--popover-description-color, var(--color-muted-foreground));
     font-size: var(--popover-description-font-size, var(--text-sm));
     line-height: var(--popover-description-line-height, var(--line-height-text-sm));
   }
 
-  ._7iI68a_header {
+  ._5v_BDW_header {
     gap: var(--popover-header-gap, var(--spacing-1));
     display: grid;
   }
 
-  ._7iI68a_body {
+  ._5v_BDW_body {
     margin: var(--popover-body-margin, 0);
   }
 
-  ._7iI68a_footer {
+  ._5v_BDW_footer {
     align-items: center;
     justify-content: var(--popover-footer-justify, flex-end);
     gap: var(--popover-footer-gap, var(--spacing-2));