@veracity/vui 1.3.0 → 1.4.0-rc.0

package/dist/cjs/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAwBpE,eAAO,MAAM,YAAY,ulJAkBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAmFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAwBpE,eAAO,MAAM,YAAY,ulJAkBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAoFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/checkbox/checkbox.js

@@ -110,7 +110,7 @@ exports.Checkbox = (0, core_1.vui)((props, ref) => {
         'aria-disabled': disabled
     });
     return (react_1.default.createElement(exports.CheckboxBase, Object.assign({ className: (0, utils_1.cs)('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
-        react_1.default.createElement(CheckboxControl, Object.assign({ className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
+        react_1.default.createElement(CheckboxControl, Object.assign({ bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
             react_1.default.createElement(CheckboxInput, Object.assign({ className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-checkboxLabel", lineHeight: "normal" }, styles.label), label)))));
 });

package/dist/cjs/checkbox/checkbox.types.d.ts

@@ -22,7 +22,7 @@ export declare type CheckboxProps = SystemProps & ThemingProps<'Checkbox'> & {
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     /** Displays the checkbox as indeterminate. */
     isIndeterminate?: boolean;
-    /** Socket placing text to the left of the checkbox. */
+    /** Socket for the text next to the checkbox. */
     label?: string;
     /** Passed to the inner input. */
     name?: string;

package/dist/cjs/checkbox/checkbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEhE,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,2DAA2D;IAC3D,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,QAAQ,CAAA;IAC5B,sDAAsD;IACtD,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEhE,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,2DAA2D;IAC3D,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,QAAQ,CAAA;IAC5B,sDAAsD;IACtD,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA"}

package/dist/cjs/header/headerAccount.js

@@ -57,7 +57,7 @@ function HeaderAccount(props) {
     const popoverOptions = isMobile ? (0, utils_1.merge)(options, mobilePopoverOptions) : options;
     const contentScreenProps = isMobile
         ? { h: `calc(100vh - ${headerHeight}px)`, left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
-        : { maxH: 360, py: 1, w: 320 };
+        : { maxH: 360, py: 1, minW: 320, w: 'auto' };
     const name = (0, utils_1.isObject)(userInfo) ? userInfo.displayName : '';
     return (react_1.default.createElement(popover_1.default, Object.assign({ isLazy: false, offset: [0, 8], options: popoverOptions, placement: "bottom-end" }, rest),
         react_1.default.createElement(popover_1.default.Trigger, Object.assign({ as: avatar_1.default, className: "vui-headerAccountTrigger", colorScheme: "prussian", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solid" }, styles.trigger, triggerProps)),

package/dist/cjs/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDAqFhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDA4FhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/radio/radio.js

@@ -115,7 +115,7 @@ exports.Radio = (0, core_1.vui)((props, ref) => {
         'aria-disabled': disabled
     });
     return (react_1.default.createElement(exports.RadioBase, Object.assign({ className: (0, utils_1.cs)('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
-        react_1.default.createElement(RadioControl, Object.assign({ className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
+        react_1.default.createElement(RadioControl, Object.assign({ bg: "white", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
             react_1.default.createElement(RadioInput, Object.assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));
 });

package/dist/cjs/radio/radio.types.d.ts

@@ -18,7 +18,7 @@ export declare type RadioProps = SystemProps & ThemingProps<'Radio'> & {
     inputProps?: HTMLAttributes<HTMLInputElement>;
     /** Ref passed to the inner input element. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
-    /** Socket placing text to the left of the checkbox. */
+    /** Socket for the text next to the item. */
     label?: string;
     /** Passed to the inner input. */
     name?: string;

package/dist/cjs/radio/radio.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.types.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEhE,oBAAY,UAAU,GAAG,WAAW,GAClC,YAAY,CAAC,OAAO,CAAC,GAAG;IACtB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,0DAA0D;IAC1D,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,sDAAsD;IACtD,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,eAAe,GAAG;IAC5B,6DAA6D;IAC7D,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"radio.types.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEhE,oBAAY,UAAU,GAAG,WAAW,GAClC,YAAY,CAAC,OAAO,CAAC,GAAG;IACtB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,0DAA0D;IAC1D,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,sDAAsD;IACtD,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,eAAe,GAAG;IAC5B,6DAA6D;IAC7D,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA"}

package/dist/cjs/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAuDxC;yBAvDe,MAAM;;;;;;;;;AA8DtB,eAAe,MAAM,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAoDxC;yBApDe,MAAM;;;;;;;;;AA2DtB,eAAe,MAAM,CAAA"}

package/dist/cjs/select/select.js

@@ -30,8 +30,9 @@ const useSelect_1 = __importDefault(require("./useSelect"));
  * Supports single select and multi select, as well as controlled and uncontrolled modes.
  */
 function Select(props) {
-    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, size, value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "isInvalid", "isMultiple", "name", "onChange", "options", "placeholder", "readOnly", "size", "value", "variant"]);
-    const selectProps = (0, useSelect_1.default)({ defaultValue, isMultiple, onChange, value });
+    var _a;
+    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, size, value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "isInvalid", "isMultiple", "name", "onChange", "options", "placeholder", "readOnly", "selectButton", "size", "value", "variant"]);
+    const selectProps = (0, useSelect_1.default)({ defaultValue, isMultiple, onChange, value, options, children });
     if (utils_1.__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
         console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
     }
@@ -45,10 +46,10 @@ function Select(props) {
         size,
         variant }, selectProps);
     return (react_1.default.createElement(context_1.SelectProvider, { value: context },
-        react_1.default.createElement(popover_1.Popover, Object.assign({ matchWidth: true }, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(selectButton_1.default, null),
-            react_1.default.createElement(selectContent_1.default, null,
-                react_1.default.createElement(selectGroup_1.default, null, options === null || options === void 0 ? void 0 : options.map(option => (react_1.default.createElement(selectOption_1.default, Object.assign({ key: option.value }, option)))))))))));
+        react_1.default.createElement(popover_1.Popover, Object.assign({ matchWidth: true }, rest),
+            react_1.default.createElement(react_1.default.Fragment, null, selectButton !== null && selectButton !== void 0 ? selectButton : react_1.default.createElement(selectButton_1.default, null),
+                react_1.default.createElement(selectContent_1.default, null,
+                    react_1.default.createElement(selectGroup_1.default, null, children !== null && children !== void 0 ? children : (_a = options === null || options === void 0 ? void 0 : options.map) === null || _a === void 0 ? void 0 : _a.call(options, option => react_1.default.createElement(selectOption_1.default, Object.assign({ key: option.value }, option)))))))));
 }
 exports.Select = Select;
 Select.Button = selectButton_1.default;

package/dist/cjs/select/select.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ButtonProps } from '../button';
 import { ListItemProps, ListProps } from '../list';
 import { PopoverContentProps, PopoverProps } from '../popover';
@@ -16,19 +17,21 @@ export declare type SelectProps = ThemingProps<'Select'> & PopoverProps & UseSel
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string;
     /** Data prop to display an array of options in the popover. */
-    options?: SelectOptionData[];
+    options: SelectOptionData[];
     /** Displayed inside the trigger when no value is selected. */
     placeholder?: string;
     /** Select cannot be opened and is styled accordingly. */
     readOnly?: boolean;
+    /** Custom select button slot. */
+    selectButton?: ReactNode;
 };
 export declare type SelectOptionData = {
     /** Option is displayed as disabled. */
     disabled?: boolean;
     /** Text label of the option. */
-    text?: string;
+    text: string;
     /** Value of a given option. */
-    value?: SelectValue;
+    value: SelectValue;
 };
 export declare type SelectOptionProps = ListItemProps & {
     /** Currently selected value. Can be a string/number or array of those when using 'isMultiple'.  */

package/dist/cjs/select/select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}
+{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}

package/dist/cjs/select/selectButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.d.ts","sourceRoot":"","sources":["../../../src/select/selectButton.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,eAAO,MAAM,YAAY,2EA+CvB,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"selectButton.d.ts","sourceRoot":"","sources":["../../../src/select/selectButton.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,eAAO,MAAM,YAAY,2EAgDvB,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/dist/cjs/select/selectButton.js

@@ -73,6 +73,6 @@ exports.SelectButton = (0, core_1.vui)((props, ref) => {
             hoverBorderColor: 'red.80'
         }
         : {};
-    return (react_1.default.createElement(popover_1.PopoverTrigger, Object.assign({ as: button_1.LineButton, className: (0, utils_1.cs)('vui-selectButton', className), colorScheme: "prussian", disabled: disabled, focusRing: 2, fontWeight: "regular", iconRight: react_1.default.createElement(button_1.default.Icon, { color: iconColor, ml: "auto", name: "falAngleDown" }), isFullWidth: true, px: 1, ref: ref, text: react_1.default.createElement(button_1.default.Text, { color: textColor }, text), userSelect: "text" }, styles.button, readOnlyProps, isInvalidProps, rest)));
+    return (react_1.default.createElement(popover_1.PopoverTrigger, Object.assign({ as: button_1.LineButton, bg: "white", className: (0, utils_1.cs)('vui-selectButton', className), colorScheme: "prussian", disabled: disabled, focusRing: 2, fontWeight: "regular", iconRight: react_1.default.createElement(button_1.default.Icon, { color: iconColor, ml: "auto", name: "falAngleDown" }), isFullWidth: true, px: 1, ref: ref, text: react_1.default.createElement(button_1.default.Text, { color: textColor }, text), userSelect: "text" }, styles.button, readOnlyProps, isInvalidProps, rest)));
 });
 exports.default = exports.SelectButton;

package/dist/cjs/select/useSelect.d.ts

@@ -1,10 +1,11 @@
 import { ChangeEvent } from '../utils';
+import { SelectValue } from './select.types';
 import { UseSelectProps } from './useSelect.types';
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 export default function useSelect(props: UseSelectProps): {
     onChange: (e: ChangeEvent) => void;
-    value: import("./select.types").SelectValue | import("./select.types").SelectValue[] | undefined;
-    valueText: import("./select.types").SelectValue | import("./select.types").SelectValue[] | undefined;
+    value: SelectValue | SelectValue[] | undefined;
+    valueText: SelectValue | undefined;
 };
 export declare type UseSelectReturnType = ReturnType<typeof useSelect>;
 //# sourceMappingURL=useSelect.d.ts.map

package/dist/cjs/select/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,UAAU,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc;kBASjB,WAAW;;;EAgBhD;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,UAAU,CAAA;AAClE,OAAO,EAAoB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAQlD,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc;kBAiBjB,WAAW;;;EAiBhD;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/cjs/select/useSelect.js

@@ -2,25 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const getValueText = (value, options) => {
+    const option = options === null || options === void 0 ? void 0 : options.find((o) => (o === null || o === void 0 ? void 0 : o.value) === value);
+    return (option === null || option === void 0 ? void 0 : option.text) || value;
+};
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 function useSelect(props) {
-    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp } = props;
+    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options = [], children } = props;
     // Not using useControlled here, because we need custom value setter when uncontrolled
     const [stateValue, setStateValue] = (0, react_1.useState)(defaultValue);
     const isControlled = valueProp !== undefined;
     const value = isControlled ? valueProp : stateValue;
+    // Iterating over the children to dynamically obtain the list of available options
+    const dynamicOptions = [];
+    react_1.Children.forEach(children, element => {
+        if (!(0, react_1.isValidElement)(element))
+            return;
+        const option = element.props;
+        if (option.text && option.value)
+            dynamicOptions.push(option);
+    });
     /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
     const onChange = (0, utils_1.useCallbackRef)((e) => {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
-        if (!isControlled) {
+        if (!isControlled)
             setStateValue(value => (Array.isArray(value) ? (0, utils_1.toggleItem)(value, e.target.value).sort() : e.target.value));
-        }
     });
     const valueText = isMultiple && Array.isArray(value)
         ? value[0]
-            ? `${value[0]}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
+            ? `${getValueText(value[0], [...options, ...dynamicOptions])}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
             : undefined
-        : value;
+        : getValueText(value, [...options, ...dynamicOptions]);
     return { onChange, value, valueText };
 }
 exports.default = useSelect;

package/dist/cjs/select/useSelect.types.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 import { ChangeEvent } from '../utils';
-import { SelectValue } from './select.types';
+import { SelectOptionData, SelectValue } from './select.types';
 export declare type UseSelectProps = {
     /** Currently selected value in controlled mode. */
     value?: SelectValue | SelectValue[];
@@ -7,6 +8,10 @@ export declare type UseSelectProps = {
     defaultValue?: SelectValue | SelectValue[];
     /** Allows choosing multiple values. Popover won't close automatically on item click. */
     isMultiple?: boolean;
+    /** List of all available options */
+    options?: SelectOptionData[];
+    /** Select children elements for dynamic handling */
+    children?: ReactNode;
     /**
      * Callback triggered when an option is selected.
      *

package/dist/cjs/select/useSelect.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,oBAAY,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}
+{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE9D,oBAAY,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}

package/dist/esm/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAwBpE,eAAO,MAAM,YAAY,ulJAkBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAmFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAwBpE,eAAO,MAAM,YAAY,ulJAkBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAoFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/checkbox/checkbox.js

@@ -69,7 +69,7 @@ export const Checkbox = vui((props, ref) => {
         'aria-disabled': disabled
     });
     return (React.createElement(CheckboxBase, { className: cs('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },
-        React.createElement(CheckboxControl, { className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles },
+        React.createElement(CheckboxControl, { bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles },
             React.createElement(CheckboxInput, { className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
             React.createElement(Icon, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })),
         children ??

package/dist/esm/checkbox/checkbox.types.d.ts

@@ -22,7 +22,7 @@ export declare type CheckboxProps = SystemProps & ThemingProps<'Checkbox'> & {
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     /** Displays the checkbox as indeterminate. */
     isIndeterminate?: boolean;
-    /** Socket placing text to the left of the checkbox. */
+    /** Socket for the text next to the checkbox. */
     label?: string;
     /** Passed to the inner input. */
     name?: string;

package/dist/esm/checkbox/checkbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEhE,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,2DAA2D;IAC3D,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,QAAQ,CAAA;IAC5B,sDAAsD;IACtD,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEhE,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,2DAA2D;IAC3D,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,QAAQ,CAAA;IAC5B,sDAAsD;IACtD,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA"}

package/dist/esm/header/headerAccount.js

@@ -17,7 +17,7 @@ export function HeaderAccount(props) {
     const popoverOptions = isMobile ? merge(options, mobilePopoverOptions) : options;
     const contentScreenProps = isMobile
         ? { h: `calc(100vh - ${headerHeight}px)`, left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
-        : { maxH: 360, py: 1, w: 320 };
+        : { maxH: 360, py: 1, minW: 320, w: 'auto' };
     const name = isObject(userInfo) ? userInfo.displayName : '';
     return (React.createElement(Popover, { isLazy: false, offset: [0, 8], options: popoverOptions, placement: "bottom-end", ...rest },
         React.createElement(Popover.Trigger, { as: Avatar, className: "vui-headerAccountTrigger", colorScheme: "prussian", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solid", ...styles.trigger, ...triggerProps }),

package/dist/esm/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDAqFhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDA4FhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/esm/radio/radio.js

@@ -74,7 +74,7 @@ export const Radio = vui((props, ref) => {
         'aria-disabled': disabled
     });
     return (React.createElement(RadioBase, { className: cs('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },
-        React.createElement(RadioControl, { className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles },
+        React.createElement(RadioControl, { bg: "white", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles },
             React.createElement(RadioInput, { className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
             React.createElement(Icon, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })),
         children ??

package/dist/esm/radio/radio.types.d.ts

@@ -18,7 +18,7 @@ export declare type RadioProps = SystemProps & ThemingProps<'Radio'> & {
     inputProps?: HTMLAttributes<HTMLInputElement>;
     /** Ref passed to the inner input element. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
-    /** Socket placing text to the left of the checkbox. */
+    /** Socket for the text next to the item. */
     label?: string;
     /** Passed to the inner input. */
     name?: string;

package/dist/esm/radio/radio.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.types.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEhE,oBAAY,UAAU,GAAG,WAAW,GAClC,YAAY,CAAC,OAAO,CAAC,GAAG;IACtB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,0DAA0D;IAC1D,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,sDAAsD;IACtD,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,eAAe,GAAG;IAC5B,6DAA6D;IAC7D,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"radio.types.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEhE,oBAAY,UAAU,GAAG,WAAW,GAClC,YAAY,CAAC,OAAO,CAAC,GAAG;IACtB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,0DAA0D;IAC1D,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,sDAAsD;IACtD,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,eAAe,GAAG;IAC5B,6DAA6D;IAC7D,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA"}

package/dist/esm/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAuDxC;yBAvDe,MAAM;;;;;;;;;AA8DtB,eAAe,MAAM,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAoDxC;yBApDe,MAAM;;;;;;;;;AA2DtB,eAAe,MAAM,CAAA"}

package/dist/esm/select/select.js

@@ -13,8 +13,8 @@ import useSelect from './useSelect';
  * Supports single select and multi select, as well as controlled and uncontrolled modes.
  */
 export function Select(props) {
-    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, size, value, variant, ...rest } = props;
-    const selectProps = useSelect({ defaultValue, isMultiple, onChange, value });
+    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, size, value, variant, ...rest } = props;
+    const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, children });
     if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
         console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
     }
@@ -31,10 +31,11 @@ export function Select(props) {
         ...selectProps
     };
     return (React.createElement(SelectProvider, { value: context },
-        React.createElement(Popover, { matchWidth: true, ...rest }, children ?? (React.createElement(React.Fragment, null,
-            React.createElement(SelectButton, null),
-            React.createElement(SelectContent, null,
-                React.createElement(SelectGroup, null, options?.map(option => (React.createElement(SelectOption, { key: option.value, ...option }))))))))));
+        React.createElement(Popover, { matchWidth: true, ...rest },
+            React.createElement(React.Fragment, null,
+                selectButton ?? React.createElement(SelectButton, null),
+                React.createElement(SelectContent, null,
+                    React.createElement(SelectGroup, null, children ?? options?.map?.(option => React.createElement(SelectOption, { key: option.value, ...option }))))))));
 }
 Select.Button = SelectButton;
 Select.Content = SelectContent;

package/dist/esm/select/select.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ButtonProps } from '../button';
 import { ListItemProps, ListProps } from '../list';
 import { PopoverContentProps, PopoverProps } from '../popover';
@@ -16,19 +17,21 @@ export declare type SelectProps = ThemingProps<'Select'> & PopoverProps & UseSel
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string;
     /** Data prop to display an array of options in the popover. */
-    options?: SelectOptionData[];
+    options: SelectOptionData[];
     /** Displayed inside the trigger when no value is selected. */
     placeholder?: string;
     /** Select cannot be opened and is styled accordingly. */
     readOnly?: boolean;
+    /** Custom select button slot. */
+    selectButton?: ReactNode;
 };
 export declare type SelectOptionData = {
     /** Option is displayed as disabled. */
     disabled?: boolean;
     /** Text label of the option. */
-    text?: string;
+    text: string;
     /** Value of a given option. */
-    value?: SelectValue;
+    value: SelectValue;
 };
 export declare type SelectOptionProps = ListItemProps & {
     /** Currently selected value. Can be a string/number or array of those when using 'isMultiple'.  */

package/dist/esm/select/select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}
+{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}

package/dist/esm/select/selectButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.d.ts","sourceRoot":"","sources":["../../../src/select/selectButton.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,eAAO,MAAM,YAAY,2EA+CvB,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"selectButton.d.ts","sourceRoot":"","sources":["../../../src/select/selectButton.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AACH,eAAO,MAAM,YAAY,2EAgDvB,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/dist/esm/select/selectButton.js

@@ -32,6 +32,6 @@ export const SelectButton = vui((props, ref) => {
             hoverBorderColor: 'red.80'
         }
         : {};
-    return (React.createElement(PopoverTrigger, { as: LineButton, className: cs('vui-selectButton', className), colorScheme: "prussian", disabled: disabled, focusRing: 2, fontWeight: "regular", iconRight: React.createElement(Button.Icon, { color: iconColor, ml: "auto", name: "falAngleDown" }), isFullWidth: true, px: 1, ref: ref, text: React.createElement(Button.Text, { color: textColor }, text), userSelect: "text", ...styles.button, ...readOnlyProps, ...isInvalidProps, ...rest }));
+    return (React.createElement(PopoverTrigger, { as: LineButton, bg: "white", className: cs('vui-selectButton', className), colorScheme: "prussian", disabled: disabled, focusRing: 2, fontWeight: "regular", iconRight: React.createElement(Button.Icon, { color: iconColor, ml: "auto", name: "falAngleDown" }), isFullWidth: true, px: 1, ref: ref, text: React.createElement(Button.Text, { color: textColor }, text), userSelect: "text", ...styles.button, ...readOnlyProps, ...isInvalidProps, ...rest }));
 });
 export default SelectButton;

package/dist/esm/select/useSelect.d.ts

@@ -1,10 +1,11 @@
 import { ChangeEvent } from '../utils';
+import { SelectValue } from './select.types';
 import { UseSelectProps } from './useSelect.types';
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 export default function useSelect(props: UseSelectProps): {
     onChange: (e: ChangeEvent) => void;
-    value: import("./select.types").SelectValue | import("./select.types").SelectValue[] | undefined;
-    valueText: import("./select.types").SelectValue | import("./select.types").SelectValue[] | undefined;
+    value: SelectValue | SelectValue[] | undefined;
+    valueText: SelectValue | undefined;
 };
 export declare type UseSelectReturnType = ReturnType<typeof useSelect>;
 //# sourceMappingURL=useSelect.d.ts.map

package/dist/esm/select/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,UAAU,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc;kBASjB,WAAW;;;EAgBhD;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,UAAU,CAAA;AAClE,OAAO,EAAoB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAQlD,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc;kBAiBjB,WAAW;;;EAiBhD;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/esm/select/useSelect.js

@@ -1,23 +1,35 @@
-import { useState } from 'react';
+import { Children, isValidElement, useState } from 'react';
 import { toggleItem, useCallbackRef } from '../utils';
+const getValueText = (value, options) => {
+    const option = options?.find((o) => o?.value === value);
+    return option?.text || value;
+};
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 export default function useSelect(props) {
-    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp } = props;
+    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options = [], children } = props;
     // Not using useControlled here, because we need custom value setter when uncontrolled
     const [stateValue, setStateValue] = useState(defaultValue);
     const isControlled = valueProp !== undefined;
     const value = isControlled ? valueProp : stateValue;
+    // Iterating over the children to dynamically obtain the list of available options
+    const dynamicOptions = [];
+    Children.forEach(children, element => {
+        if (!isValidElement(element))
+            return;
+        const option = element.props;
+        if (option.text && option.value)
+            dynamicOptions.push(option);
+    });
     /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
     const onChange = useCallbackRef((e) => {
         onChangeProp?.(e);
-        if (!isControlled) {
+        if (!isControlled)
             setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value));
-        }
     });
     const valueText = isMultiple && Array.isArray(value)
         ? value[0]
-            ? `${value[0]}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
+            ? `${getValueText(value[0], [...options, ...dynamicOptions])}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
             : undefined
-        : value;
+        : getValueText(value, [...options, ...dynamicOptions]);
     return { onChange, value, valueText };
 }

package/dist/esm/select/useSelect.types.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 import { ChangeEvent } from '../utils';
-import { SelectValue } from './select.types';
+import { SelectOptionData, SelectValue } from './select.types';
 export declare type UseSelectProps = {
     /** Currently selected value in controlled mode. */
     value?: SelectValue | SelectValue[];
@@ -7,6 +8,10 @@ export declare type UseSelectProps = {
     defaultValue?: SelectValue | SelectValue[];
     /** Allows choosing multiple values. Popover won't close automatically on item click. */
     isMultiple?: boolean;
+    /** List of all available options */
+    options?: SelectOptionData[];
+    /** Select children elements for dynamic handling */
+    children?: ReactNode;
     /**
      * Callback triggered when an option is selected.
      *

package/dist/esm/select/useSelect.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,oBAAY,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}
+{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE9D,oBAAY,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.3.0",
+  "version": "1.4.0-rc.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/checkbox/checkbox.tsx

@@ -109,6 +109,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
       {...rest}
     >
       <CheckboxControl
+        bg="white"
         className="vui-checkboxControl"
         color={color}
         focusWithinRing={3}

package/src/checkbox/checkbox.types.ts

@@ -25,7 +25,7 @@ export type CheckboxProps = SystemProps &
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
     /** Displays the checkbox as indeterminate. */
     isIndeterminate?: boolean
-    /** Socket placing text to the left of the checkbox. */
+    /** Socket for the text next to the checkbox. */
     label?: string
     /** Passed to the inner input. */
     name?: string

package/src/header/headerAccount.tsx

@@ -23,7 +23,7 @@ export function HeaderAccount(props: HeaderAccountProps) {
 
   const contentScreenProps = isMobile
     ? { h: `calc(100vh - ${headerHeight}px)`, left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
-    : { maxH: 360, py: 1, w: 320 }
+    : { maxH: 360, py: 1, minW: 320, w: 'auto' }
 
   const name = isObject<HeaderAccountUserInfoData>(userInfo) ? userInfo.displayName : ''
 

package/src/radio/radio.tsx

@@ -116,7 +116,14 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
       {...aliasedProps}
       {...rest}
     >
-      <RadioControl className="vui-radioControl" color={color} focusWithinRing={3} mr={controlMr} {...controlStyles}>
+      <RadioControl
+        bg="white"
+        className="vui-radioControl"
+        color={color}
+        focusWithinRing={3}
+        mr={controlMr}
+        {...controlStyles}
+      >
         <RadioInput
           className="vui-radioInput"
           onChange={handleOnChange}

package/src/radio/radio.types.ts

@@ -21,7 +21,7 @@ export type RadioProps = SystemProps &
     inputProps?: HTMLAttributes<HTMLInputElement>
     /** Ref passed to the inner input element. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-    /** Socket placing text to the left of the checkbox. */
+    /** Socket for the text next to the item. */
     label?: string
     /** Passed to the inner input. */
     name?: string

package/src/select/select.tsx

@@ -27,13 +27,14 @@ export function Select(props: SelectProps) {
     options,
     placeholder = 'Please select',
     readOnly,
+    selectButton,
     size,
     value,
     variant,
     ...rest
   } = props
 
-  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value })
+  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, children })
 
   if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
     console.error('<Select /> is used with isMultiple but its value is not an array: ', value)
@@ -55,18 +56,14 @@ export function Select(props: SelectProps) {
   return (
     <SelectProvider value={context}>
       <Popover matchWidth {...rest}>
-        {children ?? (
-          <>
-            <SelectButton />
-            <SelectContent>
-              <SelectGroup>
-                {options?.map(option => (
-                  <SelectOption key={option.value} {...option} />
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </>
-        )}
+        <>
+          {selectButton ?? <SelectButton />}
+          <SelectContent>
+            <SelectGroup>
+              {children ?? options?.map?.(option => <SelectOption key={option.value} {...option} />)}
+            </SelectGroup>
+          </SelectContent>
+        </>
       </Popover>
     </SelectProvider>
   )

package/src/select/select.types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { ButtonProps } from '../button'
 import { ListItemProps, ListProps } from '../list'
 import { PopoverContentProps, PopoverProps } from '../popover'
@@ -27,20 +29,22 @@ export type SelectProps = ThemingProps<'Select'> &
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string
     /** Data prop to display an array of options in the popover. */
-    options?: SelectOptionData[]
+    options: SelectOptionData[]
     /** Displayed inside the trigger when no value is selected. */
     placeholder?: string
     /** Select cannot be opened and is styled accordingly. */
     readOnly?: boolean
+    /** Custom select button slot. */
+    selectButton?: ReactNode
   }
 
 export type SelectOptionData = {
   /** Option is displayed as disabled. */
   disabled?: boolean
   /** Text label of the option. */
-  text?: string
+  text: string
   /** Value of a given option. */
-  value?: SelectValue
+  value: SelectValue
 }
 
 export type SelectOptionProps = ListItemProps & {

package/src/select/selectButton.tsx

@@ -42,6 +42,7 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
   return (
     <PopoverTrigger
       as={LineButton}
+      bg="white"
       className={cs('vui-selectButton', className)}
       colorScheme="prussian"
       disabled={disabled}

package/src/select/useSelect.tsx

@@ -1,32 +1,48 @@
-import { useState } from 'react'
+import { Children, isValidElement, useState } from 'react'
 
 import { ChangeEvent, toggleItem, useCallbackRef } from '../utils'
+import { SelectOptionData, SelectValue } from './select.types'
 import { UseSelectProps } from './useSelect.types'
 
+const getValueText = (value: SelectValue, options: SelectOptionData[]) => {
+  const option = options?.find((o: SelectOptionData) => o?.value === value)
+
+  return option?.text || value
+}
+
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 export default function useSelect(props: UseSelectProps) {
-  const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp } = props
+  const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options = [], children } = props
 
   // Not using useControlled here, because we need custom value setter when uncontrolled
   const [stateValue, setStateValue] = useState(defaultValue)
   const isControlled = valueProp !== undefined
   const value = isControlled ? valueProp : stateValue
 
+  // Iterating over the children to dynamically obtain the list of available options
+  const dynamicOptions: SelectOptionData[] = []
+  Children.forEach(children, element => {
+    if (!isValidElement(element)) return
+    const option: SelectOptionData = element.props as SelectOptionData
+    if (option.text && option.value) dynamicOptions.push(option)
+  })
+
   /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
   const onChange = useCallbackRef((e: ChangeEvent) => {
     onChangeProp?.(e)
 
-    if (!isControlled) {
+    if (!isControlled)
       setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))
-    }
   })
 
   const valueText =
     isMultiple && Array.isArray(value)
       ? value[0]
-        ? `${value[0]}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
+        ? `${getValueText(value[0], [...options, ...dynamicOptions])}${
+            value.length > 1 ? ` (+${value.length - 1})` : ''
+          }`
         : undefined
-      : value
+      : getValueText(value as SelectValue, [...options, ...dynamicOptions])
 
   return { onChange, value, valueText }
 }

package/src/select/useSelect.types.ts

@@ -1,5 +1,7 @@
+import { ReactNode } from 'react'
+
 import { ChangeEvent } from '../utils'
-import { SelectValue } from './select.types'
+import { SelectOptionData, SelectValue } from './select.types'
 
 export type UseSelectProps = {
   /** Currently selected value in controlled mode. */
@@ -8,6 +10,10 @@ export type UseSelectProps = {
   defaultValue?: SelectValue | SelectValue[]
   /** Allows choosing multiple values. Popover won't close automatically on item click. */
   isMultiple?: boolean
+  /** List of all available options */
+  options?: SelectOptionData[]
+  /** Select children elements for dynamic handling */
+  children?: ReactNode
   /**
    * Callback triggered when an option is selected.
    *