@preply/ds-web-lib 0.57.0 → 0.58.0

package/dist/components/FieldLayout/style/index.module.less.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "._3wd25W{grid-gap:var(--1ba55a);background-color:var(--5836cb);background-color:var(--211bc0);border:var(--d9baa3) solid var(--29cd58);border-radius:var(--c4b051);color:var(--41d493);display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--1ba55a);padding:calc(var(--d9baa3) + var(--1ba55a));padding-left:calc(var(--477fda) - var(--d9baa3));padding-right:var(--d9baa3)}._3wd25W:hover{border-color:var(--398094)}._3wd25W input{background:none;border:none;font-size:var(--0c62d6);font-style:var(--a833d1);font-variation-settings:var(--5bcea1);font-weight:var(--cb99be);letter-spacing:var(--035113);line-height:var(--829b1e);outline:none;padding:0}._3wd25W input::-webkit-input-placeholder{color:var(--d9209f)}._3wd25W input::-moz-placeholder{color:var(--d9209f)}._3wd25W input:-ms-input-placeholder{color:var(--d9209f)}._3wd25W input::-ms-input-placeholder{color:var(--d9209f)}._3wd25W input::placeholder{color:var(--d9209f)}.dR7X8n{height:var(--7c1b1c)}.dR7X8n svg{color:var(--cbc724)}._2oOvNj ._3wd25W{background-color:var(--95df5b);border-color:var(--eaf4a3)}._2oOvNj ._3wd25W input,._2oOvNj .dR7X8n svg{color:var(--7b0f41)}._3VIW2W ._3wd25W{border-color:var(--398094)}._2AzKuR ._3wd25W{background-color:var(--04daeb);border-color:transparent}._3wd25W button{margin-bottom:calc(var(--1ba55a)*-1);margin-top:calc(var(--1ba55a)*-1)}";
+var css_248z = "._3wd25W{grid-gap:var(--1ba55a);background-color:var(--5836cb);background-color:var(--211bc0);border:var(--d9baa3) solid var(--29cd58);border-radius:var(--c4b051);color:var(--41d493);display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--1ba55a);padding:calc(var(--d9baa3) + var(--1ba55a));padding-left:calc(var(--477fda) - var(--d9baa3));padding-right:var(--d9baa3)}._3wd25W:hover{border-color:var(--398094)}._3wd25W input{background:none;border:none;font-size:var(--0c62d6);font-style:var(--a833d1);font-variation-settings:var(--5bcea1);font-weight:var(--cb99be);letter-spacing:var(--035113);line-height:var(--829b1e);outline:none;padding:0}._3wd25W input::-webkit-input-placeholder{color:var(--d9209f)}._3wd25W input::-moz-placeholder{color:var(--d9209f)}._3wd25W input:-ms-input-placeholder{color:var(--d9209f)}._3wd25W input::-ms-input-placeholder{color:var(--d9209f)}._3wd25W input::placeholder{color:var(--d9209f)}.dR7X8n{font-size:0;height:var(--7c1b1c)}.dR7X8n svg{color:var(--cbc724)}._2oOvNj ._3wd25W{background-color:var(--95df5b);border-color:var(--eaf4a3)}._2oOvNj ._3wd25W input,._2oOvNj .dR7X8n svg{color:var(--7b0f41)}._3VIW2W ._3wd25W{border-color:var(--398094)}._2AzKuR ._3wd25W{background-color:var(--04daeb);border-color:transparent}._3wd25W button{margin-bottom:calc(var(--1ba55a)*-1);margin-top:calc(var(--1ba55a)*-1)}";
 var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/FieldLayout/style/index.module.less",__css:css_248z,"FieldLayout--input":"_3wd25W","FieldLayout--icon":"dR7X8n","FieldLayout--has-error":"_2oOvNj","FieldLayout--is-focused":"_3VIW2W","FieldLayout--is-disabled":"_2AzKuR"};
 var stylesheet=css_248z;
 styleInject(css_248z);

package/dist/components/FieldLayout/style/mixins.less

