@infonomic/uikit 5.44.0 → 6.0.0

package/dist/components/forms/input.module.css

@@ -1,11 +1,12 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .input-wrapper,
   :global(.infonomic-input-wrapper) {
     display: flex;
@@ -26,7 +27,8 @@
   .input,
   :global(.infonomic-input) {
     border: none;
-    outline: none;
+    outline: 1px solid transparent;
+    outline-offset: 2px;
     font-weight: normal;
     display: inline-flex;
     gap: var(--gap-2);
@@ -40,10 +42,7 @@
   .input:active,
   :global(.infonomic-input):focus,
   :global(.infonomic-input):active {
-    --ring-offset-color: var(--background);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+    outline-color: var(--ring-color);
   }
 
   .input:disabled,
@@ -281,4 +280,4 @@
   }
 
   /* Dark mode handled by semantic tokens in theme layer */
-}
+}

package/dist/components/forms/input_module.css

@@ -17,22 +17,20 @@
   }
 
   :is(.input-voSL1w, .infonomic-input) {
+    outline-offset: 2px;
     gap: var(--gap-2);
     width: 100%;
     transition: all var(--transition-normal);
     border-radius: var(--border-radius-sm);
     border: none;
-    outline: none;
+    outline: 1px solid #0000;
     align-items: center;
     font-weight: normal;
     display: inline-flex;
   }
 
   :is(.input-voSL1w:focus, .input-voSL1w:active, .infonomic-input:focus, .infonomic-input:active) {
-    --ring-offset-color: var(--background);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+    outline-color: var(--ring-color);
   }
 
   :is(.input-voSL1w:disabled, .input-voSL1w[disabled], .infonomic-input:disabled, .infonomic-input[disabled]) {

package/dist/components/forms/radio-group.d.ts

@@ -1,23 +1,24 @@
 import type React from 'react';
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import type { Intent } from '../@types/shared';
 export interface RadioGroupValue {
     id: string;
     value: string;
     label: string;
 }
-export declare const RadioGroupItem: ({ intent, className, id, value, label, ref: forwardedRef, ...props }: RadioGroupPrimitive.RadioGroupItemProps & {
+export declare const RadioGroupItem: ({ intent, className, id, value, label, ref: forwardedRef, ...props }: Omit<React.ComponentProps<typeof Radio.Root>, "value"> & {
     intent?: Intent;
     className?: string;
     id: string;
     value: string;
     label: string;
-    ref?: React.RefObject<React.ComponentRef<"div">>;
+    ref?: React.RefObject<HTMLDivElement>;
 }) => React.JSX.Element;
-export declare const RadioGroup: ({ ref: forwardedRef, className, direction, children, ...props }: RadioGroupPrimitive.RadioGroupProps & {
+export declare const RadioGroup: ({ ref: forwardedRef, className, direction, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive> & {
     direction?: "row" | "column";
     className?: string;
     children: React.ReactNode;
-    ref?: React.RefObject<React.ComponentRef<"div">>;
+    ref?: React.RefObject<HTMLDivElement>;
 }) => React.JSX.Element;
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/components/forms/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAG5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,cAAc,GAAI,sEAQ5B,mBAAmB,CAAC,mBAAmB,GAAG;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;CACjD,sBAgBA,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,iEAMxB,mBAAmB,CAAC,eAAe,GAAG;IACvC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;CACjD,sBASA,CAAA"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAI9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,cAAc,GAAI,sEAQ5B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAkBA,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,iEAMxB,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACpD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAQA,CAAA"}

package/dist/components/forms/radio-group.js

@@ -1,18 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
 import classnames from "classnames";
-import { RadioGroup } from "radix-ui";
 import radio_group_module from "./radio-group.module.js";
 const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref: forwardedRef, ...props })=>/*#__PURE__*/ jsxs("div", {
         ref: forwardedRef,
         className: radio_group_module["item-container"],
         children: [
-            /*#__PURE__*/ jsx(RadioGroup.Item, {
+            /*#__PURE__*/ jsx(Radio.Root, {
                 ...props,
                 className: classnames(radio_group_module.item, radio_group_module[intent]),
                 value: value,
                 id: id,
-                children: /*#__PURE__*/ jsx(RadioGroup.Indicator, {
+                nativeButton: true,
+                render: /*#__PURE__*/ jsx("button", {
+                    type: "button"
+                }),
+                children: /*#__PURE__*/ jsx(Radio.Indicator, {
                     className: radio_group_module.indicator
                 })
             }),
@@ -23,7 +28,7 @@ const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref:
             })
         ]
     });
-const radio_group_RadioGroup = ({ ref: forwardedRef, className, direction = 'column', children, ...props })=>/*#__PURE__*/ jsx(RadioGroup.Root, {
+const radio_group_RadioGroup = ({ ref: forwardedRef, className, direction = 'column', children, ...props })=>/*#__PURE__*/ jsx(RadioGroup, {
         ref: forwardedRef,
         className: classnames('infonomic-radio-group', radio_group_module[direction], className),
         ...props,

package/dist/components/forms/radio-group.module.css

@@ -1,12 +1,13 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {
+
   .column,
   :global(.infonomic-radio-group-column) {
     display: flex;
@@ -38,32 +39,22 @@
     transition: all var(--transition-normal);
   }
 
-  .item[data-state="checked"],
-  :global(.infonomic-radio-group-item[data-state="checked"]) {
-    --ring-offset-color: var(--background);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-
-  .item:disabled,
-  :global(.infonomic-radio-group-item:disabled),
-  .item[disabled],
-  :global(.infonomic-radio-group-item[disabled]) {
+  .item[data-disabled],
+  :global(.infonomic-radio-group-item[data-disabled]) {
     pointer-events: none;
   }
 
   /* Style for the "checked" state */
-  .indicator[data-state="checked"],
-  :global(.infonomic-radio-group-indicator[data-state="checked"]) {
+  .indicator[data-checked],
+  :global(.infonomic-radio-group-indicator[data-checked]) {
     animation: radioIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
     opacity: 1;
     transform: scale(1);
   }
 
   /* Style for the "unchecked" state */
-  .indicator[data-state="unchecked"],
-  :global(.infonomic-radio-group-indicator[data-state="unchecked"]) {
+  .indicator[data-unchecked],
+  :global(.infonomic-radio-group-indicator[data-unchecked]) {
     animation: radioOut 0.2s ease-in;
     opacity: 0;
     transform: scale(0.8);
@@ -182,4 +173,4 @@
       transform: scale(0.8);
     }
   }
-}
+}

package/dist/components/forms/radio-group_module.css

@@ -28,51 +28,33 @@
     transition: all var(--transition-normal);
   }
 
-  .item-InB91q[data-state="checked"] {
-    --ring-offset-color: var(--background);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-
-  .infonomic-radio-group-item[data-state="checked"] {
-    --ring-offset-color: var(--background);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-
-  .item-InB91q:disabled, .item-InB91q[disabled] {
-    pointer-events: none;
-  }
-
-  .infonomic-radio-group-item:disabled {
+  .item-InB91q[data-disabled] {
     pointer-events: none;
   }
 
-  .infonomic-radio-group-item[disabled] {
+  .infonomic-radio-group-item[data-disabled] {
     pointer-events: none;
   }
 
-  .indicator-PDcgDz[data-state="checked"] {
+  .indicator-PDcgDz[data-checked] {
     opacity: 1;
     animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards radioIn-lODICv;
     transform: scale(1);
   }
 
-  .infonomic-radio-group-indicator[data-state="checked"] {
+  .infonomic-radio-group-indicator[data-checked] {
     opacity: 1;
     animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards radioIn-lODICv;
     transform: scale(1);
   }
 
-  .indicator-PDcgDz[data-state="unchecked"] {
+  .indicator-PDcgDz[data-unchecked] {
     opacity: 0;
     animation: .2s ease-in radioOut-Z3CBtX;
     transform: scale(.8);
   }
 
-  .infonomic-radio-group-indicator[data-state="unchecked"] {
+  .infonomic-radio-group-indicator[data-unchecked] {
     opacity: 0;
     animation: .2s ease-in radioOut-Z3CBtX;
     transform: scale(.8);

package/dist/components/forms/select.d.ts

@@ -1,6 +1,5 @@
 import type React from 'react';
-import type { ComponentPropsWithoutRef } from 'react';
-import { Select as SelectPrimitive } from 'radix-ui';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
 import type { Intent } from '../@types/shared.js';
 import type { Size, Variant } from '../button/@types/button.js';
 export interface SelectValue {
@@ -9,7 +8,7 @@ export interface SelectValue {
     prefix?: string;
     suffix?: string;
 }
-type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
+type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
     id?: string;
     intent?: Intent;
     variant?: Variant;
@@ -24,8 +23,8 @@ type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
 };
 export declare function Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, ...rest }: SelectProps): React.JSX.Element;
 export declare const SelectItem: {
-    ({ ref: forwardedRef, children, className, ...props }: SelectPrimitive.SelectItemProps & {
-        ref?: React.RefObject<React.ComponentRef<"div">>;
+    ({ ref: forwardedRef, children, className, ...props }: React.ComponentProps<typeof SelectPrimitive.Item> & {
+        ref?: React.RefObject<HTMLDivElement>;
     }): React.JSX.Element;
     displayName: string;
 };

package/dist/components/forms/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/forms/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAIrD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAKpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,KAAK,WAAW,GAAG,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAA;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,aAAa,EACb,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyCjC;AAED,eAAO,MAAM,UAAU;2DAKpB,eAAe,CAAC,eAAe,GAAG;QACnC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACjD;;CAeA,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/forms/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AASjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAA;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,aAAa,EACb,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2CjC;AAED,eAAO,MAAM,UAAU;2DAKpB,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;QACrD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;;CAeA,CAAA"}

package/dist/components/forms/select.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+import { Select } from "@base-ui/react/select";
 import classnames from "classnames";
-import { Select } from "radix-ui";
+import { CheckIcon } from "../../icons/check-icon.js";
+import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
+import { ChevronUpIcon } from "../../icons/chevron-up-icon.js";
 import { Button } from "../button/button.js";
 import { HelpText } from "./help-text.js";
 import select_module from "./select.module.js";
@@ -13,46 +15,42 @@ function select_Select({ id, children, placeholder, disabledValue, intent, varia
             /*#__PURE__*/ jsxs(Select.Root, {
                 ...rest,
                 children: [
-                    /*#__PURE__*/ jsx(Select.Trigger, {
-                        asChild: true,
+                    /*#__PURE__*/ jsxs(Select.Trigger, {
                         "aria-label": ariaLabel ?? 'Select',
-                        children: /*#__PURE__*/ jsxs(Button, {
+                        render: /*#__PURE__*/ jsx(Button, {
                             id: id,
                             intent: intent,
                             variant: variant,
                             size: size,
-                            className: classnames('whitespace-nowrap', className),
-                            children: [
-                                /*#__PURE__*/ jsx(Select.Value, {
-                                    placeholder: placeholder
-                                }),
-                                /*#__PURE__*/ jsx(Select.Icon, {
-                                    children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
-                                })
-                            ]
-                        })
+                            className: classnames('whitespace-nowrap', className)
+                        }),
+                        children: [
+                            /*#__PURE__*/ jsx(Select.Value, {
+                                placeholder: placeholder
+                            }),
+                            /*#__PURE__*/ jsx(Select.Icon, {
+                                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsx(Select.Portal, {
-                        children: /*#__PURE__*/ jsxs(Select.Content, {
-                            position: position,
-                            className: select_module.content,
-                            ref: (ref)=>{
-                                if (null == ref) return;
-                            },
+                        children: /*#__PURE__*/ jsxs(Select.Positioner, {
+                            className: select_module.positioner,
+                            alignItemWithTrigger: 'popper' !== position,
                             children: [
-                                /*#__PURE__*/ jsx(Select.ScrollUpButton, {
-                                    className: select_module["scroll-button"],
+                                /*#__PURE__*/ jsx(Select.ScrollUpArrow, {
+                                    className: select_module["scroll-arrow"],
                                     children: /*#__PURE__*/ jsx(ChevronUpIcon, {})
                                 }),
-                                /*#__PURE__*/ jsx(Select.Viewport, {
-                                    className: classnames(select_module.viewport, null != size && select_module[`viewport-${size}`]),
-                                    children: /*#__PURE__*/ jsx(Select.Group, {
-                                        className: select_module.group,
+                                /*#__PURE__*/ jsx(Select.Popup, {
+                                    className: classnames(select_module.popup, null != size && select_module[`popup-${size}`]),
+                                    children: /*#__PURE__*/ jsx(Select.List, {
+                                        className: select_module.list,
                                         children: children
                                     })
                                 }),
-                                /*#__PURE__*/ jsx(Select.ScrollDownButton, {
-                                    className: select_module["scroll-button"],
+                                /*#__PURE__*/ jsx(Select.ScrollDownArrow, {
+                                    className: select_module["scroll-arrow"],
                                     children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
                                 })
                             ]

package/dist/components/forms/select.module.css

@@ -7,13 +7,13 @@ infonomic-components;
 
 @layer infonomic-components {
 
-  .content,
-  :global(.infonomic-select-content) {
+  .positioner,
+  :global(.infonomic-select-positioner) {
     z-index: 50;
   }
 
-  .viewport,
-  :global(.infonomic-select-viewport) {
+  .popup,
+  :global(.infonomic-select-popup) {
     z-index: 50;
     margin-top: 2px;
     border: 1px solid var(--surface-panel-border);
@@ -23,33 +23,33 @@ infonomic-components;
     padding: 6px;
   }
 
-  .viewport-xs {
+  .popup-xs {
     padding: 4px;
   }
 
-  .viewport-sm {
+  .popup-sm {
     padding: 4px;
   }
 
-  .viewport-md {
+  .popup-md {
     padding: 6px;
   }
 
-  .viewport-lg {
+  .popup-lg {
     padding: 6px;
   }
 
-  .viewport-xl {
+  .popup-xl {
     padding: 8px;
   }
 
-  .group,
-  :global(.infonomic-select-group) {
+  .list,
+  :global(.infonomic-select-list) {
     z-index: 50;
   }
 
-  .scroll-button,
-  :global(.infonomic-select-scroll-button) {
+  .scroll-arrow,
+  :global(.infonomic-select-scroll-arrow) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -101,7 +101,7 @@ infonomic-components;
   }
 
   /* size variants — treat current values as 'md' */
-  .viewport-xs .select-item {
+  .popup-xs .select-item {
     font-size: 0.75rem;
     height: 24px;
     padding-right: 28px;
@@ -109,11 +109,11 @@ infonomic-components;
     border-radius: 4px;
   }
 
-  .viewport-xs .select-item-indicator {
+  .popup-xs .select-item-indicator {
     width: 20px;
   }
 
-  .viewport-sm .select-item {
+  .popup-sm .select-item {
     font-size: 0.875rem;
     height: 28px;
     padding-right: 30px;
@@ -121,13 +121,13 @@ infonomic-components;
     border-radius: 5px;
   }
 
-  .viewport-sm .select-item-indicator {
+  .popup-sm .select-item-indicator {
     width: 22px;
   }
 
-  /* .viewport-md — inherits base .select-item values */
+  /* .popup-md — inherits base .select-item values */
 
-  .viewport-lg .select-item {
+  .popup-lg .select-item {
     font-size: 1.125rem;
     height: 34px;
     padding-right: 32px;
@@ -135,11 +135,11 @@ infonomic-components;
     border-radius: 6px;
   }
 
-  .viewport-lg .select-item-indicator {
+  .popup-lg .select-item-indicator {
     width: 24px;
   }
 
-  .viewport-xl .select-item {
+  .popup-xl .select-item {
     font-size: 1.25rem;
     height: 40px;
     padding-right: 36px;
@@ -147,7 +147,7 @@ infonomic-components;
     border-radius: 8px;
   }
 
-  .viewport-xl .select-item-indicator {
+  .popup-xl .select-item-indicator {
     width: 28px;
   }
 }

package/dist/components/forms/select.module.js

@@ -1,20 +1,20 @@
 import "./select_module.css";
 const select_module = {
-    content: "content-Dr272c",
-    viewport: "viewport-avysx0",
-    "viewport-xs": "viewport-xs-ddEB1m",
-    viewportXs: "viewport-xs-ddEB1m",
-    "viewport-sm": "viewport-sm-fUHdZh",
-    viewportSm: "viewport-sm-fUHdZh",
-    "viewport-md": "viewport-md-GHDx8O",
-    viewportMd: "viewport-md-GHDx8O",
-    "viewport-lg": "viewport-lg-joLSnL",
-    viewportLg: "viewport-lg-joLSnL",
-    "viewport-xl": "viewport-xl-RoyZD9",
-    viewportXl: "viewport-xl-RoyZD9",
-    group: "group-MyzEdB",
-    "scroll-button": "scroll-button-JaxK2W",
-    scrollButton: "scroll-button-JaxK2W",
+    positioner: "positioner-iHUR0P",
+    popup: "popup-vKPzXR",
+    "popup-xs": "popup-xs-MqixM9",
+    popupXs: "popup-xs-MqixM9",
+    "popup-sm": "popup-sm-SgOWFs",
+    popupSm: "popup-sm-SgOWFs",
+    "popup-md": "popup-md-TQK5CQ",
+    popupMd: "popup-md-TQK5CQ",
+    "popup-lg": "popup-lg-Y2cTTg",
+    popupLg: "popup-lg-Y2cTTg",
+    "popup-xl": "popup-xl-FuZi4o",
+    popupXl: "popup-xl-FuZi4o",
+    list: "list-fhD9vn",
+    "scroll-arrow": "scroll-arrow-KHl0WA",
+    scrollArrow: "scroll-arrow-KHl0WA",
     "select-item": "select-item-HiANA0",
     selectItem: "select-item-HiANA0",
     "select-item-indicator": "select-item-indicator-nXFGV7",

package/dist/components/forms/select_module.css

@@ -1,11 +1,11 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.content-Dr272c, .infonomic-select-content) {
+  :is(.positioner-iHUR0P, .infonomic-select-positioner) {
     z-index: 50;
   }
 
-  :is(.viewport-avysx0, .infonomic-select-viewport) {
+  :is(.popup-vKPzXR, .infonomic-select-popup) {
     z-index: 50;
     border: 1px solid var(--surface-panel-border);
     box-shadow: var(--shadow-md);
@@ -15,23 +15,23 @@
     padding: 6px;
   }
 
-  .viewport-xs-ddEB1m, .viewport-sm-fUHdZh {
+  .popup-xs-MqixM9, .popup-sm-SgOWFs {
     padding: 4px;
   }
 
-  .viewport-md-GHDx8O, .viewport-lg-joLSnL {
+  .popup-md-TQK5CQ, .popup-lg-Y2cTTg {
     padding: 6px;
   }
 
-  .viewport-xl-RoyZD9 {
+  .popup-xl-FuZi4o {
     padding: 8px;
   }
 
-  :is(.group-MyzEdB, .infonomic-select-group) {
+  :is(.list-fhD9vn, .infonomic-select-list) {
     z-index: 50;
   }
 
-  :is(.scroll-button-JaxK2W, .infonomic-select-scroll-button) {
+  :is(.scroll-arrow-KHl0WA, .infonomic-select-scroll-arrow) {
     color: var(--surface-item-text);
     border: 1px solid var(--surface-panel-border);
     box-shadow: var(--shadow-md);
@@ -90,7 +90,7 @@
     left: 0;
   }
 
-  .viewport-xs-ddEB1m .select-item-HiANA0 {
+  .popup-xs-MqixM9 .select-item-HiANA0 {
     border-radius: 4px;
     height: 24px;
     padding-left: 20px;
@@ -98,11 +98,11 @@
     font-size: .75rem;
   }
 
-  .viewport-xs-ddEB1m .select-item-indicator-nXFGV7 {
+  .popup-xs-MqixM9 .select-item-indicator-nXFGV7 {
     width: 20px;
   }
 
-  .viewport-sm-fUHdZh .select-item-HiANA0 {
+  .popup-sm-SgOWFs .select-item-HiANA0 {
     border-radius: 5px;
     height: 28px;
     padding-left: 22px;
@@ -110,11 +110,11 @@
     font-size: .875rem;
   }
 
-  .viewport-sm-fUHdZh .select-item-indicator-nXFGV7 {
+  .popup-sm-SgOWFs .select-item-indicator-nXFGV7 {
     width: 22px;
   }
 
-  .viewport-lg-joLSnL .select-item-HiANA0 {
+  .popup-lg-Y2cTTg .select-item-HiANA0 {
     border-radius: 6px;
     height: 34px;
     padding-left: 24px;
@@ -122,11 +122,11 @@
     font-size: 1.125rem;
   }
 
-  .viewport-lg-joLSnL .select-item-indicator-nXFGV7 {
+  .popup-lg-Y2cTTg .select-item-indicator-nXFGV7 {
     width: 24px;
   }
 
-  .viewport-xl-RoyZD9 .select-item-HiANA0 {
+  .popup-xl-FuZi4o .select-item-HiANA0 {
     border-radius: 8px;
     height: 40px;
     padding-left: 28px;
@@ -134,7 +134,7 @@
     font-size: 1.25rem;
   }
 
-  .viewport-xl-RoyZD9 .select-item-indicator-nXFGV7 {
+  .popup-xl-FuZi4o .select-item-indicator-nXFGV7 {
     width: 28px;
   }
 }