@dnanpm/styleguide 3.7.1 → 3.8.1

package/build/es/components/Selectbox/Selectbox.d.ts

@@ -1,119 +1,119 @@
-import React from 'react';
-import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
-interface SelectboxOption {
-    label: string;
-    value: string;
-}
-declare module 'react-select/dist/declarations/src/Select' {
-    interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
-        errorState?: boolean;
-    }
-}
-interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
-    /**
-     * Unique ID for the select element
-     */
-    inputId: ReactSelectProps['inputId'];
-    /**
-     * Array of options that populate the select menu
-     */
-    options: OptionsOrGroups<Option, Group>;
-    /**
-     * Default value of select menu
-     *
-     * @default undefined
-     */
-    value?: ReactSelectProps<Option>['value'];
-    /**
-     * Text of the select element label
-     */
-    label?: string;
-    /**
-     * Text of placeholder for the select value
-     */
-    placeholder?: ReactSelectProps['placeholder'];
-    /**
-     * Text to display when there are no options
-     */
-    noOptionsText?: string;
-    /**
-     * On select change callback
-     */
-    onChange: ReactSelectProps<Option, IsMulti>['onChange'];
-    /**
-     * On input change callback
-     */
-    onInputChange?: ReactSelectProps['onInputChange'];
-    /**
-     * Allows to attach selectbox options menu to specific HTML element
-     * Useful when used in modals
-     *
-     * @default selectbox-container
-     */
-    menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
-    /**
-     * Allows to place selectbox options menu above or below the selectbox control
-     *
-     * @param {MenuPlacement} top Opens options menu above the control
-     * @param {MenuPlacement} bottom Opens options menu below the control
-     *
-     * @default 'auto'
-     */
-    menuPlacement?: ReactSelectProps['menuPlacement'];
-    /**
-     * Displays loading indicator (PixelLoader) instead of selectbox
-     *
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Allows to enable search functionality
-     *
-     * @default false
-     */
-    isSearchable?: boolean;
-    /**
-     * Allows to clear selected value
-     *
-     * @default false
-     */
-    isClearable?: boolean;
-    /**
-     * Allows to select multiple options
-     *
-     * @default false
-     */
-    isMulti?: IsMulti;
-    /**
-     * Allows to disable the component functionality
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Allows to set selectbox as mandatory
-     *
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * Allows to set selectbox to error state
-     *
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * Text of the error message when selectbox is in error state
-     */
-    errorMessage?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ noOptionsText, "data-testid": dataTestId, ...props }: Props<Option, IsMulti, Group>) => React.JSX.Element;
-export default SelectBox;
+import React from 'react';
+import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
+interface SelectboxOption {
+    label: string;
+    value: string;
+}
+declare module 'react-select/dist/declarations/src/Select' {
+    interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
+        errorState?: boolean;
+    }
+}
+interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
+    /**
+     * Unique ID for the select element
+     */
+    inputId: ReactSelectProps['inputId'];
+    /**
+     * Array of options that populate the select menu
+     */
+    options: OptionsOrGroups<Option, Group>;
+    /**
+     * Default value of select menu
+     *
+     * @default undefined
+     */
+    value?: ReactSelectProps<Option>['value'];
+    /**
+     * Text of the select element label
+     */
+    label?: string;
+    /**
+     * Text of placeholder for the select value
+     */
+    placeholder?: ReactSelectProps['placeholder'];
+    /**
+     * Text to display when there are no options
+     */
+    noOptionsText?: string;
+    /**
+     * On select change callback
+     */
+    onChange: ReactSelectProps<Option, IsMulti>['onChange'];
+    /**
+     * On input change callback
+     */
+    onInputChange?: ReactSelectProps['onInputChange'];
+    /**
+     * Allows to attach selectbox options menu to specific HTML element
+     * Useful when used in modals
+     *
+     * @default selectbox-container
+     */
+    menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
+    /**
+     * Allows to place selectbox options menu above or below the selectbox control
+     *
+     * @param {MenuPlacement} top Opens options menu above the control
+     * @param {MenuPlacement} bottom Opens options menu below the control
+     *
+     * @default 'auto'
+     */
+    menuPlacement?: ReactSelectProps['menuPlacement'];
+    /**
+     * Displays loading indicator (PixelLoader) instead of selectbox
+     *
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Allows to enable search functionality
+     *
+     * @default false
+     */
+    isSearchable?: boolean;
+    /**
+     * Allows to clear selected value
+     *
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Allows to select multiple options
+     *
+     * @default false
+     */
+    isMulti?: IsMulti;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Allows to set selectbox as mandatory
+     *
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Allows to set selectbox to error state
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Text of the error message when selectbox is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ noOptionsText, "data-testid": dataTestId, ...props }: Props<Option, IsMulti, Group>) => React.JSX.Element;
+export default SelectBox;