@@ -42,6 +42,9 @@
     &--icon {
         height: @icon-size-s-size;
 
+        // fix for icon vertical alignment
+        font-size: 0;
+
         svg {
             .color('input', 'icon');
         }

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,7 @@
+import { InputImperativeHandle } from '@preply/ds-web-core';
+import React from 'react';
+export declare const NumberField: React.ForwardRefExoticComponent<import("@preply/ds-web-core").FieldCommonProps & Pick<import("@preply/ds-web-core").InputNumberProps, "value" | "defaultValue" | "min" | "max" | "placeholder" | "maxLength" | "name" | "onChange" | "onFocus" | "onBlur" | "onClick" | "onKeyDown" | "onKeyUp" | "required" | "disabled" | "hasError" | "dataset" | "onValueChange"> & {
+    id?: string | undefined;
+} & {
+    icon?: React.ReactElement<import("@preply/ds-web-core").IconProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+} & React.RefAttributes<InputImperativeHandle>>;

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,27 @@
+import { useStyleExtract, useForcedRef, useNumberField, moduleClassNames, useVisualModeClassNames } from '@preply/ds-web-core';
+import React__default, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { FieldLayout } from '../FieldLayout/FieldLayout.js';
+import { InputNumber } from '../private/Input/InputNumber.js';
+import styles from './style/index.module.less.js';
+
+const FIELD_NUMBER = 'NumberField';
+const NumberFieldLocal = ({ id: optionalId, ...props }, ref) => {
+    useStyleExtract(styles);
+    const layoutRef = useRef(null);
+    const inputRef = useForcedRef();
+    useImperativeHandle(ref, () => ({
+        setFocus: () => { var _a; return (_a = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current) === null || _a === void 0 ? void 0 : _a.setFocus(); },
+    }));
+    const numberField = useNumberField({
+        id: optionalId,
+        ...props,
+    });
+    const { layoutProps, inputProps } = numberField;
+    const classNames = moduleClassNames(styles, FIELD_NUMBER);
+    const input = React__default.createElement(InputNumber, Object.assign({}, inputProps, { ref: inputRef }));
+    return (React__default.createElement(FieldLayout, Object.assign({}, layoutProps, { className: useVisualModeClassNames(classNames).join(' '), input: input, inputHandle: inputRef.current, ref: layoutRef })));
+};
+const NumberField = forwardRef(NumberFieldLocal);
+
+export { NumberField };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTnVtYmVyRmllbGQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL051bWJlckZpZWxkL051bWJlckZpZWxkLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIElucHV0SW1wZXJhdGl2ZUhhbmRsZSxcbiAgICBOdW1iZXJGaWVsZFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgdXNlRm9yY2VkUmVmLFxuICAgIHVzZU51bWJlckZpZWxkLFxuICAgIHVzZVN0eWxlRXh0cmFjdCxcbiAgICB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIGZvcndhcmRSZWYsIHVzZUltcGVyYXRpdmVIYW5kbGUsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgRmllbGRMYXlvdXQgfSBmcm9tICcuLi9GaWVsZExheW91dC9GaWVsZExheW91dCc7XG5pbXBvcnQgeyBJbnB1dE51bWJlciB9IGZyb20gJy4uL3ByaXZhdGUvSW5wdXQvSW5wdXROdW1iZXInO1xuXG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGUvaW5kZXgubW9kdWxlLmxlc3MnO1xuXG5jb25zdCBGSUVMRF9OVU1CRVIgPSAnTnVtYmVyRmllbGQnO1xuXG5jb25zdCBOdW1iZXJGaWVsZExvY2FsOiBGQzxOdW1iZXJGaWVsZFByb3BzPiA9ICh7IGlkOiBvcHRpb25hbElkLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICB1c2VTdHlsZUV4dHJhY3Qoc3R5bGVzKTtcblxuICAgIGNvbnN0IGxheW91dFJlZiA9IHVzZVJlZjxJbnB1dEltcGVyYXRpdmVIYW5kbGU+KG51bGwpO1xuICAgIGNvbnN0IGlucHV0UmVmID0gdXNlRm9yY2VkUmVmPElucHV0SW1wZXJhdGl2ZUhhbmRsZT4oKTtcblxuICAgIHVzZUltcGVyYXRpdmVIYW5kbGUocmVmLCAoKSA9PiAoe1xuICAgICAgICBzZXRGb2N1czogKCkgPT4gbGF5b3V0UmVmPy5jdXJyZW50Py5zZXRGb2N1cygpLFxuICAgIH0pKTtcblxuICAgIGNvbnN0IG51bWJlckZpZWxkID0gdXNlTnVtYmVyRmllbGQoe1xuICAgICAgICBpZDogb3B0aW9uYWxJZCxcbiAgICAgICAgLi4ucHJvcHMsXG4gICAgfSk7XG4gICAgY29uc3QgeyBsYXlvdXRQcm9wcywgaW5wdXRQcm9wcyB9ID0gbnVtYmVyRmllbGQ7XG5cbiAgICBjb25zdCBjbGFzc05hbWVzID0gbW9kdWxlQ2xhc3NOYW1lcyhzdHlsZXMsIEZJRUxEX05VTUJFUik7XG4gICAgY29uc3QgaW5wdXQgPSA8SW5wdXROdW1iZXIgey4uLmlucHV0UHJvcHN9IHJlZj17aW5wdXRSZWZ9IC8+O1xuICAgIHJldHVybiAoXG4gICAgICAgIDxGaWVsZExheW91dFxuICAgICAgICAgICAgey4uLmxheW91dFByb3BzfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXt1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyhjbGFzc05hbWVzKS5qb2luKCcgJyl9XG4gICAgICAgICAgICBpbnB1dD17aW5wdXR9XG4gICAgICAgICAgICBpbnB1dEhhbmRsZT17aW5wdXRSZWYuY3VycmVudH1cbiAgICAgICAgICAgIHJlZj17bGF5b3V0UmVmfVxuICAgICAgICAvPlxuICAgICk7XG59O1xuXG5leHBvcnQgY29uc3QgTnVtYmVyRmllbGQgPSBmb3J3YXJkUmVmPElucHV0SW1wZXJhdGl2ZUhhbmRsZSwgTnVtYmVyRmllbGRQcm9wcz4oTnVtYmVyRmllbGRMb2NhbCk7XG4iXSwibmFtZXMiOlsiUmVhY3QiXSwibWFwcGluZ3MiOiI7Ozs7OztBQWdCQSxNQUFNLFlBQVksR0FBRyxhQUFhLENBQUM7QUFFbkMsTUFBTSxnQkFBZ0IsR0FBeUIsQ0FBQyxFQUFFLEVBQUUsRUFBRSxVQUFVLEVBQUUsR0FBRyxLQUFLLEVBQUUsRUFBRSxHQUFHO0lBQzdFLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUV4QixNQUFNLFNBQVMsR0FBRyxNQUFNLENBQXdCLElBQUksQ0FBQyxDQUFDO0lBQ3RELE1BQU0sUUFBUSxHQUFHLFlBQVksRUFBeUIsQ0FBQztJQUV2RCxtQkFBbUIsQ0FBQyxHQUFHLEVBQUUsT0FBTztRQUM1QixRQUFRLEVBQUUsNkJBQU0sU0FBUyxhQUFULFNBQVMsdUJBQVQsU0FBUyxDQUFFLE9BQU8sMENBQUUsUUFBUSxLQUFFO0tBQ2pELENBQUMsQ0FBQyxDQUFDO0lBRUosTUFBTSxXQUFXLEdBQUcsY0FBYyxDQUFDO1FBQy9CLEVBQUUsRUFBRSxVQUFVO1FBQ2QsR0FBRyxLQUFLO0tBQ1gsQ0FBQyxDQUFDO0lBQ0gsTUFBTSxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsR0FBRyxXQUFXLENBQUM7SUFFaEQsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLFlBQVksQ0FBQyxDQUFDO0lBQzFELE1BQU0sS0FBSyxHQUFHQSw2QkFBQyxXQUFXLG9CQUFLLFVBQVUsSUFBRSxHQUFHLEVBQUUsUUFBUSxJQUFJLENBQUM7SUFDN0QsUUFDSUEsNkJBQUMsV0FBVyxvQkFDSixXQUFXLElBQ2YsU0FBUyxFQUFFLHVCQUF1QixDQUFDLFVBQVUsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFDeEQsS0FBSyxFQUFFLEtBQUssRUFDWixXQUFXLEVBQUUsUUFBUSxDQUFDLE9BQU8sRUFDN0IsR0FBRyxFQUFFLFNBQVMsSUFDaEIsRUFDSjtBQUNOLENBQUMsQ0FBQztNQUVXLFdBQVcsR0FBRyxVQUFVLENBQTBDLGdCQUFnQjs7OzsifQ==

package/dist/components/NumberField/style/index.module.less

@@ -0,0 +1,5 @@
+@import './mixins.less';
+
+.NumberField {
+    .number-field-base();
+}

package/dist/components/NumberField/style/index.module.less.js

@@ -0,0 +1,9 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".OVidAv{display:-webkit-box;display:-ms-flexbox;display:flex}.OVidAv input::-webkit-inner-spin-button,.OVidAv input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.OVidAv input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}";
+var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/NumberField/style/index.module.less",__css:css_248z,"NumberField":"OVidAv"};
+var stylesheet=css_248z;
+styleInject(css_248z);
+
+export { styles as default, stylesheet };
+

package/dist/components/NumberField/style/mixins.less

@@ -0,0 +1,12 @@
+.number-field-base() {
+    display: flex;
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    input[type='number'] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+}

package/dist/components/NumberField/style/mixins.less.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "";
+var stylesheet="";
+styleInject(css_248z);
+
+export { css_248z as default, stylesheet };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qix3REFBNEQ7QUFDcEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyJ9

package/dist/components/SelectField/SelectField.d.ts

@@ -0,0 +1,8 @@
+import { InputImperativeHandle } from '@preply/ds-web-core';
+import React from 'react';
+export declare const SelectField: React.ForwardRefExoticComponent<import("@preply/ds-web-core").FieldCommonProps & Pick<import("@preply/ds-web-core").SelectProps, "placeholder" | "children" | "name" | "value" | "defaultValue" | "onChange" | "onFocus" | "onBlur" | "onClick" | "onKeyDown" | "onKeyUp" | "required" | "disabled" | "hasError" | "dataset" | "onValueChange"> & {
+    id?: string | undefined;
+} & {
+    icon?: React.ReactElement<import("@preply/ds-web-core").IconProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | React.ReactNode[] | null | undefined;
+} & React.RefAttributes<InputImperativeHandle>>;

package/dist/components/SelectField/SelectField.js

@@ -0,0 +1,26 @@
+import { useStyleExtract, useForcedRef, useSelectField, moduleClassNames, useVisualModeClassNames } from '@preply/ds-web-core';
+import React__default, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { Select } from '../private/Input/Select.js';
+import { SelectFieldLayout } from '../private/SelectFieldLayout/SelectFieldLayout.js';
+import styles from './style/index.module.less.js';
+
+const SELECT_FIELD = 'SelectField';
+const SelectFieldLocal = ({ id: optionalId, ...props }, ref) => {
+    useStyleExtract(styles);
+    const layoutRef = useRef(null);
+    const inputRef = useForcedRef();
+    useImperativeHandle(ref, () => ({
+        setFocus: () => { var _a; return (_a = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current) === null || _a === void 0 ? void 0 : _a.setFocus(); },
+    }));
+    const { layoutProps, inputProps } = useSelectField({
+        id: optionalId,
+        ...props,
+    });
+    const classNames = moduleClassNames(styles, SELECT_FIELD);
+    const input = React__default.createElement(Select, Object.assign({}, inputProps, { ref: inputRef }));
+    return (React__default.createElement(SelectFieldLayout, Object.assign({}, layoutProps, { className: useVisualModeClassNames(classNames).join(' '), input: input, inputHandle: inputRef.current, ref: layoutRef })));
+};
+const SelectField = forwardRef(SelectFieldLocal);
+
+export { SelectField };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0RmllbGQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NlbGVjdEZpZWxkL1NlbGVjdEZpZWxkLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIElucHV0SW1wZXJhdGl2ZUhhbmRsZSxcbiAgICBTZWxlY3RGaWVsZFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgdXNlRm9yY2VkUmVmLFxuICAgIHVzZVNlbGVjdEZpZWxkLFxuICAgIHVzZVN0eWxlRXh0cmFjdCxcbiAgICB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIGZvcndhcmRSZWYsIHVzZUltcGVyYXRpdmVIYW5kbGUsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgU2VsZWN0IH0gZnJvbSAnLi4vcHJpdmF0ZS9JbnB1dC9TZWxlY3QnO1xuaW1wb3J0IHsgU2VsZWN0RmllbGRMYXlvdXQgfSBmcm9tICcuLi9wcml2YXRlL1NlbGVjdEZpZWxkTGF5b3V0L1NlbGVjdEZpZWxkTGF5b3V0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuY29uc3QgU0VMRUNUX0ZJRUxEID0gJ1NlbGVjdEZpZWxkJztcblxuY29uc3QgU2VsZWN0RmllbGRMb2NhbDogRkM8U2VsZWN0RmllbGRQcm9wcz4gPSAoeyBpZDogb3B0aW9uYWxJZCwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBsYXlvdXRSZWYgPSB1c2VSZWY8SW5wdXRJbXBlcmF0aXZlSGFuZGxlPihudWxsKTtcbiAgICBjb25zdCBpbnB1dFJlZiA9IHVzZUZvcmNlZFJlZjxJbnB1dEltcGVyYXRpdmVIYW5kbGU+KCk7XG5cbiAgICB1c2VJbXBlcmF0aXZlSGFuZGxlKHJlZiwgKCkgPT4gKHtcbiAgICAgICAgc2V0Rm9jdXM6ICgpID0+IGxheW91dFJlZj8uY3VycmVudD8uc2V0Rm9jdXMoKSxcbiAgICB9KSk7XG5cbiAgICBjb25zdCB7IGxheW91dFByb3BzLCBpbnB1dFByb3BzIH0gPSB1c2VTZWxlY3RGaWVsZCh7XG4gICAgICAgIGlkOiBvcHRpb25hbElkLFxuICAgICAgICAuLi5wcm9wcyxcbiAgICB9KTtcblxuICAgIGNvbnN0IGNsYXNzTmFtZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgU0VMRUNUX0ZJRUxEKTtcbiAgICBjb25zdCBpbnB1dCA9IDxTZWxlY3Qgey4uLmlucHV0UHJvcHN9IHJlZj17aW5wdXRSZWZ9IC8+O1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFNlbGVjdEZpZWxkTGF5b3V0XG4gICAgICAgICAgICB7Li4ubGF5b3V0UHJvcHN9XG4gICAgICAgICAgICBjbGFzc05hbWU9e3VzZVZpc3VhbE1vZGVDbGFzc05hbWVzKGNsYXNzTmFtZXMpLmpvaW4oJyAnKX1cbiAgICAgICAgICAgIGlucHV0PXtpbnB1dH1cbiAgICAgICAgICAgIGlucHV0SGFuZGxlPXtpbnB1dFJlZi5jdXJyZW50fVxuICAgICAgICAgICAgcmVmPXtsYXlvdXRSZWZ9XG4gICAgICAgIC8+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RGaWVsZCA9IGZvcndhcmRSZWY8SW5wdXRJbXBlcmF0aXZlSGFuZGxlLCBTZWxlY3RGaWVsZFByb3BzPihTZWxlY3RGaWVsZExvY2FsKTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBZ0JBLE1BQU0sWUFBWSxHQUFHLGFBQWEsQ0FBQztBQUVuQyxNQUFNLGdCQUFnQixHQUF5QixDQUFDLEVBQUUsRUFBRSxFQUFFLFVBQVUsRUFBRSxHQUFHLEtBQUssRUFBRSxFQUFFLEdBQUc7SUFDN0UsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBd0IsSUFBSSxDQUFDLENBQUM7SUFDdEQsTUFBTSxRQUFRLEdBQUcsWUFBWSxFQUF5QixDQUFDO0lBRXZELG1CQUFtQixDQUFDLEdBQUcsRUFBRSxPQUFPO1FBQzVCLFFBQVEsRUFBRSw2QkFBTSxTQUFTLGFBQVQsU0FBUyx1QkFBVCxTQUFTLENBQUUsT0FBTywwQ0FBRSxRQUFRLEtBQUU7S0FDakQsQ0FBQyxDQUFDLENBQUM7SUFFSixNQUFNLEVBQUUsV0FBVyxFQUFFLFVBQVUsRUFBRSxHQUFHLGNBQWMsQ0FBQztRQUMvQyxFQUFFLEVBQUUsVUFBVTtRQUNkLEdBQUcsS0FBSztLQUNYLENBQUMsQ0FBQztJQUVILE1BQU0sVUFBVSxHQUFHLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxZQUFZLENBQUMsQ0FBQztJQUMxRCxNQUFNLEtBQUssR0FBR0EsNkJBQUMsTUFBTSxvQkFBSyxVQUFVLElBQUUsR0FBRyxFQUFFLFFBQVEsSUFBSSxDQUFDO0lBRXhELFFBQ0lBLDZCQUFDLGlCQUFpQixvQkFDVixXQUFXLElBQ2YsU0FBUyxFQUFFLHVCQUF1QixDQUFDLFVBQVUsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFDeEQsS0FBSyxFQUFFLEtBQUssRUFDWixXQUFXLEVBQUUsUUFBUSxDQUFDLE9BQU8sRUFDN0IsR0FBRyxFQUFFLFNBQVMsSUFDaEIsRUFDSjtBQUNOLENBQUMsQ0FBQztNQUVXLFdBQVcsR0FBRyxVQUFVLENBQTBDLGdCQUFnQjs7OzsifQ==

package/dist/components/SelectField/style/index.module.less

@@ -0,0 +1,5 @@
+@import './mixins.less';
+
+.SelectField {
+    .select-field-base();
+}

package/dist/components/SelectField/style/index.module.less.js

@@ -0,0 +1,9 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "._2jpiwd{display:-webkit-box;display:-ms-flexbox;display:flex}";
+var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/SelectField/style/index.module.less",__css:css_248z,"SelectField":"_2jpiwd"};
+var stylesheet=css_248z;
+styleInject(css_248z);
+
+export { styles as default, stylesheet };
+

package/dist/components/SelectField/style/mixins.less

@@ -0,0 +1,3 @@
+.select-field-base() {
+    display: flex;
+}

package/dist/components/SelectField/style/mixins.less.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "";
+var stylesheet="";
+styleInject(css_248z);
+
+export { css_248z as default, stylesheet };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qix3REFBNEQ7QUFDcEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyJ9

package/dist/components/SelectFieldOption/SelectFieldOption.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+declare type Props = {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode | ReactNode[];
+};
+export declare const SelectFieldOption: FC<Props>;
+export {};

package/dist/components/SelectFieldOption/SelectFieldOption.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const SelectFieldOption = ({ ...props }) => React__default.createElement("option", Object.assign({}, props));
+
+export { SelectFieldOption };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0RmllbGRPcHRpb24uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NlbGVjdEZpZWxkT3B0aW9uL1NlbGVjdEZpZWxkT3B0aW9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgRkMsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcblxudHlwZSBQcm9wcyA9IHtcbiAgICB2YWx1ZTogc3RyaW5nO1xuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgICBjaGlsZHJlbjogUmVhY3ROb2RlIHwgUmVhY3ROb2RlW107XG59O1xuXG5leHBvcnQgY29uc3QgU2VsZWN0RmllbGRPcHRpb246IEZDPFByb3BzPiA9ICh7IC4uLnByb3BzIH0pID0+IDxvcHRpb24gey4uLnByb3BzfSAvPjtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7TUFRYSxpQkFBaUIsR0FBYyxDQUFDLEVBQUUsR0FBRyxLQUFLLEVBQUUsS0FBS0EseURBQVksS0FBSzs7OzsifQ==

package/dist/components/index.d.ts

@@ -24,6 +24,9 @@ export { PreplyLogo } from './PreplyLogo/PreplyLogo';
 export { ShowOnIntersection } from './ShowOnIntersection/ShowOnIntersection';
 export { Text } from './Text/Text';
 export { TextField } from './TextField/TextField';
+export { NumberField } from './NumberField/NumberField';
 export { PasswordField } from './PasswordField/PasswordField';
 export { TextHighlighted } from './TextHighlighted/TextHighlighted';
 export { TextInline } from './TextInline/TextInline';
+export { SelectField } from './SelectField/SelectField';
+export { SelectFieldOption } from './SelectFieldOption/SelectFieldOption';

package/dist/components/index.js

@@ -24,7 +24,10 @@ export { PreplyLogo } from './PreplyLogo/PreplyLogo.js';
 export { ShowOnIntersection } from './ShowOnIntersection/ShowOnIntersection.js';
 export { Text } from './Text/Text.js';
 export { TextField } from './TextField/TextField.js';
+export { NumberField } from './NumberField/NumberField.js';
 export { PasswordField } from './PasswordField/PasswordField.js';
 export { TextHighlighted } from './TextHighlighted/TextHighlighted.js';
 export { TextInline } from './TextInline/TextInline.js';
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9
+export { SelectField } from './SelectField/SelectField.js';
+export { SelectFieldOption } from './SelectFieldOption/SelectFieldOption.js';
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9

package/dist/components/private/Input/InputNumber.d.ts

@@ -1,3 +1,9 @@
-import type { InputNumberProps } from '@preply/ds-web-core';
-import { FC } from 'react';
-export declare const InputNumber: FC<InputNumberProps>;
+import type { InputImperativeHandle } from '@preply/ds-web-core';
+import React from 'react';
+export declare const InputNumber: React.ForwardRefExoticComponent<Pick<import("@preply/ds-web-core/dist/input/private/types").InputTypeNumberProps, "aria-describedby" | "aria-disabled" | "aria-invalid" | "aria-required" | "placeholder" | "maxLength" | "id" | "name" | "onChange" | "onFocus" | "onBlur" | "onClick" | "onKeyDown" | "onKeyUp" | "required" | "disabled" | "hasError" | "dataset"> & {
+    value?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    defaultValue?: number | undefined;
+    onValueChange?: import("@preply/ds-web-core").ValueChangeEventHandler<number> | undefined;
+} & React.RefAttributes<InputImperativeHandle>>;

package/dist/components/private/Input/InputNumber.js

@@ -1,16 +1,17 @@
 import { useStyleExtract, moduleClassNames } from '@preply/ds-web-core';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { InputBase } from './InputBase.js';
 import { useChangeHandler } from './hooks/useChangeHandler.js';
 import styles from './style/index.module.less.js';
 
 const INPUT_NUMBER = 'InputNumber';
-const InputNumber = ({ value, min, max, onChange, onValueChange, ...props }) => {
+const InputNumberLocal = ({ onChange, onValueChange, ...props }, ref) => {
     useStyleExtract(styles);
     const localClasses = moduleClassNames(styles, INPUT_NUMBER);
-    const onChangeHandler = useChangeHandler(ev => Number(ev.target.value), onChange, onValueChange);
-    return (React__default.createElement(InputBase, Object.assign({}, props, { type: "number", value: `${value}`, min: `${min}`, max: `${max}`, className: localClasses.join(' '), onChange: onChangeHandler })));
-};
+    const onChangeHandler = useChangeHandler(ev => (ev.target.value ? Number(ev.target.value) : undefined), onChange, onValueChange);
+    return (React__default.createElement(InputBase, Object.assign({}, props, { type: "number", ref: ref, className: localClasses.join(' '), onChange: onChangeHandler })));
+};
+const InputNumber = forwardRef(InputNumberLocal);
 
 export { InputNumber };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXROdW1iZXIuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3ByaXZhdGUvSW5wdXQvSW5wdXROdW1iZXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgSW5wdXROdW1iZXJQcm9wcyB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IHsgbW9kdWxlQ2xhc3NOYW1lcywgdXNlU3R5bGVFeHRyYWN0IH0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IElucHV0QmFzZSB9IGZyb20gJy4vSW5wdXRCYXNlJztcbmltcG9ydCB7IHVzZUNoYW5nZUhhbmRsZXIgfSBmcm9tICcuL2hvb2tzL3VzZUNoYW5nZUhhbmRsZXInO1xuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuY29uc3QgSU5QVVRfTlVNQkVSID0gJ0lucHV0TnVtYmVyJztcblxuZXhwb3J0IGNvbnN0IElucHV0TnVtYmVyOiBGQzxJbnB1dE51bWJlclByb3BzPiA9ICh7XG4gICAgdmFsdWUsXG4gICAgbWluLFxuICAgIG1heCxcbiAgICBvbkNoYW5nZSxcbiAgICBvblZhbHVlQ2hhbmdlLFxuICAgIC4uLnByb3BzXG59KSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBsb2NhbENsYXNzZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgSU5QVVRfTlVNQkVSKTtcblxuICAgIGNvbnN0IG9uQ2hhbmdlSGFuZGxlciA9IHVzZUNoYW5nZUhhbmRsZXIoXG4gICAgICAgIGV2ID0+IE51bWJlcihldi50YXJnZXQudmFsdWUpLFxuICAgICAgICBvbkNoYW5nZSxcbiAgICAgICAgb25WYWx1ZUNoYW5nZSxcbiAgICApO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPElucHV0QmFzZVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgICB2YWx1ZT17YCR7dmFsdWV9YH1cbiAgICAgICAgICAgIG1pbj17YCR7bWlufWB9XG4gICAgICAgICAgICBtYXg9e2Ake21heH1gfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXtsb2NhbENsYXNzZXMuam9pbignICcpfVxuICAgICAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlSGFuZGxlcn1cbiAgICAgICAgLz5cbiAgICApO1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBUUEsTUFBTSxZQUFZLEdBQUcsYUFBYSxDQUFDO01BRXRCLFdBQVcsR0FBeUIsQ0FBQyxFQUM5QyxLQUFLLEVBQ0wsR0FBRyxFQUNILEdBQUcsRUFDSCxRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsS0FBSyxFQUNYO0lBQ0csZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sWUFBWSxHQUFHLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxZQUFZLENBQUMsQ0FBQztJQUU1RCxNQUFNLGVBQWUsR0FBRyxnQkFBZ0IsQ0FDcEMsRUFBRSxJQUFJLE1BQU0sQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUM3QixRQUFRLEVBQ1IsYUFBYSxDQUNoQixDQUFDO0lBRUYsUUFDSUEsNkJBQUMsU0FBUyxvQkFDRixLQUFLLElBQ1QsSUFBSSxFQUFDLFFBQVEsRUFDYixLQUFLLEVBQUUsR0FBRyxLQUFLLEVBQUUsRUFDakIsR0FBRyxFQUFFLEdBQUcsR0FBRyxFQUFFLEVBQ2IsR0FBRyxFQUFFLEdBQUcsR0FBRyxFQUFFLEVBQ2IsU0FBUyxFQUFFLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQ2pDLFFBQVEsRUFBRSxlQUFlLElBQzNCLEVBQ0o7QUFDTjs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXROdW1iZXIuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3ByaXZhdGUvSW5wdXQvSW5wdXROdW1iZXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgSW5wdXRCYXNlUHJvcHMsIElucHV0SW1wZXJhdGl2ZUhhbmRsZSwgSW5wdXROdW1iZXJQcm9wcyB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IHsgbW9kdWxlQ2xhc3NOYW1lcywgdXNlU3R5bGVFeHRyYWN0IH0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IElucHV0QmFzZSB9IGZyb20gJy4vSW5wdXRCYXNlJztcbmltcG9ydCB7IHVzZUNoYW5nZUhhbmRsZXIgfSBmcm9tICcuL2hvb2tzL3VzZUNoYW5nZUhhbmRsZXInO1xuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuY29uc3QgSU5QVVRfTlVNQkVSID0gJ0lucHV0TnVtYmVyJztcblxuY29uc3QgSW5wdXROdW1iZXJMb2NhbDogRkM8SW5wdXROdW1iZXJQcm9wcz4gPSAoeyBvbkNoYW5nZSwgb25WYWx1ZUNoYW5nZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBsb2NhbENsYXNzZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgSU5QVVRfTlVNQkVSKTtcblxuICAgIGNvbnN0IG9uQ2hhbmdlSGFuZGxlciA9IHVzZUNoYW5nZUhhbmRsZXIoXG4gICAgICAgIGV2ID0+IChldi50YXJnZXQudmFsdWUgPyBOdW1iZXIoZXYudGFyZ2V0LnZhbHVlKSA6IHVuZGVmaW5lZCksXG4gICAgICAgIG9uQ2hhbmdlLFxuICAgICAgICBvblZhbHVlQ2hhbmdlLFxuICAgICk7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPElucHV0QmFzZVxuICAgICAgICAgICAgey4uLihwcm9wcyBhcyBJbnB1dEJhc2VQcm9wcyl9XG4gICAgICAgICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXtsb2NhbENsYXNzZXMuam9pbignICcpfVxuICAgICAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlSGFuZGxlcn1cbiAgICAgICAgLz5cbiAgICApO1xufTtcblxuZXhwb3J0IGNvbnN0IElucHV0TnVtYmVyID0gZm9yd2FyZFJlZjxJbnB1dEltcGVyYXRpdmVIYW5kbGUsIElucHV0TnVtYmVyUHJvcHM+KElucHV0TnVtYmVyTG9jYWwpO1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFRQSxNQUFNLFlBQVksR0FBRyxhQUFhLENBQUM7QUFFbkMsTUFBTSxnQkFBZ0IsR0FBeUIsQ0FBQyxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxLQUFLLEVBQUUsRUFBRSxHQUFHO0lBQ3RGLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUV4QixNQUFNLFlBQVksR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsWUFBWSxDQUFDLENBQUM7SUFFNUQsTUFBTSxlQUFlLEdBQUcsZ0JBQWdCLENBQ3BDLEVBQUUsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxTQUFTLENBQUMsRUFDN0QsUUFBUSxFQUNSLGFBQWEsQ0FDaEIsQ0FBQztJQUNGLFFBQ0lBLDZCQUFDLFNBQVMsb0JBQ0QsS0FBd0IsSUFDN0IsSUFBSSxFQUFDLFFBQVEsRUFDYixHQUFHLEVBQUUsR0FBRyxFQUNSLFNBQVMsRUFBRSxZQUFZLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUNqQyxRQUFRLEVBQUUsZUFBZSxJQUMzQixFQUNKO0FBQ04sQ0FBQyxDQUFDO01BRVcsV0FBVyxHQUFHLFVBQVUsQ0FBMEMsZ0JBQWdCOzs7OyJ9

package/dist/components/private/Input/Select.d.ts

@@ -1,3 +1,5 @@
-import type { SelectProps } from '@preply/ds-web-core';
-import { FC } from 'react';
-export declare const Select: FC<SelectProps>;
+import type { InputImperativeHandle } from '@preply/ds-web-core';
+import React from 'react';
+export declare const Select: React.ForwardRefExoticComponent<Pick<import("@preply/ds-web-core/dist/input/private/types").InputTypeSelectProps, "aria-describedby" | "aria-disabled" | "aria-invalid" | "aria-required" | "placeholder" | "children" | "id" | "name" | "value" | "defaultValue" | "onChange" | "onFocus" | "onBlur" | "onClick" | "onKeyDown" | "onKeyUp" | "required" | "disabled" | "hasError" | "dataset"> & {
+    onValueChange?: import("@preply/ds-web-core").ValueChangeEventHandler<string> | undefined;
+} & React.RefAttributes<InputImperativeHandle>>;

package/dist/components/private/Input/Select.js

@@ -1,16 +1,22 @@
 import { useStyleExtract, moduleClassNames } from '@preply/ds-web-core';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { InputBase } from './InputBase.js';
 import { useChangeHandler } from './hooks/useChangeHandler.js';
 import styles from './style/index.module.less.js';
 
 const SELECT = 'Select';
-const Select = ({ onChange, onValueChange, ...props }) => {
+const SelectLocal = ({ onChange, onValueChange, children, placeholder, ...props }, ref) => {
     useStyleExtract(styles);
     const localClasses = moduleClassNames(styles, SELECT);
     const onChangeHandler = useChangeHandler(ev => ev.target.value, onChange, onValueChange);
-    return (React__default.createElement(InputBase, Object.assign({}, props, { type: "select", className: localClasses.join(' '), onChange: onChangeHandler })));
-};
+    const { required } = props;
+    const placeholderOption = typeof placeholder !== 'undefined' ? (React__default.createElement("option", { value: "", disabled: required, "aria-hidden": true }, placeholder)) : null;
+    const childrenWithPlaceholder = (React__default.createElement(React__default.Fragment, null,
+        placeholderOption,
+        children));
+    return (React__default.createElement(InputBase, Object.assign({}, props, { ref: ref, type: "select", className: localClasses.join(' '), onChange: onChangeHandler }), childrenWithPlaceholder));
+};
+const Select = forwardRef(SelectLocal);
 
 export { Select };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9wcml2YXRlL0lucHV0L1NlbGVjdC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBTZWxlY3RQcm9wcyB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IHsgbW9kdWxlQ2xhc3NOYW1lcywgdXNlU3R5bGVFeHRyYWN0IH0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IElucHV0QmFzZSB9IGZyb20gJy4vSW5wdXRCYXNlJztcbmltcG9ydCB7IHVzZUNoYW5nZUhhbmRsZXIgfSBmcm9tICcuL2hvb2tzL3VzZUNoYW5nZUhhbmRsZXInO1xuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuY29uc3QgU0VMRUNUID0gJ1NlbGVjdCc7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3Q6IEZDPFNlbGVjdFByb3BzPiA9ICh7IG9uQ2hhbmdlLCBvblZhbHVlQ2hhbmdlLCAuLi5wcm9wcyB9KSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBsb2NhbENsYXNzZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgU0VMRUNUKTtcblxuICAgIGNvbnN0IG9uQ2hhbmdlSGFuZGxlciA9IHVzZUNoYW5nZUhhbmRsZXIoZXYgPT4gZXYudGFyZ2V0LnZhbHVlLCBvbkNoYW5nZSwgb25WYWx1ZUNoYW5nZSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8SW5wdXRCYXNlXG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgICB0eXBlPVwic2VsZWN0XCJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17bG9jYWxDbGFzc2VzLmpvaW4oJyAnKX1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZUhhbmRsZXJ9XG4gICAgICAgIC8+XG4gICAgKTtcbn07XG4iXSwibmFtZXMiOlsiUmVhY3QiXSwibWFwcGluZ3MiOiI7Ozs7OztBQVFBLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQztNQUVYLE1BQU0sR0FBb0IsQ0FBQyxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxLQUFLLEVBQUU7SUFDekUsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sWUFBWSxHQUFHLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsQ0FBQztJQUV0RCxNQUFNLGVBQWUsR0FBRyxnQkFBZ0IsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLGFBQWEsQ0FBQyxDQUFDO0lBRXpGLFFBQ0lBLDZCQUFDLFNBQVMsb0JBQ0YsS0FBSyxJQUNULElBQUksRUFBQyxRQUFRLEVBQ2IsU0FBUyxFQUFFLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQ2pDLFFBQVEsRUFBRSxlQUFlLElBQzNCLEVBQ0o7QUFDTjs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9wcml2YXRlL0lucHV0L1NlbGVjdC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBJbnB1dEltcGVyYXRpdmVIYW5kbGUsIFNlbGVjdFByb3BzIH0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgeyBtb2R1bGVDbGFzc05hbWVzLCB1c2VTdHlsZUV4dHJhY3QgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgSW5wdXRCYXNlIH0gZnJvbSAnLi9JbnB1dEJhc2UnO1xuaW1wb3J0IHsgdXNlQ2hhbmdlSGFuZGxlciB9IGZyb20gJy4vaG9va3MvdXNlQ2hhbmdlSGFuZGxlcic7XG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGUvaW5kZXgubW9kdWxlLmxlc3MnO1xuXG5jb25zdCBTRUxFQ1QgPSAnU2VsZWN0JztcblxuY29uc3QgU2VsZWN0TG9jYWw6IEZDPFNlbGVjdFByb3BzPiA9IChcbiAgICB7IG9uQ2hhbmdlLCBvblZhbHVlQ2hhbmdlLCBjaGlsZHJlbiwgcGxhY2Vob2xkZXIsIC4uLnByb3BzIH0sXG4gICAgcmVmLFxuKSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBsb2NhbENsYXNzZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgU0VMRUNUKTtcblxuICAgIGNvbnN0IG9uQ2hhbmdlSGFuZGxlciA9IHVzZUNoYW5nZUhhbmRsZXIoZXYgPT4gZXYudGFyZ2V0LnZhbHVlLCBvbkNoYW5nZSwgb25WYWx1ZUNoYW5nZSk7XG5cbiAgICBjb25zdCB7IHJlcXVpcmVkIH0gPSBwcm9wcztcblxuICAgIGNvbnN0IHBsYWNlaG9sZGVyT3B0aW9uID1cbiAgICAgICAgdHlwZW9mIHBsYWNlaG9sZGVyICE9PSAndW5kZWZpbmVkJyA/IChcbiAgICAgICAgICAgIDxvcHRpb24gdmFsdWU9XCJcIiBkaXNhYmxlZD17cmVxdWlyZWR9IGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICAgIHtwbGFjZWhvbGRlcn1cbiAgICAgICAgICAgIDwvb3B0aW9uPlxuICAgICAgICApIDogbnVsbDtcblxuICAgIGNvbnN0IGNoaWxkcmVuV2l0aFBsYWNlaG9sZGVyID0gKFxuICAgICAgICA8PlxuICAgICAgICAgICAge3BsYWNlaG9sZGVyT3B0aW9ufVxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8Lz5cbiAgICApO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPElucHV0QmFzZVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICB0eXBlPVwic2VsZWN0XCJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17bG9jYWxDbGFzc2VzLmpvaW4oJyAnKX1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZUhhbmRsZXJ9XG4gICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbldpdGhQbGFjZWhvbGRlcn1cbiAgICAgICAgPC9JbnB1dEJhc2U+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTZWxlY3QgPSBmb3J3YXJkUmVmPElucHV0SW1wZXJhdGl2ZUhhbmRsZSwgU2VsZWN0UHJvcHM+KFNlbGVjdExvY2FsKTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBUUEsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO0FBRXhCLE1BQU0sV0FBVyxHQUFvQixDQUNqQyxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsUUFBUSxFQUFFLFdBQVcsRUFBRSxHQUFHLEtBQUssRUFBRSxFQUM1RCxHQUFHO0lBRUgsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sWUFBWSxHQUFHLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsQ0FBQztJQUV0RCxNQUFNLGVBQWUsR0FBRyxnQkFBZ0IsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLGFBQWEsQ0FBQyxDQUFDO0lBRXpGLE1BQU0sRUFBRSxRQUFRLEVBQUUsR0FBRyxLQUFLLENBQUM7SUFFM0IsTUFBTSxpQkFBaUIsR0FDbkIsT0FBTyxXQUFXLEtBQUssV0FBVyxJQUM5QkEseUNBQVEsS0FBSyxFQUFDLEVBQUUsRUFBQyxRQUFRLEVBQUUsUUFBUSx5QkFDOUIsV0FBVyxDQUNQLElBQ1QsSUFBSSxDQUFDO0lBRWIsTUFBTSx1QkFBdUIsSUFDekJBO1FBQ0ssaUJBQWlCO1FBQ2pCLFFBQVEsQ0FDVixDQUNOLENBQUM7SUFFRixRQUNJQSw2QkFBQyxTQUFTLG9CQUNGLEtBQUssSUFDVCxHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksRUFBQyxRQUFRLEVBQ2IsU0FBUyxFQUFFLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQ2pDLFFBQVEsRUFBRSxlQUFlLEtBRXhCLHVCQUF1QixDQUNoQixFQUNkO0FBQ04sQ0FBQyxDQUFDO01BRVcsTUFBTSxHQUFHLFVBQVUsQ0FBcUMsV0FBVzs7OzsifQ==

package/dist/components/private/Input/hooks/useChangeHandler.d.ts

@@ -2,5 +2,5 @@ import type { ValueChangeEventHandler } from '@preply/ds-web-core';
 import { ChangeEvent, ChangeEventHandler } from 'react';
 declare type HTMLInputElementType = HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement;
 declare type ParseFn<T> = (input: ChangeEvent<HTMLInputElementType>) => T;
-export declare function useChangeHandler<T, E extends HTMLInputElementType>(parse: ParseFn<T>, onChange?: ChangeEventHandler, onValueChange?: ValueChangeEventHandler<T>, dependencies?: unknown[]): ChangeEventHandler | undefined;
+export declare function useChangeHandler<T, E extends HTMLInputElementType>(parse: ParseFn<T | undefined>, onChange?: ChangeEventHandler, onValueChange?: ValueChangeEventHandler<T>, dependencies?: unknown[]): ChangeEventHandler | undefined;
 export {};

package/dist/components/private/Input/hooks/useChangeHandler.js

@@ -14,4 +14,4 @@ function useChangeHandler(parse, onChange, onValueChange, dependencies = []) {
 }
 
 export { useChangeHandler };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlQ2hhbmdlSGFuZGxlci5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcHJpdmF0ZS9JbnB1dC9ob29rcy91c2VDaGFuZ2VIYW5kbGVyLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVmFsdWVDaGFuZ2VFdmVudEhhbmRsZXIgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCB7IENoYW5nZUV2ZW50LCBDaGFuZ2VFdmVudEhhbmRsZXIsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbnR5cGUgSFRNTElucHV0RWxlbWVudFR5cGUgPSBIVE1MSW5wdXRFbGVtZW50ICYgSFRNTFNlbGVjdEVsZW1lbnQgJiBIVE1MVGV4dEFyZWFFbGVtZW50O1xuXG50eXBlIFBhcnNlRm48VD4gPSAoaW5wdXQ6IENoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnRUeXBlPikgPT4gVDtcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUNoYW5nZUhhbmRsZXI8VCwgRSBleHRlbmRzIEhUTUxJbnB1dEVsZW1lbnRUeXBlPihcbiAgICBwYXJzZTogUGFyc2VGbjxUPixcbiAgICBvbkNoYW5nZT86IENoYW5nZUV2ZW50SGFuZGxlcixcbiAgICBvblZhbHVlQ2hhbmdlPzogVmFsdWVDaGFuZ2VFdmVudEhhbmRsZXI8VD4sXG4gICAgZGVwZW5kZW5jaWVzOiB1bmtub3duW10gPSBbXSxcbik6IENoYW5nZUV2ZW50SGFuZGxlciB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHVzZU1lbW8oKCkgPT4ge1xuICAgICAgICBpZiAoIW9uQ2hhbmdlICYmICFvblZhbHVlQ2hhbmdlKSB7XG4gICAgICAgICAgICByZXR1cm4gdW5kZWZpbmVkO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiAoZXY6IENoYW5nZUV2ZW50PEU+KSA9PiB7XG4gICAgICAgICAgICBvbkNoYW5nZT8uKGV2KTtcbiAgICAgICAgICAgIGNvbnN0IHZhbHVlID0gcGFyc2UoZXYpO1xuICAgICAgICAgICAgb25WYWx1ZUNoYW5nZT8uKHZhbHVlKTtcbiAgICAgICAgfTtcbiAgICB9LCBbcGFyc2UsIG9uQ2hhbmdlLCBvblZhbHVlQ2hhbmdlLCAuLi5kZXBlbmRlbmNpZXNdKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztTQU9nQixnQkFBZ0IsQ0FDNUIsS0FBaUIsRUFDakIsUUFBNkIsRUFDN0IsYUFBMEMsRUFDMUMsZUFBMEIsRUFBRTtJQUU1QixPQUFPLE9BQU8sQ0FBQztRQUNYLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0IsT0FBTyxTQUFTLENBQUM7U0FDcEI7UUFDRCxPQUFPLENBQUMsRUFBa0I7WUFDdEIsUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFHLEVBQUUsRUFBRTtZQUNmLE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUN4QixhQUFhLGFBQWIsYUFBYSx1QkFBYixhQUFhLENBQUcsS0FBSyxFQUFFO1NBQzFCLENBQUM7S0FDTCxFQUFFLENBQUMsS0FBSyxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxZQUFZLENBQUMsQ0FBQyxDQUFDO0FBQzFEOzs7OyJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlQ2hhbmdlSGFuZGxlci5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcHJpdmF0ZS9JbnB1dC9ob29rcy91c2VDaGFuZ2VIYW5kbGVyLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVmFsdWVDaGFuZ2VFdmVudEhhbmRsZXIgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCB7IENoYW5nZUV2ZW50LCBDaGFuZ2VFdmVudEhhbmRsZXIsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbnR5cGUgSFRNTElucHV0RWxlbWVudFR5cGUgPSBIVE1MSW5wdXRFbGVtZW50ICYgSFRNTFNlbGVjdEVsZW1lbnQgJiBIVE1MVGV4dEFyZWFFbGVtZW50O1xuXG50eXBlIFBhcnNlRm48VD4gPSAoaW5wdXQ6IENoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnRUeXBlPikgPT4gVDtcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUNoYW5nZUhhbmRsZXI8VCwgRSBleHRlbmRzIEhUTUxJbnB1dEVsZW1lbnRUeXBlPihcbiAgICBwYXJzZTogUGFyc2VGbjxUIHwgdW5kZWZpbmVkPixcbiAgICBvbkNoYW5nZT86IENoYW5nZUV2ZW50SGFuZGxlcixcbiAgICBvblZhbHVlQ2hhbmdlPzogVmFsdWVDaGFuZ2VFdmVudEhhbmRsZXI8VD4sXG4gICAgZGVwZW5kZW5jaWVzOiB1bmtub3duW10gPSBbXSxcbik6IENoYW5nZUV2ZW50SGFuZGxlciB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHVzZU1lbW8oKCkgPT4ge1xuICAgICAgICBpZiAoIW9uQ2hhbmdlICYmICFvblZhbHVlQ2hhbmdlKSB7XG4gICAgICAgICAgICByZXR1cm4gdW5kZWZpbmVkO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiAoZXY6IENoYW5nZUV2ZW50PEU+KSA9PiB7XG4gICAgICAgICAgICBvbkNoYW5nZT8uKGV2KTtcbiAgICAgICAgICAgIGNvbnN0IHZhbHVlID0gcGFyc2UoZXYpO1xuICAgICAgICAgICAgb25WYWx1ZUNoYW5nZT8uKHZhbHVlKTtcbiAgICAgICAgfTtcbiAgICB9LCBbcGFyc2UsIG9uQ2hhbmdlLCBvblZhbHVlQ2hhbmdlLCAuLi5kZXBlbmRlbmNpZXNdKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztTQU9nQixnQkFBZ0IsQ0FDNUIsS0FBNkIsRUFDN0IsUUFBNkIsRUFDN0IsYUFBMEMsRUFDMUMsZUFBMEIsRUFBRTtJQUU1QixPQUFPLE9BQU8sQ0FBQztRQUNYLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0IsT0FBTyxTQUFTLENBQUM7U0FDcEI7UUFDRCxPQUFPLENBQUMsRUFBa0I7WUFDdEIsUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFHLEVBQUUsRUFBRTtZQUNmLE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUN4QixhQUFhLGFBQWIsYUFBYSx1QkFBYixhQUFhLENBQUcsS0FBSyxFQUFFO1NBQzFCLENBQUM7S0FDTCxFQUFFLENBQUMsS0FBSyxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxZQUFZLENBQUMsQ0FBQyxDQUFDO0FBQzFEOzs7OyJ9

package/dist/components/private/SelectFieldLayout/SelectFieldLayout.d.ts

@@ -0,0 +1,3 @@
+import type { FieldLayoutProps, InputImperativeHandle } from '@preply/ds-web-core';
+import React from 'react';
+export declare const SelectFieldLayout: React.ForwardRefExoticComponent<FieldLayoutProps & React.RefAttributes<InputImperativeHandle>>;

package/dist/components/private/SelectFieldLayout/SelectFieldLayout.js

@@ -0,0 +1,42 @@
+import ExpandHeavySvg from '@preply/ds-media-icons/dist/24/ExpandHeavy.svg';
+import { useStyleExtract, moduleLocals, booleanClassNames, useVisualModeClassNames } from '@preply/ds-web-core';
+import React__default, { forwardRef, useImperativeHandle } from 'react';
+import { Icon } from '../../Icon/Icon.js';
+import { FieldLayoutBase } from '../FieldLayoutBase/FieldLayoutBase.js';
+import styles from './style/index.module.less.js';
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+const SELECT_FIELD_LAYOUT = 'SelectFieldLayout';
+const SelectFieldLayoutLocal = ({ id, className, input, icon, disabled, isFocused, hasError, inputHandle, onClick, hasValue, ...props }, ref) => {
+    useStyleExtract(styles);
+    useImperativeHandle(ref, () => ({
+        setFocus: () => inputHandle === null || inputHandle === void 0 ? void 0 : inputHandle.setFocus(),
+    }));
+    const fieldClassNames = moduleLocals(styles, SELECT_FIELD_LAYOUT, [
+        booleanClassNames('is-disabled', undefined, disabled),
+        booleanClassNames('is-focused', undefined, isFocused),
+        booleanClassNames('has-error', undefined, hasError),
+        booleanClassNames('has-icon', undefined, !!icon),
+        booleanClassNames('has-value', undefined, hasValue),
+    ]);
+    const allClassNames = className ? [className, ...fieldClassNames] : fieldClassNames;
+    const inputClassNames = moduleLocals(styles, SELECT_FIELD_LAYOUT, ['input']);
+    const iconClassNames = moduleLocals(styles, SELECT_FIELD_LAYOUT, ['icon']);
+    const dropdownIndicatorClassNames = moduleLocals(styles, SELECT_FIELD_LAYOUT, [
+        'dropdown-indicator',
+    ]);
+    const handleClick = ev => {
+        inputHandle === null || inputHandle === void 0 ? void 0 : inputHandle.setFocus();
+        onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+    };
+    return (React__default.createElement(FieldLayoutBase, Object.assign({ id: id, className: useVisualModeClassNames(allClassNames).join(' '), disabled: disabled, isFocused: isFocused, hasError: hasError, hasValue: hasValue }, props),
+        React__default.createElement("div", { className: inputClassNames.join(' '), onClick: handleClick },
+            icon && React__default.createElement("span", { className: iconClassNames.join(' ') }, icon),
+            input,
+            React__default.createElement("span", { className: dropdownIndicatorClassNames.join(' ') },
+                React__default.createElement(Icon, { svg: ExpandHeavySvg })))));
+};
+const SelectFieldLayout = forwardRef(SelectFieldLayoutLocal);
+
+export { SelectFieldLayout };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0RmllbGRMYXlvdXQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3ByaXZhdGUvU2VsZWN0RmllbGRMYXlvdXQvU2VsZWN0RmllbGRMYXlvdXQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIGpzeC1hMTF5L25vLXN0YXRpYy1lbGVtZW50LWludGVyYWN0aW9ucyAqL1xuLyogZXNsaW50LWRpc2FibGUganN4LWExMXkvY2xpY2stZXZlbnRzLWhhdmUta2V5LWV2ZW50cyAqL1xuaW1wb3J0IEV4cGFuZEhlYXZ5U3ZnIGZyb20gJ0BwcmVwbHkvZHMtbWVkaWEtaWNvbnMvZGlzdC8yNC9FeHBhbmRIZWF2eS5zdmcnO1xuaW1wb3J0IHR5cGUgeyBGaWVsZExheW91dFByb3BzLCBJbnB1dEltcGVyYXRpdmVIYW5kbGUgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCB7XG4gICAgYm9vbGVhbkNsYXNzTmFtZXMsXG4gICAgbW9kdWxlTG9jYWxzLFxuICAgIHVzZVN0eWxlRXh0cmFjdCxcbiAgICB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIE1vdXNlRXZlbnRIYW5kbGVyLCBmb3J3YXJkUmVmLCB1c2VJbXBlcmF0aXZlSGFuZGxlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi4vLi4vSWNvbi9JY29uJztcbmltcG9ydCB7IEZpZWxkTGF5b3V0QmFzZSB9IGZyb20gJy4uL0ZpZWxkTGF5b3V0QmFzZS9GaWVsZExheW91dEJhc2UnO1xuXG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGUvaW5kZXgubW9kdWxlLmxlc3MnO1xuXG5jb25zdCBTRUxFQ1RfRklFTERfTEFZT1VUID0gJ1NlbGVjdEZpZWxkTGF5b3V0JztcblxuY29uc3QgU2VsZWN0RmllbGRMYXlvdXRMb2NhbDogRkM8RmllbGRMYXlvdXRQcm9wcz4gPSAoXG4gICAge1xuICAgICAgICBpZCxcbiAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICBpbnB1dCxcbiAgICAgICAgaWNvbixcbiAgICAgICAgZGlzYWJsZWQsXG4gICAgICAgIGlzRm9jdXNlZCxcbiAgICAgICAgaGFzRXJyb3IsXG4gICAgICAgIGlucHV0SGFuZGxlLFxuICAgICAgICBvbkNsaWNrLFxuICAgICAgICBoYXNWYWx1ZSxcbiAgICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbikgPT4ge1xuICAgIHVzZVN0eWxlRXh0cmFjdChzdHlsZXMpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICAgIHNldEZvY3VzOiAoKSA9PiBpbnB1dEhhbmRsZT8uc2V0Rm9jdXMoKSxcbiAgICB9KSk7XG5cbiAgICBjb25zdCBmaWVsZENsYXNzTmFtZXMgPSBtb2R1bGVMb2NhbHMoc3R5bGVzLCBTRUxFQ1RfRklFTERfTEFZT1VULCBbXG4gICAgICAgIGJvb2xlYW5DbGFzc05hbWVzKCdpcy1kaXNhYmxlZCcsIHVuZGVmaW5lZCwgZGlzYWJsZWQpLFxuICAgICAgICBib29sZWFuQ2xhc3NOYW1lcygnaXMtZm9jdXNlZCcsIHVuZGVmaW5lZCwgaXNGb2N1c2VkKSxcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoJ2hhcy1lcnJvcicsIHVuZGVmaW5lZCwgaGFzRXJyb3IpLFxuICAgICAgICBib29sZWFuQ2xhc3NOYW1lcygnaGFzLWljb24nLCB1bmRlZmluZWQsICEhaWNvbiksXG4gICAgICAgIGJvb2xlYW5DbGFzc05hbWVzKCdoYXMtdmFsdWUnLCB1bmRlZmluZWQsIGhhc1ZhbHVlKSxcbiAgICBdKTtcbiAgICBjb25zdCBhbGxDbGFzc05hbWVzID0gY2xhc3NOYW1lID8gW2NsYXNzTmFtZSwgLi4uZmllbGRDbGFzc05hbWVzXSA6IGZpZWxkQ2xhc3NOYW1lcztcbiAgICBjb25zdCBpbnB1dENsYXNzTmFtZXMgPSBtb2R1bGVMb2NhbHMoc3R5bGVzLCBTRUxFQ1RfRklFTERfTEFZT1VULCBbJ2lucHV0J10pO1xuICAgIGNvbnN0IGljb25DbGFzc05hbWVzID0gbW9kdWxlTG9jYWxzKHN0eWxlcywgU0VMRUNUX0ZJRUxEX0xBWU9VVCwgWydpY29uJ10pO1xuICAgIGNvbnN0IGRyb3Bkb3duSW5kaWNhdG9yQ2xhc3NOYW1lcyA9IG1vZHVsZUxvY2FscyhzdHlsZXMsIFNFTEVDVF9GSUVMRF9MQVlPVVQsIFtcbiAgICAgICAgJ2Ryb3Bkb3duLWluZGljYXRvcicsXG4gICAgXSk7XG5cbiAgICBjb25zdCBoYW5kbGVDbGljazogTW91c2VFdmVudEhhbmRsZXIgPSBldiA9PiB7XG4gICAgICAgIGlucHV0SGFuZGxlPy5zZXRGb2N1cygpO1xuICAgICAgICBvbkNsaWNrPy4oZXYpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8RmllbGRMYXlvdXRCYXNlXG4gICAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgICBjbGFzc05hbWU9e3VzZVZpc3VhbE1vZGVDbGFzc05hbWVzKGFsbENsYXNzTmFtZXMpLmpvaW4oJyAnKX1cbiAgICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgICAgIGlzRm9jdXNlZD17aXNGb2N1c2VkfVxuICAgICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgICAgaGFzVmFsdWU9e2hhc1ZhbHVlfVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICA+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17aW5wdXRDbGFzc05hbWVzLmpvaW4oJyAnKX0gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICAgICAgICAgIHtpY29uICYmIDxzcGFuIGNsYXNzTmFtZT17aWNvbkNsYXNzTmFtZXMuam9pbignICcpfT57aWNvbn08L3NwYW4+fVxuICAgICAgICAgICAgICAgIHtpbnB1dH1cbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9e2Ryb3Bkb3duSW5kaWNhdG9yQ2xhc3NOYW1lcy5qb2luKCcgJyl9PlxuICAgICAgICAgICAgICAgICAgICA8SWNvbiBzdmc9e0V4cGFuZEhlYXZ5U3ZnfSAvPlxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L0ZpZWxkTGF5b3V0QmFzZT5cbiAgICApO1xufTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdEZpZWxkTGF5b3V0ID0gZm9yd2FyZFJlZjxJbnB1dEltcGVyYXRpdmVIYW5kbGUsIEZpZWxkTGF5b3V0UHJvcHM+KFxuICAgIFNlbGVjdEZpZWxkTGF5b3V0TG9jYWwsXG4pO1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUE7QUFpQkEsTUFBTSxtQkFBbUIsR0FBRyxtQkFBbUIsQ0FBQztBQUVoRCxNQUFNLHNCQUFzQixHQUF5QixDQUNqRCxFQUNJLEVBQUUsRUFDRixTQUFTLEVBQ1QsS0FBSyxFQUNMLElBQUksRUFDSixRQUFRLEVBQ1IsU0FBUyxFQUNULFFBQVEsRUFDUixXQUFXLEVBQ1gsT0FBTyxFQUNQLFFBQVEsRUFDUixHQUFHLEtBQUssRUFDWCxFQUNELEdBQUc7SUFFSCxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsbUJBQW1CLENBQUMsR0FBRyxFQUFFLE9BQU87UUFDNUIsUUFBUSxFQUFFLE1BQU0sV0FBVyxhQUFYLFdBQVcsdUJBQVgsV0FBVyxDQUFFLFFBQVEsRUFBRTtLQUMxQyxDQUFDLENBQUMsQ0FBQztJQUVKLE1BQU0sZUFBZSxHQUFHLFlBQVksQ0FBQyxNQUFNLEVBQUUsbUJBQW1CLEVBQUU7UUFDOUQsaUJBQWlCLENBQUMsYUFBYSxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7UUFDckQsaUJBQWlCLENBQUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUM7UUFDckQsaUJBQWlCLENBQUMsV0FBVyxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7UUFDbkQsaUJBQWlCLENBQUMsVUFBVSxFQUFFLFNBQVMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ2hELGlCQUFpQixDQUFDLFdBQVcsRUFBRSxTQUFTLEVBQUUsUUFBUSxDQUFDO0tBQ3RELENBQUMsQ0FBQztJQUNILE1BQU0sYUFBYSxHQUFHLFNBQVMsR0FBRyxDQUFDLFNBQVMsRUFBRSxHQUFHLGVBQWUsQ0FBQyxHQUFHLGVBQWUsQ0FBQztJQUNwRixNQUFNLGVBQWUsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLG1CQUFtQixFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUM3RSxNQUFNLGNBQWMsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLG1CQUFtQixFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztJQUMzRSxNQUFNLDJCQUEyQixHQUFHLFlBQVksQ0FBQyxNQUFNLEVBQUUsbUJBQW1CLEVBQUU7UUFDMUUsb0JBQW9CO0tBQ3ZCLENBQUMsQ0FBQztJQUVILE1BQU0sV0FBVyxHQUFzQixFQUFFO1FBQ3JDLFdBQVcsYUFBWCxXQUFXLHVCQUFYLFdBQVcsQ0FBRSxRQUFRLEdBQUc7UUFDeEIsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLEVBQUUsRUFBRTtLQUNqQixDQUFDO0lBRUYsUUFDSUEsNkJBQUMsZUFBZSxrQkFDWixFQUFFLEVBQUUsRUFBRSxFQUNOLFNBQVMsRUFBRSx1QkFBdUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQzNELFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFNBQVMsRUFBRSxTQUFTLEVBQ3BCLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFFBQVEsRUFBRSxRQUFRLElBQ2QsS0FBSztRQUVUQSxzQ0FBSyxTQUFTLEVBQUUsZUFBZSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxPQUFPLEVBQUUsV0FBVztZQUMxRCxJQUFJLElBQUlBLHVDQUFNLFNBQVMsRUFBRSxjQUFjLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFHLElBQUksQ0FBUTtZQUNoRSxLQUFLO1lBQ05BLHVDQUFNLFNBQVMsRUFBRSwyQkFBMkIsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO2dCQUNsREEsNkJBQUMsSUFBSSxJQUFDLEdBQUcsRUFBRSxjQUFjLEdBQUksQ0FDMUIsQ0FDTCxDQUNRLEVBQ3BCO0FBQ04sQ0FBQyxDQUFDO01BRVcsaUJBQWlCLEdBQUcsVUFBVSxDQUN2QyxzQkFBc0I7Ozs7In0=

package/dist/components/private/SelectFieldLayout/style/index.module.less

@@ -0,0 +1,5 @@
+@import './mixins.less';
+
+.SelectFieldLayout {
+    .select-field-layout();
+}

package/dist/components/private/SelectFieldLayout/style/index.module.less.js

@@ -0,0 +1,9 @@
+import styleInject from '../../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "._2SEQrL{background-color:var(--5836cb);background-color:var(--211bc0);border:var(--d9baa3) solid var(--29cd58);border-radius:var(--c4b051);color:var(--41d493);position:relative}._2SEQrL:hover{border-color:var(--398094)}._2SEQrL select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--d9209f);font-size:var(--0c62d6);font-style:var(--a833d1);font-variation-settings:var(--5bcea1);font-weight:var(--cb99be);letter-spacing:var(--035113);line-height:var(--829b1e);outline:none;padding:0;padding:calc(var(--d9baa3) + var(--1ba55a));padding-left:calc(var(--477fda) - var(--d9baa3));padding-right:calc(var(--1ba55a) + var(--7c1b1c) + var(--1ba55a))}._3u5Oif{font-size:0;height:var(--7c1b1c);left:calc(var(--477fda) - var(--d9baa3));pointer-events:none;position:absolute;top:calc(var(--d9baa3) + var(--1ba55a))}._3u5Oif svg{color:var(--cbc724)}._2_9eb5{font-size:0;height:var(--7c1b1c);pointer-events:none;position:absolute;right:var(--1ba55a);top:calc(var(--d9baa3) + var(--1ba55a))}._2_9eb5 svg{color:var(--cbc724)}._1bTLhg ._2SEQrL select{color:var(--41d493)}._4Jsiyx ._2SEQrL select{padding-left:calc(var(--477fda) - var(--d9baa3) + var(--7c1b1c) + var(--1ba55a))}._1iwfc0 ._2SEQrL{background-color:var(--95df5b);border-color:var(--eaf4a3)}._1iwfc0 ._2SEQrL input,._1iwfc0 ._3u5Oif svg{color:var(--7b0f41)}._332FPb ._2SEQrL{border-color:var(--398094)}._3B5W1m ._2SEQrL{background-color:var(--04daeb);border-color:transparent}";
+var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/private/SelectFieldLayout/style/index.module.less",__css:css_248z,"SelectFieldLayout--input":"_2SEQrL","SelectFieldLayout--icon":"_3u5Oif","SelectFieldLayout--dropdown-indicator":"_2_9eb5","SelectFieldLayout--has-value":"_1bTLhg","SelectFieldLayout--has-icon":"_4Jsiyx","SelectFieldLayout--has-error":"_1iwfc0","SelectFieldLayout--is-focused":"_332FPb","SelectFieldLayout--is-disabled":"_3B5W1m"};
+var stylesheet=css_248z;
+styleInject(css_248z);
+
+export { styles as default, stylesheet };
+

package/dist/components/private/SelectFieldLayout/style/mixins.less

@@ -0,0 +1,106 @@
+@import '@preply/ds-web-core/dist/focus/style/mixins.less';
+@import '@preply/ds-web-core/dist/generated/tokens.less';
+@import '@preply/ds-web-core/dist/typography/style/mixins.less';
+
+// https://stackoverflow.com/questions/14279328/is-there-a-way-to-use-variables-in-less-for-the-operator-like-calc100
+@select-padding-vertical: calc(@input-base-borderWidth ~'+' @root-space-2xs);
+@select-padding-left: calc(@root-space-xs ~'-' @input-base-borderWidth);
+@dropdown-indicator-size: calc(@icon-size-s-size ~'+' @select-gap);
+@select-padding-right: calc(@select-gap ~'+' @dropdown-indicator-size);
+@select-gap: @root-space-2xs;
+
+.unstyled-input() {
+    appearance: none;
+    border: none;
+    background: none;
+    padding: 0;
+    outline: none;
+}
+
+.select-field-layout() {
+    &--input {
+        position: relative;
+        background-color: @background-secondary;
+        border-style: solid;
+        .color('input', 'base');
+        .bg-color('input', 'base');
+        .border-color('border', 'base');
+        .border-width('input', 'base');
+        .border-radius('input', 'base');
+
+        &:hover {
+            .border-color('border', 'focus');
+        }
+
+        select {
+            .unstyled-input();
+            .text-variant('m');
+            .color('input', 'placeholder');
+            padding: @select-padding-vertical;
+            padding-left: @select-padding-left;
+            padding-right: @select-padding-right;
+        }
+    }
+
+    &--icon {
+        position: absolute;
+        top: @select-padding-vertical;
+        left: @select-padding-left;
+        height: @icon-size-s-size;
+
+        // fix for icon vertical alignment
+        font-size: 0;
+
+        pointer-events: none;
+
+        svg {
+            .color('input', 'icon');
+        }
+    }
+
+    &--dropdown-indicator {
+        position: absolute;
+        top: @select-padding-vertical;
+        right: @select-gap;
+        height: @icon-size-s-size;
+
+        // fix for icon vertical alignment
+        font-size: 0;
+
+        pointer-events: none;
+
+        svg {
+            .color('input', 'icon');
+        }
+    }
+
+    &--has-value &--input select {
+        .color('input', 'base');
+    }
+
+    &--has-icon &--input select {
+        padding-left: calc(@select-padding-left ~'+' @icon-size-s-size ~'+' @select-gap);
+    }
+
+    &--has-error &--input {
+        .bg-color('input', 'error');
+        .border-color('border', 'error');
+
+        input {
+            .color('input', 'error');
+        }
+    }
+
+    &--has-error &--icon svg {
+        color: @input-error-color;
+    }
+
+    &--is-focused &--input {
+        .border-color('border', 'focus');
+    }
+
+    &--is-disabled &--input {
+        background-color: @action-base-disabled-bgColor;
+        border-color: transparent;
+    }
+}

package/dist/components/private/SelectFieldLayout/style/mixins.less.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "";
+var stylesheet="";
+styleInject(css_248z);
+
+export { css_248z as default, stylesheet };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3QiwyREFBK0Q7QUFDdkY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyJ9

package/dist/index.js

@@ -24,7 +24,10 @@ export { PreplyLogo } from './components/PreplyLogo/PreplyLogo.js';
 export { ShowOnIntersection } from './components/ShowOnIntersection/ShowOnIntersection.js';
 export { Text } from './components/Text/Text.js';
 export { TextField } from './components/TextField/TextField.js';
+export { NumberField } from './components/NumberField/NumberField.js';
 export { PasswordField } from './components/PasswordField/PasswordField.js';
 export { TextHighlighted } from './components/TextHighlighted/TextHighlighted.js';
 export { TextInline } from './components/TextInline/TextInline.js';
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9
+export { SelectField } from './components/SelectField/SelectField.js';
+export { SelectFieldOption } from './components/SelectFieldOption/SelectFieldOption.js';
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preply/ds-web-lib",
-    "version": "0.57.0",
+    "version": "0.58.0",
     "publishConfig": {
         "access": "public"
     },
@@ -19,26 +19,26 @@
         "dev": "run build:rollup -w"
     },
     "dependencies": {
-        "@preply/ds-core": "0.57.0",
-        "@preply/ds-media-icons": "0.57.0",
-        "@preply/ds-web-core": "0.57.0",
-        "@preply/ds-web-root": "0.57.0"
+        "@preply/ds-core": "0.58.0",
+        "@preply/ds-media-icons": "0.58.0",
+        "@preply/ds-web-core": "0.58.0",
+        "@preply/ds-web-root": "0.58.0"
     },
     "peerDependencies": {
-        "@preply/ds-core": "0.57.0",
-        "@preply/ds-media-icons": "0.57.0",
-        "@preply/ds-web-core": "0.57.0",
-        "@preply/ds-web-root": "0.57.0",
+        "@preply/ds-core": "0.58.0",
+        "@preply/ds-media-icons": "0.58.0",
+        "@preply/ds-web-core": "0.58.0",
+        "@preply/ds-web-root": "0.58.0",
         "react": "^16.8.3",
         "react-dom": "^16.8.3"
     },
     "devDependencies": {
-        "@preply/ds-docs-toolkit": "0.57.0",
-        "@preply/ds-theme-base-ui": "0.57.0",
+        "@preply/ds-docs-toolkit": "0.58.0",
+        "@preply/ds-theme-base-ui": "0.58.0",
         "@storybook/addon-docs": "6.4.18",
         "@storybook/react": "6.4.18",
         "@testing-library/react": "11.2.7",
         "jsdom-testing-mocks": "^1.7.0"
     },
-    "gitHead": "43099827eda938a795a7fab4b74f78cca794cd62"
+    "gitHead": "35113324a4808a63eb480e92621dffc5f37ee966"
 }