akeyless-client-commons 1.0.104 → 1.0.106

package/dist/components/index.d.mts

@@ -172,6 +172,7 @@ interface SearchSelectProps {
 interface BaseElementProps {
     name?: string;
     labelContent?: string;
+    labelStyles?: React.CSSProperties;
     required?: boolean;
     labelClassName?: ComponentProps<"div">["className"];
     labelWithDots?: boolean;
@@ -311,6 +312,7 @@ interface ModularFormProps {
     labelsCommonClassName?: string;
     errorClassName?: string;
     onLoad?: (e: EventTarget & HTMLFormElement) => void;
+    autoFixLabelsWidth?: boolean;
 }
 interface ConfirmFormProps {
     onV: () => Promise<void> | void;
@@ -534,18 +536,18 @@ declare const TableProvider: (props: TableProps & {
 }) => react_jsx_runtime.JSX.Element;
 declare const Table: React__default.MemoExoticComponent<(props: TableProps) => react_jsx_runtime.JSX.Element>;
 
-declare const ModularForm: ({ submitFunction, elements, headerContent, buttonContent, formClassName, headerClassName, direction, buttonClassName, submitRef, footerClassName, errorClassName, labelsCommonClassName: labelsCommonClassNameProps, onLoad, }: ModularFormProps) => react_jsx_runtime.JSX.Element;
+declare const ModularForm: ({ submitFunction, elements, headerContent, buttonContent, formClassName, headerClassName, direction, buttonClassName, submitRef, footerClassName, errorClassName, labelsCommonClassName, autoFixLabelsWidth, onLoad, }: ModularFormProps) => react_jsx_runtime.JSX.Element;
 
-declare function InternationalPhonePicker({ setPhoneValue, phoneValue, placeholder, className, containerClassName, defaultCountry, flagContainerClassName, inputClassName, defaultValue, name, style, onEnter, labelContent, labelClassName, required, direction, defaultFocus, }: InternationalInputProps): react_jsx_runtime.JSX.Element;
+declare function InternationalPhonePicker({ setPhoneValue, phoneValue, placeholder, className, containerClassName, defaultCountry, flagContainerClassName, inputClassName, defaultValue, name, style, onEnter, labelContent, labelClassName, required, direction, defaultFocus, labelStyles, labelsCommonClassName, }: InternationalInputProps): react_jsx_runtime.JSX.Element;
 
 declare const useSortValues: (options: any[], sortDirection: "abc" | "cba", sortAsNumber?: boolean) => any[];
-declare const InputContainer: ({ validationError, name, inputType, labelContent, defaultValue, validationName, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, value, labelWithDots, labelsCommonClassName, }: InputContainerProps) => react_jsx_runtime.JSX.Element;
-declare const SelectContainer: ({ name, labelContent, containerClassName, labelClassName, defaultValue, elementClassName, optionClassName, required, options, selectClassName, optionsContainerClassName, sortDirection, sortAsNumber, direction, onChange, labelWithDots, iconClassName, labelsCommonClassName, }: SelectContainerProps) => react_jsx_runtime.JSX.Element;
-declare function MultiSelect({ onChange, selectedOptions, emptyOptionsElement, unremovableOptions, options, styles, name, placeholder, labelContent, required, labelClassName, groupBy, onSearch, onSearchSync, triggerSearchOnFocus, sortDirection, sortAsNumber, direction, createNewOptionLabel, searchInputProps, labelWithDots, labelsCommonClassName, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
-declare const SelectWithSearch: ({ options, labelClassName, labelContent, name, onChange, value, placeholder, required, defaultValue, notFoundLabel, searchPlaceholder, containerClassName, dropdownClassName, dropdownOptionClassName, elementClassName, notFoundLabelClassName, searchClassName, buttonClassName, buttonFocusClassName, sortDirection, sortAsNumber, disabled, direction, createNewOptionLabel, createNewOptionContainerClassName, labelWithDots, labelsCommonClassName, }: SelectWithSearchProps) => react_jsx_runtime.JSX.Element;
-declare const TextAreaContainer: ({ name, labelContent, defaultValue, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, labelWithDots, labelsCommonClassName, }: TextAreaContainerProps) => react_jsx_runtime.JSX.Element;
+declare const InputContainer: ({ validationError, name, inputType, labelContent, defaultValue, validationName, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, value, labelWithDots, labelsCommonClassName, labelStyles, }: InputContainerProps) => react_jsx_runtime.JSX.Element;
+declare const SelectContainer: ({ name, labelContent, containerClassName, labelClassName, defaultValue, elementClassName, optionClassName, required, options, selectClassName, optionsContainerClassName, sortDirection, sortAsNumber, direction, onChange, labelWithDots, iconClassName, labelsCommonClassName, labelStyles, }: SelectContainerProps) => react_jsx_runtime.JSX.Element;
+declare function MultiSelect({ onChange, selectedOptions, emptyOptionsElement, unremovableOptions, options, styles, name, placeholder, labelContent, required, labelClassName, groupBy, onSearch, onSearchSync, triggerSearchOnFocus, sortDirection, sortAsNumber, direction, createNewOptionLabel, searchInputProps, labelWithDots, labelsCommonClassName, labelStyles, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+declare const SelectWithSearch: ({ options, labelClassName, labelContent, name, onChange, value, placeholder, required, defaultValue, notFoundLabel, searchPlaceholder, containerClassName, dropdownClassName, dropdownOptionClassName, elementClassName, notFoundLabelClassName, searchClassName, buttonClassName, buttonFocusClassName, sortDirection, sortAsNumber, disabled, direction, createNewOptionLabel, createNewOptionContainerClassName, labelWithDots, labelsCommonClassName, labelStyles, }: SelectWithSearchProps) => react_jsx_runtime.JSX.Element;
+declare const TextAreaContainer: ({ name, labelContent, defaultValue, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, labelWithDots, labelsCommonClassName, labelStyles, }: TextAreaContainerProps) => react_jsx_runtime.JSX.Element;
 declare const FormSeparator: ({ props, children }: FormSeparatorProps) => react_jsx_runtime.JSX.Element;
-declare const ElementLabel: ({ labelContent, labelClassName, name, required, withDots, direction, labelsCommonClassName, }: Omit<BaseElementProps, "containerClassName" | "elementClassName"> & {
+declare const ElementLabel: ({ labelContent, labelClassName, name, required, withDots, direction, labelsCommonClassName, labelStyles, }: Omit<BaseElementProps, "containerClassName" | "elementClassName"> & {
     withDots?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 

package/dist/components/index.d.ts

@@ -172,6 +172,7 @@ interface SearchSelectProps {
 interface BaseElementProps {
     name?: string;
     labelContent?: string;
+    labelStyles?: React.CSSProperties;
     required?: boolean;
     labelClassName?: ComponentProps<"div">["className"];
     labelWithDots?: boolean;
@@ -311,6 +312,7 @@ interface ModularFormProps {
     labelsCommonClassName?: string;
     errorClassName?: string;
     onLoad?: (e: EventTarget & HTMLFormElement) => void;
+    autoFixLabelsWidth?: boolean;
 }
 interface ConfirmFormProps {
     onV: () => Promise<void> | void;
@@ -534,18 +536,18 @@ declare const TableProvider: (props: TableProps & {
 }) => react_jsx_runtime.JSX.Element;
 declare const Table: React__default.MemoExoticComponent<(props: TableProps) => react_jsx_runtime.JSX.Element>;
 
-declare const ModularForm: ({ submitFunction, elements, headerContent, buttonContent, formClassName, headerClassName, direction, buttonClassName, submitRef, footerClassName, errorClassName, labelsCommonClassName: labelsCommonClassNameProps, onLoad, }: ModularFormProps) => react_jsx_runtime.JSX.Element;
+declare const ModularForm: ({ submitFunction, elements, headerContent, buttonContent, formClassName, headerClassName, direction, buttonClassName, submitRef, footerClassName, errorClassName, labelsCommonClassName, autoFixLabelsWidth, onLoad, }: ModularFormProps) => react_jsx_runtime.JSX.Element;
 
-declare function InternationalPhonePicker({ setPhoneValue, phoneValue, placeholder, className, containerClassName, defaultCountry, flagContainerClassName, inputClassName, defaultValue, name, style, onEnter, labelContent, labelClassName, required, direction, defaultFocus, }: InternationalInputProps): react_jsx_runtime.JSX.Element;
+declare function InternationalPhonePicker({ setPhoneValue, phoneValue, placeholder, className, containerClassName, defaultCountry, flagContainerClassName, inputClassName, defaultValue, name, style, onEnter, labelContent, labelClassName, required, direction, defaultFocus, labelStyles, labelsCommonClassName, }: InternationalInputProps): react_jsx_runtime.JSX.Element;
 
 declare const useSortValues: (options: any[], sortDirection: "abc" | "cba", sortAsNumber?: boolean) => any[];
-declare const InputContainer: ({ validationError, name, inputType, labelContent, defaultValue, validationName, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, value, labelWithDots, labelsCommonClassName, }: InputContainerProps) => react_jsx_runtime.JSX.Element;
-declare const SelectContainer: ({ name, labelContent, containerClassName, labelClassName, defaultValue, elementClassName, optionClassName, required, options, selectClassName, optionsContainerClassName, sortDirection, sortAsNumber, direction, onChange, labelWithDots, iconClassName, labelsCommonClassName, }: SelectContainerProps) => react_jsx_runtime.JSX.Element;
-declare function MultiSelect({ onChange, selectedOptions, emptyOptionsElement, unremovableOptions, options, styles, name, placeholder, labelContent, required, labelClassName, groupBy, onSearch, onSearchSync, triggerSearchOnFocus, sortDirection, sortAsNumber, direction, createNewOptionLabel, searchInputProps, labelWithDots, labelsCommonClassName, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
-declare const SelectWithSearch: ({ options, labelClassName, labelContent, name, onChange, value, placeholder, required, defaultValue, notFoundLabel, searchPlaceholder, containerClassName, dropdownClassName, dropdownOptionClassName, elementClassName, notFoundLabelClassName, searchClassName, buttonClassName, buttonFocusClassName, sortDirection, sortAsNumber, disabled, direction, createNewOptionLabel, createNewOptionContainerClassName, labelWithDots, labelsCommonClassName, }: SelectWithSearchProps) => react_jsx_runtime.JSX.Element;
-declare const TextAreaContainer: ({ name, labelContent, defaultValue, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, labelWithDots, labelsCommonClassName, }: TextAreaContainerProps) => react_jsx_runtime.JSX.Element;
+declare const InputContainer: ({ validationError, name, inputType, labelContent, defaultValue, validationName, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, value, labelWithDots, labelsCommonClassName, labelStyles, }: InputContainerProps) => react_jsx_runtime.JSX.Element;
+declare const SelectContainer: ({ name, labelContent, containerClassName, labelClassName, defaultValue, elementClassName, optionClassName, required, options, selectClassName, optionsContainerClassName, sortDirection, sortAsNumber, direction, onChange, labelWithDots, iconClassName, labelsCommonClassName, labelStyles, }: SelectContainerProps) => react_jsx_runtime.JSX.Element;
+declare function MultiSelect({ onChange, selectedOptions, emptyOptionsElement, unremovableOptions, options, styles, name, placeholder, labelContent, required, labelClassName, groupBy, onSearch, onSearchSync, triggerSearchOnFocus, sortDirection, sortAsNumber, direction, createNewOptionLabel, searchInputProps, labelWithDots, labelsCommonClassName, labelStyles, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+declare const SelectWithSearch: ({ options, labelClassName, labelContent, name, onChange, value, placeholder, required, defaultValue, notFoundLabel, searchPlaceholder, containerClassName, dropdownClassName, dropdownOptionClassName, elementClassName, notFoundLabelClassName, searchClassName, buttonClassName, buttonFocusClassName, sortDirection, sortAsNumber, disabled, direction, createNewOptionLabel, createNewOptionContainerClassName, labelWithDots, labelsCommonClassName, labelStyles, }: SelectWithSearchProps) => react_jsx_runtime.JSX.Element;
+declare const TextAreaContainer: ({ name, labelContent, defaultValue, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, labelWithDots, labelsCommonClassName, labelStyles, }: TextAreaContainerProps) => react_jsx_runtime.JSX.Element;
 declare const FormSeparator: ({ props, children }: FormSeparatorProps) => react_jsx_runtime.JSX.Element;
-declare const ElementLabel: ({ labelContent, labelClassName, name, required, withDots, direction, labelsCommonClassName, }: Omit<BaseElementProps, "containerClassName" | "elementClassName"> & {
+declare const ElementLabel: ({ labelContent, labelClassName, name, required, withDots, direction, labelsCommonClassName, labelStyles, }: Omit<BaseElementProps, "containerClassName" | "elementClassName"> & {
     withDots?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 

package/dist/components/index.js

@@ -5389,7 +5389,7 @@ var RPNInput = __toESM(require("react-phone-number-input"));
 var import_flags = __toESM(require("react-phone-number-input/flags"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function InternationalPhonePicker(param) {
-    var setPhoneValue = param.setPhoneValue, _param_phoneValue = param.phoneValue, phoneValue = _param_phoneValue === void 0 ? "" : _param_phoneValue, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_defaultCountry = param.defaultCountry, defaultCountry = _param_defaultCountry === void 0 ? "IL" : _param_defaultCountry, _param_flagContainerClassName = param.flagContainerClassName, flagContainerClassName = _param_flagContainerClassName === void 0 ? "" : _param_flagContainerClassName, _param_inputClassName = param.inputClassName, inputClassName = _param_inputClassName === void 0 ? "" : _param_inputClassName, defaultValue = param.defaultValue, name = param.name, style = param.style, onEnter = param.onEnter, labelContent = param.labelContent, labelClassName = param.labelClassName, required = param.required, direction = param.direction, _param_defaultFocus = param.defaultFocus, defaultFocus = _param_defaultFocus === void 0 ? true : _param_defaultFocus;
+    var setPhoneValue = param.setPhoneValue, _param_phoneValue = param.phoneValue, phoneValue = _param_phoneValue === void 0 ? "" : _param_phoneValue, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_defaultCountry = param.defaultCountry, defaultCountry = _param_defaultCountry === void 0 ? "IL" : _param_defaultCountry, _param_flagContainerClassName = param.flagContainerClassName, flagContainerClassName = _param_flagContainerClassName === void 0 ? "" : _param_flagContainerClassName, _param_inputClassName = param.inputClassName, inputClassName = _param_inputClassName === void 0 ? "" : _param_inputClassName, defaultValue = param.defaultValue, name = param.name, style = param.style, onEnter = param.onEnter, labelContent = param.labelContent, labelClassName = param.labelClassName, required = param.required, direction = param.direction, _param_defaultFocus = param.defaultFocus, defaultFocus = _param_defaultFocus === void 0 ? true : _param_defaultFocus, labelStyles = param.labelStyles, labelsCommonClassName = param.labelsCommonClassName;
     var handleKeyDown = function(e) {
         if (e.key === "Enter") {
             if (onEnter) {
@@ -5417,6 +5417,8 @@ function InternationalPhonePicker(param) {
         className: cn("space-y-2", "".concat(labelContent ? "flex gap-1 items-center" : ""), containerClassName),
         children: [
             labelContent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ElementLabel, {
+                labelsCommonClassName: labelsCommonClassName,
+                labelStyles: labelStyles,
                 labelContent: labelContent,
                 labelClassName: labelClassName,
                 name: name,
@@ -5581,7 +5583,7 @@ var useSortValues = function(options, sortDirection, sortAsNumber) {
     return sortOptions;
 };
 var InputContainer = function(param) {
-    var validationError = param.validationError, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_inputType = param.inputType, inputType = _param_inputType === void 0 ? "text" : _param_inputType, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_validationName = param.validationName, validationName = _param_validationName === void 0 ? "textNumbers" : _param_validationName, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, value = param.value, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var validationError = param.validationError, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_inputType = param.inputType, inputType = _param_inputType === void 0 ? "text" : _param_inputType, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_validationName = param.validationName, validationName = _param_validationName === void 0 ? "textNumbers" : _param_validationName, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, value = param.value, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     var handleChangeFunction = (0, import_react12.useCallback)(function(e) {
         handleChange(e);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -5599,6 +5601,7 @@ var InputContainer = function(param) {
         className: cn(defaultContainerClassName, containerClassName),
         children: [
             labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 withDots: labelWithDots,
                 direction: direction,
@@ -5626,7 +5629,7 @@ var InputContainer = function(param) {
     });
 };
 var SelectContainer = function(param) {
-    var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_optionClassName = param.optionClassName, optionClassName = _param_optionClassName === void 0 ? "" : _param_optionClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_selectClassName = param.selectClassName, selectClassName = _param_selectClassName === void 0 ? "" : _param_selectClassName, _param_optionsContainerClassName = param.optionsContainerClassName, optionsContainerClassName = _param_optionsContainerClassName === void 0 ? "" : _param_optionsContainerClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, onChange = param.onChange, labelWithDots = param.labelWithDots, iconClassName = param.iconClassName, labelsCommonClassName = param.labelsCommonClassName;
+    var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_optionClassName = param.optionClassName, optionClassName = _param_optionClassName === void 0 ? "" : _param_optionClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_selectClassName = param.selectClassName, selectClassName = _param_selectClassName === void 0 ? "" : _param_selectClassName, _param_optionsContainerClassName = param.optionsContainerClassName, optionsContainerClassName = _param_optionsContainerClassName === void 0 ? "" : _param_optionsContainerClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, onChange = param.onChange, labelWithDots = param.labelWithDots, iconClassName = param.iconClassName, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     var _sortOptions_, _options_find;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     var _ref = _sliced_to_array((0, import_react12.useState)(false), 2), isOpen = _ref[0], setIsOpen = _ref[1];
@@ -5640,6 +5643,7 @@ var SelectContainer = function(param) {
         className: cn(defaultContainerClassName, containerClassName),
         children: [
             labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 withDots: labelWithDots,
                 direction: direction,
@@ -5689,12 +5693,13 @@ var SelectContainer = function(param) {
     });
 };
 function MultiSelect(param) {
-    var onChange = param.onChange, selectedOptions = param.selectedOptions, emptyOptionsElement = param.emptyOptionsElement, unremovableOptions = param.unremovableOptions, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_styles = param.styles, styles = _param_styles === void 0 ? {} : _param_styles, _param_name = param.name, name = _param_name === void 0 ? "multipleSelect" : _param_name, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select items" : _param_placeholder, labelContent = param.labelContent, required = param.required, labelClassName = param.labelClassName, groupBy = param.groupBy, onSearch = param.onSearch, onSearchSync = param.onSearchSync, triggerSearchOnFocus = param.triggerSearchOnFocus, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, searchInputProps = param.searchInputProps, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var onChange = param.onChange, selectedOptions = param.selectedOptions, emptyOptionsElement = param.emptyOptionsElement, unremovableOptions = param.unremovableOptions, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_styles = param.styles, styles = _param_styles === void 0 ? {} : _param_styles, _param_name = param.name, name = _param_name === void 0 ? "multipleSelect" : _param_name, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select items" : _param_placeholder, labelContent = param.labelContent, required = param.required, labelClassName = param.labelClassName, groupBy = param.groupBy, onSearch = param.onSearch, onSearchSync = param.onSearchSync, triggerSearchOnFocus = param.triggerSearchOnFocus, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, searchInputProps = param.searchInputProps, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
         className: cn("".concat(labelContent ? defaultContainerClassName : ""), styles.containerClassName),
         children: [
             labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 withDots: labelWithDots,
                 direction: direction,
@@ -5736,12 +5741,13 @@ function MultiSelect(param) {
     });
 }
 var SelectWithSearch = function(param) {
-    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, createNewOptionContainerClassName = param.createNewOptionContainerClassName, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, createNewOptionContainerClassName = param.createNewOptionContainerClassName, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
         className: cn(defaultContainerClassName, containerClassName),
         children: [
             labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 withDots: labelWithDots,
                 direction: direction,
@@ -5775,11 +5781,12 @@ var SelectWithSearch = function(param) {
     });
 };
 var TextAreaContainer = function(param) {
-    var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
         className: cn(defaultContainerClassName, containerClassName),
         children: [
             labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 direction: direction,
                 labelContent: labelContent,
@@ -5809,11 +5816,11 @@ var FormSeparator = function(param) {
     }));
 };
 var ElementLabel = function(param) {
-    var labelContent = param.labelContent, labelClassName = param.labelClassName, name = param.name, required = param.required, _param_withDots = param.withDots, withDots = _param_withDots === void 0 ? false : _param_withDots, direction = param.direction, labelsCommonClassName = param.labelsCommonClassName;
+    var labelContent = param.labelContent, labelClassName = param.labelClassName, name = param.name, required = param.required, _param_withDots = param.withDots, withDots = _param_withDots === void 0 ? false : _param_withDots, direction = param.direction, labelsCommonClassName = param.labelsCommonClassName, _param_labelStyles = param.labelStyles, labelStyles = _param_labelStyles === void 0 ? {} : _param_labelStyles;
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", {
-        style: {
+        style: _object_spread({
             direction: direction
-        },
+        }, labelStyles),
         className: cn("text-start w-fit flex gap-0.5 text-nowrap form-label", labelsCommonClassName, labelClassName),
         htmlFor: name,
         children: [
@@ -5844,32 +5851,31 @@ var ModularForm = function(param) {
         return function(form) {
             return _ref.apply(this, arguments);
         };
-    }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef, _param_footerClassName = param.footerClassName, footerClassName = _param_footerClassName === void 0 ? "" : _param_footerClassName, _param_errorClassName = param.errorClassName, errorClassName = _param_errorClassName === void 0 ? "" : _param_errorClassName, labelsCommonClassNameProps = param.labelsCommonClassName, onLoad = param.onLoad;
+    }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef, _param_footerClassName = param.footerClassName, footerClassName = _param_footerClassName === void 0 ? "" : _param_footerClassName, _param_errorClassName = param.errorClassName, errorClassName = _param_errorClassName === void 0 ? "" : _param_errorClassName, labelsCommonClassName = param.labelsCommonClassName, _param_autoFixLabelsWidth = param.autoFixLabelsWidth, autoFixLabelsWidth = _param_autoFixLabelsWidth === void 0 ? true : _param_autoFixLabelsWidth, onLoad = param.onLoad;
     var _ref = _sliced_to_array((0, import_react13.useState)(""), 2), errorMsg = _ref[0], setErrorMsg = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react13.useState)(false), 2), isLoading = _ref1[0], setIsLoading = _ref1[1];
     var formRef = (0, import_react13.useRef)(null);
-    var labelsCommonClassName = function() {
-        console.log("labelsCommonClassName called", {
-            labelsCommonClassNameProps: labelsCommonClassNameProps,
-            ref: formRef.current
-        });
-        if (!formRef.current) {
-            return labelsCommonClassNameProps;
+    var _ref2 = _sliced_to_array((0, import_react13.useState)(0), 2), maxLabelsWidth = _ref2[0], setMaxLabelsWidth = _ref2[1];
+    var getLabelStyles = function() {
+        if (autoFixLabelsWidth && maxLabelsWidth > 0) {
+            return {
+                minWidth: "".concat(maxLabelsWidth, "px")
+            };
         }
-        onLoad === null || onLoad === void 0 ? void 0 : onLoad(formRef.current);
-        var labels = formRef.current.getElementsByClassName("form-label");
-        var max_width = 0;
-        Array.from(labels).forEach(function(label) {
-            var label_width = label.clientWidth;
-            if (label_width > max_width) {
-                max_width = label_width;
-            }
-        });
-        return cn("min-w-[".concat(max_width, "px]"), labelsCommonClassNameProps);
+        return {};
     };
     (0, import_react13.useEffect)(function() {
-        if (formRef.current) {
+        if (formRef.current && autoFixLabelsWidth) {
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(formRef.current);
+            var labels = formRef.current.getElementsByClassName("form-label");
+            var max_width = 0;
+            Array.from(labels).forEach(function(label) {
+                var label_width = label.clientWidth;
+                if (label_width > max_width) {
+                    max_width = label_width;
+                }
+            });
+            setMaxLabelsWidth(max_width);
         }
     }, []);
     var onSubmit = /*#__PURE__*/ function() {
@@ -5956,32 +5962,38 @@ var ModularForm = function(param) {
                     case "input":
                         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputContainer, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "textarea":
                         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TextAreaContainer, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "select":
                         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectContainer, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "multiSelect":
                         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MultiSelect, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "selectWithSearch":
                         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectWithSearch, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "internationalPhoneInput":
                         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InternationalPhonePicker, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "separator":
                         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormSeparator, _object_spread_props(_object_spread({}, element), {

package/dist/components/index.mjs

@@ -5185,7 +5185,7 @@ import * as RPNInput from "react-phone-number-input";
 import flags from "react-phone-number-input/flags";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function InternationalPhonePicker(param) {
-    var setPhoneValue = param.setPhoneValue, _param_phoneValue = param.phoneValue, phoneValue = _param_phoneValue === void 0 ? "" : _param_phoneValue, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_defaultCountry = param.defaultCountry, defaultCountry = _param_defaultCountry === void 0 ? "IL" : _param_defaultCountry, _param_flagContainerClassName = param.flagContainerClassName, flagContainerClassName = _param_flagContainerClassName === void 0 ? "" : _param_flagContainerClassName, _param_inputClassName = param.inputClassName, inputClassName = _param_inputClassName === void 0 ? "" : _param_inputClassName, defaultValue = param.defaultValue, name = param.name, style = param.style, onEnter = param.onEnter, labelContent = param.labelContent, labelClassName = param.labelClassName, required = param.required, direction = param.direction, _param_defaultFocus = param.defaultFocus, defaultFocus = _param_defaultFocus === void 0 ? true : _param_defaultFocus;
+    var setPhoneValue = param.setPhoneValue, _param_phoneValue = param.phoneValue, phoneValue = _param_phoneValue === void 0 ? "" : _param_phoneValue, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_defaultCountry = param.defaultCountry, defaultCountry = _param_defaultCountry === void 0 ? "IL" : _param_defaultCountry, _param_flagContainerClassName = param.flagContainerClassName, flagContainerClassName = _param_flagContainerClassName === void 0 ? "" : _param_flagContainerClassName, _param_inputClassName = param.inputClassName, inputClassName = _param_inputClassName === void 0 ? "" : _param_inputClassName, defaultValue = param.defaultValue, name = param.name, style = param.style, onEnter = param.onEnter, labelContent = param.labelContent, labelClassName = param.labelClassName, required = param.required, direction = param.direction, _param_defaultFocus = param.defaultFocus, defaultFocus = _param_defaultFocus === void 0 ? true : _param_defaultFocus, labelStyles = param.labelStyles, labelsCommonClassName = param.labelsCommonClassName;
     var handleKeyDown = function(e) {
         if (e.key === "Enter") {
             if (onEnter) {
@@ -5213,6 +5213,8 @@ function InternationalPhonePicker(param) {
         className: cn("space-y-2", "".concat(labelContent ? "flex gap-1 items-center" : ""), containerClassName),
         children: [
             labelContent && /* @__PURE__ */ jsx18(ElementLabel, {
+                labelsCommonClassName: labelsCommonClassName,
+                labelStyles: labelStyles,
                 labelContent: labelContent,
                 labelClassName: labelClassName,
                 name: name,
@@ -5377,7 +5379,7 @@ var useSortValues = function(options, sortDirection, sortAsNumber) {
     return sortOptions;
 };
 var InputContainer = function(param) {
-    var validationError = param.validationError, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_inputType = param.inputType, inputType = _param_inputType === void 0 ? "text" : _param_inputType, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_validationName = param.validationName, validationName = _param_validationName === void 0 ? "textNumbers" : _param_validationName, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, value = param.value, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var validationError = param.validationError, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_inputType = param.inputType, inputType = _param_inputType === void 0 ? "text" : _param_inputType, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_validationName = param.validationName, validationName = _param_validationName === void 0 ? "textNumbers" : _param_validationName, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, value = param.value, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     var handleChangeFunction = useCallback5(function(e) {
         handleChange(e);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -5395,6 +5397,7 @@ var InputContainer = function(param) {
         className: cn(defaultContainerClassName, containerClassName),
         children: [
             labelContent && /* @__PURE__ */ jsx19(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 withDots: labelWithDots,
                 direction: direction,
@@ -5422,7 +5425,7 @@ var InputContainer = function(param) {
     });
 };
 var SelectContainer = function(param) {
-    var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_optionClassName = param.optionClassName, optionClassName = _param_optionClassName === void 0 ? "" : _param_optionClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_selectClassName = param.selectClassName, selectClassName = _param_selectClassName === void 0 ? "" : _param_selectClassName, _param_optionsContainerClassName = param.optionsContainerClassName, optionsContainerClassName = _param_optionsContainerClassName === void 0 ? "" : _param_optionsContainerClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, onChange = param.onChange, labelWithDots = param.labelWithDots, iconClassName = param.iconClassName, labelsCommonClassName = param.labelsCommonClassName;
+    var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_optionClassName = param.optionClassName, optionClassName = _param_optionClassName === void 0 ? "" : _param_optionClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_selectClassName = param.selectClassName, selectClassName = _param_selectClassName === void 0 ? "" : _param_selectClassName, _param_optionsContainerClassName = param.optionsContainerClassName, optionsContainerClassName = _param_optionsContainerClassName === void 0 ? "" : _param_optionsContainerClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, onChange = param.onChange, labelWithDots = param.labelWithDots, iconClassName = param.iconClassName, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     var _sortOptions_, _options_find;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     var _useState7 = _sliced_to_array(useState7(false), 2), isOpen = _useState7[0], setIsOpen = _useState7[1];
@@ -5436,6 +5439,7 @@ var SelectContainer = function(param) {
         className: cn(defaultContainerClassName, containerClassName),
         children: [
             labelContent && /* @__PURE__ */ jsx19(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 withDots: labelWithDots,
                 direction: direction,
@@ -5485,12 +5489,13 @@ var SelectContainer = function(param) {
     });
 };
 function MultiSelect(param) {
-    var onChange = param.onChange, selectedOptions = param.selectedOptions, emptyOptionsElement = param.emptyOptionsElement, unremovableOptions = param.unremovableOptions, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_styles = param.styles, styles = _param_styles === void 0 ? {} : _param_styles, _param_name = param.name, name = _param_name === void 0 ? "multipleSelect" : _param_name, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select items" : _param_placeholder, labelContent = param.labelContent, required = param.required, labelClassName = param.labelClassName, groupBy = param.groupBy, onSearch = param.onSearch, onSearchSync = param.onSearchSync, triggerSearchOnFocus = param.triggerSearchOnFocus, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, searchInputProps = param.searchInputProps, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var onChange = param.onChange, selectedOptions = param.selectedOptions, emptyOptionsElement = param.emptyOptionsElement, unremovableOptions = param.unremovableOptions, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_styles = param.styles, styles = _param_styles === void 0 ? {} : _param_styles, _param_name = param.name, name = _param_name === void 0 ? "multipleSelect" : _param_name, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select items" : _param_placeholder, labelContent = param.labelContent, required = param.required, labelClassName = param.labelClassName, groupBy = param.groupBy, onSearch = param.onSearch, onSearchSync = param.onSearchSync, triggerSearchOnFocus = param.triggerSearchOnFocus, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, searchInputProps = param.searchInputProps, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     return /* @__PURE__ */ jsxs14("div", {
         className: cn("".concat(labelContent ? defaultContainerClassName : ""), styles.containerClassName),
         children: [
             labelContent && /* @__PURE__ */ jsx19(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 withDots: labelWithDots,
                 direction: direction,
@@ -5532,12 +5537,13 @@ function MultiSelect(param) {
     });
 }
 var SelectWithSearch = function(param) {
-    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, createNewOptionContainerClassName = param.createNewOptionContainerClassName, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, createNewOptionContainerClassName = param.createNewOptionContainerClassName, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     return /* @__PURE__ */ jsxs14("div", {
         className: cn(defaultContainerClassName, containerClassName),
         children: [
             labelContent && /* @__PURE__ */ jsx19(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 withDots: labelWithDots,
                 direction: direction,
@@ -5571,11 +5577,12 @@ var SelectWithSearch = function(param) {
     });
 };
 var TextAreaContainer = function(param) {
-    var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, labelStyles = param.labelStyles;
     return /* @__PURE__ */ jsxs14("div", {
         className: cn(defaultContainerClassName, containerClassName),
         children: [
             labelContent && /* @__PURE__ */ jsx19(ElementLabel, {
+                labelStyles: labelStyles,
                 labelsCommonClassName: labelsCommonClassName,
                 direction: direction,
                 labelContent: labelContent,
@@ -5605,11 +5612,11 @@ var FormSeparator = function(param) {
     }));
 };
 var ElementLabel = function(param) {
-    var labelContent = param.labelContent, labelClassName = param.labelClassName, name = param.name, required = param.required, _param_withDots = param.withDots, withDots = _param_withDots === void 0 ? false : _param_withDots, direction = param.direction, labelsCommonClassName = param.labelsCommonClassName;
+    var labelContent = param.labelContent, labelClassName = param.labelClassName, name = param.name, required = param.required, _param_withDots = param.withDots, withDots = _param_withDots === void 0 ? false : _param_withDots, direction = param.direction, labelsCommonClassName = param.labelsCommonClassName, _param_labelStyles = param.labelStyles, labelStyles = _param_labelStyles === void 0 ? {} : _param_labelStyles;
     return /* @__PURE__ */ jsxs14("label", {
-        style: {
+        style: _object_spread({
             direction: direction
-        },
+        }, labelStyles),
         className: cn("text-start w-fit flex gap-0.5 text-nowrap form-label", labelsCommonClassName, labelClassName),
         htmlFor: name,
         children: [
@@ -5640,32 +5647,31 @@ var ModularForm = function(param) {
         return function(form) {
             return _ref.apply(this, arguments);
         };
-    }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef, _param_footerClassName = param.footerClassName, footerClassName = _param_footerClassName === void 0 ? "" : _param_footerClassName, _param_errorClassName = param.errorClassName, errorClassName = _param_errorClassName === void 0 ? "" : _param_errorClassName, labelsCommonClassNameProps = param.labelsCommonClassName, onLoad = param.onLoad;
+    }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef, _param_footerClassName = param.footerClassName, footerClassName = _param_footerClassName === void 0 ? "" : _param_footerClassName, _param_errorClassName = param.errorClassName, errorClassName = _param_errorClassName === void 0 ? "" : _param_errorClassName, labelsCommonClassName = param.labelsCommonClassName, _param_autoFixLabelsWidth = param.autoFixLabelsWidth, autoFixLabelsWidth = _param_autoFixLabelsWidth === void 0 ? true : _param_autoFixLabelsWidth, onLoad = param.onLoad;
     var _useState8 = _sliced_to_array(useState8(""), 2), errorMsg = _useState8[0], setErrorMsg = _useState8[1];
     var _useState81 = _sliced_to_array(useState8(false), 2), isLoading = _useState81[0], setIsLoading = _useState81[1];
     var formRef = useRef5(null);
-    var labelsCommonClassName = function() {
-        console.log("labelsCommonClassName called", {
-            labelsCommonClassNameProps: labelsCommonClassNameProps,
-            ref: formRef.current
-        });
-        if (!formRef.current) {
-            return labelsCommonClassNameProps;
+    var _useState82 = _sliced_to_array(useState8(0), 2), maxLabelsWidth = _useState82[0], setMaxLabelsWidth = _useState82[1];
+    var getLabelStyles = function() {
+        if (autoFixLabelsWidth && maxLabelsWidth > 0) {
+            return {
+                minWidth: "".concat(maxLabelsWidth, "px")
+            };
         }
-        onLoad === null || onLoad === void 0 ? void 0 : onLoad(formRef.current);
-        var labels = formRef.current.getElementsByClassName("form-label");
-        var max_width = 0;
-        Array.from(labels).forEach(function(label) {
-            var label_width = label.clientWidth;
-            if (label_width > max_width) {
-                max_width = label_width;
-            }
-        });
-        return cn("min-w-[".concat(max_width, "px]"), labelsCommonClassNameProps);
+        return {};
     };
     useEffect7(function() {
-        if (formRef.current) {
+        if (formRef.current && autoFixLabelsWidth) {
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(formRef.current);
+            var labels = formRef.current.getElementsByClassName("form-label");
+            var max_width = 0;
+            Array.from(labels).forEach(function(label) {
+                var label_width = label.clientWidth;
+                if (label_width > max_width) {
+                    max_width = label_width;
+                }
+            });
+            setMaxLabelsWidth(max_width);
         }
     }, []);
     var onSubmit = /*#__PURE__*/ function() {
@@ -5752,32 +5758,38 @@ var ModularForm = function(param) {
                     case "input":
                         return /* @__PURE__ */ jsx20(InputContainer, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "textarea":
                         return /* @__PURE__ */ jsx20(TextAreaContainer, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "select":
                         return /* @__PURE__ */ jsx20(SelectContainer, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "multiSelect":
                         return /* @__PURE__ */ jsx20(MultiSelect, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "selectWithSearch":
                         return /* @__PURE__ */ jsx20(SelectWithSearch, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "internationalPhoneInput":
                         return /* @__PURE__ */ jsx20(InternationalPhonePicker, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
-                            labelsCommonClassName: labelsCommonClassName()
+                            labelsCommonClassName: labelsCommonClassName,
+                            labelStyles: getLabelStyles()
                         }), index2);
                     case "separator":
                         return /* @__PURE__ */ jsx20(FormSeparator, _object_spread_props(_object_spread({}, element), {

package/dist/types/index.d.mts

@@ -120,6 +120,7 @@ interface SearchSelectOptions extends Record<string, string> {
 interface BaseElementProps {
     name?: string;
     labelContent?: string;
+    labelStyles?: React.CSSProperties;
     required?: boolean;
     labelClassName?: ComponentProps<"div">["className"];
     labelWithDots?: boolean;
@@ -259,6 +260,7 @@ interface ModularFormProps {
     labelsCommonClassName?: string;
     errorClassName?: string;
     onLoad?: (e: EventTarget & HTMLFormElement) => void;
+    autoFixLabelsWidth?: boolean;
 }
 interface ConfirmFormProps {
     onV: () => Promise<void> | void;

package/dist/types/index.d.ts

@@ -120,6 +120,7 @@ interface SearchSelectOptions extends Record<string, string> {
 interface BaseElementProps {
     name?: string;
     labelContent?: string;
+    labelStyles?: React.CSSProperties;
     required?: boolean;
     labelClassName?: ComponentProps<"div">["className"];
     labelWithDots?: boolean;
@@ -259,6 +260,7 @@ interface ModularFormProps {
     labelsCommonClassName?: string;
     errorClassName?: string;
     onLoad?: (e: EventTarget & HTMLFormElement) => void;
+    autoFixLabelsWidth?: boolean;
 }
 interface ConfirmFormProps {
     onV: () => Promise<void> | void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "akeyless-client-commons",
-    "version": "1.0.104",
+    "version": "1.0.106",
     "scripts": {
         "build": "tsup",
         "deploy": "npm run build && npm version patch --no-git-tag-version && npm publish",