@preply/ds-web-lib 0.48.0 → 0.50.0

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

@@ -1,6 +1,6 @@
 import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "._30mmOy{font-size:var(--a7cfda);font-style:var(--b8dd4e);font-variation-settings:var(--93fedc);font-weight:var(--dc8b92);letter-spacing:var(--4d1d51);line-height:var(--c552e7);margin:0}._1AeiIo{color:var(--4c4008)}.PrNSbP{color:var(--622733)}";
+var css_248z = "._30mmOy{font-size:var(--a7cfda);font-style:var(--b8dd4e);font-variation-settings:var(--93fedc);font-weight:var(--dc8b92);letter-spacing:var(--4d1d51);line-height:var(--c552e7);margin:0}._1AeiIo{color:var(--3d280d)}.PrNSbP{color:var(--9167e9)}";
 var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/FieldAdditionalText/style/index.module.less",__css:css_248z,"FieldAdditionalText":"_30mmOy","FieldAdditionalText--variant-normal":"_1AeiIo","FieldAdditionalText--variant-error":"PrNSbP"};
 var stylesheet=css_248z;
 styleInject(css_248z);

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

@@ -7,10 +7,10 @@
     .text-variant('s');
 
     &--variant-normal {
-        .color('field', 'additionalText-normal');
+        .color('content', 'secondary');
     }
 
     &--variant-error {
-        .color('field' , 'additionalText-error');
+        .color('content' , 'error');
     }
 }

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

@@ -1,6 +1,6 @@
 import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "._1SK7Uw{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:var(--145676);border-radius:.001px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;width:var(--53cdfb)}._1SK7Uw:hover{background:rgba(9,15,25,.1)}._1SK7Uw:active{background:rgba(9,15,25,.15)}._1SK7Uw._2Ia3G8{outline-color:var(--603ec6);outline-offset:var(--c0b12c);outline-style:solid;outline-width:var(--99d31f)}._1SK7Uw:focus-visible{outline-color:var(--603ec6);outline-offset:var(--c0b12c);outline-style:solid;outline-width:var(--99d31f)}._1SK7Uw svg{height:var(--f02c4e);width:var(--f02c4e)}";
+var css_248z = "._1SK7Uw{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;border-radius:.001px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--b26698);justify-content:center;min-width:var(--53cdfb)}._1SK7Uw:hover{background-color:var(--0bbea4)}._1SK7Uw:active{background-color:var(--33e933)}._1SK7Uw._2Ia3G8{outline-color:var(--603ec6);outline-offset:var(--c0b12c);outline-style:solid;outline-width:var(--99d31f)}._1SK7Uw:focus-visible{outline-color:var(--603ec6);outline-offset:var(--c0b12c);outline-style:solid;outline-width:var(--99d31f)}._1SK7Uw svg{height:var(--f02c4e);width:var(--f02c4e)}";
 var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/FieldButton/style/index.module.less",__css:css_248z,"FieldButton":"_1SK7Uw","focus-visible":"_2Ia3G8"};
 var stylesheet=css_248z;
 styleInject(css_248z);

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

@@ -9,22 +9,26 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: @root-size-600;
-    border: @root-palette-white; // TODO token @action-inline-bgColor
+    min-width: @root-size-600;
+    height: @root-size-500;
+    border-width: 1px;
+    border-style: solid;
+    .border-color('action', 'inline');
     background: none;