package/build/es/components/Selectbox/Selectbox.js

@@ -12,96 +12,96 @@ import PixelLoader from '../PixelLoader/PixelLoader.js';
 const FieldContainer = styled.div `
     color: ${theme.color.text.black};
     margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
+`;
 const ErrorMessage = styled.div `
     font-size: ${theme.fontSize.s};
     font-weight: ${theme.fontWeight.medium};
     line-height: ${theme.lineHeight.s};
     color: ${theme.color.notification.error};
     margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const customTheme = Object.assign(Object.assign({}, defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, defaultTheme.colors), { primary50: theme.color.background.sand.E02, primary25: theme.color.background.sand.E01, primary: theme.color.background.sand.E02 }) });
-const getStyles = () => ({
-    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, width: '100%', minHeight: getMultipliedSize(theme.base.baseHeight, 4), backgroundColor: state.isDisabled
-            ? theme.color.background.sand.E01
-            : theme.color.background.white.default, borderRadius: theme.radius.s, border: `1px solid ${theme.color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
-        borderBottom: `4px solid ${theme.color.notification.error}`,
-    })), (!state.menuIsOpen && {
-        ':focus-within': {
-            border: `2px solid ${theme.color.focus.light}`,
-            boxShadow: `0px 0px 0px 2px ${theme.color.focus.dark}`,
-            outline: 'none',
-        },
-    }))),
-    valueContainer: styles => (Object.assign(Object.assign({}, styles), { padding: 0 })),
-    multiValue: styles => (Object.assign(Object.assign({}, styles), { padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, backgroundColor: theme.color.background.sand.E02, borderRadius: theme.radius.pill, margin: '2px 6px 2px 0' })),
-    multiValueLabel: styles => (Object.assign(Object.assign({}, styles), { fontSize: theme.fontSize.s, fontWeight: theme.fontWeight.medium, lineHeight: theme.lineHeight.default, alignItems: 'center', color: theme.color.text.black, padding: 0, paddingLeft: 0 })),
-    multiValueRemove: styles => (Object.assign(Object.assign({}, styles), { marginLeft: getMultipliedSize(theme.base.baseWidth, 1), padding: 0, ':hover': {
-            cursor: 'pointer',
-            color: theme.color.text.black,
-            backgroundColor: theme.color.background.sand.E02,
-        } })),
-    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.color.transparency.T40 })),
-    indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { width: 0, backgroundColor: 'transparent', border: 'none' })),
-    clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer', color: theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), ':hover': {
-            color: theme.color.text.black,
-        } })),
-    dropdownIndicator: (styles, { selectProps: { isSearchable } }) => (Object.assign(Object.assign({}, styles), { color: isSearchable ? theme.color.text.pink : theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), pointerEvents: 'none', ':hover': {
-            color: theme.color.text.black,
-        } })),
-    menu: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { boxShadow: 'none', margin: '-3px 0 -3px 0', borderRadius: theme.radius.s, border: `1px solid ${theme.color.line.L01}` }), (state.placement === 'top' && {
-        borderBottom: 0,
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-    })), (state.placement === 'bottom' && Object.assign({ borderTop: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0 }, (state.selectProps.errorState && {
-        margin: '-2px 0 -3px 0',
-    }))))),
-    option: (styles, { isDisabled, isSelected }) => (Object.assign(Object.assign(Object.assign({}, styles), { display: 'flex', justifyContent: 'space-between', color: theme.color.text.black, fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book, fontSize: theme.fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden' }), (isDisabled && {
-        cursor: 'not-allowed',
-        color: theme.color.text.black + theme.color.transparency.T30,
-        backgroundColor: theme.color.background.sand.E01 + theme.color.transparency.T30,
-    }))),
-});
-const MultiValueRemove = (_a) => {
-    var multiValueRemoveProps = __rest(_a, []);
-    return components.MultiValueRemove && (React__default.createElement(components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
-        React__default.createElement(Icon, { icon: Close, size: "1rem" })));
-};
-const IndicatorsContainer = (_a) => {
-    var { selectProps } = _a, indicatorsContainerProps = __rest(_a, ["selectProps"]);
-    return components.IndicatorsContainer && (React__default.createElement(components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
-        selectProps.errorState && (React__default.createElement(Icon, { icon: Error, color: theme.color.notification.error, position: "right" })),
-        selectProps.isDisabled && React__default.createElement(Icon, { icon: Lock, position: "right" }),
-        indicatorsContainerProps.children));
-};
-const ClearIndicator = (_a) => {
-    var clearIndicatorProps = __rest(_a, []);
-    return components.ClearIndicator && (React__default.createElement(components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
-        React__default.createElement(Icon, { icon: Close })));
-};
-const DropdownIndicator = (_a) => {
-    var { selectProps } = _a, dropdownIndicatorProps = __rest(_a, ["selectProps"]);
-    const getIcon = () => {
-        if (selectProps.isSearchable) {
-            return Search;
-        }
-        return selectProps.menuIsOpen ? ChevronUp : ChevronDown;
-    };
-    return (components.DropdownIndicator && (React__default.createElement(components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
-        React__default.createElement(Icon, { icon: getIcon() }))));
-};
-const SelectBox = (_a) => {
-    var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = __rest(_a, ["noOptionsText", 'data-testid']);
-    const getNoOptionsText = () => noOptionsText;
-    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
-        React__default.createElement(Select, { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: {
-                MultiValueRemove,
-                IndicatorsContainer,
-                ClearIndicator,
-                DropdownIndicator,
-            }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error }),
-        props.error && props.errorMessage && React__default.createElement(ErrorMessage, null, props.errorMessage))) : (React__default.createElement(PixelLoader, null));
+`;
+const customTheme = Object.assign(Object.assign({}, defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, defaultTheme.colors), { primary50: theme.color.background.sand.E02, primary25: theme.color.background.sand.E01, primary: theme.color.background.sand.E02 }) });
+const getStyles = () => ({
+    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, width: '100%', minHeight: getMultipliedSize(theme.base.baseHeight, 4), backgroundColor: state.isDisabled
+            ? theme.color.background.sand.E01
+            : theme.color.background.white.default, borderRadius: theme.radius.s, border: `1px solid ${theme.color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
+        borderBottom: `4px solid ${theme.color.notification.error}`,
+    })), (!state.menuIsOpen && {
+        ':focus-within': {
+            border: `2px solid ${theme.color.focus.light}`,
+            boxShadow: `0px 0px 0px 2px ${theme.color.focus.dark}`,
+            outline: 'none',
+        },
+    }))),
+    valueContainer: styles => (Object.assign(Object.assign({}, styles), { padding: 0 })),
+    multiValue: styles => (Object.assign(Object.assign({}, styles), { padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, backgroundColor: theme.color.background.sand.E02, borderRadius: theme.radius.pill, margin: '2px 6px 2px 0' })),
+    multiValueLabel: styles => (Object.assign(Object.assign({}, styles), { fontSize: theme.fontSize.s, fontWeight: theme.fontWeight.medium, lineHeight: theme.lineHeight.default, alignItems: 'center', color: theme.color.text.black, padding: 0, paddingLeft: 0 })),
+    multiValueRemove: styles => (Object.assign(Object.assign({}, styles), { marginLeft: getMultipliedSize(theme.base.baseWidth, 1), padding: 0, ':hover': {
+            cursor: 'pointer',
+            color: theme.color.text.black,
+            backgroundColor: theme.color.background.sand.E02,
+        } })),
+    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.color.transparency.T40 })),
+    indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { width: 0, backgroundColor: 'transparent', border: 'none' })),
+    clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer', color: theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), ':hover': {
+            color: theme.color.text.black,
+        } })),
+    dropdownIndicator: (styles, { selectProps: { isSearchable } }) => (Object.assign(Object.assign({}, styles), { color: isSearchable ? theme.color.text.pink : theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), pointerEvents: 'none', ':hover': {
+            color: theme.color.text.black,
+        } })),
+    menu: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { boxShadow: 'none', margin: '-3px 0 -3px 0', borderRadius: theme.radius.s, border: `1px solid ${theme.color.line.L01}` }), (state.placement === 'top' && {
+        borderBottom: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+    })), (state.placement === 'bottom' && Object.assign({ borderTop: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0 }, (state.selectProps.errorState && {
+        margin: '-2px 0 -3px 0',
+    }))))),
+    option: (styles, { isDisabled, isSelected }) => (Object.assign(Object.assign(Object.assign({}, styles), { display: 'flex', justifyContent: 'space-between', color: theme.color.text.black, fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book, fontSize: theme.fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden' }), (isDisabled && {
+        cursor: 'not-allowed',
+        color: theme.color.text.black + theme.color.transparency.T30,
+        backgroundColor: theme.color.background.sand.E01 + theme.color.transparency.T30,
+    }))),
+});
+const MultiValueRemove = (_a) => {
+    var multiValueRemoveProps = __rest(_a, []);
+    return components.MultiValueRemove && (React__default.createElement(components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
+        React__default.createElement(Icon, { icon: Close, size: "1rem" })));
+};
+const IndicatorsContainer = (_a) => {
+    var { selectProps } = _a, indicatorsContainerProps = __rest(_a, ["selectProps"]);
+    return components.IndicatorsContainer && (React__default.createElement(components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
+        selectProps.errorState && (React__default.createElement(Icon, { icon: Error, color: theme.color.notification.error, position: "right" })),
+        selectProps.isDisabled && React__default.createElement(Icon, { icon: Lock, position: "right" }),
+        indicatorsContainerProps.children));
+};
+const ClearIndicator = (_a) => {
+    var clearIndicatorProps = __rest(_a, []);
+    return components.ClearIndicator && (React__default.createElement(components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
+        React__default.createElement(Icon, { icon: Close })));
+};
+const DropdownIndicator = (_a) => {
+    var { selectProps } = _a, dropdownIndicatorProps = __rest(_a, ["selectProps"]);
+    const getIcon = () => {
+        if (selectProps.isSearchable) {
+            return Search;
+        }
+        return selectProps.menuIsOpen ? ChevronUp : ChevronDown;
+    };
+    return (components.DropdownIndicator && (React__default.createElement(components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
+        React__default.createElement(Icon, { icon: getIcon() }))));
+};
+const SelectBox = (_a) => {
+    var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = __rest(_a, ["noOptionsText", 'data-testid']);
+    const getNoOptionsText = () => noOptionsText;
+    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId },
+        props.label && (React__default.createElement(LabelText, { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
+        React__default.createElement(Select, { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: {
+                MultiValueRemove,
+                IndicatorsContainer,
+                ClearIndicator,
+                DropdownIndicator,
+            }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error }),
+        props.error && props.errorMessage && React__default.createElement(ErrorMessage, null, props.errorMessage))) : (React__default.createElement(PixelLoader, null));
 };
 
 export { SelectBox as default };