+    border: none;
     border-radius: @local-force-outline-to-be-round;
     cursor: pointer;
 
     &:hover {
-        background: rgba(9, 15, 25, 0.1); // TODO token @action-inline-hover-bgColor
+        .bg-color('action', 'inline-hover');
     }
 
     &:active {
-        background: rgba(9, 15, 25, 0.15); // TODO token @action-inline-active-bgColor
+        .bg-color('action', 'inline-active');
     }
 
     &:focus-visible {
-        .focus-outline(); // TODO problematic, doesn't align with underlying "input" border-radius: @root-radius-s; https://preply.slack.com/archives/C03EG5MS16U/p1663781844611059?thread_ts=1663779229.544659&cid=C03EG5MS16U
+        .focus-outline();
     }
 
     svg {

package/dist/components/FieldLayout/FieldLayout.d.ts

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

package/dist/components/FieldLayout/FieldLayout.js

@@ -1,11 +1,14 @@
 import { useStyleExtract, moduleLocals, booleanClassNames } from '@preply/ds-web-core';
-import React__default from 'react';
+import React__default, { forwardRef, useImperativeHandle } from 'react';
 import { FieldLayoutBase } from '../private/FieldLayoutBase/FieldLayoutBase.js';
 import styles from './style/index.module.less.js';
 
 const FIELD_LAYOUT = 'FieldLayout';
-const FieldLayout = ({ id, className, input, icon, button, disabled, isFocused, hasError, inputHandle, ...props }) => {
+const FieldLayoutLocal = ({ id, className, input, icon, button, disabled, isFocused, hasError, inputHandle, ...props }, ref) => {
     useStyleExtract(styles);
+    useImperativeHandle(ref, () => ({
+        setFocus: () => inputHandle === null || inputHandle === void 0 ? void 0 : inputHandle.setFocus(),
+    }));
     const fieldClassNames = moduleLocals(styles, FIELD_LAYOUT, [
         booleanClassNames('is-disabled', undefined, disabled),
         booleanClassNames('is-focused', undefined, isFocused),
@@ -13,13 +16,17 @@ const FieldLayout = ({ id, className, input, icon, button, disabled, isFocused,
     ]);
     const allClassNames = [className, ...fieldClassNames];
     const inputClassNames = moduleLocals(styles, FIELD_LAYOUT, ['input']);
-    const handleClick = () => inputHandle === null || inputHandle === void 0 ? void 0 : inputHandle.focus();
+    const iconClassNames = moduleLocals(styles, FIELD_LAYOUT, ['icon']);
+    const handleClick = () => {
+        inputHandle === null || inputHandle === void 0 ? void 0 : inputHandle.setFocus();
+    };
     return (React__default.createElement(FieldLayoutBase, Object.assign({ id: id, className: allClassNames.join(' '), disabled: disabled, isFocused: isFocused, hasError: hasError }, props),
         React__default.createElement("div", { className: inputClassNames.join(' '), onClick: handleClick },
-            icon,
+            icon && React__default.createElement("span", { className: iconClassNames.join(' ') }, icon),
             input,
             button)));
-};
+};
+const FieldLayout = forwardRef(FieldLayoutLocal);
 
 export { FieldLayout };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmllbGRMYXlvdXQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZpZWxkTGF5b3V0L0ZpZWxkTGF5b3V0LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBqc3gtYTExeS9uby1zdGF0aWMtZWxlbWVudC1pbnRlcmFjdGlvbnMgKi9cbi8qIGVzbGludC1kaXNhYmxlIGpzeC1hMTF5L2NsaWNrLWV2ZW50cy1oYXZlLWtleS1ldmVudHMgKi9cbmltcG9ydCB0eXBlIHsgRmllbGRMYXlvdXRQcm9wcyB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IHsgYm9vbGVhbkNsYXNzTmFtZXMsIG1vZHVsZUxvY2FscywgdXNlU3R5bGVFeHRyYWN0IH0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEZpZWxkTGF5b3V0QmFzZSB9IGZyb20gJy4uL3ByaXZhdGUvRmllbGRMYXlvdXRCYXNlL0ZpZWxkTGF5b3V0QmFzZSc7XG5cbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmNvbnN0IEZJRUxEX0xBWU9VVCA9ICdGaWVsZExheW91dCc7XG5cbmV4cG9ydCBjb25zdCBGaWVsZExheW91dDogRkM8RmllbGRMYXlvdXRQcm9wcz4gPSAoe1xuICAgIGlkLFxuICAgIGNsYXNzTmFtZSxcbiAgICBpbnB1dCxcbiAgICBpY29uLFxuICAgIGJ1dHRvbixcbiAgICBkaXNhYmxlZCxcbiAgICBpc0ZvY3VzZWQsXG4gICAgaGFzRXJyb3IsXG4gICAgaW5wdXRIYW5kbGUsXG4gICAgLi4ucHJvcHNcbn0pID0+IHtcbiAgICB1c2VTdHlsZUV4dHJhY3Qoc3R5bGVzKTtcblxuICAgIGNvbnN0IGZpZWxkQ2xhc3NOYW1lcyA9IG1vZHVsZUxvY2FscyhzdHlsZXMsIEZJRUxEX0xBWU9VVCwgW1xuICAgICAgICBib29sZWFuQ2xhc3NOYW1lcygnaXMtZGlzYWJsZWQnLCB1bmRlZmluZWQsIGRpc2FibGVkKSxcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoJ2lzLWZvY3VzZWQnLCB1bmRlZmluZWQsIGlzRm9jdXNlZCksXG4gICAgICAgIGJvb2xlYW5DbGFzc05hbWVzKCdoYXMtZXJyb3InLCB1bmRlZmluZWQsIGhhc0Vycm9yKSxcbiAgICBdKTtcbiAgICBjb25zdCBhbGxDbGFzc05hbWVzID0gW2NsYXNzTmFtZSwgLi4uZmllbGRDbGFzc05hbWVzXTtcbiAgICBjb25zdCBpbnB1dENsYXNzTmFtZXMgPSBtb2R1bGVMb2NhbHMoc3R5bGVzLCBGSUVMRF9MQVlPVVQsIFsnaW5wdXQnXSk7XG5cbiAgICBjb25zdCBoYW5kbGVDbGljayA9ICgpID0+IGlucHV0SGFuZGxlPy5mb2N1cygpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEZpZWxkTGF5b3V0QmFzZVxuICAgICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXthbGxDbGFzc05hbWVzLmpvaW4oJyAnKX1cbiAgICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgICAgIGlzRm9jdXNlZD17aXNGb2N1c2VkfVxuICAgICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICA+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17aW5wdXRDbGFzc05hbWVzLmpvaW4oJyAnKX0gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgIHtpbnB1dH1cbiAgICAgICAgICAgICAgICB7YnV0dG9ufVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvRmllbGRMYXlvdXRCYXNlPlxuICAgICk7XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQVVBLE1BQU0sWUFBWSxHQUFHLGFBQWEsQ0FBQztNQUV0QixXQUFXLEdBQXlCLENBQUMsRUFDOUMsRUFBRSxFQUNGLFNBQVMsRUFDVCxLQUFLLEVBQ0wsSUFBSSxFQUNKLE1BQU0sRUFDTixRQUFRLEVBQ1IsU0FBUyxFQUNULFFBQVEsRUFDUixXQUFXLEVBQ1gsR0FBRyxLQUFLLEVBQ1g7SUFDRyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxlQUFlLEdBQUcsWUFBWSxDQUFDLE1BQU0sRUFBRSxZQUFZLEVBQUU7UUFDdkQsaUJBQWlCLENBQUMsYUFBYSxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7UUFDckQsaUJBQWlCLENBQUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUM7UUFDckQsaUJBQWlCLENBQUMsV0FBVyxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7S0FDdEQsQ0FBQyxDQUFDO0lBQ0gsTUFBTSxhQUFhLEdBQUcsQ0FBQyxTQUFTLEVBQUUsR0FBRyxlQUFlLENBQUMsQ0FBQztJQUN0RCxNQUFNLGVBQWUsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLFlBQVksRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFFdEUsTUFBTSxXQUFXLEdBQUcsTUFBTSxXQUFXLGFBQVgsV0FBVyx1QkFBWCxXQUFXLENBQUUsS0FBSyxFQUFFLENBQUM7SUFFL0MsUUFDSUEsNkJBQUMsZUFBZSxrQkFDWixFQUFFLEVBQUUsRUFBRSxFQUNOLFNBQVMsRUFBRSxhQUFhLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUNsQyxRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsU0FBUyxFQUNwQixRQUFRLEVBQUUsUUFBUSxJQUNkLEtBQUs7UUFFVEEsc0NBQUssU0FBUyxFQUFFLGVBQWUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsT0FBTyxFQUFFLFdBQVc7WUFDMUQsSUFBSTtZQUNKLEtBQUs7WUFDTCxNQUFNLENBQ0wsQ0FDUSxFQUNwQjtBQUNOOzs7OyJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmllbGRMYXlvdXQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZpZWxkTGF5b3V0L0ZpZWxkTGF5b3V0LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBqc3gtYTExeS9uby1zdGF0aWMtZWxlbWVudC1pbnRlcmFjdGlvbnMgKi9cbi8qIGVzbGludC1kaXNhYmxlIGpzeC1hMTF5L2NsaWNrLWV2ZW50cy1oYXZlLWtleS1ldmVudHMgKi9cbmltcG9ydCB0eXBlIHsgRmllbGRMYXlvdXRQcm9wcywgSW5wdXRJbXBlcmF0aXZlSGFuZGxlIH0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgeyBib29sZWFuQ2xhc3NOYW1lcywgbW9kdWxlTG9jYWxzLCB1c2VTdHlsZUV4dHJhY3QgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgZm9yd2FyZFJlZiwgdXNlSW1wZXJhdGl2ZUhhbmRsZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgRmllbGRMYXlvdXRCYXNlIH0gZnJvbSAnLi4vcHJpdmF0ZS9GaWVsZExheW91dEJhc2UvRmllbGRMYXlvdXRCYXNlJztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuY29uc3QgRklFTERfTEFZT1VUID0gJ0ZpZWxkTGF5b3V0JztcblxuY29uc3QgRmllbGRMYXlvdXRMb2NhbDogRkM8RmllbGRMYXlvdXRQcm9wcz4gPSAoXG4gICAgeyBpZCwgY2xhc3NOYW1lLCBpbnB1dCwgaWNvbiwgYnV0dG9uLCBkaXNhYmxlZCwgaXNGb2N1c2VkLCBoYXNFcnJvciwgaW5wdXRIYW5kbGUsIC4uLnByb3BzIH0sXG4gICAgcmVmLFxuKSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICB1c2VJbXBlcmF0aXZlSGFuZGxlKHJlZiwgKCkgPT4gKHtcbiAgICAgICAgc2V0Rm9jdXM6ICgpID0+IGlucHV0SGFuZGxlPy5zZXRGb2N1cygpLFxuICAgIH0pKTtcblxuICAgIGNvbnN0IGZpZWxkQ2xhc3NOYW1lcyA9IG1vZHVsZUxvY2FscyhzdHlsZXMsIEZJRUxEX0xBWU9VVCwgW1xuICAgICAgICBib29sZWFuQ2xhc3NOYW1lcygnaXMtZGlzYWJsZWQnLCB1bmRlZmluZWQsIGRpc2FibGVkKSxcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoJ2lzLWZvY3VzZWQnLCB1bmRlZmluZWQsIGlzRm9jdXNlZCksXG4gICAgICAgIGJvb2xlYW5DbGFzc05hbWVzKCdoYXMtZXJyb3InLCB1bmRlZmluZWQsIGhhc0Vycm9yKSxcbiAgICBdKTtcbiAgICBjb25zdCBhbGxDbGFzc05hbWVzID0gW2NsYXNzTmFtZSwgLi4uZmllbGRDbGFzc05hbWVzXTtcbiAgICBjb25zdCBpbnB1dENsYXNzTmFtZXMgPSBtb2R1bGVMb2NhbHMoc3R5bGVzLCBGSUVMRF9MQVlPVVQsIFsnaW5wdXQnXSk7XG4gICAgY29uc3QgaWNvbkNsYXNzTmFtZXMgPSBtb2R1bGVMb2NhbHMoc3R5bGVzLCBGSUVMRF9MQVlPVVQsIFsnaWNvbiddKTtcblxuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4ge1xuICAgICAgICBpbnB1dEhhbmRsZT8uc2V0Rm9jdXMoKTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEZpZWxkTGF5b3V0QmFzZVxuICAgICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXthbGxDbGFzc05hbWVzLmpvaW4oJyAnKX1cbiAgICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgICAgIGlzRm9jdXNlZD17aXNGb2N1c2VkfVxuICAgICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICA+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17aW5wdXRDbGFzc05hbWVzLmpvaW4oJyAnKX0gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICAgICAgICAgIHtpY29uICYmIDxzcGFuIGNsYXNzTmFtZT17aWNvbkNsYXNzTmFtZXMuam9pbignICcpfT57aWNvbn08L3NwYW4+fVxuICAgICAgICAgICAgICAgIHtpbnB1dH1cbiAgICAgICAgICAgICAgICB7YnV0dG9ufVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvRmllbGRMYXlvdXRCYXNlPlxuICAgICk7XG59O1xuXG5leHBvcnQgY29uc3QgRmllbGRMYXlvdXQgPSBmb3J3YXJkUmVmPElucHV0SW1wZXJhdGl2ZUhhbmRsZSwgRmllbGRMYXlvdXRQcm9wcz4oRmllbGRMYXlvdXRMb2NhbCk7XG4iXSwibmFtZXMiOlsiUmVhY3QiXSwibWFwcGluZ3MiOiI7Ozs7O0FBVUEsTUFBTSxZQUFZLEdBQUcsYUFBYSxDQUFDO0FBRW5DLE1BQU0sZ0JBQWdCLEdBQXlCLENBQzNDLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxXQUFXLEVBQUUsR0FBRyxLQUFLLEVBQUUsRUFDNUYsR0FBRztJQUVILGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUV4QixtQkFBbUIsQ0FBQyxHQUFHLEVBQUUsT0FBTztRQUM1QixRQUFRLEVBQUUsTUFBTSxXQUFXLGFBQVgsV0FBVyx1QkFBWCxXQUFXLENBQUUsUUFBUSxFQUFFO0tBQzFDLENBQUMsQ0FBQyxDQUFDO0lBRUosTUFBTSxlQUFlLEdBQUcsWUFBWSxDQUFDLE1BQU0sRUFBRSxZQUFZLEVBQUU7UUFDdkQsaUJBQWlCLENBQUMsYUFBYSxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7UUFDckQsaUJBQWlCLENBQUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUM7UUFDckQsaUJBQWlCLENBQUMsV0FBVyxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7S0FDdEQsQ0FBQyxDQUFDO0lBQ0gsTUFBTSxhQUFhLEdBQUcsQ0FBQyxTQUFTLEVBQUUsR0FBRyxlQUFlLENBQUMsQ0FBQztJQUN0RCxNQUFNLGVBQWUsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLFlBQVksRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDdEUsTUFBTSxjQUFjLEdBQUcsWUFBWSxDQUFDLE1BQU0sRUFBRSxZQUFZLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO0lBRXBFLE1BQU0sV0FBVyxHQUFHO1FBQ2hCLFdBQVcsYUFBWCxXQUFXLHVCQUFYLFdBQVcsQ0FBRSxRQUFRLEdBQUc7S0FDM0IsQ0FBQztJQUVGLFFBQ0lBLDZCQUFDLGVBQWUsa0JBQ1osRUFBRSxFQUFFLEVBQUUsRUFDTixTQUFTLEVBQUUsYUFBYSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFDbEMsUUFBUSxFQUFFLFFBQVEsRUFDbEIsU0FBUyxFQUFFLFNBQVMsRUFDcEIsUUFBUSxFQUFFLFFBQVEsSUFDZCxLQUFLO1FBRVRBLHNDQUFLLFNBQVMsRUFBRSxlQUFlLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLE9BQU8sRUFBRSxXQUFXO1lBQzFELElBQUksSUFBSUEsdUNBQU0sU0FBUyxFQUFFLGNBQWMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUcsSUFBSSxDQUFRO1lBQ2hFLEtBQUs7WUFDTCxNQUFNLENBQ0wsQ0FDUSxFQUNwQjtBQUNOLENBQUMsQ0FBQztNQUVXLFdBQVcsR0FBRyxVQUFVLENBQTBDLGdCQUFnQjs7OzsifQ==

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "._3wd25W{background-color:var(--5836cb);border:2px solid var(--8f1238);border-radius:var(--bf855f);display:-webkit-box;display:-ms-flexbox;display:flex;padding:2px;padding-left:calc(var(--477fda) - 2px)}._3wd25W:hover{outline-color:var(--603ec6);outline-color:var(--902b50);outline-offset:var(--c0b12c);outline-offset:-2px;outline-style:solid;outline-width:var(--99d31f)}._3wd25W input{background:none;border:none;font-size:var(--a5b1e0);font-style:var(--b079f7);font-variation-settings:var(--6fc943);font-weight:var(--749dcd);letter-spacing:var(--2a3820);line-height:var(--76f1ec);outline:none;padding:0}._3VIW2W ._3wd25W{outline-offset:var(--c0b12c);outline-offset:-2px}._2AzKuR ._3wd25W,._3VIW2W ._3wd25W{outline-color:var(--603ec6);outline-style:solid;outline-width:var(--99d31f)}._2AzKuR ._3wd25W{background-color:var(--04daeb);outline-color:transparent;outline-offset:var(--c0b12c)}._2oOvNj ._3wd25W{background-color:#f9e1e1;outline-color:var(--603ec6);outline-color:#c21f18;outline-offset:var(--c0b12c);outline-offset:-2px;outline-style:solid;outline-width:var(--99d31f)}";
-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--is-focused":"_3VIW2W","FieldLayout--is-disabled":"_2AzKuR","FieldLayout--has-error":"_2oOvNj"};
+var css_248z = "._3wd25W{grid-gap:var(--1ba55a);background-color:var(--5836cb);border:var(--d9baa3) solid var(--29cd58);border-radius:var(--c4b051);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(--3d280d)}._3wd25W input::-moz-placeholder{color:var(--3d280d)}._3wd25W input:-ms-input-placeholder{color:var(--3d280d)}._3wd25W input::-ms-input-placeholder{color:var(--3d280d)}._3wd25W input::placeholder{color:var(--3d280d)}.dR7X8n{height:var(--7c1b1c)}.dR7X8n svg{color:var(--3d280d)}._2oOvNj ._3wd25W{background-color:var(--4ae8c9);border-color:var(--eaf4a3)}._2oOvNj ._3wd25W input,._2oOvNj .dR7X8n svg{color:var(--9167e9)}._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

@@ -1,6 +1,6 @@
+@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';
-@import '@preply/ds-web-core/dist/focus/style/mixins.less';
 
 .unstyled-input() {
     border: none;
@@ -9,44 +9,66 @@
     outline: none;
 }
 
-@input-stroke-width: 2px; // TODO token @input-border-width; (new type, renderer cloned from outlineWidth)
-
 .field-layout() {
     &--input {
         display: flex;
-        padding: @input-stroke-width;
-        padding-left: calc(@root-space-xs - @input-stroke-width);
+        gap: @root-space-2xs;
+        padding: calc(@input-base-borderWidth ~'+' @root-space-2xs);
+        // https://stackoverflow.com/questions/14279328/is-there-a-way-to-use-variables-in-less-for-the-operator-like-calc100
+        padding-left: calc(@root-space-xs ~'-' @input-base-borderWidth);
+        padding-right: @input-base-borderWidth;
         background-color: @background-secondary;
-        border: @input-stroke-width solid @root-palette-gray-200;
-        border-radius: @root-radius-s; // TODO token @input-radius;
+        border-style: solid;
+        .border-color('border', 'base');
+        .border-width('input', 'base');
+        .border-radius('input', 'base');
 
         &:hover {
-            .focus-outline();
-            outline-offset: -@input-stroke-width;
-            outline-color: @action-variant-primary-hover-bgColor;
+            .border-color('border', 'focus');
         }
 
         input {
             .unstyled-input();
-            .text-variant('m-medium');
+            .text-variant('m');
+
+            &::placeholder {
+                .color('content', 'secondary');
+            }
         }
     }
 
+    &--icon {
+        height: @icon-size-s-size;
+
+        svg {
+            color: @content-secondary-color;
+        }
+    }
+
+    &--has-error &--input {
+        background-color: @background-error;
+        .border-color('border', 'error');
+
+        input {
+            .color('content', 'error');
+        }
+    }
+
+    &--has-error &--icon svg {
+        color: @content-error-color;
+    }
+
     &--is-focused &--input {
-        .focus-outline();
-        outline-offset: -@input-stroke-width;
+        .border-color('border', 'focus');
     }
 
     &--is-disabled &--input {
-        .focus-outline();
         background-color: @action-base-disabled-bgColor;
-        outline-color: transparent;
+        border-color: transparent;
     }
 
-    &--has-error &--input {
-        .focus-outline();
-        outline-offset: -@input-stroke-width;
-        background-color: #f9e1e1; // TODO @input-error-bgColor
-        outline-color: #c21f18; // TODO @input-error-borderColor
+    &--input button {
+        margin-top: calc(-1 ~'*' @root-space-2xs);
+        margin-bottom: calc(-1 ~'*' @root-space-2xs);
     }
 }

package/dist/components/Icon/Icon.d.ts

@@ -1,12 +1,3 @@
-import type { ColorName, Dataset, IconSize, TextAccent } from '@preply/ds-core';
-import React, { FC, SVGAttributes } from 'react';
-export declare type ReactSVGComponentType = React.ComponentType<SVGAttributes<SVGElement>>;
-export interface Props {
-    svg: ReactSVGComponentType;
-    size?: IconSize;
-    accent?: TextAccent;
-    color?: ColorName;
-    label?: string;
-    dataset?: Dataset;
-}
-export declare const Icon: FC<Props>;
+import type { IconProps } from '@preply/ds-web-core';
+import { FC } from 'react';
+export declare const Icon: FC<IconProps>;

package/dist/components/Icon/Icon.js

@@ -24,4 +24,4 @@ const Icon = ({ svg: Svg, size = ICON_SIZE_DEFAULT, accent, color, label, datase
 };
 
 export { Icon };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSWNvbi9JY29uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENvbG9yTmFtZSwgRGF0YXNldCwgSWNvblNpemUsIFRleHRBY2NlbnQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHsgSUNPTl9TSVpFX0RFRkFVTFQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBib29sZWFuQ2xhc3NOYW1lcyxcbiAgICBnZXREYXRhc2V0UHJvcHMsXG4gICAgbW9kdWxlQ2xhc3NOYW1lcyxcbiAgICB1c2VDb2xvckNsYXNzTmFtZXMsXG4gICAgdXNlU3R5bGVFeHRyYWN0LFxuICAgIHVzZVRleHRBY2NlbnRDbGFzc25hbWVzLFxufSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgU1ZHQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IHR5cGUgUmVhY3RTVkdDb21wb25lbnRUeXBlID0gUmVhY3QuQ29tcG9uZW50VHlwZTxTVkdBdHRyaWJ1dGVzPFNWR0VsZW1lbnQ+PjtcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgc3ZnOiBSZWFjdFNWR0NvbXBvbmVudFR5cGU7XG4gICAgc2l6ZT86IEljb25TaXplO1xuICAgIGFjY2VudD86IFRleHRBY2NlbnQ7XG4gICAgY29sb3I/OiBDb2xvck5hbWU7XG4gICAgbGFiZWw/OiBzdHJpbmc7XG4gICAgZGF0YXNldD86IERhdGFzZXQ7XG59XG5cbmNvbnN0IElDT04gPSAnSWNvbic7XG5cbmV4cG9ydCBjb25zdCBJY29uOiBGQzxQcm9wcz4gPSAoe1xuICAgIHN2ZzogU3ZnLFxuICAgIHNpemUgPSBJQ09OX1NJWkVfREVGQVVMVCxcbiAgICBhY2NlbnQsXG4gICAgY29sb3IsXG4gICAgbGFiZWwsXG4gICAgZGF0YXNldCxcbn0pID0+IHtcbiAgICB1c2VTdHlsZUV4dHJhY3Qoc3R5bGVzKTtcblxuICAgIGNvbnN0IHVzZU51bWVyaWNTaXplID0gIU51bWJlci5pc05hTihOdW1iZXIoc2l6ZSkpO1xuICAgIGNvbnN0IHN0eWxlID0gdXNlTnVtZXJpY1NpemUgPyB7IHdpZHRoOiBgJHtzaXplfXB4YCwgaGVpZ2h0OiBgJHtzaXplfXB4YCB9IDoge307XG5cbiAgICBjb25zdCBjbGFzc05hbWVzID0gbW9kdWxlQ2xhc3NOYW1lcyhzdHlsZXMsIElDT04sIFtcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoYHNpemUtJHtzaXplIGFzIHN0cmluZ31gLCB1bmRlZmluZWQsICF1c2VOdW1lcmljU2l6ZSksXG4gICAgXSk7XG5cbiAgICBjb25zdCBhY3R1YWxDb2xvciA9IGFjY2VudCA/IHVuZGVmaW5lZCA6IGNvbG9yO1xuICAgIGNvbnN0IGFjY2VudENsYXNzTmFtZXMgPSB1c2VUZXh0QWNjZW50Q2xhc3NuYW1lcyhmYWxzZSwgYWNjZW50KTtcbiAgICBjb25zdCBjb2xvckNsYXNzTmFtZXMgPSB1c2VDb2xvckNsYXNzTmFtZXMoYWN0dWFsQ29sb3IpO1xuXG4gICAgY29uc3QgYWxsQ2xhc3NOYW1lcyA9IFsuLi5jbGFzc05hbWVzLCAuLi5hY2NlbnRDbGFzc05hbWVzLCAuLi5jb2xvckNsYXNzTmFtZXNdO1xuXG4gICAgY29uc3QgcHJvcHMgPSB7IGNsYXNzTmFtZTogYWxsQ2xhc3NOYW1lcy5qb2luKCcgJyksIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSB9O1xuXG4gICAgaWYgKCFTdmcpIHtcbiAgICAgICAgdGhyb3cgbmV3IEVycm9yKCdJY29uIHByb3Agc3ZnIGlzIG1hbmRhdG9yeScpO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICAgIDxzcGFuIHsuLi5wcm9wc30gc3R5bGU9e3N0eWxlfSBhcmlhLWhpZGRlbj17IWxhYmVsfSBhcmlhLWxhYmVsPXtsYWJlbH0+XG4gICAgICAgICAgICA8U3ZnIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIGZvY3VzYWJsZT1cImZhbHNlXCIgLz5cbiAgICAgICAgPC9zcGFuPlxuICAgICk7XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQXlCQSxNQUFNLElBQUksR0FBRyxNQUFNLENBQUM7TUFFUCxJQUFJLEdBQWMsQ0FBQyxFQUM1QixHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksR0FBRyxpQkFBaUIsRUFDeEIsTUFBTSxFQUNOLEtBQUssRUFDTCxLQUFLLEVBQ0wsT0FBTyxHQUNWO0lBQ0csZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sY0FBYyxHQUFHLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUNuRCxNQUFNLEtBQUssR0FBRyxjQUFjLEdBQUcsRUFBRSxLQUFLLEVBQUUsR0FBRyxJQUFJLElBQUksRUFBRSxNQUFNLEVBQUUsR0FBRyxJQUFJLElBQUksRUFBRSxHQUFHLEVBQUUsQ0FBQztJQUVoRixNQUFNLFVBQVUsR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsSUFBSSxFQUFFO1FBQzlDLGlCQUFpQixDQUFDLFFBQVEsSUFBYyxFQUFFLEVBQUUsU0FBUyxFQUFFLENBQUMsY0FBYyxDQUFDO0tBQzFFLENBQUMsQ0FBQztJQUVILE1BQU0sV0FBVyxHQUFHLE1BQU0sR0FBRyxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQy9DLE1BQU0sZ0JBQWdCLEdBQUcsdUJBQXVCLENBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ2hFLE1BQU0sZUFBZSxHQUFHLGtCQUFrQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBRXhELE1BQU0sYUFBYSxHQUFHLENBQUMsR0FBRyxVQUFVLEVBQUUsR0FBRyxnQkFBZ0IsRUFBRSxHQUFHLGVBQWUsQ0FBQyxDQUFDO0lBRS9FLE1BQU0sS0FBSyxHQUFHLEVBQUUsU0FBUyxFQUFFLGFBQWEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQztJQUVsRixJQUFJLENBQUMsR0FBRyxFQUFFO1FBQ04sTUFBTSxJQUFJLEtBQUssQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDO0tBQ2pEO0lBRUQsUUFDSUEsdURBQVUsS0FBSyxJQUFFLEtBQUssRUFBRSxLQUFLLGlCQUFlLENBQUMsS0FBSyxnQkFBYyxLQUFLO1FBQ2pFQSw2QkFBQyxHQUFHLG1CQUFhLE1BQU0sRUFBQyxTQUFTLEVBQUMsT0FBTyxHQUFHLENBQ3pDLEVBQ1Q7QUFDTjs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSWNvbi9JY29uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJQ09OX1NJWkVfREVGQVVMVCB9IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5pbXBvcnQgdHlwZSB7IEljb25Qcm9wcyB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBib29sZWFuQ2xhc3NOYW1lcyxcbiAgICBnZXREYXRhc2V0UHJvcHMsXG4gICAgbW9kdWxlQ2xhc3NOYW1lcyxcbiAgICB1c2VDb2xvckNsYXNzTmFtZXMsXG4gICAgdXNlU3R5bGVFeHRyYWN0LFxuICAgIHVzZVRleHRBY2NlbnRDbGFzc25hbWVzLFxufSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuY29uc3QgSUNPTiA9ICdJY29uJztcblxuZXhwb3J0IGNvbnN0IEljb246IEZDPEljb25Qcm9wcz4gPSAoe1xuICAgIHN2ZzogU3ZnLFxuICAgIHNpemUgPSBJQ09OX1NJWkVfREVGQVVMVCxcbiAgICBhY2NlbnQsXG4gICAgY29sb3IsXG4gICAgbGFiZWwsXG4gICAgZGF0YXNldCxcbn0pID0+IHtcbiAgICB1c2VTdHlsZUV4dHJhY3Qoc3R5bGVzKTtcblxuICAgIGNvbnN0IHVzZU51bWVyaWNTaXplID0gIU51bWJlci5pc05hTihOdW1iZXIoc2l6ZSkpO1xuICAgIGNvbnN0IHN0eWxlID0gdXNlTnVtZXJpY1NpemUgPyB7IHdpZHRoOiBgJHtzaXplfXB4YCwgaGVpZ2h0OiBgJHtzaXplfXB4YCB9IDoge307XG5cbiAgICBjb25zdCBjbGFzc05hbWVzID0gbW9kdWxlQ2xhc3NOYW1lcyhzdHlsZXMsIElDT04sIFtcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoYHNpemUtJHtzaXplIGFzIHN0cmluZ31gLCB1bmRlZmluZWQsICF1c2VOdW1lcmljU2l6ZSksXG4gICAgXSk7XG5cbiAgICBjb25zdCBhY3R1YWxDb2xvciA9IGFjY2VudCA/IHVuZGVmaW5lZCA6IGNvbG9yO1xuICAgIGNvbnN0IGFjY2VudENsYXNzTmFtZXMgPSB1c2VUZXh0QWNjZW50Q2xhc3NuYW1lcyhmYWxzZSwgYWNjZW50KTtcbiAgICBjb25zdCBjb2xvckNsYXNzTmFtZXMgPSB1c2VDb2xvckNsYXNzTmFtZXMoYWN0dWFsQ29sb3IpO1xuXG4gICAgY29uc3QgYWxsQ2xhc3NOYW1lcyA9IFsuLi5jbGFzc05hbWVzLCAuLi5hY2NlbnRDbGFzc05hbWVzLCAuLi5jb2xvckNsYXNzTmFtZXNdO1xuXG4gICAgY29uc3QgcHJvcHMgPSB7IGNsYXNzTmFtZTogYWxsQ2xhc3NOYW1lcy5qb2luKCcgJyksIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSB9O1xuXG4gICAgaWYgKCFTdmcpIHtcbiAgICAgICAgdGhyb3cgbmV3IEVycm9yKCdJY29uIHByb3Agc3ZnIGlzIG1hbmRhdG9yeScpO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICAgIDxzcGFuIHsuLi5wcm9wc30gc3R5bGU9e3N0eWxlfSBhcmlhLWhpZGRlbj17IWxhYmVsfSBhcmlhLWxhYmVsPXtsYWJlbH0+XG4gICAgICAgICAgICA8U3ZnIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIGZvY3VzYWJsZT1cImZhbHNlXCIgLz5cbiAgICAgICAgPC9zcGFuPlxuICAgICk7XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQWNBLE1BQU0sSUFBSSxHQUFHLE1BQU0sQ0FBQztNQUVQLElBQUksR0FBa0IsQ0FBQyxFQUNoQyxHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksR0FBRyxpQkFBaUIsRUFDeEIsTUFBTSxFQUNOLEtBQUssRUFDTCxLQUFLLEVBQ0wsT0FBTyxHQUNWO0lBQ0csZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sY0FBYyxHQUFHLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUNuRCxNQUFNLEtBQUssR0FBRyxjQUFjLEdBQUcsRUFBRSxLQUFLLEVBQUUsR0FBRyxJQUFJLElBQUksRUFBRSxNQUFNLEVBQUUsR0FBRyxJQUFJLElBQUksRUFBRSxHQUFHLEVBQUUsQ0FBQztJQUVoRixNQUFNLFVBQVUsR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsSUFBSSxFQUFFO1FBQzlDLGlCQUFpQixDQUFDLFFBQVEsSUFBYyxFQUFFLEVBQUUsU0FBUyxFQUFFLENBQUMsY0FBYyxDQUFDO0tBQzFFLENBQUMsQ0FBQztJQUVILE1BQU0sV0FBVyxHQUFHLE1BQU0sR0FBRyxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQy9DLE1BQU0sZ0JBQWdCLEdBQUcsdUJBQXVCLENBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ2hFLE1BQU0sZUFBZSxHQUFHLGtCQUFrQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBRXhELE1BQU0sYUFBYSxHQUFHLENBQUMsR0FBRyxVQUFVLEVBQUUsR0FBRyxnQkFBZ0IsRUFBRSxHQUFHLGVBQWUsQ0FBQyxDQUFDO0lBRS9FLE1BQU0sS0FBSyxHQUFHLEVBQUUsU0FBUyxFQUFFLGFBQWEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQztJQUVsRixJQUFJLENBQUMsR0FBRyxFQUFFO1FBQ04sTUFBTSxJQUFJLEtBQUssQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDO0tBQ2pEO0lBRUQsUUFDSUEsdURBQVUsS0FBSyxJQUFFLEtBQUssRUFBRSxLQUFLLGlCQUFlLENBQUMsS0FBSyxnQkFBYyxLQUFLO1FBQ2pFQSw2QkFBQyxHQUFHLG1CQUFhLE1BQU0sRUFBQyxTQUFTLEVBQUMsT0FBTyxHQUFHLENBQ3pDLEVBQ1Q7QUFDTjs7OzsifQ==

package/dist/components/IconButton/IconButton.d.ts

@@ -1,6 +1,6 @@
-import React, { FC, SVGAttributes } from 'react';
+import { ReactSVGComponentType } from '@preply/ds-web-core';
+import { FC } from 'react';
 import { ButtonBaseProps } from '../private/ButtonBase/ButtonBase';
-export declare type ReactSVGComponentType = React.ComponentType<SVGAttributes<SVGElement>>;
 export declare type IconButtonProps = Omit<ButtonBaseProps, 'fullWidth' | 'wrap' | 'isIconButton' | 'children'>;
 export declare type Props = IconButtonProps & {
     assistiveText: string;

package/dist/components/IconButton/IconButton.js

@@ -14,4 +14,4 @@ const IconButton = ({ variant = BUTTON_VARIANT_DEFAULT, size = BUTTON_SIZE_DEFAU
 };
 
 export { IconButton };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbkJ1dHRvbi5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSWNvbkJ1dHRvbi9JY29uQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCVVRUT05fU0laRV9ERUZBVUxULCBCVVRUT05fVkFSSUFOVF9ERUZBVUxUIH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7IHVzZUluc3RydW1lbnQgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgU1ZHQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQnV0dG9uQmFzZSwgQnV0dG9uQmFzZVByb3BzIH0gZnJvbSAnLi4vcHJpdmF0ZS9CdXR0b25CYXNlL0J1dHRvbkJhc2UnO1xuXG5leHBvcnQgdHlwZSBSZWFjdFNWR0NvbXBvbmVudFR5cGUgPSBSZWFjdC5Db21wb25lbnRUeXBlPFNWR0F0dHJpYnV0ZXM8U1ZHRWxlbWVudD4+O1xuXG5jb25zdCBJQ09OQlVUVE9OID0gJ0ljb25CdXR0b24nO1xuXG5leHBvcnQgdHlwZSBJY29uQnV0dG9uUHJvcHMgPSBPbWl0PFxuICAgIEJ1dHRvbkJhc2VQcm9wcyxcbiAgICAnZnVsbFdpZHRoJyB8ICd3cmFwJyB8ICdpc0ljb25CdXR0b24nIHwgJ2NoaWxkcmVuJ1xuPjtcblxuZXhwb3J0IHR5cGUgUHJvcHMgPSBJY29uQnV0dG9uUHJvcHMgJiB7XG4gICAgYXNzaXN0aXZlVGV4dDogc3RyaW5nO1xuICAgIHN2ZzogUmVhY3RTVkdDb21wb25lbnRUeXBlO1xufTtcblxuZXhwb3J0IGNvbnN0IEljb25CdXR0b246IEZDPFByb3BzPiA9ICh7XG4gICAgdmFyaWFudCA9IEJVVFRPTl9WQVJJQU5UX0RFRkFVTFQsXG4gICAgc2l6ZSA9IEJVVFRPTl9TSVpFX0RFRkFVTFQsXG4gICAgdXJsLFxuICAgIGExMXlMYWJlbCxcbiAgICBzdmc6IFN2ZyxcbiAgICAuLi5wcm9wc1xufSkgPT4ge1xuICAgIHVzZUluc3RydW1lbnQoJ3JlbmRlcicsIHtcbiAgICAgICAgY29tcG9uZW50OiBJQ09OQlVUVE9OLFxuICAgICAgICBwcm9wczogeyB2YXJpYW50LCBzaXplLCB1cmwsIGExMXlMYWJlbCB9LFxuICAgIH0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEJ1dHRvbkJhc2VcbiAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgIGlzSWNvbkJ1dHRvblxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgICAgICB1cmw9e3VybH1cbiAgICAgICAgICAgIGExMXlMYWJlbD17YTExeUxhYmVsfVxuICAgICAgICA+XG4gICAgICAgICAgICA8U3ZnIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIGZvY3VzYWJsZT1cImZhbHNlXCIgLz5cbiAgICAgICAgPC9CdXR0b25CYXNlPlxuICAgICk7XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQVFBLE1BQU0sVUFBVSxHQUFHLFlBQVksQ0FBQztNQVluQixVQUFVLEdBQWMsQ0FBQyxFQUNsQyxPQUFPLEdBQUcsc0JBQXNCLEVBQ2hDLElBQUksR0FBRyxtQkFBbUIsRUFDMUIsR0FBRyxFQUNILFNBQVMsRUFDVCxHQUFHLEVBQUUsR0FBRyxFQUNSLEdBQUcsS0FBSyxFQUNYO0lBQ0csYUFBYSxDQUFDLFFBQVEsRUFBRTtRQUNwQixTQUFTLEVBQUUsVUFBVTtRQUNyQixLQUFLLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUU7S0FDM0MsQ0FBQyxDQUFDO0lBRUgsUUFDSUEsNkJBQUMsVUFBVSxvQkFDSCxLQUFLLElBQ1QsWUFBWSxRQUNaLE9BQU8sRUFBRSxPQUFPLEVBQ2hCLElBQUksRUFBRSxJQUFJLEVBQ1YsR0FBRyxFQUFFLEdBQUcsRUFDUixTQUFTLEVBQUUsU0FBUztRQUVwQkEsNkJBQUMsR0FBRyxtQkFBYSxNQUFNLEVBQUMsU0FBUyxFQUFDLE9BQU8sR0FBRyxDQUNuQyxFQUNmO0FBQ047Ozs7In0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbkJ1dHRvbi5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSWNvbkJ1dHRvbi9JY29uQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCVVRUT05fU0laRV9ERUZBVUxULCBCVVRUT05fVkFSSUFOVF9ERUZBVUxUIH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7IFJlYWN0U1ZHQ29tcG9uZW50VHlwZSwgdXNlSW5zdHJ1bWVudCB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEZDIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCdXR0b25CYXNlLCBCdXR0b25CYXNlUHJvcHMgfSBmcm9tICcuLi9wcml2YXRlL0J1dHRvbkJhc2UvQnV0dG9uQmFzZSc7XG5cbmNvbnN0IElDT05CVVRUT04gPSAnSWNvbkJ1dHRvbic7XG5cbmV4cG9ydCB0eXBlIEljb25CdXR0b25Qcm9wcyA9IE9taXQ8XG4gICAgQnV0dG9uQmFzZVByb3BzLFxuICAgICdmdWxsV2lkdGgnIHwgJ3dyYXAnIHwgJ2lzSWNvbkJ1dHRvbicgfCAnY2hpbGRyZW4nXG4+O1xuXG5leHBvcnQgdHlwZSBQcm9wcyA9IEljb25CdXR0b25Qcm9wcyAmIHtcbiAgICBhc3Npc3RpdmVUZXh0OiBzdHJpbmc7XG4gICAgc3ZnOiBSZWFjdFNWR0NvbXBvbmVudFR5cGU7XG59O1xuXG5leHBvcnQgY29uc3QgSWNvbkJ1dHRvbjogRkM8UHJvcHM+ID0gKHtcbiAgICB2YXJpYW50ID0gQlVUVE9OX1ZBUklBTlRfREVGQVVMVCxcbiAgICBzaXplID0gQlVUVE9OX1NJWkVfREVGQVVMVCxcbiAgICB1cmwsXG4gICAgYTExeUxhYmVsLFxuICAgIHN2ZzogU3ZnLFxuICAgIC4uLnByb3BzXG59KSA9PiB7XG4gICAgdXNlSW5zdHJ1bWVudCgncmVuZGVyJywge1xuICAgICAgICBjb21wb25lbnQ6IElDT05CVVRUT04sXG4gICAgICAgIHByb3BzOiB7IHZhcmlhbnQsIHNpemUsIHVybCwgYTExeUxhYmVsIH0sXG4gICAgfSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8QnV0dG9uQmFzZVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgaXNJY29uQnV0dG9uXG4gICAgICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgICAgICAgIHVybD17dXJsfVxuICAgICAgICAgICAgYTExeUxhYmVsPXthMTF5TGFiZWx9XG4gICAgICAgID5cbiAgICAgICAgICAgIDxTdmcgYXJpYS1oaWRkZW49XCJ0cnVlXCIgZm9jdXNhYmxlPVwiZmFsc2VcIiAvPlxuICAgICAgICA8L0J1dHRvbkJhc2U+XG4gICAgKTtcbn07XG4iXSwibmFtZXMiOlsiUmVhY3QiXSwibWFwcGluZ3MiOiI7Ozs7O0FBTUEsTUFBTSxVQUFVLEdBQUcsWUFBWSxDQUFDO01BWW5CLFVBQVUsR0FBYyxDQUFDLEVBQ2xDLE9BQU8sR0FBRyxzQkFBc0IsRUFDaEMsSUFBSSxHQUFHLG1CQUFtQixFQUMxQixHQUFHLEVBQ0gsU0FBUyxFQUNULEdBQUcsRUFBRSxHQUFHLEVBQ1IsR0FBRyxLQUFLLEVBQ1g7SUFDRyxhQUFhLENBQUMsUUFBUSxFQUFFO1FBQ3BCLFNBQVMsRUFBRSxVQUFVO1FBQ3JCLEtBQUssRUFBRSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRTtLQUMzQyxDQUFDLENBQUM7SUFFSCxRQUNJQSw2QkFBQyxVQUFVLG9CQUNILEtBQUssSUFDVCxZQUFZLFFBQ1osT0FBTyxFQUFFLE9BQU8sRUFDaEIsSUFBSSxFQUFFLElBQUksRUFDVixHQUFHLEVBQUUsR0FBRyxFQUNSLFNBQVMsRUFBRSxTQUFTO1FBRXBCQSw2QkFBQyxHQUFHLG1CQUFhLE1BQU0sRUFBQyxTQUFTLEVBQUMsT0FBTyxHQUFHLENBQ25DLEVBQ2Y7QUFDTjs7OzsifQ==

package/dist/components/LayoutFlexItem/LayoutFlexItem.d.ts

@@ -5,6 +5,7 @@ export interface Props {
     stretch?: Responsive<boolean>;
     tag?: LayoutTag;
     hide?: Responsive<boolean>;
+    relative?: Responsive<boolean>;
     dataset?: Dataset;
     children?: ReactNode;
 }

package/dist/components/LayoutFlexItem/LayoutFlexItem.js

@@ -1,18 +1,24 @@
 import { LAYOUT_TAG_DEFAULT } from '@preply/ds-core';
-import { moduleClassNames, booleanClassNames, useAlignSelfClassNames, useLayoutHideClassnames, getDatasetProps } from '@preply/ds-web-core';
+import { moduleClassNames, booleanClassNames, useAlignSelfClassNames, useLayoutHideClassnames, useLayoutRelativeClassnames, getDatasetProps } from '@preply/ds-web-core';
 import React__default from 'react';
 import styles from './style/index.module.less.js';
 
 const LAYOUT_FLEX_ITEM = 'LayoutFlexItem';
-const LayoutFlexItem = ({ children, alignSelf, stretch = false, tag, hide, dataset, }) => {
+const LayoutFlexItem = ({ children, alignSelf, stretch = false, tag, hide, relative, dataset, }) => {
     const classNames = moduleClassNames(styles, LAYOUT_FLEX_ITEM, booleanClassNames('stretch', 'no-stretch', stretch));
     const alignSelfClassNames = useAlignSelfClassNames(alignSelf);
     const hideClassNames = useLayoutHideClassnames(hide);
-    const allClassNames = [...classNames, ...alignSelfClassNames, ...hideClassNames];
+    const relativeClassNames = useLayoutRelativeClassnames(relative);
+    const allClassNames = [
+        ...classNames,
+        ...alignSelfClassNames,
+        ...hideClassNames,
+        ...relativeClassNames,
+    ];
     const Tag = tag !== null && tag !== void 0 ? tag : LAYOUT_TAG_DEFAULT;
     const props = { className: allClassNames.join(' '), ...getDatasetProps(dataset) };
     return React__default.createElement(Tag, Object.assign({}, props), children);
 };
 
 export { LayoutFlexItem };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGF5b3V0RmxleEl0ZW0uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xheW91dEZsZXhJdGVtL0xheW91dEZsZXhJdGVtLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIERhdGFzZXQsXG4gICAgTEFZT1VUX1RBR19ERUZBVUxULFxuICAgIExheW91dEFsaWduU2VsZixcbiAgICBMYXlvdXRUYWcsXG4gICAgUmVzcG9uc2l2ZSxcbn0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7XG4gICAgYm9vbGVhbkNsYXNzTmFtZXMsXG4gICAgZ2V0RGF0YXNldFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgdXNlQWxpZ25TZWxmQ2xhc3NOYW1lcyxcbiAgICB1c2VMYXlvdXRIaWRlQ2xhc3NuYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgYWxpZ25TZWxmPzogUmVzcG9uc2l2ZTxMYXlvdXRBbGlnblNlbGY+O1xuICAgIHN0cmV0Y2g/OiBSZXNwb25zaXZlPGJvb2xlYW4+O1xuICAgIHRhZz86IExheW91dFRhZztcbiAgICBoaWRlPzogUmVzcG9uc2l2ZTxib29sZWFuPjtcbiAgICBkYXRhc2V0PzogRGF0YXNldDtcbiAgICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbn1cblxuY29uc3QgTEFZT1VUX0ZMRVhfSVRFTSA9ICdMYXlvdXRGbGV4SXRlbSc7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXRGbGV4SXRlbTogRkM8UHJvcHM+ID0gKHtcbiAgICBjaGlsZHJlbixcbiAgICBhbGlnblNlbGYsXG4gICAgc3RyZXRjaCA9IGZhbHNlLFxuICAgIHRhZyxcbiAgICBoaWRlLFxuICAgIGRhdGFzZXQsXG59KSA9PiB7XG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IG1vZHVsZUNsYXNzTmFtZXMoXG4gICAgICAgIHN0eWxlcyxcbiAgICAgICAgTEFZT1VUX0ZMRVhfSVRFTSxcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoJ3N0cmV0Y2gnLCAnbm8tc3RyZXRjaCcsIHN0cmV0Y2gpLFxuICAgICk7XG5cbiAgICBjb25zdCBhbGlnblNlbGZDbGFzc05hbWVzID0gdXNlQWxpZ25TZWxmQ2xhc3NOYW1lcyhhbGlnblNlbGYpO1xuICAgIGNvbnN0IGhpZGVDbGFzc05hbWVzID0gdXNlTGF5b3V0SGlkZUNsYXNzbmFtZXMoaGlkZSk7XG4gICAgY29uc3QgYWxsQ2xhc3NOYW1lcyA9IFsuLi5jbGFzc05hbWVzLCAuLi5hbGlnblNlbGZDbGFzc05hbWVzLCAuLi5oaWRlQ2xhc3NOYW1lc107XG4gICAgY29uc3QgVGFnID0gdGFnID8/IExBWU9VVF9UQUdfREVGQVVMVDtcbiAgICBjb25zdCBwcm9wcyA9IHsgY2xhc3NOYW1lOiBhbGxDbGFzc05hbWVzLmpvaW4oJyAnKSwgLi4uZ2V0RGF0YXNldFByb3BzKGRhdGFzZXQpIH07XG5cbiAgICByZXR1cm4gPFRhZyB7Li4ucHJvcHN9PntjaGlsZHJlbn08L1RhZz47XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQTJCQSxNQUFNLGdCQUFnQixHQUFHLGdCQUFnQixDQUFDO01BRTdCLGNBQWMsR0FBYyxDQUFDLEVBQ3RDLFFBQVEsRUFDUixTQUFTLEVBQ1QsT0FBTyxHQUFHLEtBQUssRUFDZixHQUFHLEVBQ0gsSUFBSSxFQUNKLE9BQU8sR0FDVjtJQUNHLE1BQU0sVUFBVSxHQUFHLGdCQUFnQixDQUMvQixNQUFNLEVBQ04sZ0JBQWdCLEVBQ2hCLGlCQUFpQixDQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsT0FBTyxDQUFDLENBQ3RELENBQUM7SUFFRixNQUFNLG1CQUFtQixHQUFHLHNCQUFzQixDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzlELE1BQU0sY0FBYyxHQUFHLHVCQUF1QixDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3JELE1BQU0sYUFBYSxHQUFHLENBQUMsR0FBRyxVQUFVLEVBQUUsR0FBRyxtQkFBbUIsRUFBRSxHQUFHLGNBQWMsQ0FBQyxDQUFDO0lBQ2pGLE1BQU0sR0FBRyxHQUFHLEdBQUcsYUFBSCxHQUFHLGNBQUgsR0FBRyxHQUFJLGtCQUFrQixDQUFDO0lBQ3RDLE1BQU0sS0FBSyxHQUFHLEVBQUUsU0FBUyxFQUFFLGFBQWEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQztJQUVsRixPQUFPQSw2QkFBQyxHQUFHLG9CQUFLLEtBQUssR0FBRyxRQUFRLENBQU8sQ0FBQztBQUM1Qzs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGF5b3V0RmxleEl0ZW0uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xheW91dEZsZXhJdGVtL0xheW91dEZsZXhJdGVtLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIERhdGFzZXQsXG4gICAgTEFZT1VUX1RBR19ERUZBVUxULFxuICAgIExheW91dEFsaWduU2VsZixcbiAgICBMYXlvdXRUYWcsXG4gICAgUmVzcG9uc2l2ZSxcbn0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7XG4gICAgYm9vbGVhbkNsYXNzTmFtZXMsXG4gICAgZ2V0RGF0YXNldFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgdXNlQWxpZ25TZWxmQ2xhc3NOYW1lcyxcbiAgICB1c2VMYXlvdXRIaWRlQ2xhc3NuYW1lcyxcbiAgICB1c2VMYXlvdXRSZWxhdGl2ZUNsYXNzbmFtZXMsXG59IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEZDLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUHJvcHMge1xuICAgIGFsaWduU2VsZj86IFJlc3BvbnNpdmU8TGF5b3V0QWxpZ25TZWxmPjtcbiAgICBzdHJldGNoPzogUmVzcG9uc2l2ZTxib29sZWFuPjtcbiAgICB0YWc/OiBMYXlvdXRUYWc7XG4gICAgaGlkZT86IFJlc3BvbnNpdmU8Ym9vbGVhbj47XG4gICAgcmVsYXRpdmU/OiBSZXNwb25zaXZlPGJvb2xlYW4+O1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xuICAgIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBMQVlPVVRfRkxFWF9JVEVNID0gJ0xheW91dEZsZXhJdGVtJztcblxuZXhwb3J0IGNvbnN0IExheW91dEZsZXhJdGVtOiBGQzxQcm9wcz4gPSAoe1xuICAgIGNoaWxkcmVuLFxuICAgIGFsaWduU2VsZixcbiAgICBzdHJldGNoID0gZmFsc2UsXG4gICAgdGFnLFxuICAgIGhpZGUsXG4gICAgcmVsYXRpdmUsXG4gICAgZGF0YXNldCxcbn0pID0+IHtcbiAgICBjb25zdCBjbGFzc05hbWVzID0gbW9kdWxlQ2xhc3NOYW1lcyhcbiAgICAgICAgc3R5bGVzLFxuICAgICAgICBMQVlPVVRfRkxFWF9JVEVNLFxuICAgICAgICBib29sZWFuQ2xhc3NOYW1lcygnc3RyZXRjaCcsICduby1zdHJldGNoJywgc3RyZXRjaCksXG4gICAgKTtcblxuICAgIGNvbnN0IGFsaWduU2VsZkNsYXNzTmFtZXMgPSB1c2VBbGlnblNlbGZDbGFzc05hbWVzKGFsaWduU2VsZik7XG4gICAgY29uc3QgaGlkZUNsYXNzTmFtZXMgPSB1c2VMYXlvdXRIaWRlQ2xhc3NuYW1lcyhoaWRlKTtcbiAgICBjb25zdCByZWxhdGl2ZUNsYXNzTmFtZXMgPSB1c2VMYXlvdXRSZWxhdGl2ZUNsYXNzbmFtZXMocmVsYXRpdmUpO1xuICAgIGNvbnN0IGFsbENsYXNzTmFtZXMgPSBbXG4gICAgICAgIC4uLmNsYXNzTmFtZXMsXG4gICAgICAgIC4uLmFsaWduU2VsZkNsYXNzTmFtZXMsXG4gICAgICAgIC4uLmhpZGVDbGFzc05hbWVzLFxuICAgICAgICAuLi5yZWxhdGl2ZUNsYXNzTmFtZXMsXG4gICAgXTtcbiAgICBjb25zdCBUYWcgPSB0YWcgPz8gTEFZT1VUX1RBR19ERUZBVUxUO1xuICAgIGNvbnN0IHByb3BzID0geyBjbGFzc05hbWU6IGFsbENsYXNzTmFtZXMuam9pbignICcpLCAuLi5nZXREYXRhc2V0UHJvcHMoZGF0YXNldCkgfTtcblxuICAgIHJldHVybiA8VGFnIHsuLi5wcm9wc30+e2NoaWxkcmVufTwvVGFnPjtcbn07XG4iXSwibmFtZXMiOlsiUmVhY3QiXSwibWFwcGluZ3MiOiI7Ozs7O0FBNkJBLE1BQU0sZ0JBQWdCLEdBQUcsZ0JBQWdCLENBQUM7TUFFN0IsY0FBYyxHQUFjLENBQUMsRUFDdEMsUUFBUSxFQUNSLFNBQVMsRUFDVCxPQUFPLEdBQUcsS0FBSyxFQUNmLEdBQUcsRUFDSCxJQUFJLEVBQ0osUUFBUSxFQUNSLE9BQU8sR0FDVjtJQUNHLE1BQU0sVUFBVSxHQUFHLGdCQUFnQixDQUMvQixNQUFNLEVBQ04sZ0JBQWdCLEVBQ2hCLGlCQUFpQixDQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsT0FBTyxDQUFDLENBQ3RELENBQUM7SUFFRixNQUFNLG1CQUFtQixHQUFHLHNCQUFzQixDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzlELE1BQU0sY0FBYyxHQUFHLHVCQUF1QixDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3JELE1BQU0sa0JBQWtCLEdBQUcsMkJBQTJCLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDakUsTUFBTSxhQUFhLEdBQUc7UUFDbEIsR0FBRyxVQUFVO1FBQ2IsR0FBRyxtQkFBbUI7UUFDdEIsR0FBRyxjQUFjO1FBQ2pCLEdBQUcsa0JBQWtCO0tBQ3hCLENBQUM7SUFDRixNQUFNLEdBQUcsR0FBRyxHQUFHLGFBQUgsR0FBRyxjQUFILEdBQUcsR0FBSSxrQkFBa0IsQ0FBQztJQUN0QyxNQUFNLEtBQUssR0FBRyxFQUFFLFNBQVMsRUFBRSxhQUFhLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLEdBQUcsZUFBZSxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUM7SUFFbEYsT0FBT0EsNkJBQUMsR0FBRyxvQkFBSyxLQUFLLEdBQUcsUUFBUSxDQUFPLENBQUM7QUFDNUM7Ozs7In0=

package/dist/components/LayoutGridItem/LayoutGridItem.d.ts

@@ -4,6 +4,7 @@ export interface Props {
     alignSelf?: Responsive<LayoutAlignSelf>;
     tag?: LayoutTag;
     hide?: Responsive<boolean>;
+    relative?: Responsive<boolean>;
     dataset?: Dataset;
     children?: ReactNode;
 }

package/dist/components/LayoutGridItem/LayoutGridItem.js

@@ -1,18 +1,24 @@
 import { LAYOUT_TAG_DEFAULT } from '@preply/ds-core';
-import { moduleClassNames, useAlignSelfClassNames, useLayoutHideClassnames, getDatasetProps } from '@preply/ds-web-core';
+import { moduleClassNames, useAlignSelfClassNames, useLayoutHideClassnames, useLayoutRelativeClassnames, getDatasetProps } from '@preply/ds-web-core';
 import React__default from 'react';
 import styles from './style/index.module.less.js';
 
 const LAYOUT_GRID_ITEM = 'LayoutGridItem';
-const LayoutGridItem = ({ children, alignSelf, tag, hide, dataset }) => {
+const LayoutGridItem = ({ children, alignSelf, tag, hide, relative, dataset, }) => {
     const classNames = moduleClassNames(styles, LAYOUT_GRID_ITEM, []);
     const alignSelfClassNames = useAlignSelfClassNames(alignSelf);
     const hideClassNames = useLayoutHideClassnames(hide);
-    const allClassNames = [...classNames, ...alignSelfClassNames, ...hideClassNames];
+    const relativeClassNames = useLayoutRelativeClassnames(relative);
+    const allClassNames = [
+        ...classNames,
+        ...alignSelfClassNames,
+        ...hideClassNames,
+        ...relativeClassNames,
+    ];
     const Tag = tag !== null && tag !== void 0 ? tag : LAYOUT_TAG_DEFAULT;
     const props = { className: allClassNames.join(' '), ...getDatasetProps(dataset) };
     return React__default.createElement(Tag, Object.assign({}, props), children);
 };
 
 export { LayoutGridItem };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGF5b3V0R3JpZEl0ZW0uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xheW91dEdyaWRJdGVtL0xheW91dEdyaWRJdGVtLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIERhdGFzZXQsXG4gICAgTEFZT1VUX1RBR19ERUZBVUxULFxuICAgIExheW91dEFsaWduU2VsZixcbiAgICBMYXlvdXRUYWcsXG4gICAgUmVzcG9uc2l2ZSxcbn0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7XG4gICAgZ2V0RGF0YXNldFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgdXNlQWxpZ25TZWxmQ2xhc3NOYW1lcyxcbiAgICB1c2VMYXlvdXRIaWRlQ2xhc3NuYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgYWxpZ25TZWxmPzogUmVzcG9uc2l2ZTxMYXlvdXRBbGlnblNlbGY+O1xuICAgIHRhZz86IExheW91dFRhZztcbiAgICBoaWRlPzogUmVzcG9uc2l2ZTxib29sZWFuPjtcbiAgICBkYXRhc2V0PzogRGF0YXNldDtcbiAgICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbn1cbmNvbnN0IExBWU9VVF9HUklEX0lURU0gPSAnTGF5b3V0R3JpZEl0ZW0nO1xuZXhwb3J0IGNvbnN0IExheW91dEdyaWRJdGVtOiBGQzxQcm9wcz4gPSAoeyBjaGlsZHJlbiwgYWxpZ25TZWxmLCB0YWcsIGhpZGUsIGRhdGFzZXQgfSkgPT4ge1xuICAgIGNvbnN0IGNsYXNzTmFtZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgTEFZT1VUX0dSSURfSVRFTSwgW10pO1xuXG4gICAgY29uc3QgYWxpZ25TZWxmQ2xhc3NOYW1lcyA9IHVzZUFsaWduU2VsZkNsYXNzTmFtZXMoYWxpZ25TZWxmKTtcbiAgICBjb25zdCBoaWRlQ2xhc3NOYW1lcyA9IHVzZUxheW91dEhpZGVDbGFzc25hbWVzKGhpZGUpO1xuICAgIGNvbnN0IGFsbENsYXNzTmFtZXMgPSBbLi4uY2xhc3NOYW1lcywgLi4uYWxpZ25TZWxmQ2xhc3NOYW1lcywgLi4uaGlkZUNsYXNzTmFtZXNdO1xuICAgIGNvbnN0IFRhZyA9IHRhZyA/PyBMQVlPVVRfVEFHX0RFRkFVTFQ7XG4gICAgY29uc3QgcHJvcHMgPSB7IGNsYXNzTmFtZTogYWxsQ2xhc3NOYW1lcy5qb2luKCcgJyksIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSB9O1xuXG4gICAgcmV0dXJuIDxUYWcgey4uLnByb3BzfT57Y2hpbGRyZW59PC9UYWc+O1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7QUF3QkEsTUFBTSxnQkFBZ0IsR0FBRyxnQkFBZ0IsQ0FBQztNQUM3QixjQUFjLEdBQWMsQ0FBQyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUU7SUFDakYsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLGdCQUFnQixFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRWxFLE1BQU0sbUJBQW1CLEdBQUcsc0JBQXNCLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDOUQsTUFBTSxjQUFjLEdBQUcsdUJBQXVCLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDckQsTUFBTSxhQUFhLEdBQUcsQ0FBQyxHQUFHLFVBQVUsRUFBRSxHQUFHLG1CQUFtQixFQUFFLEdBQUcsY0FBYyxDQUFDLENBQUM7SUFDakYsTUFBTSxHQUFHLEdBQUcsR0FBRyxhQUFILEdBQUcsY0FBSCxHQUFHLEdBQUksa0JBQWtCLENBQUM7SUFDdEMsTUFBTSxLQUFLLEdBQUcsRUFBRSxTQUFTLEVBQUUsYUFBYSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxHQUFHLGVBQWUsQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDO0lBRWxGLE9BQU9BLDZCQUFDLEdBQUcsb0JBQUssS0FBSyxHQUFHLFFBQVEsQ0FBTyxDQUFDO0FBQzVDOzs7OyJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGF5b3V0R3JpZEl0ZW0uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xheW91dEdyaWRJdGVtL0xheW91dEdyaWRJdGVtLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIERhdGFzZXQsXG4gICAgTEFZT1VUX1RBR19ERUZBVUxULFxuICAgIExheW91dEFsaWduU2VsZixcbiAgICBMYXlvdXRUYWcsXG4gICAgUmVzcG9uc2l2ZSxcbn0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7XG4gICAgZ2V0RGF0YXNldFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgdXNlQWxpZ25TZWxmQ2xhc3NOYW1lcyxcbiAgICB1c2VMYXlvdXRIaWRlQ2xhc3NuYW1lcyxcbiAgICB1c2VMYXlvdXRSZWxhdGl2ZUNsYXNzbmFtZXMsXG59IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEZDLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUHJvcHMge1xuICAgIGFsaWduU2VsZj86IFJlc3BvbnNpdmU8TGF5b3V0QWxpZ25TZWxmPjtcbiAgICB0YWc/OiBMYXlvdXRUYWc7XG4gICAgaGlkZT86IFJlc3BvbnNpdmU8Ym9vbGVhbj47XG4gICAgcmVsYXRpdmU/OiBSZXNwb25zaXZlPGJvb2xlYW4+O1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xuICAgIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuY29uc3QgTEFZT1VUX0dSSURfSVRFTSA9ICdMYXlvdXRHcmlkSXRlbSc7XG5leHBvcnQgY29uc3QgTGF5b3V0R3JpZEl0ZW06IEZDPFByb3BzPiA9ICh7XG4gICAgY2hpbGRyZW4sXG4gICAgYWxpZ25TZWxmLFxuICAgIHRhZyxcbiAgICBoaWRlLFxuICAgIHJlbGF0aXZlLFxuICAgIGRhdGFzZXQsXG59KSA9PiB7XG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IG1vZHVsZUNsYXNzTmFtZXMoc3R5bGVzLCBMQVlPVVRfR1JJRF9JVEVNLCBbXSk7XG5cbiAgICBjb25zdCBhbGlnblNlbGZDbGFzc05hbWVzID0gdXNlQWxpZ25TZWxmQ2xhc3NOYW1lcyhhbGlnblNlbGYpO1xuICAgIGNvbnN0IGhpZGVDbGFzc05hbWVzID0gdXNlTGF5b3V0SGlkZUNsYXNzbmFtZXMoaGlkZSk7XG4gICAgY29uc3QgcmVsYXRpdmVDbGFzc05hbWVzID0gdXNlTGF5b3V0UmVsYXRpdmVDbGFzc25hbWVzKHJlbGF0aXZlKTtcbiAgICBjb25zdCBhbGxDbGFzc05hbWVzID0gW1xuICAgICAgICAuLi5jbGFzc05hbWVzLFxuICAgICAgICAuLi5hbGlnblNlbGZDbGFzc05hbWVzLFxuICAgICAgICAuLi5oaWRlQ2xhc3NOYW1lcyxcbiAgICAgICAgLi4ucmVsYXRpdmVDbGFzc05hbWVzLFxuICAgIF07XG4gICAgY29uc3QgVGFnID0gdGFnID8/IExBWU9VVF9UQUdfREVGQVVMVDtcbiAgICBjb25zdCBwcm9wcyA9IHsgY2xhc3NOYW1lOiBhbGxDbGFzc05hbWVzLmpvaW4oJyAnKSwgLi4uZ2V0RGF0YXNldFByb3BzKGRhdGFzZXQpIH07XG5cbiAgICByZXR1cm4gPFRhZyB7Li4ucHJvcHN9PntjaGlsZHJlbn08L1RhZz47XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQTBCQSxNQUFNLGdCQUFnQixHQUFHLGdCQUFnQixDQUFDO01BQzdCLGNBQWMsR0FBYyxDQUFDLEVBQ3RDLFFBQVEsRUFDUixTQUFTLEVBQ1QsR0FBRyxFQUNILElBQUksRUFDSixRQUFRLEVBQ1IsT0FBTyxHQUNWO0lBQ0csTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLGdCQUFnQixFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRWxFLE1BQU0sbUJBQW1CLEdBQUcsc0JBQXNCLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDOUQsTUFBTSxjQUFjLEdBQUcsdUJBQXVCLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDckQsTUFBTSxrQkFBa0IsR0FBRywyQkFBMkIsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUNqRSxNQUFNLGFBQWEsR0FBRztRQUNsQixHQUFHLFVBQVU7UUFDYixHQUFHLG1CQUFtQjtRQUN0QixHQUFHLGNBQWM7UUFDakIsR0FBRyxrQkFBa0I7S0FDeEIsQ0FBQztJQUNGLE1BQU0sR0FBRyxHQUFHLEdBQUcsYUFBSCxHQUFHLGNBQUgsR0FBRyxHQUFJLGtCQUFrQixDQUFDO0lBQ3RDLE1BQU0sS0FBSyxHQUFHLEVBQUUsU0FBUyxFQUFFLGFBQWEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQztJQUVsRixPQUFPQSw2QkFBQyxHQUFHLG9CQUFLLEtBQUssR0FBRyxRQUFRLENBQU8sQ0FBQztBQUM1Qzs7OzsifQ==

package/dist/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import type { Dataset } from '@preply/ds-core';
-import { FC, MouseEventHandler, ReactNode } from 'react';
+import { FC, MouseEventHandler, ReactElement, ReactNode } from 'react';
 export interface Props {
     href?: string;
     url?: string;
@@ -7,6 +7,7 @@ export interface Props {
     nofollow?: boolean;
     assistiveText?: string;
     onClick?: MouseEventHandler;
+    as?: ReactElement;
     dataset?: Dataset;
     children?: ReactNode;
 }

package/dist/components/Link/Link.js

@@ -1,9 +1,9 @@
 import { useInstrument, useStyleExtract, useHostname, moduleClassNames, getExternalUrlProps, getDatasetProps } from '@preply/ds-web-core';
-import React__default from 'react';
+import React__default, { cloneElement } from 'react';
 import styles from './style/index.module.less.js';
 
 const LINK = 'Link';
-const Link = ({ href, url, opensInNewTab, nofollow, assistiveText, onClick, dataset, children, }) => {
+const Link = ({ href, url, opensInNewTab, nofollow, assistiveText, onClick, as, dataset, children, }) => {
     useInstrument('render', {
         component: LINK,
         props: { url },
@@ -26,10 +26,12 @@ const Link = ({ href, url, opensInNewTab, nofollow, assistiveText, onClick, data
         onClick: handleClick,
         className: classNames.join(' '),
         ...getDatasetProps(dataset),
-        ...externalUrlProps,
     };
-    return React__default.createElement("a", Object.assign({}, props), children);
+    if (as) {
+        return cloneElement(as, { ...props }, children);
+    }
+    return (React__default.createElement("a", Object.assign({}, props, externalUrlProps), children));
 };
 
 export { Link };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGluay5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IERhdGFzZXQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBnZXREYXRhc2V0UHJvcHMsXG4gICAgZ2V0RXh0ZXJuYWxVcmxQcm9wcyxcbiAgICBtb2R1bGVDbGFzc05hbWVzLFxuICAgIHVzZUhvc3RuYW1lLFxuICAgIHVzZUluc3RydW1lbnQsXG4gICAgdXNlU3R5bGVFeHRyYWN0LFxufSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgTW91c2VFdmVudCwgTW91c2VFdmVudEhhbmRsZXIsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgaHJlZj86IHN0cmluZztcbiAgICB1cmw/OiBzdHJpbmc7XG4gICAgb3BlbnNJbk5ld1RhYj86IGJvb2xlYW47XG4gICAgbm9mb2xsb3c/OiBib29sZWFuO1xuICAgIGFzc2lzdGl2ZVRleHQ/OiBzdHJpbmc7XG4gICAgb25DbGljaz86IE1vdXNlRXZlbnRIYW5kbGVyO1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xuICAgIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBMSU5LID0gJ0xpbmsnO1xuXG5leHBvcnQgY29uc3QgTGluazogRkM8UHJvcHM+ID0gKHtcbiAgICBocmVmLFxuICAgIHVybCxcbiAgICBvcGVuc0luTmV3VGFiLFxuICAgIG5vZm9sbG93LFxuICAgIGFzc2lzdGl2ZVRleHQsXG4gICAgb25DbGljayxcbiAgICBkYXRhc2V0LFxuICAgIGNoaWxkcmVuLFxufSkgPT4ge1xuICAgIHVzZUluc3RydW1lbnQoJ3JlbmRlcicsIHtcbiAgICAgICAgY29tcG9uZW50OiBMSU5LLFxuICAgICAgICBwcm9wczogeyB1cmwgfSxcbiAgICB9KTtcblxuICAgIHVzZVN0eWxlRXh0cmFjdChzdHlsZXMpO1xuXG4gICAgY29uc3QgaG9zdG5hbWUgPSB1c2VIb3N0bmFtZSgpO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICAgICAgaWYgKG9uQ2xpY2spIHtcbiAgICAgICAgICAgIG9uQ2xpY2soZXZlbnQpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIGNvbnN0IGNsYXNzTmFtZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgTElOSywgW10pO1xuXG4gICAgY29uc3QgYWN0dWFsSHJlZiA9IGhyZWYgfHwgdXJsO1xuXG4gICAgY29uc3QgZXh0ZXJuYWxVcmxQcm9wcyA9IGFjdHVhbEhyZWZcbiAgICAgICAgPyBnZXRFeHRlcm5hbFVybFByb3BzKGhvc3RuYW1lLCBhY3R1YWxIcmVmLCBvcGVuc0luTmV3VGFiLCBub2ZvbGxvdylcbiAgICAgICAgOiB7fTtcblxuICAgIGNvbnN0IHByb3BzID0ge1xuICAgICAgICBocmVmOiBhY3R1YWxIcmVmLFxuICAgICAgICAnYXJpYS1sYWJlbCc6IGFzc2lzdGl2ZVRleHQsXG4gICAgICAgIG9uQ2xpY2s6IGhhbmRsZUNsaWNrLFxuICAgICAgICBjbGFzc05hbWU6IGNsYXNzTmFtZXMuam9pbignICcpLFxuICAgICAgICAuLi5nZXREYXRhc2V0UHJvcHMoZGF0YXNldCksXG4gICAgICAgIC4uLmV4dGVybmFsVXJsUHJvcHMsXG4gICAgfTtcblxuICAgIHJldHVybiA8YSB7Li4ucHJvcHN9PntjaGlsZHJlbn08L2E+O1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7OztBQXdCQSxNQUFNLElBQUksR0FBRyxNQUFNLENBQUM7TUFFUCxJQUFJLEdBQWMsQ0FBQyxFQUM1QixJQUFJLEVBQ0osR0FBRyxFQUNILGFBQWEsRUFDYixRQUFRLEVBQ1IsYUFBYSxFQUNiLE9BQU8sRUFDUCxPQUFPLEVBQ1AsUUFBUSxHQUNYO0lBQ0csYUFBYSxDQUFDLFFBQVEsRUFBRTtRQUNwQixTQUFTLEVBQUUsSUFBSTtRQUNmLEtBQUssRUFBRSxFQUFFLEdBQUcsRUFBRTtLQUNqQixDQUFDLENBQUM7SUFFSCxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxRQUFRLEdBQUcsV0FBVyxFQUFFLENBQUM7SUFFL0IsTUFBTSxXQUFXLEdBQUcsQ0FBQyxLQUFpQjtRQUNsQyxJQUFJLE9BQU8sRUFBRTtZQUNULE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNsQjtLQUNKLENBQUM7SUFFRixNQUFNLFVBQVUsR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRXRELE1BQU0sVUFBVSxHQUFHLElBQUksSUFBSSxHQUFHLENBQUM7SUFFL0IsTUFBTSxnQkFBZ0IsR0FBRyxVQUFVO1VBQzdCLG1CQUFtQixDQUFDLFFBQVEsRUFBRSxVQUFVLEVBQUUsYUFBYSxFQUFFLFFBQVEsQ0FBQztVQUNsRSxFQUFFLENBQUM7SUFFVCxNQUFNLEtBQUssR0FBRztRQUNWLElBQUksRUFBRSxVQUFVO1FBQ2hCLFlBQVksRUFBRSxhQUFhO1FBQzNCLE9BQU8sRUFBRSxXQUFXO1FBQ3BCLFNBQVMsRUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUMvQixHQUFHLGVBQWUsQ0FBQyxPQUFPLENBQUM7UUFDM0IsR0FBRyxnQkFBZ0I7S0FDdEIsQ0FBQztJQUVGLE9BQU9BLG9EQUFPLEtBQUssR0FBRyxRQUFRLENBQUssQ0FBQztBQUN4Qzs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGluay5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTGluay9MaW5rLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IERhdGFzZXQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBnZXREYXRhc2V0UHJvcHMsXG4gICAgZ2V0RXh0ZXJuYWxVcmxQcm9wcyxcbiAgICBtb2R1bGVDbGFzc05hbWVzLFxuICAgIHVzZUhvc3RuYW1lLFxuICAgIHVzZUluc3RydW1lbnQsXG4gICAgdXNlU3R5bGVFeHRyYWN0LFxufSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwge1xuICAgIEZDLFxuICAgIE1vdXNlRXZlbnQsXG4gICAgTW91c2VFdmVudEhhbmRsZXIsXG4gICAgUmVhY3RFbGVtZW50LFxuICAgIFJlYWN0Tm9kZSxcbiAgICBjbG9uZUVsZW1lbnQsXG59IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgaHJlZj86IHN0cmluZztcbiAgICB1cmw/OiBzdHJpbmc7XG4gICAgb3BlbnNJbk5ld1RhYj86IGJvb2xlYW47XG4gICAgbm9mb2xsb3c/OiBib29sZWFuO1xuICAgIGFzc2lzdGl2ZVRleHQ/OiBzdHJpbmc7XG4gICAgb25DbGljaz86IE1vdXNlRXZlbnRIYW5kbGVyO1xuICAgIGFzPzogUmVhY3RFbGVtZW50O1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xuICAgIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBMSU5LID0gJ0xpbmsnO1xuXG5leHBvcnQgY29uc3QgTGluazogRkM8UHJvcHM+ID0gKHtcbiAgICBocmVmLFxuICAgIHVybCxcbiAgICBvcGVuc0luTmV3VGFiLFxuICAgIG5vZm9sbG93LFxuICAgIGFzc2lzdGl2ZVRleHQsXG4gICAgb25DbGljayxcbiAgICBhcyxcbiAgICBkYXRhc2V0LFxuICAgIGNoaWxkcmVuLFxufSkgPT4ge1xuICAgIHVzZUluc3RydW1lbnQoJ3JlbmRlcicsIHtcbiAgICAgICAgY29tcG9uZW50OiBMSU5LLFxuICAgICAgICBwcm9wczogeyB1cmwgfSxcbiAgICB9KTtcblxuICAgIHVzZVN0eWxlRXh0cmFjdChzdHlsZXMpO1xuXG4gICAgY29uc3QgaG9zdG5hbWUgPSB1c2VIb3N0bmFtZSgpO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICAgICAgaWYgKG9uQ2xpY2spIHtcbiAgICAgICAgICAgIG9uQ2xpY2soZXZlbnQpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIGNvbnN0IGNsYXNzTmFtZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgTElOSywgW10pO1xuXG4gICAgY29uc3QgYWN0dWFsSHJlZiA9IGhyZWYgfHwgdXJsO1xuXG4gICAgY29uc3QgZXh0ZXJuYWxVcmxQcm9wcyA9IGFjdHVhbEhyZWZcbiAgICAgICAgPyBnZXRFeHRlcm5hbFVybFByb3BzKGhvc3RuYW1lLCBhY3R1YWxIcmVmLCBvcGVuc0luTmV3VGFiLCBub2ZvbGxvdylcbiAgICAgICAgOiB7fTtcblxuICAgIGNvbnN0IHByb3BzID0ge1xuICAgICAgICBocmVmOiBhY3R1YWxIcmVmLFxuICAgICAgICAnYXJpYS1sYWJlbCc6IGFzc2lzdGl2ZVRleHQsXG4gICAgICAgIG9uQ2xpY2s6IGhhbmRsZUNsaWNrLFxuICAgICAgICBjbGFzc05hbWU6IGNsYXNzTmFtZXMuam9pbignICcpLFxuICAgICAgICAuLi5nZXREYXRhc2V0UHJvcHMoZGF0YXNldCksXG4gICAgfTtcblxuICAgIGlmIChhcykge1xuICAgICAgICByZXR1cm4gY2xvbmVFbGVtZW50KGFzIGFzIFJlYWN0RWxlbWVudCwgeyAuLi5wcm9wcyB9LCBjaGlsZHJlbik7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGEgey4uLnByb3BzfSB7Li4uZXh0ZXJuYWxVcmxQcm9wc30+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvYT5cbiAgICApO1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7OztBQWdDQSxNQUFNLElBQUksR0FBRyxNQUFNLENBQUM7TUFFUCxJQUFJLEdBQWMsQ0FBQyxFQUM1QixJQUFJLEVBQ0osR0FBRyxFQUNILGFBQWEsRUFDYixRQUFRLEVBQ1IsYUFBYSxFQUNiLE9BQU8sRUFDUCxFQUFFLEVBQ0YsT0FBTyxFQUNQLFFBQVEsR0FDWDtJQUNHLGFBQWEsQ0FBQyxRQUFRLEVBQUU7UUFDcEIsU0FBUyxFQUFFLElBQUk7UUFDZixLQUFLLEVBQUUsRUFBRSxHQUFHLEVBQUU7S0FDakIsQ0FBQyxDQUFDO0lBRUgsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sUUFBUSxHQUFHLFdBQVcsRUFBRSxDQUFDO0lBRS9CLE1BQU0sV0FBVyxHQUFHLENBQUMsS0FBaUI7UUFDbEMsSUFBSSxPQUFPLEVBQUU7WUFDVCxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDbEI7S0FDSixDQUFDO0lBRUYsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQztJQUV0RCxNQUFNLFVBQVUsR0FBRyxJQUFJLElBQUksR0FBRyxDQUFDO0lBRS9CLE1BQU0sZ0JBQWdCLEdBQUcsVUFBVTtVQUM3QixtQkFBbUIsQ0FBQyxRQUFRLEVBQUUsVUFBVSxFQUFFLGFBQWEsRUFBRSxRQUFRLENBQUM7VUFDbEUsRUFBRSxDQUFDO0lBRVQsTUFBTSxLQUFLLEdBQUc7UUFDVixJQUFJLEVBQUUsVUFBVTtRQUNoQixZQUFZLEVBQUUsYUFBYTtRQUMzQixPQUFPLEVBQUUsV0FBVztRQUNwQixTQUFTLEVBQUUsVUFBVSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7UUFDL0IsR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDO0tBQzlCLENBQUM7SUFFRixJQUFJLEVBQUUsRUFBRTtRQUNKLE9BQU8sWUFBWSxDQUFDLEVBQWtCLEVBQUUsRUFBRSxHQUFHLEtBQUssRUFBRSxFQUFFLFFBQVEsQ0FBQyxDQUFDO0tBQ25FO0lBRUQsUUFDSUEsb0RBQU8sS0FBSyxFQUFNLGdCQUFnQixHQUM3QixRQUFRLENBQ1QsRUFDTjtBQUNOOzs7OyJ9

package/dist/components/PasswordField/PasswordField.d.ts

@@ -0,0 +1,9 @@
+import type { InputImperativeHandle } from '@preply/ds-web-core';
+import React from 'react';
+export declare const PasswordField: React.ForwardRefExoticComponent<import("@preply/ds-web-core").FieldCommonProps & Pick<import("@preply/ds-web-core").InputPasswordProps, "autoComplete" | "placeholder" | "maxLength" | "name" | "value" | "defaultValue" | "onChange" | "onFocus" | "onBlur" | "onClick" | "onKeyDown" | "onKeyUp" | "required" | "disabled" | "hasError" | "dataset" | "onValueChange"> & {
+    id?: string | undefined;
+} & {
+    autoComplete?: "off" | "new-password" | "current-password" | undefined;
+    showIcon?: boolean | undefined;
+    revealValue?: boolean | undefined;
+} & React.RefAttributes<InputImperativeHandle>>;

package/dist/components/PasswordField/PasswordField.js

@@ -0,0 +1,40 @@
+import { useStyleExtract, usePasswordField, moduleClassNames } from '@preply/ds-web-core';
+import React__default, { forwardRef, useRef, useImperativeHandle, useState } from 'react';
+import { FieldButton } from '../FieldButton/FieldButton.js';
+import { FieldLayout } from '../FieldLayout/FieldLayout.js';
+import { Icon } from '../Icon/Icon.js';
+import { InputPassword } from '../private/Input/InputPassword.js';
+import { InputText } from '../private/Input/InputText.js';
+import styles from './style/index.module.less.js';
+import SvgEyeHide from './svg/eye-hide.svg.js';
+import SvgEye from './svg/eye.svg.js';
+import SvgLock from './svg/lock.svg.js';
+
+const PASSWORD_FIELD = 'PasswordField';
+const PasswordFieldLocal = ({ showIcon, revealValue, id: optionalId, ...props }, ref) => {
+    useStyleExtract(styles);
+    const layoutRef = useRef(null);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setFocus: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.setFocus(); },
+    }));
+    const passwordField = usePasswordField({
+        id: optionalId,
+        ...props,
+    });
+    const { layoutProps, inputProps } = passwordField;
+    const [shouldRevealValue, setShouldRevealValue] = useState(false);
+    const handleButtonClick = () => setShouldRevealValue(!shouldRevealValue);
+    const icon = showIcon ? React__default.createElement(Icon, { svg: SvgLock }) : undefined;
+    const actualRevealValue = shouldRevealValue || revealValue;
+    const input = actualRevealValue ? (React__default.createElement(InputText, Object.assign({}, inputProps, { type: "text", ref: inputRef }))) : (React__default.createElement(InputPassword, Object.assign({}, inputProps, { ref: inputRef })));
+    const buttonSvg = shouldRevealValue ? SvgEyeHide : SvgEye;
+    const buttonText = shouldRevealValue ? 'Conceal password' : 'Reveal password';
+    const button = revealValue ? undefined : (React__default.createElement(FieldButton, { onClick: handleButtonClick, svg: buttonSvg, assistiveText: buttonText }));
+    const classNames = moduleClassNames(styles, PASSWORD_FIELD);
+    return (React__default.createElement(FieldLayout, Object.assign({}, layoutProps, { icon: icon, button: button, className: classNames.join(' '), input: input, inputHandle: inputRef.current, ref: layoutRef })));
+};
+const PasswordField = forwardRef(PasswordFieldLocal);
+
+export { PasswordField };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFzc3dvcmRGaWVsZC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvUGFzc3dvcmRGaWVsZC9QYXNzd29yZEZpZWxkLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IElucHV0SW1wZXJhdGl2ZUhhbmRsZSwgUGFzc3dvcmRGaWVsZFByb3BzIH0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgeyBtb2R1bGVDbGFzc05hbWVzLCB1c2VQYXNzd29yZEZpZWxkLCB1c2VTdHlsZUV4dHJhY3QgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgZm9yd2FyZFJlZiwgdXNlSW1wZXJhdGl2ZUhhbmRsZSwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgRmllbGRCdXR0b24gfSBmcm9tICcuLi9GaWVsZEJ1dHRvbi9GaWVsZEJ1dHRvbic7XG5pbXBvcnQgeyBGaWVsZExheW91dCB9IGZyb20gJy4uL0ZpZWxkTGF5b3V0L0ZpZWxkTGF5b3V0JztcbmltcG9ydCB7IEljb24gfSBmcm9tICcuLi9JY29uL0ljb24nO1xuaW1wb3J0IHsgSW5wdXRQYXNzd29yZCB9IGZyb20gJy4uL3ByaXZhdGUvSW5wdXQvSW5wdXRQYXNzd29yZCc7XG5pbXBvcnQgeyBJbnB1dFRleHQgfSBmcm9tICcuLi9wcml2YXRlL0lucHV0L0lucHV0VGV4dCc7XG5cbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5pbXBvcnQgRXllSGlkZVN2ZyBmcm9tICcuL3N2Zy9leWUtaGlkZS5zdmcnO1xuaW1wb3J0IEV5ZVN2ZyBmcm9tICcuL3N2Zy9leWUuc3ZnJztcbmltcG9ydCBMb2NrU3ZnIGZyb20gJy4vc3ZnL2xvY2suc3ZnJztcblxuY29uc3QgUEFTU1dPUkRfRklFTEQgPSAnUGFzc3dvcmRGaWVsZCc7XG5cbmNvbnN0IFBhc3N3b3JkRmllbGRMb2NhbDogRkM8UGFzc3dvcmRGaWVsZFByb3BzPiA9IChcbiAgICB7IHNob3dJY29uLCByZXZlYWxWYWx1ZSwgaWQ6IG9wdGlvbmFsSWQsIC4uLnByb3BzIH0sXG4gICAgcmVmLFxuKSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBsYXlvdXRSZWYgPSB1c2VSZWY8SW5wdXRJbXBlcmF0aXZlSGFuZGxlPihudWxsKTtcbiAgICBjb25zdCBpbnB1dFJlZiA9IHVzZVJlZjxJbnB1dEltcGVyYXRpdmVIYW5kbGU+KG51bGwpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICAgIHNldEZvY3VzOiAoKSA9PiBpbnB1dFJlZj8uY3VycmVudD8uc2V0Rm9jdXMoKSxcbiAgICB9KSk7XG5cbiAgICBjb25zdCBwYXNzd29yZEZpZWxkID0gdXNlUGFzc3dvcmRGaWVsZCh7XG4gICAgICAgIGlkOiBvcHRpb25hbElkLFxuICAgICAgICAuLi5wcm9wcyxcbiAgICB9KTtcbiAgICBjb25zdCB7IGxheW91dFByb3BzLCBpbnB1dFByb3BzIH0gPSBwYXNzd29yZEZpZWxkO1xuXG4gICAgY29uc3QgW3Nob3VsZFJldmVhbFZhbHVlLCBzZXRTaG91bGRSZXZlYWxWYWx1ZV0gPSB1c2VTdGF0ZTxib29sZWFuPihmYWxzZSk7XG5cbiAgICBjb25zdCBoYW5kbGVCdXR0b25DbGljayA9ICgpID0+IHNldFNob3VsZFJldmVhbFZhbHVlKCFzaG91bGRSZXZlYWxWYWx1ZSk7XG5cbiAgICBjb25zdCBpY29uID0gc2hvd0ljb24gPyA8SWNvbiBzdmc9e0xvY2tTdmd9IC8+IDogdW5kZWZpbmVkO1xuXG4gICAgY29uc3QgYWN0dWFsUmV2ZWFsVmFsdWUgPSBzaG91bGRSZXZlYWxWYWx1ZSB8fCByZXZlYWxWYWx1ZTtcbiAgICBjb25zdCBpbnB1dCA9IGFjdHVhbFJldmVhbFZhbHVlID8gKFxuICAgICAgICA8SW5wdXRUZXh0IHsuLi5pbnB1dFByb3BzfSB0eXBlPVwidGV4dFwiIHJlZj17aW5wdXRSZWZ9IC8+XG4gICAgKSA6IChcbiAgICAgICAgPElucHV0UGFzc3dvcmQgey4uLmlucHV0UHJvcHN9IHJlZj17aW5wdXRSZWZ9IC8+XG4gICAgKTtcblxuICAgIGNvbnN0IGJ1dHRvblN2ZyA9IHNob3VsZFJldmVhbFZhbHVlID8gRXllSGlkZVN2ZyA6IEV5ZVN2ZztcbiAgICBjb25zdCBidXR0b25UZXh0ID0gc2hvdWxkUmV2ZWFsVmFsdWUgPyAnQ29uY2VhbCBwYXNzd29yZCcgOiAnUmV2ZWFsIHBhc3N3b3JkJztcbiAgICBjb25zdCBidXR0b24gPSByZXZlYWxWYWx1ZSA/IHVuZGVmaW5lZCA6IChcbiAgICAgICAgPEZpZWxkQnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUJ1dHRvbkNsaWNrfSBzdmc9e2J1dHRvblN2Z30gYXNzaXN0aXZlVGV4dD17YnV0dG9uVGV4dH0gLz5cbiAgICApO1xuXG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IG1vZHVsZUNsYXNzTmFtZXMoc3R5bGVzLCBQQVNTV09SRF9GSUVMRCk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8RmllbGRMYXlvdXRcbiAgICAgICAgICAgIHsuLi5sYXlvdXRQcm9wc31cbiAgICAgICAgICAgIGljb249e2ljb259XG4gICAgICAgICAgICBidXR0b249e2J1dHRvbn1cbiAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcy5qb2luKCcgJyl9XG4gICAgICAgICAgICBpbnB1dD17aW5wdXR9XG4gICAgICAgICAgICBpbnB1dEhhbmRsZT17aW5wdXRSZWYuY3VycmVudH1cbiAgICAgICAgICAgIHJlZj17bGF5b3V0UmVmfVxuICAgICAgICAvPlxuICAgICk7XG59O1xuXG5leHBvcnQgY29uc3QgUGFzc3dvcmRGaWVsZCA9IGZvcndhcmRSZWY8SW5wdXRJbXBlcmF0aXZlSGFuZGxlLCBQYXNzd29yZEZpZWxkUHJvcHM+KFxuICAgIFBhc3N3b3JkRmllbGRMb2NhbCxcbik7XG4iXSwibmFtZXMiOlsiUmVhY3QiLCJMb2NrU3ZnIiwiRXllSGlkZVN2ZyIsIkV5ZVN2ZyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7O0FBZUEsTUFBTSxjQUFjLEdBQUcsZUFBZSxDQUFDO0FBRXZDLE1BQU0sa0JBQWtCLEdBQTJCLENBQy9DLEVBQUUsUUFBUSxFQUFFLFdBQVcsRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLEdBQUcsS0FBSyxFQUFFLEVBQ25ELEdBQUc7SUFFSCxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUF3QixJQUFJLENBQUMsQ0FBQztJQUN0RCxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQXdCLElBQUksQ0FBQyxDQUFDO0lBRXJELG1CQUFtQixDQUFDLEdBQUcsRUFBRSxPQUFPO1FBQzVCLFFBQVEsRUFBRSw2QkFBTSxRQUFRLGFBQVIsUUFBUSx1QkFBUixRQUFRLENBQUUsT0FBTywwQ0FBRSxRQUFRLEtBQUU7S0FDaEQsQ0FBQyxDQUFDLENBQUM7SUFFSixNQUFNLGFBQWEsR0FBRyxnQkFBZ0IsQ0FBQztRQUNuQyxFQUFFLEVBQUUsVUFBVTtRQUNkLEdBQUcsS0FBSztLQUNYLENBQUMsQ0FBQztJQUNILE1BQU0sRUFBRSxXQUFXLEVBQUUsVUFBVSxFQUFFLEdBQUcsYUFBYSxDQUFDO0lBRWxELE1BQU0sQ0FBQyxpQkFBaUIsRUFBRSxvQkFBb0IsQ0FBQyxHQUFHLFFBQVEsQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUUzRSxNQUFNLGlCQUFpQixHQUFHLE1BQU0sb0JBQW9CLENBQUMsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBRXpFLE1BQU0sSUFBSSxHQUFHLFFBQVEsR0FBR0EsNkJBQUMsSUFBSSxJQUFDLEdBQUcsRUFBRUMsT0FBTyxHQUFJLEdBQUcsU0FBUyxDQUFDO0lBRTNELE1BQU0saUJBQWlCLEdBQUcsaUJBQWlCLElBQUksV0FBVyxDQUFDO0lBQzNELE1BQU0sS0FBSyxHQUFHLGlCQUFpQixJQUMzQkQsNkJBQUMsU0FBUyxvQkFBSyxVQUFVLElBQUUsSUFBSSxFQUFDLE1BQU0sRUFBQyxHQUFHLEVBQUUsUUFBUSxJQUFJLEtBRXhEQSw2QkFBQyxhQUFhLG9CQUFLLFVBQVUsSUFBRSxHQUFHLEVBQUUsUUFBUSxJQUFJLENBQ25ELENBQUM7SUFFRixNQUFNLFNBQVMsR0FBRyxpQkFBaUIsR0FBR0UsVUFBVSxHQUFHQyxNQUFNLENBQUM7SUFDMUQsTUFBTSxVQUFVLEdBQUcsaUJBQWlCLEdBQUcsa0JBQWtCLEdBQUcsaUJBQWlCLENBQUM7SUFDOUUsTUFBTSxNQUFNLEdBQUcsV0FBVyxHQUFHLFNBQVMsSUFDbENILDZCQUFDLFdBQVcsSUFBQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsVUFBVSxHQUFJLENBQ3pGLENBQUM7SUFFRixNQUFNLFVBQVUsR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsY0FBYyxDQUFDLENBQUM7SUFFNUQsUUFDSUEsNkJBQUMsV0FBVyxvQkFDSixXQUFXLElBQ2YsSUFBSSxFQUFFLElBQUksRUFDVixNQUFNLEVBQUUsTUFBTSxFQUNkLFNBQVMsRUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUMvQixLQUFLLEVBQUUsS0FBSyxFQUNaLFdBQVcsRUFBRSxRQUFRLENBQUMsT0FBTyxFQUM3QixHQUFHLEVBQUUsU0FBUyxJQUNoQixFQUNKO0FBQ04sQ0FBQyxDQUFDO01BRVcsYUFBYSxHQUFHLFVBQVUsQ0FDbkMsa0JBQWtCOzs7OyJ9

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

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

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

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

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

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

package/dist/components/PasswordField/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/PasswordField/svg/eye-hide.svg.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgEyeHide(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.649 7.234l1.737 1.738a4 4 0 015.642 5.642l1.829 1.828c1.282-.873 2.288-1.976 3.007-2.931a14.882 14.882 0 001-1.511 14.984 14.984 0 00-2.1-2.81C17.195 7.548 14.94 6 12 6c-1.674 0-3.122.5-4.351 1.234zm8.56 11.39l1.084 1.083a1 1 0 001.414-1.414l-.415-.415c1.37-.994 2.425-2.175 3.17-3.165a16.87 16.87 0 001.066-1.594 12.902 12.902 0 00.344-.627l.02-.04.006-.012.002-.004v-.002h.001L22 12l.901.433a1 1 0 000-.866L22 12c.901-.433.901-.434.9-.434v-.003l-.004-.007-.01-.02a10.08 10.08 0 00-.167-.317 16.98 16.98 0 00-2.508-3.409C18.439 5.952 15.695 4 12 4c-2.303 0-4.242.761-5.802 1.784l-.49-.491a1 1 0 00-1.415 1.414l11.491 11.491a.996.996 0 00.425.425zm-2.603-5.432a2 2 0 00-2.798-2.798l2.798 2.798zM4.121 8.878a1 1 0 01.174 1.404A15.022 15.022 0 003.135 12a14.987 14.987 0 002.1 2.81C6.806 16.453 9.062 18 12 18a1 1 0 110 2c-3.695 0-6.439-1.953-8.211-3.81a16.98 16.98 0 01-2.508-3.408 10.023 10.023 0 01-.167-.318l-.01-.02-.003-.007-.001-.002c-.001-.001-.001-.002.9-.435l-.901-.434.001-.002.002-.005.007-.013.022-.044.08-.155c.07-.131.172-.317.307-.543.268-.452.668-1.07 1.2-1.752a1 1 0 011.403-.174zM2 12l-.901.433a1 1 0 010-.866L2 12z",
+    fill: "currentColor"
+  })));
+}
+
+export { SvgEyeHide as default };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXllLWhpZGUuc3ZnLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9