package/build/es/components/Switch/Switch.d.ts

@@ -1,42 +1,42 @@
-import * as React from 'react';
-interface Props {
-    /**
-     * Unique ID for the checkbox (switch) element
-     */
-    id: string;
-    /**
-     * Name of the checkbox (switch) element
-     */
-    name?: string;
-    /**
-     * Text of the checkbox (switch) element label
-     */
-    label?: string;
-    /**
-     * On checkbox (switch) element change callback
-     */
-    onChange?: (isChecked: boolean) => void;
-    /**
-     * Allows to set the switch as checked
-     *
-     * @default false
-     */
-    isChecked?: boolean;
-    /**
-     * Allows to disable the component functionality
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Switch: ({ onChange, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Switch;
+import * as React from 'react';
+interface Props {
+    /**
+     * Unique ID for the checkbox (switch) element
+     */
+    id: string;
+    /**
+     * Name of the checkbox (switch) element
+     */
+    name?: string;
+    /**
+     * Text of the checkbox (switch) element label
+     */
+    label?: string;
+    /**
+     * On checkbox (switch) element change callback
+     */
+    onChange?: (isChecked: boolean) => void;
+    /**
+     * Allows to set the switch as checked
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Switch: ({ onChange, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Switch;

package/build/es/components/Switch/Switch.js

@@ -5,18 +5,18 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import LabelText from '../LabelText/LabelText.js';
 
-const height = 1.625; // 26px
-const borderRadius = 1.875; // 30px
-const borderSize = 0.125; // 2px
-const railWidth = 3; // 48px
-const railHeight = height + borderSize * 2; // 30px
+const height = 1.625; // 26px
+const borderRadius = 1.875; // 30px
+const borderSize = 0.125; // 2px
+const railWidth = 3; // 48px
+const railHeight = height + borderSize * 2; // 30px
 const Container = styled.div `
     display: inline-flex;
     min-height: ${railHeight}rem;
     position: relative;
     cursor: pointer;
     user-select: none;
-`;
+`;
 const Button = styled.div `
     height: ${height}rem;
     transition: transform 0.3s;
@@ -31,7 +31,7 @@ const Button = styled.div `
         z-index: 2;
         left: ${isChecked ? -borderSize * 2 : 0}rem;
     `};
-`;
+`;
 const Checkbox = styled.input `
     opacity: 0;
     position: absolute;
@@ -53,14 +53,14 @@ const Checkbox = styled.input `
         pointer-events: none;
         background-color: ${({ checked }) => checked && checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency.T40};
     }
-`;
+`;
 const LabelWrapper = styled(LabelText) `
     position: relative;
     cursor: pointer;
     padding-top: ${getMultipliedSize(theme.base.baseHeight, 0.4)};
     padding-left: ${getMultipliedSize(theme.base.baseWidth, 6)};
     user-select: none;
-`;
+`;
 const Rail = styled.div `
     width: ${railWidth}rem;
     position: absolute;
@@ -74,20 +74,20 @@ const Rail = styled.div `
         background-color: ${theme.color.background.white.default};
         z-index: 0;
    `};
-`;
-const Switch = (_a) => {
-    var { onChange, 'data-testid': dataTestId } = _a, props = __rest(_a, ["onChange", 'data-testid']);
-    const handleChange = () => {
-        if (onChange && !props.disabled) {
-            onChange(!props.isChecked);
-        }
-    };
-    return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-checked": Boolean(props.isChecked), disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
-        React.createElement(LabelWrapper, { htmlFor: props.id },
-            React.createElement(Rail, { isChecked: props.isChecked },
-                React.createElement(Button, { isChecked: props.isChecked })),
-            props.label && props.label)));
+`;
+const Switch = (_a) => {
+    var { onChange, 'data-testid': dataTestId } = _a, props = __rest(_a, ["onChange", 'data-testid']);
+    const handleChange = () => {
+        if (onChange && !props.disabled) {
+            onChange(!props.isChecked);
+        }
+    };
+    return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
+        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-checked": Boolean(props.isChecked), disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
+        React.createElement(LabelWrapper, { htmlFor: props.id },
+            React.createElement(Rail, { isChecked: props.isChecked },
+                React.createElement(Button, { isChecked: props.isChecked })),
+            props.label && props.label)));
 };
 
 export { Switch as default };