@preply/ds-web-lib 0.63.1 → 0.64.1

package/dist/components/Avatar/Avatar.js

@@ -1,5 +1,5 @@
-import { AVATAR_SIZE_DEFAULT, AVATAR_SRC_DEFAULT } from '@preply/ds-core';
-import { useInstrument, useStyleExtract, moduleClassNames, stringClassNames, booleanClassNames, useVisualModeClassNames, getDatasetProps } from '@preply/ds-web-core';
+import { AVATAR_SIZE_DEFAULT, AVATAR_SRC_DEFAULT_TOKYO_UI, AVATAR_SRC_DEFAULT } from '@preply/ds-core';
+import { useInstrument, useStyleExtract, moduleClassNames, stringClassNames, booleanClassNames, useVisualModeClassNames, getDatasetProps, useTheme } from '@preply/ds-web-core';
 import React__default from 'react';
 import styles from './style/index.module.less.js';
 
@@ -19,9 +19,11 @@ const Avatar = ({ size = AVATAR_SIZE_DEFAULT, round, src, alt = '', dataset, })
         className: useVisualModeClassNames(classNames).join(' '),
         ...getDatasetProps(dataset),
     };
+    const { theme } = useTheme();
+    const fallbackSrc = theme.name === 'tokyo-ui' ? AVATAR_SRC_DEFAULT_TOKYO_UI : AVATAR_SRC_DEFAULT;
     return (React__default.createElement("picture", Object.assign({}, props),
-        React__default.createElement("img", { src: src || AVATAR_SRC_DEFAULT, alt: alt })));
+        React__default.createElement("img", { src: src || fallbackSrc, alt: alt })));
 };
 
 export { Avatar };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXZhdGFyLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IEF2YXRhclNpemUsIERhdGFzZXQsIFJlc3BvbnNpdmUgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHsgQVZBVEFSX1NJWkVfREVGQVVMVCwgQVZBVEFSX1NSQ19ERUZBVUxUIH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7XG4gICAgYm9vbGVhbkNsYXNzTmFtZXMsXG4gICAgZ2V0RGF0YXNldFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgc3RyaW5nQ2xhc3NOYW1lcyxcbiAgICB1c2VJbnN0cnVtZW50LFxuICAgIHVzZVN0eWxlRXh0cmFjdCxcbiAgICB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUHJvcHMge1xuICAgIHNpemU/OiBSZXNwb25zaXZlPEF2YXRhclNpemU+O1xuICAgIHJvdW5kPzogYm9vbGVhbjtcbiAgICBzcmM/OiBzdHJpbmc7XG4gICAgYWx0Pzogc3RyaW5nO1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xufVxuXG5jb25zdCBBVkFUQVIgPSAnQXZhdGFyJztcblxuZXhwb3J0IGNvbnN0IEF2YXRhcjogRkM8UHJvcHM+ID0gKHtcbiAgICBzaXplID0gQVZBVEFSX1NJWkVfREVGQVVMVCxcbiAgICByb3VuZCxcbiAgICBzcmMsXG4gICAgYWx0ID0gJycsXG4gICAgZGF0YXNldCxcbn06IFByb3BzKSA9PiB7XG4gICAgdXNlSW5zdHJ1bWVudCgncmVuZGVyJywge1xuICAgICAgICBjb21wb25lbnQ6IEFWQVRBUixcbiAgICAgICAgcHJvcHM6IHsgc2l6ZSwgcm91bmQgfSxcbiAgICB9KTtcblxuICAgIHVzZVN0eWxlRXh0cmFjdChzdHlsZXMpO1xuXG4gICAgY29uc3QgYWN0dWFsUm91bmQgPSByb3VuZCA/PyB0cnVlO1xuXG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IG1vZHVsZUNsYXNzTmFtZXMoc3R5bGVzLCBBVkFUQVIsIFtcbiAgICAgICAgc3RyaW5nQ2xhc3NOYW1lcygnc2l6ZScsIHNpemUpLFxuICAgICAgICBib29sZWFuQ2xhc3NOYW1lcygncm91bmQnLCB1bmRlZmluZWQsIGFjdHVhbFJvdW5kKSxcbiAgICBdKTtcblxuICAgIGNvbnN0IHByb3BzID0ge1xuICAgICAgICBjbGFzc05hbWU6IHVzZVZpc3VhbE1vZGVDbGFzc05hbWVzKGNsYXNzTmFtZXMpLmpvaW4oJyAnKSxcbiAgICAgICAgLi4uZ2V0RGF0YXNldFByb3BzKGRhdGFzZXQpLFxuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8cGljdHVyZSB7Li4ucHJvcHN9PlxuICAgICAgICAgICAgPGltZyBzcmM9e3NyYyB8fCBBVkFUQVJfU1JDX0RFRkFVTFR9IGFsdD17YWx0fSAvPlxuICAgICAgICA8L3BpY3R1cmU+XG4gICAgKTtcbn07XG4iXSwibmFtZXMiOlsiUmVhY3QiXSwibWFwcGluZ3MiOiI7Ozs7O0FBdUJBLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQztNQUVYLE1BQU0sR0FBYyxDQUFDLEVBQzlCLElBQUksR0FBRyxtQkFBbUIsRUFDMUIsS0FBSyxFQUNMLEdBQUcsRUFDSCxHQUFHLEdBQUcsRUFBRSxFQUNSLE9BQU8sR0FDSDtJQUNKLGFBQWEsQ0FBQyxRQUFRLEVBQUU7UUFDcEIsU0FBUyxFQUFFLE1BQU07UUFDakIsS0FBSyxFQUFFLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRTtLQUN6QixDQUFDLENBQUM7SUFFSCxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxXQUFXLEdBQUcsS0FBSyxhQUFMLEtBQUssY0FBTCxLQUFLLEdBQUksSUFBSSxDQUFDO0lBRWxDLE1BQU0sVUFBVSxHQUFHLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUU7UUFDaEQsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQztRQUM5QixpQkFBaUIsQ0FBQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsQ0FBQztLQUNyRCxDQUFDLENBQUM7SUFFSCxNQUFNLEtBQUssR0FBRztRQUNWLFNBQVMsRUFBRSx1QkFBdUIsQ0FBQyxVQUFVLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQ3hELEdBQUcsZUFBZSxDQUFDLE9BQU8sQ0FBQztLQUM5QixDQUFDO0lBRUYsUUFDSUEsMERBQWEsS0FBSztRQUNkQSxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxJQUFJLGtCQUFrQixFQUFFLEdBQUcsRUFBRSxHQUFHLEdBQUksQ0FDM0MsRUFDWjtBQUNOOzs7OyJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXZhdGFyLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IEF2YXRhclNpemUsIERhdGFzZXQsIFJlc3BvbnNpdmUgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBBVkFUQVJfU0laRV9ERUZBVUxULFxuICAgIEFWQVRBUl9TUkNfREVGQVVMVCxcbiAgICBBVkFUQVJfU1JDX0RFRkFVTFRfVE9LWU9fVUksXG59IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5pbXBvcnQge1xuICAgIGJvb2xlYW5DbGFzc05hbWVzLFxuICAgIGdldERhdGFzZXRQcm9wcyxcbiAgICBtb2R1bGVDbGFzc05hbWVzLFxuICAgIHN0cmluZ0NsYXNzTmFtZXMsXG4gICAgdXNlSW5zdHJ1bWVudCxcbiAgICB1c2VTdHlsZUV4dHJhY3QsXG4gICAgdXNlVGhlbWUsXG4gICAgdXNlVmlzdWFsTW9kZUNsYXNzTmFtZXMsXG59IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEZDIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGUvaW5kZXgubW9kdWxlLmxlc3MnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFByb3BzIHtcbiAgICBzaXplPzogUmVzcG9uc2l2ZTxBdmF0YXJTaXplPjtcbiAgICByb3VuZD86IGJvb2xlYW47XG4gICAgc3JjPzogc3RyaW5nO1xuICAgIGFsdD86IHN0cmluZztcbiAgICBkYXRhc2V0PzogRGF0YXNldDtcbn1cblxuY29uc3QgQVZBVEFSID0gJ0F2YXRhcic7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXI6IEZDPFByb3BzPiA9ICh7XG4gICAgc2l6ZSA9IEFWQVRBUl9TSVpFX0RFRkFVTFQsXG4gICAgcm91bmQsXG4gICAgc3JjLFxuICAgIGFsdCA9ICcnLFxuICAgIGRhdGFzZXQsXG59OiBQcm9wcykgPT4ge1xuICAgIHVzZUluc3RydW1lbnQoJ3JlbmRlcicsIHtcbiAgICAgICAgY29tcG9uZW50OiBBVkFUQVIsXG4gICAgICAgIHByb3BzOiB7IHNpemUsIHJvdW5kIH0sXG4gICAgfSk7XG5cbiAgICB1c2VTdHlsZUV4dHJhY3Qoc3R5bGVzKTtcblxuICAgIGNvbnN0IGFjdHVhbFJvdW5kID0gcm91bmQgPz8gdHJ1ZTtcblxuICAgIGNvbnN0IGNsYXNzTmFtZXMgPSBtb2R1bGVDbGFzc05hbWVzKHN0eWxlcywgQVZBVEFSLCBbXG4gICAgICAgIHN0cmluZ0NsYXNzTmFtZXMoJ3NpemUnLCBzaXplKSxcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoJ3JvdW5kJywgdW5kZWZpbmVkLCBhY3R1YWxSb3VuZCksXG4gICAgXSk7XG5cbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgICAgY2xhc3NOYW1lOiB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyhjbGFzc05hbWVzKS5qb2luKCcgJyksXG4gICAgICAgIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSxcbiAgICB9O1xuXG4gICAgY29uc3QgeyB0aGVtZSB9ID0gdXNlVGhlbWUoKTtcbiAgICBjb25zdCBmYWxsYmFja1NyYyA9XG4gICAgICAgIHRoZW1lLm5hbWUgPT09ICd0b2t5by11aScgPyBBVkFUQVJfU1JDX0RFRkFVTFRfVE9LWU9fVUkgOiBBVkFUQVJfU1JDX0RFRkFVTFQ7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8cGljdHVyZSB7Li4ucHJvcHN9PlxuICAgICAgICAgICAgPGltZyBzcmM9e3NyYyB8fCBmYWxsYmFja1NyY30gYWx0PXthbHR9IC8+XG4gICAgICAgIDwvcGljdHVyZT5cbiAgICApO1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7QUE0QkEsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO01BRVgsTUFBTSxHQUFjLENBQUMsRUFDOUIsSUFBSSxHQUFHLG1CQUFtQixFQUMxQixLQUFLLEVBQ0wsR0FBRyxFQUNILEdBQUcsR0FBRyxFQUFFLEVBQ1IsT0FBTyxHQUNIO0lBQ0osYUFBYSxDQUFDLFFBQVEsRUFBRTtRQUNwQixTQUFTLEVBQUUsTUFBTTtRQUNqQixLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFO0tBQ3pCLENBQUMsQ0FBQztJQUVILGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUV4QixNQUFNLFdBQVcsR0FBRyxLQUFLLGFBQUwsS0FBSyxjQUFMLEtBQUssR0FBSSxJQUFJLENBQUM7SUFFbEMsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRTtRQUNoRCxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDO1FBQzlCLGlCQUFpQixDQUFDLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxDQUFDO0tBQ3JELENBQUMsQ0FBQztJQUVILE1BQU0sS0FBSyxHQUFHO1FBQ1YsU0FBUyxFQUFFLHVCQUF1QixDQUFDLFVBQVUsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7UUFDeEQsR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDO0tBQzlCLENBQUM7SUFFRixNQUFNLEVBQUUsS0FBSyxFQUFFLEdBQUcsUUFBUSxFQUFFLENBQUM7SUFDN0IsTUFBTSxXQUFXLEdBQ2IsS0FBSyxDQUFDLElBQUksS0FBSyxVQUFVLEdBQUcsMkJBQTJCLEdBQUcsa0JBQWtCLENBQUM7SUFFakYsUUFDSUEsMERBQWEsS0FBSztRQUNkQSxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxJQUFJLFdBQVcsRUFBRSxHQUFHLEVBQUUsR0FBRyxHQUFJLENBQ3BDLEVBQ1o7QUFDTjs7OzsifQ==

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

@@ -4,4 +4,5 @@
     .avatar-base();
     .avatar-sizes();
     .avatar-radius();
+    .avatar-border();
 }

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "._2lMMST{display:inline-block}._2lMMST img{border-radius:var(--dad9ec);-o-object-fit:cover;object-fit:cover;vertical-align:bottom}.EoQhlu img{height:var(--d51f41);width:var(--d51f41)}._2KHtX3 img{height:var(--cfdb4f);width:var(--cfdb4f)}._14Oqba img{height:var(--2dafbf);width:var(--2dafbf)}._fVsFc img{height:var(--b51334);width:var(--b51334)}.jzJqju img{height:var(--d318a5);width:var(--d318a5)}._2Aq1PP img{height:var(--6eb1c7);width:var(--6eb1c7)}@media (min-width:400px){.TGVhOQ img{height:var(--d51f41);width:var(--d51f41)}._1CCsSo img{height:var(--cfdb4f);width:var(--cfdb4f)}.jBsk62 img{height:var(--2dafbf);width:var(--2dafbf)}._1cso16 img{height:var(--b51334);width:var(--b51334)}._2ngjZR img{height:var(--d318a5);width:var(--d318a5)}._1VoKNG img{height:var(--6eb1c7);width:var(--6eb1c7)}}@media (min-width:700px){._2N-krL img{height:var(--d51f41);width:var(--d51f41)}._1DB0Gc img{height:var(--cfdb4f);width:var(--cfdb4f)}._3s31wx img{height:var(--2dafbf);width:var(--2dafbf)}.Rs79Lf img{height:var(--b51334);width:var(--b51334)}._28LWwL img{height:var(--d318a5);width:var(--d318a5)}._1U8C1E img{height:var(--6eb1c7);width:var(--6eb1c7)}}@media (min-width:880px){._26jMeL img{height:var(--d51f41);width:var(--d51f41)}.CkYZBm img{height:var(--cfdb4f);width:var(--cfdb4f)}._2GXQ68 img{height:var(--2dafbf);width:var(--2dafbf)}._1o0S39 img{height:var(--b51334);width:var(--b51334)}._1lwSQy img{height:var(--d318a5);width:var(--d318a5)}._2yHOGu img{height:var(--6eb1c7);width:var(--6eb1c7)}}@media (min-width:1200px){._1EF9bT img{height:var(--d51f41);width:var(--d51f41)}._25FTY_ img{height:var(--cfdb4f);width:var(--cfdb4f)}._1TzOYg img{height:var(--2dafbf);width:var(--2dafbf)}._1WXlr9 img{height:var(--b51334);width:var(--b51334)}._2N2m_O img{height:var(--d318a5);width:var(--d318a5)}._1o9gte img{height:var(--6eb1c7);width:var(--6eb1c7)}}@media (min-width:1900px){._1_qLHY img{height:var(--d51f41);width:var(--d51f41)}.rRQwcj img{height:var(--cfdb4f);width:var(--cfdb4f)}._2rJTRM img{height:var(--2dafbf);width:var(--2dafbf)}._3n3CB3 img{height:var(--b51334);width:var(--b51334)}._27RyPx img{height:var(--d318a5);width:var(--d318a5)}._2ZomOg img{height:var(--6eb1c7);width:var(--6eb1c7)}}._3sb-3k img{border-radius:var(--8517a6)}";
-var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Avatar/style/index.module.less",__css:css_248z,"Avatar":"_2lMMST","Avatar--size-2xs":"EoQhlu","Avatar--size-xs":"_2KHtX3","Avatar--size-s":"_14Oqba","Avatar--size-m":"_fVsFc","Avatar--size-l":"jzJqju","Avatar--size-xl":"_2Aq1PP","Avatar--narrow-l--size-2xs":"TGVhOQ","Avatar--narrow-l--size-xs":"_1CCsSo","Avatar--narrow-l--size-s":"jBsk62","Avatar--narrow-l--size-m":"_1cso16","Avatar--narrow-l--size-l":"_2ngjZR","Avatar--narrow-l--size-xl":"_1VoKNG","Avatar--medium-s--size-2xs":"_2N-krL","Avatar--medium-s--size-xs":"_1DB0Gc","Avatar--medium-s--size-s":"_3s31wx","Avatar--medium-s--size-m":"Rs79Lf","Avatar--medium-s--size-l":"_28LWwL","Avatar--medium-s--size-xl":"_1U8C1E","Avatar--medium-l--size-2xs":"_26jMeL","Avatar--medium-l--size-xs":"CkYZBm","Avatar--medium-l--size-s":"_2GXQ68","Avatar--medium-l--size-m":"_1o0S39","Avatar--medium-l--size-l":"_1lwSQy","Avatar--medium-l--size-xl":"_2yHOGu","Avatar--wide-s--size-2xs":"_1EF9bT","Avatar--wide-s--size-xs":"_25FTY_","Avatar--wide-s--size-s":"_1TzOYg","Avatar--wide-s--size-m":"_1WXlr9","Avatar--wide-s--size-l":"_2N2m_O","Avatar--wide-s--size-xl":"_1o9gte","Avatar--wide-l--size-2xs":"_1_qLHY","Avatar--wide-l--size-xs":"rRQwcj","Avatar--wide-l--size-s":"_2rJTRM","Avatar--wide-l--size-m":"_3n3CB3","Avatar--wide-l--size-l":"_27RyPx","Avatar--wide-l--size-xl":"_2ZomOg","Avatar--round":"_3sb-3k"};
+var css_248z = "._2lMMST{display:inline-block}._2lMMST img{border-radius:var(--dad9ec);-o-object-fit:cover;object-fit:cover;vertical-align:bottom}.EoQhlu img{height:var(--d51f41);width:var(--d51f41)}._2KHtX3 img{height:var(--cfdb4f);width:var(--cfdb4f)}._14Oqba img{height:var(--2dafbf);width:var(--2dafbf)}._fVsFc img{height:var(--b51334);width:var(--b51334)}.jzJqju img{height:var(--d318a5);width:var(--d318a5)}._2Aq1PP img{height:var(--6eb1c7);width:var(--6eb1c7)}._2qD6RA img{height:var(--86aa8e);width:var(--86aa8e)}.AFpEFq img{height:var(--32bbec);width:var(--32bbec)}.M2mWw8 img{height:var(--950ab5);width:var(--950ab5)}.u00aBH img{height:var(--cc5dc7);width:var(--cc5dc7)}._2XCm5n img{height:var(--796da2);width:var(--796da2)}._1ZlBe1 img{height:var(--329ba7);width:var(--329ba7)}@media (min-width:400px){.TGVhOQ img{height:var(--d51f41);width:var(--d51f41)}._1CCsSo img{height:var(--cfdb4f);width:var(--cfdb4f)}.jBsk62 img{height:var(--2dafbf);width:var(--2dafbf)}._1cso16 img{height:var(--b51334);width:var(--b51334)}._2ngjZR img{height:var(--d318a5);width:var(--d318a5)}._1VoKNG img{height:var(--6eb1c7);width:var(--6eb1c7)}.sa06tM img{height:var(--86aa8e);width:var(--86aa8e)}._2zHExh img{height:var(--32bbec);width:var(--32bbec)}._3SElNq img{height:var(--950ab5);width:var(--950ab5)}._12_XUU img{height:var(--cc5dc7);width:var(--cc5dc7)}._2o11ZS img{height:var(--796da2);width:var(--796da2)}._1NzHqG img{height:var(--329ba7);width:var(--329ba7)}}@media (min-width:700px){._2N-krL img{height:var(--d51f41);width:var(--d51f41)}._1DB0Gc img{height:var(--cfdb4f);width:var(--cfdb4f)}._3s31wx img{height:var(--2dafbf);width:var(--2dafbf)}.Rs79Lf img{height:var(--b51334);width:var(--b51334)}._28LWwL img{height:var(--d318a5);width:var(--d318a5)}._1U8C1E img{height:var(--6eb1c7);width:var(--6eb1c7)}._1EDi0L img{height:var(--86aa8e);width:var(--86aa8e)}._1yhPR0 img{height:var(--32bbec);width:var(--32bbec)}._129CBU img{height:var(--950ab5);width:var(--950ab5)}._19TzZM img{height:var(--cc5dc7);width:var(--cc5dc7)}._3MTntw img{height:var(--796da2);width:var(--796da2)}._3ugLNm img{height:var(--329ba7);width:var(--329ba7)}}@media (min-width:880px){._26jMeL img{height:var(--d51f41);width:var(--d51f41)}.CkYZBm img{height:var(--cfdb4f);width:var(--cfdb4f)}._2GXQ68 img{height:var(--2dafbf);width:var(--2dafbf)}._1o0S39 img{height:var(--b51334);width:var(--b51334)}._1lwSQy img{height:var(--d318a5);width:var(--d318a5)}._2yHOGu img{height:var(--6eb1c7);width:var(--6eb1c7)}._3u643A img{height:var(--86aa8e);width:var(--86aa8e)}._14OALi img{height:var(--32bbec);width:var(--32bbec)}._1oP10W img{height:var(--950ab5);width:var(--950ab5)}._3vYPmm img{height:var(--cc5dc7);width:var(--cc5dc7)}.VnAWnQ img{height:var(--796da2);width:var(--796da2)}._1Ghrz0 img{height:var(--329ba7);width:var(--329ba7)}}@media (min-width:1200px){._1EF9bT img{height:var(--d51f41);width:var(--d51f41)}._25FTY_ img{height:var(--cfdb4f);width:var(--cfdb4f)}._1TzOYg img{height:var(--2dafbf);width:var(--2dafbf)}._1WXlr9 img{height:var(--b51334);width:var(--b51334)}._2N2m_O img{height:var(--d318a5);width:var(--d318a5)}._1o9gte img{height:var(--6eb1c7);width:var(--6eb1c7)}._1kIVkS img{height:var(--86aa8e);width:var(--86aa8e)}.PbkpTs img{height:var(--32bbec);width:var(--32bbec)}._1Tt0HM img{height:var(--950ab5);width:var(--950ab5)}._2Ht__M img{height:var(--cc5dc7);width:var(--cc5dc7)}.Tlu6s8 img{height:var(--796da2);width:var(--796da2)}._2BO5gf img{height:var(--329ba7);width:var(--329ba7)}}@media (min-width:1900px){._1_qLHY img{height:var(--d51f41);width:var(--d51f41)}.rRQwcj img{height:var(--cfdb4f);width:var(--cfdb4f)}._2rJTRM img{height:var(--2dafbf);width:var(--2dafbf)}._3n3CB3 img{height:var(--b51334);width:var(--b51334)}._27RyPx img{height:var(--d318a5);width:var(--d318a5)}._2ZomOg img{height:var(--6eb1c7);width:var(--6eb1c7)}._1ekVGQ img{height:var(--86aa8e);width:var(--86aa8e)}._2x-iRb img{height:var(--32bbec);width:var(--32bbec)}._3Fmtm9 img{height:var(--950ab5);width:var(--950ab5)}._3tFBra img{height:var(--cc5dc7);width:var(--cc5dc7)}._1Z4_wU img{height:var(--796da2);width:var(--796da2)}._1P3SCo img{height:var(--329ba7);width:var(--329ba7)}}._3sb-3k img{border-radius:var(--8517a6)}._2lMMST img{border:var(--c4d145) solid var(--54e6b5)}";
+var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Avatar/style/index.module.less",__css:css_248z,"Avatar":"_2lMMST","Avatar--size-2xs":"EoQhlu","Avatar--size-xs":"_2KHtX3","Avatar--size-s":"_14Oqba","Avatar--size-m":"_fVsFc","Avatar--size-l":"jzJqju","Avatar--size-xl":"_2Aq1PP","Avatar--size-24":"_2qD6RA","Avatar--size-32":"AFpEFq","Avatar--size-48":"M2mWw8","Avatar--size-64":"u00aBH","Avatar--size-96":"_2XCm5n","Avatar--size-160":"_1ZlBe1","Avatar--narrow-l--size-2xs":"TGVhOQ","Avatar--narrow-l--size-xs":"_1CCsSo","Avatar--narrow-l--size-s":"jBsk62","Avatar--narrow-l--size-m":"_1cso16","Avatar--narrow-l--size-l":"_2ngjZR","Avatar--narrow-l--size-xl":"_1VoKNG","Avatar--narrow-l--size-24":"sa06tM","Avatar--narrow-l--size-32":"_2zHExh","Avatar--narrow-l--size-48":"_3SElNq","Avatar--narrow-l--size-64":"_12_XUU","Avatar--narrow-l--size-96":"_2o11ZS","Avatar--narrow-l--size-160":"_1NzHqG","Avatar--medium-s--size-2xs":"_2N-krL","Avatar--medium-s--size-xs":"_1DB0Gc","Avatar--medium-s--size-s":"_3s31wx","Avatar--medium-s--size-m":"Rs79Lf","Avatar--medium-s--size-l":"_28LWwL","Avatar--medium-s--size-xl":"_1U8C1E","Avatar--medium-s--size-24":"_1EDi0L","Avatar--medium-s--size-32":"_1yhPR0","Avatar--medium-s--size-48":"_129CBU","Avatar--medium-s--size-64":"_19TzZM","Avatar--medium-s--size-96":"_3MTntw","Avatar--medium-s--size-160":"_3ugLNm","Avatar--medium-l--size-2xs":"_26jMeL","Avatar--medium-l--size-xs":"CkYZBm","Avatar--medium-l--size-s":"_2GXQ68","Avatar--medium-l--size-m":"_1o0S39","Avatar--medium-l--size-l":"_1lwSQy","Avatar--medium-l--size-xl":"_2yHOGu","Avatar--medium-l--size-24":"_3u643A","Avatar--medium-l--size-32":"_14OALi","Avatar--medium-l--size-48":"_1oP10W","Avatar--medium-l--size-64":"_3vYPmm","Avatar--medium-l--size-96":"VnAWnQ","Avatar--medium-l--size-160":"_1Ghrz0","Avatar--wide-s--size-2xs":"_1EF9bT","Avatar--wide-s--size-xs":"_25FTY_","Avatar--wide-s--size-s":"_1TzOYg","Avatar--wide-s--size-m":"_1WXlr9","Avatar--wide-s--size-l":"_2N2m_O","Avatar--wide-s--size-xl":"_1o9gte","Avatar--wide-s--size-24":"_1kIVkS","Avatar--wide-s--size-32":"PbkpTs","Avatar--wide-s--size-48":"_1Tt0HM","Avatar--wide-s--size-64":"_2Ht__M","Avatar--wide-s--size-96":"Tlu6s8","Avatar--wide-s--size-160":"_2BO5gf","Avatar--wide-l--size-2xs":"_1_qLHY","Avatar--wide-l--size-xs":"rRQwcj","Avatar--wide-l--size-s":"_2rJTRM","Avatar--wide-l--size-m":"_3n3CB3","Avatar--wide-l--size-l":"_27RyPx","Avatar--wide-l--size-xl":"_2ZomOg","Avatar--wide-l--size-24":"_1ekVGQ","Avatar--wide-l--size-32":"_2x-iRb","Avatar--wide-l--size-48":"_3Fmtm9","Avatar--wide-l--size-64":"_3tFBra","Avatar--wide-l--size-96":"_1Z4_wU","Avatar--wide-l--size-160":"_1P3SCo","Avatar--round":"_3sb-3k"};
 var stylesheet=css_248z;
 styleInject(css_248z);
 

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

@@ -15,6 +15,14 @@
     }
 }
 
+.avatar-border() {
+    img {
+        border-style: solid;
+        .border-width(@namespace, 'base');
+        .border-color(@namespace, 'base');
+    }
+}
+
 .avatar-sizes() {
     .responsive({
         each(@AVATAR_SIZE_OPTIONS, {

package/dist/components/Badge/Badge.d.ts

@@ -1,6 +1,7 @@
-import type { BadgeColor, BadgeSize, Dataset } from '@preply/ds-core';
+import type { BadgeAccent, BadgeColor, BadgeSize, Dataset } from '@preply/ds-core';
 import { FC, ReactNode } from 'react';
 export interface Props {
+    accent?: BadgeAccent;
     color?: BadgeColor;
     inverted?: boolean;
     size?: BadgeSize;

package/dist/components/Badge/Badge.js

@@ -1,14 +1,19 @@
 import { BADGE_COLOR_DEFAULT, BADGE_SIZE_DEFAULT } from '@preply/ds-core';
-import { useStyleExtract, moduleClassNames, stringClassNames, booleanClassNames, useVisualModeClassNames, getDatasetProps } from '@preply/ds-web-core';
+import { useStyleExtract, stringClassNames, booleanClassNames, moduleClassNames, useVisualModeClassNames, getDatasetProps } from '@preply/ds-web-core';
 import React__default from 'react';
 import styles from './style/index.module.less.js';
 
 const BADGE = 'Badge';
-const Badge = ({ color = BADGE_COLOR_DEFAULT, inverted = false, size = BADGE_SIZE_DEFAULT, assistiveText, dataset, children, }) => {
+const Badge = ({ color = BADGE_COLOR_DEFAULT, inverted = false, size = BADGE_SIZE_DEFAULT, assistiveText, dataset, children, accent, }) => {
     useStyleExtract(styles);
+    const actualColorClassnames = accent
+        ? stringClassNames('accent', accent)
+        : [
+            ...stringClassNames('color', color),
+            ...booleanClassNames('inverted', 'normal', inverted),
+        ];
     const classNames = moduleClassNames(styles, BADGE, [
-        stringClassNames('color', color),
-        booleanClassNames('inverted', 'normal', inverted),
+        ...actualColorClassnames,
         stringClassNames('size', size),
     ]);
     const props = {
@@ -20,4 +25,4 @@ const Badge = ({ color = BADGE_COLOR_DEFAULT, inverted = false, size = BADGE_SIZ
 };
 
 export { Badge };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFkZ2UuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JhZGdlL0JhZGdlLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IEJhZGdlQ29sb3IsIEJhZGdlU2l6ZSwgRGF0YXNldCB9IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5pbXBvcnQgeyBCQURHRV9DT0xPUl9ERUZBVUxULCBCQURHRV9TSVpFX0RFRkFVTFQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBib29sZWFuQ2xhc3NOYW1lcyxcbiAgICBnZXREYXRhc2V0UHJvcHMsXG4gICAgbW9kdWxlQ2xhc3NOYW1lcyxcbiAgICBzdHJpbmdDbGFzc05hbWVzLFxuICAgIHVzZVN0eWxlRXh0cmFjdCxcbiAgICB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgY29sb3I/OiBCYWRnZUNvbG9yO1xuICAgIGludmVydGVkPzogYm9vbGVhbjtcbiAgICBzaXplPzogQmFkZ2VTaXplO1xuICAgIGFzc2lzdGl2ZVRleHQ/OiBzdHJpbmc7XG4gICAgZGF0YXNldD86IERhdGFzZXQ7XG4gICAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEJBREdFID0gJ0JhZGdlJztcblxuZXhwb3J0IGNvbnN0IEJhZGdlOiBGQzxQcm9wcz4gPSAoe1xuICAgIGNvbG9yID0gQkFER0VfQ09MT1JfREVGQVVMVCxcbiAgICBpbnZlcnRlZCA9IGZhbHNlLFxuICAgIHNpemUgPSBCQURHRV9TSVpFX0RFRkFVTFQsXG4gICAgYXNzaXN0aXZlVGV4dCxcbiAgICBkYXRhc2V0LFxuICAgIGNoaWxkcmVuLFxufSkgPT4ge1xuICAgIHVzZVN0eWxlRXh0cmFjdChzdHlsZXMpO1xuXG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IG1vZHVsZUNsYXNzTmFtZXMoc3R5bGVzLCBCQURHRSwgW1xuICAgICAgICBzdHJpbmdDbGFzc05hbWVzKCdjb2xvcicsIGNvbG9yKSxcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoJ2ludmVydGVkJywgJ25vcm1hbCcsIGludmVydGVkKSxcbiAgICAgICAgc3RyaW5nQ2xhc3NOYW1lcygnc2l6ZScsIHNpemUpLFxuICAgIF0pO1xuXG4gICAgY29uc3QgcHJvcHMgPSB7XG4gICAgICAgICdhcmlhLWxhYmVsJzogYXNzaXN0aXZlVGV4dCxcbiAgICAgICAgY2xhc3NOYW1lOiB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyhjbGFzc05hbWVzKS5qb2luKCcgJyksXG4gICAgICAgIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSxcbiAgICB9O1xuXG4gICAgcmV0dXJuIDxzcGFuIHsuLi5wcm9wc30+e2NoaWxkcmVufTwvc3Bhbj47XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQXVCQSxNQUFNLEtBQUssR0FBRyxPQUFPLENBQUM7TUFFVCxLQUFLLEdBQWMsQ0FBQyxFQUM3QixLQUFLLEdBQUcsbUJBQW1CLEVBQzNCLFFBQVEsR0FBRyxLQUFLLEVBQ2hCLElBQUksR0FBRyxrQkFBa0IsRUFDekIsYUFBYSxFQUNiLE9BQU8sRUFDUCxRQUFRLEdBQ1g7SUFDRyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLEtBQUssRUFBRTtRQUMvQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDO1FBQ2hDLGlCQUFpQixDQUFDLFVBQVUsRUFBRSxRQUFRLEVBQUUsUUFBUSxDQUFDO1FBQ2pELGdCQUFnQixDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUM7S0FDakMsQ0FBQyxDQUFDO0lBRUgsTUFBTSxLQUFLLEdBQUc7UUFDVixZQUFZLEVBQUUsYUFBYTtRQUMzQixTQUFTLEVBQUUsdUJBQXVCLENBQUMsVUFBVSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUN4RCxHQUFHLGVBQWUsQ0FBQyxPQUFPLENBQUM7S0FDOUIsQ0FBQztJQUVGLE9BQU9BLHVEQUFVLEtBQUssR0FBRyxRQUFRLENBQVEsQ0FBQztBQUM5Qzs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFkZ2UuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JhZGdlL0JhZGdlLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IEJhZGdlQWNjZW50LCBCYWRnZUNvbG9yLCBCYWRnZVNpemUsIERhdGFzZXQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHsgQkFER0VfQ09MT1JfREVGQVVMVCwgQkFER0VfU0laRV9ERUZBVUxUIH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7XG4gICAgYm9vbGVhbkNsYXNzTmFtZXMsXG4gICAgZ2V0RGF0YXNldFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgc3RyaW5nQ2xhc3NOYW1lcyxcbiAgICB1c2VTdHlsZUV4dHJhY3QsXG4gICAgdXNlVmlzdWFsTW9kZUNsYXNzTmFtZXMsXG59IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEZDLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUHJvcHMge1xuICAgIGFjY2VudD86IEJhZGdlQWNjZW50O1xuICAgIGNvbG9yPzogQmFkZ2VDb2xvcjtcbiAgICAvLyBUT0RPOiBkaXNtaXNzIGBpbnZlcnRlZGAgcHJvcCBzaW5jZSBpdCBkZXBlbmRzIG9uIHRoZSBjb2xvciBzY2hlbWVcbiAgICBpbnZlcnRlZD86IGJvb2xlYW47XG4gICAgc2l6ZT86IEJhZGdlU2l6ZTtcbiAgICBhc3Npc3RpdmVUZXh0Pzogc3RyaW5nO1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xuICAgIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBCQURHRSA9ICdCYWRnZSc7XG5cbmV4cG9ydCBjb25zdCBCYWRnZTogRkM8UHJvcHM+ID0gKHtcbiAgICBjb2xvciA9IEJBREdFX0NPTE9SX0RFRkFVTFQsXG4gICAgaW52ZXJ0ZWQgPSBmYWxzZSxcbiAgICBzaXplID0gQkFER0VfU0laRV9ERUZBVUxULFxuICAgIGFzc2lzdGl2ZVRleHQsXG4gICAgZGF0YXNldCxcbiAgICBjaGlsZHJlbixcbiAgICBhY2NlbnQsXG59KSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBhY3R1YWxDb2xvckNsYXNzbmFtZXMgPSBhY2NlbnRcbiAgICAgICAgPyBzdHJpbmdDbGFzc05hbWVzKCdhY2NlbnQnLCBhY2NlbnQpXG4gICAgICAgIDogW1xuICAgICAgICAgICAgICAuLi5zdHJpbmdDbGFzc05hbWVzKCdjb2xvcicsIGNvbG9yKSxcbiAgICAgICAgICAgICAgLi4uYm9vbGVhbkNsYXNzTmFtZXMoJ2ludmVydGVkJywgJ25vcm1hbCcsIGludmVydGVkKSxcbiAgICAgICAgICBdO1xuXG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IG1vZHVsZUNsYXNzTmFtZXMoc3R5bGVzLCBCQURHRSwgW1xuICAgICAgICAuLi5hY3R1YWxDb2xvckNsYXNzbmFtZXMsXG4gICAgICAgIHN0cmluZ0NsYXNzTmFtZXMoJ3NpemUnLCBzaXplKSxcbiAgICBdKTtcblxuICAgIGNvbnN0IHByb3BzID0ge1xuICAgICAgICAnYXJpYS1sYWJlbCc6IGFzc2lzdGl2ZVRleHQsXG4gICAgICAgIGNsYXNzTmFtZTogdXNlVmlzdWFsTW9kZUNsYXNzTmFtZXMoY2xhc3NOYW1lcykuam9pbignICcpLFxuICAgICAgICAuLi5nZXREYXRhc2V0UHJvcHMoZGF0YXNldCksXG4gICAgfTtcblxuICAgIHJldHVybiA8c3BhbiB7Li4ucHJvcHN9PntjaGlsZHJlbn08L3NwYW4+O1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7QUF5QkEsTUFBTSxLQUFLLEdBQUcsT0FBTyxDQUFDO01BRVQsS0FBSyxHQUFjLENBQUMsRUFDN0IsS0FBSyxHQUFHLG1CQUFtQixFQUMzQixRQUFRLEdBQUcsS0FBSyxFQUNoQixJQUFJLEdBQUcsa0JBQWtCLEVBQ3pCLGFBQWEsRUFDYixPQUFPLEVBQ1AsUUFBUSxFQUNSLE1BQU0sR0FDVDtJQUNHLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUV4QixNQUFNLHFCQUFxQixHQUFHLE1BQU07VUFDOUIsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLE1BQU0sQ0FBQztVQUNsQztZQUNJLEdBQUcsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQztZQUNuQyxHQUFHLGlCQUFpQixDQUFDLFVBQVUsRUFBRSxRQUFRLEVBQUUsUUFBUSxDQUFDO1NBQ3ZELENBQUM7SUFFUixNQUFNLFVBQVUsR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsS0FBSyxFQUFFO1FBQy9DLEdBQUcscUJBQXFCO1FBQ3hCLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUM7S0FDakMsQ0FBQyxDQUFDO0lBRUgsTUFBTSxLQUFLLEdBQUc7UUFDVixZQUFZLEVBQUUsYUFBYTtRQUMzQixTQUFTLEVBQUUsdUJBQXVCLENBQUMsVUFBVSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUN4RCxHQUFHLGVBQWUsQ0FBQyxPQUFPLENBQUM7S0FDOUIsQ0FBQztJQUVGLE9BQU9BLHVEQUFVLEtBQUssR0FBRyxRQUFRLENBQVEsQ0FBQztBQUM5Qzs7OzsifQ==

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

@@ -4,4 +4,5 @@
     .badge-base();
     .badge-color-and-inverted();
     .badge-size();
+    .badge-variants();
 }

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "._3h-Wzd{grid-gap:.25em;border-radius:var(--93d4a2);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:.25em}._2eKUAk._1zS55d{background-color:var(--8f1238);color:var(--c9575b)}._2eKUAk._3bUZbF{background-color:var(--7c8c3c);color:var(--55407f)}._3gyNLf._1zS55d{background-color:var(--54ed1d);color:var(--de8a40)}._3gyNLf._3bUZbF{background-color:var(--de8a40);color:var(--54ed1d)}.rwgQdv._1zS55d{background-color:var(--1383a7);color:var(--bbfa9f)}.rwgQdv._3bUZbF{background-color:var(--bbfa9f);color:var(--1383a7)}.zb2wOT._1zS55d{background-color:var(--21906f);color:var(--e1c27c)}.zb2wOT._3bUZbF{background-color:var(--e1c27c);color:var(--21906f)}._1N-1FK._1zS55d{background-color:var(--c7d8be);color:var(--2242ed)}._1N-1FK._3bUZbF{background-color:var(--2242ed);color:var(--c7d8be)}._3a1P6I._1zS55d{background-color:var(--ecb5d5);color:var(--4e47fe)}._3a1P6I._3bUZbF{background-color:var(--4e47fe);color:var(--ecb5d5)}._3LKZfd._1zS55d{background-color:var(--1a9963);color:var(--6cbd80)}._3LKZfd._3bUZbF{background-color:var(--6cbd80);color:var(--1a9963)}._3Qg4_n{font-size:var(--547b8f);font-style:var(--abe371);font-variation-settings:var(--f65ebc);font-weight:var(--86a200);letter-spacing:var(--d7a1ad);line-height:var(--e7e648);padding:var(--8feee9) var(--62f094)}._1IiJgJ{font-size:var(--28e99e);font-style:var(--e1d91f);font-variation-settings:var(--d7e46a);font-weight:var(--ca04c0);letter-spacing:var(--015e8c);line-height:var(--af784d);padding:var(--25e959) var(--796ab1)}.xlRCTE{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);padding:var(--0d8aa3) var(--3d1d33)}";
-var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Badge/style/index.module.less",__css:css_248z,"Badge":"_3h-Wzd","Badge--color-gray":"_2eKUAk","Badge--normal":"_1zS55d","Badge--inverted":"_3bUZbF","Badge--color-teal":"_3gyNLf","Badge--color-green":"rwgQdv","Badge--color-blue":"zb2wOT","Badge--color-yellow":"_1N-1FK","Badge--color-red":"_3a1P6I","Badge--color-magenta":"_3LKZfd","Badge--size-xs":"_3Qg4_n","Badge--size-s":"_1IiJgJ","Badge--size-m":"xlRCTE"};
+var css_248z = "._3h-Wzd{grid-gap:.25em;border-radius:var(--93d4a2);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:.25em}._2eKUAk._1zS55d{background-color:var(--8f1238);color:var(--c9575b)}._2eKUAk._3bUZbF{background-color:var(--7c8c3c);color:var(--55407f)}._3gyNLf._1zS55d{background-color:var(--54ed1d);color:var(--de8a40)}._3gyNLf._3bUZbF{background-color:var(--de8a40);color:var(--54ed1d)}.rwgQdv._1zS55d{background-color:var(--1383a7);color:var(--bbfa9f)}.rwgQdv._3bUZbF{background-color:var(--bbfa9f);color:var(--1383a7)}.zb2wOT._1zS55d{background-color:var(--21906f);color:var(--e1c27c)}.zb2wOT._3bUZbF{background-color:var(--e1c27c);color:var(--21906f)}._1N-1FK._1zS55d{background-color:var(--c7d8be);color:var(--2242ed)}._1N-1FK._3bUZbF{background-color:var(--2242ed);color:var(--c7d8be)}._3a1P6I._1zS55d{background-color:var(--ecb5d5);color:var(--4e47fe)}._3a1P6I._3bUZbF{background-color:var(--4e47fe);color:var(--ecb5d5)}._3LKZfd._1zS55d{background-color:var(--1a9963);color:var(--6cbd80)}._3LKZfd._3bUZbF{background-color:var(--6cbd80);color:var(--1a9963)}._3Qg4_n{font-size:var(--547b8f);font-style:var(--abe371);font-variation-settings:var(--f65ebc);font-weight:var(--86a200);letter-spacing:var(--d7a1ad);line-height:var(--e7e648);padding:var(--8feee9) var(--62f094)}._1IiJgJ{font-size:var(--28e99e);font-style:var(--e1d91f);font-variation-settings:var(--d7e46a);font-weight:var(--ca04c0);letter-spacing:var(--015e8c);line-height:var(--af784d);padding:var(--25e959) var(--796ab1)}.xlRCTE{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);padding:var(--0d8aa3) var(--3d1d33)}._3NLeTo{font-size:var(--9de4e2);font-style:var(--aeb144);font-variation-settings:var(--64a62f);font-weight:var(--586bdc);letter-spacing:var(--eae74e);line-height:var(--781b72);padding:var(--3123ee) var(--234e96)}._2VF0ZW{background-color:var(--c0734a)}._2VF0ZW,.pPcccd{color:var(--628fb7)}.pPcccd{background-color:var(--cadf86)}.uzb7W5{background-color:var(--bb9325)}._1JyZ95,.uzb7W5{color:var(--628fb7)}._1JyZ95{background-color:var(--5eae35)}.RBqjKo{background-color:var(--3b4f76)}._3NWQgR,.RBqjKo{color:var(--628fb7)}._3NWQgR{background-color:var(--14dcd1)}";
+var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Badge/style/index.module.less",__css:css_248z,"Badge":"_3h-Wzd","Badge--color-gray":"_2eKUAk","Badge--normal":"_1zS55d","Badge--inverted":"_3bUZbF","Badge--color-teal":"_3gyNLf","Badge--color-green":"rwgQdv","Badge--color-blue":"zb2wOT","Badge--color-yellow":"_1N-1FK","Badge--color-red":"_3a1P6I","Badge--color-magenta":"_3LKZfd","Badge--size-xs":"_3Qg4_n","Badge--size-s":"_1IiJgJ","Badge--size-m":"xlRCTE","Badge--size-default":"_3NLeTo","Badge--accent-accent":"_2VF0ZW","Badge--accent-positive":"pPcccd","Badge--accent-critical":"uzb7W5","Badge--accent-warning":"_1JyZ95","Badge--accent-info":"RBqjKo","Badge--accent-tertiary":"_3NWQgR"};
 var stylesheet=css_248z;
 styleInject(css_248z);
 

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

@@ -2,6 +2,7 @@
 @import '@preply/ds-web-core/dist/generated/options.less';
 @import '@preply/ds-web-core/dist/theme/style/declarations.mixins.less';
 @import '@preply/ds-web-core/dist/typography/style/mixins.less';
+@import '@preply/ds-web-core/dist/theme/style/declarations.mixins.less';
 
 @namespace: 'badge';
 
@@ -13,6 +14,12 @@
 
 // IMPORTANT: These functions should not be taken as an example or inspiration.
 // Usually, it is preferred to generate specific tokens for each component prop option.
+// More context: the Badge component uses accent in a different way compared to the rest of the app since
+// 1. it uses the semantic color as the background
+// 2. it has a grey (non-semantic) variant
+// 3. The foreground color is always the primary text color
+// Theoretically, we would need to clone the @preply/ds-web-core's `useTextAccentClassnames` but most
+// of the utilities used there are not exported @preply/by ds-web-core
 ._badge-color(@value) when (@value = 'gray') {
     color: @root-palette-gray-500;
     background-color: @root-palette-gray-200;
@@ -32,6 +39,17 @@
     background-color: @@_bg-token-name;
 }
 
+// Cloned by .action-variants
+.badge-variants() {
+    each(@BADGE_ACCENT_OPTIONS, #(@accent) {
+        &--accent-@{accent} {
+            @token: 'badge-accent-@{accent}';
+            .tokyoUiColor('text', 'primary');
+            background-color: @@token;
+        }
+    });
+}
+
 .badge-color-and-inverted() {
     each(@BADGE_COLOR_OPTIONS, {
         &--color-@{value}&--normal {

package/dist/components/Box/Box.d.ts

@@ -1,11 +1,11 @@
-import type { BoxPadding, BoxRadius, ColorName, Dataset, LayoutTag, Responsive, ShortHand } from '@preply/ds-core';
+import type { BoxPadding, BoxRadius, ColorBackground, ColorName, Dataset, LayoutTag, Responsive, ShortHand, Spacing } from '@preply/ds-core';
 import { ColorSchemeProps } from '@preply/ds-web-core';
 import { FC, ReactNode } from 'react';
 export interface BoxProps {
-    background?: ColorName;
+    background?: ColorName | ColorBackground;
     radius?: Responsive<BoxRadius>;
     tag?: LayoutTag;
-    padding?: Responsive<ShortHand<BoxPadding>>;
+    padding?: Responsive<ShortHand<BoxPadding> | ShortHand<Spacing>>;
     dataset?: Dataset;
     children?: ReactNode;
 }

package/dist/components/Box/Box.js

@@ -23,4 +23,4 @@ const BoxBase = ({ children, colorSchemeClassName, background, radius = BOX_RADI
 const Box = withColorScheme(BoxBase);
 
 export { Box };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Cb3gvQm94LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7XG4gICAgQm94UGFkZGluZyxcbiAgICBCb3hSYWRpdXMsXG4gICAgQ29sb3JOYW1lLFxuICAgIERhdGFzZXQsXG4gICAgTGF5b3V0VGFnLFxuICAgIFJlc3BvbnNpdmUsXG4gICAgU2hvcnRIYW5kLFxufSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHsgQk9YX1BBRERJTkdfREVGQVVMVCwgQk9YX1JBRElVU19ERUZBVUxULCBMQVlPVVRfVEFHX0RFRkFVTFQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBDb2xvclNjaGVtZVByb3BzLFxuICAgIFdpdGhDb2xvclNjaGVtZVByb3BzLFxuICAgIGdldERhdGFzZXRQcm9wcyxcbiAgICBnbG9iYWxDbGFzc05hbWVzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgc3RyaW5nQ2xhc3NOYW1lcyxcbiAgICB1c2VMYXlvdXRQYWRkaW5nQ2xhc3NuYW1lcyxcbiAgICB1c2VTdHlsZUV4dHJhY3QsXG4gICAgdXNlVmlzdWFsTW9kZUNsYXNzTmFtZXMsXG4gICAgd2l0aENvbG9yU2NoZW1lLFxufSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGUvaW5kZXgubW9kdWxlLmxlc3MnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEJveFByb3BzIHtcbiAgICBiYWNrZ3JvdW5kPzogQ29sb3JOYW1lO1xuICAgIHJhZGl1cz86IFJlc3BvbnNpdmU8Qm94UmFkaXVzPjtcbiAgICB0YWc/OiBMYXlvdXRUYWc7XG4gICAgcGFkZGluZz86IFJlc3BvbnNpdmU8U2hvcnRIYW5kPEJveFBhZGRpbmc+PjtcbiAgICBkYXRhc2V0PzogRGF0YXNldDtcbiAgICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbn1cblxuY29uc3QgQk9YID0gJ0JveCc7XG5cbmV4cG9ydCB0eXBlIFByb3BzID0gQm94UHJvcHMgJiBDb2xvclNjaGVtZVByb3BzO1xuXG5jb25zdCBCb3hCYXNlOiBGQzxCb3hQcm9wcyAmIFdpdGhDb2xvclNjaGVtZVByb3BzPiA9ICh7XG4gICAgY2hpbGRyZW4sXG4gICAgY29sb3JTY2hlbWVDbGFzc05hbWUsXG4gICAgYmFja2dyb3VuZCxcbiAgICByYWRpdXMgPSBCT1hfUkFESVVTX0RFRkFVTFQsXG4gICAgcGFkZGluZyA9IEJPWF9QQURESU5HX0RFRkFVTFQsXG4gICAgdGFnLFxuICAgIGRhdGFzZXQsXG59KSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBnbG9iYWxDbGFzc2VzID0gZ2xvYmFsQ2xhc3NOYW1lcyhbY29sb3JTY2hlbWVDbGFzc05hbWVdKTtcbiAgICBjb25zdCBjbGFzc05hbWVzID0gbW9kdWxlQ2xhc3NOYW1lcyhzdHlsZXMsIEJPWCwgW1xuICAgICAgICBzdHJpbmdDbGFzc05hbWVzKCdib3gtcmFkaXVzJywgcmFkaXVzKSxcbiAgICAgICAgc3RyaW5nQ2xhc3NOYW1lcygnYmFja2dyb3VuZCcsIGJhY2tncm91bmQpLFxuICAgIF0pO1xuICAgIGNvbnN0IHBhZGRpbmdDbGFzc05hbWVzID0gdXNlTGF5b3V0UGFkZGluZ0NsYXNzbmFtZXMocGFkZGluZyk7XG5cbiAgICBjb25zdCBUYWcgPSB0YWcgPz8gTEFZT1VUX1RBR19ERUZBVUxUO1xuXG4gICAgY29uc3QgYWxsQ2xhc3NOYW1lcyA9IFsuLi5nbG9iYWxDbGFzc2VzLCAuLi5jbGFzc05hbWVzLCAuLi5wYWRkaW5nQ2xhc3NOYW1lc107XG5cbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgICAgY2xhc3NOYW1lOiB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyhhbGxDbGFzc05hbWVzKS5qb2luKCcgJyksXG4gICAgICAgIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSxcbiAgICB9O1xuXG4gICAgcmV0dXJuIDxUYWcgey4uLnByb3BzfT57Y2hpbGRyZW59PC9UYWc+O1xufTtcblxuZXhwb3J0IGNvbnN0IEJveDogRkM8UHJvcHM+ID0gd2l0aENvbG9yU2NoZW1lKEJveEJhc2UpO1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQW1DQSxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUM7QUFJbEIsTUFBTSxPQUFPLEdBQXdDLENBQUMsRUFDbEQsUUFBUSxFQUNSLG9CQUFvQixFQUNwQixVQUFVLEVBQ1YsTUFBTSxHQUFHLGtCQUFrQixFQUMzQixPQUFPLEdBQUcsbUJBQW1CLEVBQzdCLEdBQUcsRUFDSCxPQUFPLEdBQ1Y7SUFDRyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxhQUFhLEdBQUcsZ0JBQWdCLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLENBQUM7SUFDL0QsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLEdBQUcsRUFBRTtRQUM3QyxnQkFBZ0IsQ0FBQyxZQUFZLEVBQUUsTUFBTSxDQUFDO1FBQ3RDLGdCQUFnQixDQUFDLFlBQVksRUFBRSxVQUFVLENBQUM7S0FDN0MsQ0FBQyxDQUFDO0lBQ0gsTUFBTSxpQkFBaUIsR0FBRywwQkFBMEIsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUU5RCxNQUFNLEdBQUcsR0FBRyxHQUFHLGFBQUgsR0FBRyxjQUFILEdBQUcsR0FBSSxrQkFBa0IsQ0FBQztJQUV0QyxNQUFNLGFBQWEsR0FBRyxDQUFDLEdBQUcsYUFBYSxFQUFFLEdBQUcsVUFBVSxFQUFFLEdBQUcsaUJBQWlCLENBQUMsQ0FBQztJQUU5RSxNQUFNLEtBQUssR0FBRztRQUNWLFNBQVMsRUFBRSx1QkFBdUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQzNELEdBQUcsZUFBZSxDQUFDLE9BQU8sQ0FBQztLQUM5QixDQUFDO0lBRUYsT0FBT0EsNkJBQUMsR0FBRyxvQkFBSyxLQUFLLEdBQUcsUUFBUSxDQUFPLENBQUM7QUFDNUMsQ0FBQyxDQUFDO01BRVcsR0FBRyxHQUFjLGVBQWUsQ0FBQyxPQUFPOzs7OyJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Cb3gvQm94LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7XG4gICAgQm94UGFkZGluZyxcbiAgICBCb3hSYWRpdXMsXG4gICAgQ29sb3JCYWNrZ3JvdW5kLFxuICAgIENvbG9yTmFtZSxcbiAgICBEYXRhc2V0LFxuICAgIExheW91dFRhZyxcbiAgICBSZXNwb25zaXZlLFxuICAgIFNob3J0SGFuZCxcbiAgICBTcGFjaW5nLFxufSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHsgQk9YX1BBRERJTkdfREVGQVVMVCwgQk9YX1JBRElVU19ERUZBVUxULCBMQVlPVVRfVEFHX0RFRkFVTFQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBDb2xvclNjaGVtZVByb3BzLFxuICAgIFdpdGhDb2xvclNjaGVtZVByb3BzLFxuICAgIGdldERhdGFzZXRQcm9wcyxcbiAgICBnbG9iYWxDbGFzc05hbWVzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgc3RyaW5nQ2xhc3NOYW1lcyxcbiAgICB1c2VMYXlvdXRQYWRkaW5nQ2xhc3NuYW1lcyxcbiAgICB1c2VTdHlsZUV4dHJhY3QsXG4gICAgdXNlVmlzdWFsTW9kZUNsYXNzTmFtZXMsXG4gICAgd2l0aENvbG9yU2NoZW1lLFxufSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGUvaW5kZXgubW9kdWxlLmxlc3MnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEJveFByb3BzIHtcbiAgICBiYWNrZ3JvdW5kPzogQ29sb3JOYW1lIHwgQ29sb3JCYWNrZ3JvdW5kO1xuICAgIHJhZGl1cz86IFJlc3BvbnNpdmU8Qm94UmFkaXVzPjtcbiAgICB0YWc/OiBMYXlvdXRUYWc7XG4gICAgcGFkZGluZz86IFJlc3BvbnNpdmU8U2hvcnRIYW5kPEJveFBhZGRpbmc+IHwgU2hvcnRIYW5kPFNwYWNpbmc+PjtcbiAgICBkYXRhc2V0PzogRGF0YXNldDtcbiAgICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbn1cblxuY29uc3QgQk9YID0gJ0JveCc7XG5cbmV4cG9ydCB0eXBlIFByb3BzID0gQm94UHJvcHMgJiBDb2xvclNjaGVtZVByb3BzO1xuXG5jb25zdCBCb3hCYXNlOiBGQzxCb3hQcm9wcyAmIFdpdGhDb2xvclNjaGVtZVByb3BzPiA9ICh7XG4gICAgY2hpbGRyZW4sXG4gICAgY29sb3JTY2hlbWVDbGFzc05hbWUsXG4gICAgYmFja2dyb3VuZCxcbiAgICByYWRpdXMgPSBCT1hfUkFESVVTX0RFRkFVTFQsXG4gICAgcGFkZGluZyA9IEJPWF9QQURESU5HX0RFRkFVTFQsXG4gICAgdGFnLFxuICAgIGRhdGFzZXQsXG59KSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBnbG9iYWxDbGFzc2VzID0gZ2xvYmFsQ2xhc3NOYW1lcyhbY29sb3JTY2hlbWVDbGFzc05hbWVdKTtcbiAgICBjb25zdCBjbGFzc05hbWVzID0gbW9kdWxlQ2xhc3NOYW1lcyhzdHlsZXMsIEJPWCwgW1xuICAgICAgICBzdHJpbmdDbGFzc05hbWVzKCdib3gtcmFkaXVzJywgcmFkaXVzKSxcbiAgICAgICAgc3RyaW5nQ2xhc3NOYW1lcygnYmFja2dyb3VuZCcsIGJhY2tncm91bmQpLFxuICAgIF0pO1xuICAgIGNvbnN0IHBhZGRpbmdDbGFzc05hbWVzID0gdXNlTGF5b3V0UGFkZGluZ0NsYXNzbmFtZXMocGFkZGluZyk7XG5cbiAgICBjb25zdCBUYWcgPSB0YWcgPz8gTEFZT1VUX1RBR19ERUZBVUxUO1xuXG4gICAgY29uc3QgYWxsQ2xhc3NOYW1lcyA9IFsuLi5nbG9iYWxDbGFzc2VzLCAuLi5jbGFzc05hbWVzLCAuLi5wYWRkaW5nQ2xhc3NOYW1lc107XG5cbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgICAgY2xhc3NOYW1lOiB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyhhbGxDbGFzc05hbWVzKS5qb2luKCcgJyksXG4gICAgICAgIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSxcbiAgICB9O1xuXG4gICAgcmV0dXJuIDxUYWcgey4uLnByb3BzfT57Y2hpbGRyZW59PC9UYWc+O1xufTtcblxuZXhwb3J0IGNvbnN0IEJveDogRkM8UHJvcHM+ID0gd2l0aENvbG9yU2NoZW1lKEJveEJhc2UpO1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQXFDQSxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUM7QUFJbEIsTUFBTSxPQUFPLEdBQXdDLENBQUMsRUFDbEQsUUFBUSxFQUNSLG9CQUFvQixFQUNwQixVQUFVLEVBQ1YsTUFBTSxHQUFHLGtCQUFrQixFQUMzQixPQUFPLEdBQUcsbUJBQW1CLEVBQzdCLEdBQUcsRUFDSCxPQUFPLEdBQ1Y7SUFDRyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxhQUFhLEdBQUcsZ0JBQWdCLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLENBQUM7SUFDL0QsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLEdBQUcsRUFBRTtRQUM3QyxnQkFBZ0IsQ0FBQyxZQUFZLEVBQUUsTUFBTSxDQUFDO1FBQ3RDLGdCQUFnQixDQUFDLFlBQVksRUFBRSxVQUFVLENBQUM7S0FDN0MsQ0FBQyxDQUFDO0lBQ0gsTUFBTSxpQkFBaUIsR0FBRywwQkFBMEIsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUU5RCxNQUFNLEdBQUcsR0FBRyxHQUFHLGFBQUgsR0FBRyxjQUFILEdBQUcsR0FBSSxrQkFBa0IsQ0FBQztJQUV0QyxNQUFNLGFBQWEsR0FBRyxDQUFDLEdBQUcsYUFBYSxFQUFFLEdBQUcsVUFBVSxFQUFFLEdBQUcsaUJBQWlCLENBQUMsQ0FBQztJQUU5RSxNQUFNLEtBQUssR0FBRztRQUNWLFNBQVMsRUFBRSx1QkFBdUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQzNELEdBQUcsZUFBZSxDQUFDLE9BQU8sQ0FBQztLQUM5QixDQUFDO0lBRUYsT0FBT0EsNkJBQUMsR0FBRyxvQkFBSyxLQUFLLEdBQUcsUUFBUSxDQUFPLENBQUM7QUFDNUMsQ0FBQyxDQUFDO01BRVcsR0FBRyxHQUFjLGVBQWUsQ0FBQyxPQUFPOzs7OyJ9

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "._28AVC_{-webkit-box-flex:1;background-color:var(--786b9e);border:none;border-spacing:0;-webkit-box-shadow:var(--a814c9);box-shadow:var(--a814c9);color:var(--aface6);-ms-flex:1;flex:1;font-weight:inherit;list-style:none;margin:0;text-align:inherit}._1qmwET{border-radius:var(--84e079)}._2QG_l9{border-radius:var(--1c37d5)}._1IrJdo{border-radius:var(--9e57e5)}@media (min-width:400px){._1cE2va{border-radius:var(--84e079)}.XWeqbw{border-radius:var(--1c37d5)}._14CqdZ{border-radius:var(--9e57e5)}}@media (min-width:700px){._2L7IWT{border-radius:var(--84e079)}._2-nWrE{border-radius:var(--1c37d5)}._2pnTll{border-radius:var(--9e57e5)}}@media (min-width:880px){._3BlbfP{border-radius:var(--84e079)}._2e5Dhw{border-radius:var(--1c37d5)}._1mWbTs{border-radius:var(--9e57e5)}}@media (min-width:1200px){._3LsEJq{border-radius:var(--84e079)}._14CRd4{border-radius:var(--1c37d5)}._3Ms5_W{border-radius:var(--9e57e5)}}@media (min-width:1900px){._3pxYkW{border-radius:var(--84e079)}._2hl3vu{border-radius:var(--1c37d5)}._2U_Skz{border-radius:var(--9e57e5)}}._2mtDSf{background-color:var(--145676)}._3IIy34{background-color:var(--55407f)}._3Lojo1{background-color:var(--8f1238)}.OgB_6M{background-color:var(--da403c)}._1uNrWB{background-color:var(--7c8c3c)}._3qIVzD{background-color:var(--c9575b)}._2_k8Ey{background-color:var(--2fb6f7)}.U9OjFS{background-color:var(--54ed1d)}._2Hg15h{background-color:var(--b706bf)}._1Wax5r{background-color:var(--4adefb)}._51LDD8{background-color:var(--de8a40)}._37kqC2{background-color:var(--574543)}._2sN3oI{background-color:var(--1383a7)}._1hmzgV{background-color:var(--9f1066)}._2jfUtL{background-color:var(--d4cf94)}._3bVf64{background-color:var(--bbfa9f)}._3xJnu0{background-color:var(--5f8b30)}._2hpbs4{background-color:var(--c7d8be)}._3p4Tbx{background-color:var(--17bab8)}._1GQjtV{background-color:var(--f017e5)}._3uxOUH{background-color:var(--2242ed)}._2YiKp0{background-color:var(--e40de4)}._1zHk1U{background-color:var(--ecb5d5)}._36Bojd{background-color:var(--5b5cb0)}.aesNAY{background-color:var(--d55c71)}._3MppzQ{background-color:var(--4e47fe)}._2VO_hL{background-color:var(--3e7877)}._2WHPUw{background-color:var(--21906f)}._1rcIL5{background-color:var(--5d87f3)}._3D_7V1{background-color:var(--201e14)}._112Y0Q{background-color:var(--e1c27c)}._22KIb-{background-color:var(--6a1420)}._2hbfen{background-color:var(--1a9963)}._2hKbbK{background-color:var(--b774df)}.Y8TBRy{background-color:var(--f72cdd)}._2x-3Vr{background-color:var(--6cbd80)}._6H3srp{background-color:var(--5893e7)}";
-var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Box/style/index.module.less",__css:css_248z,"Box":"_28AVC_","Box--box-radius-none":"_1qmwET","Box--box-radius-m":"_2QG_l9","Box--box-radius-l":"_1IrJdo","Box--narrow-l--box-radius-none":"_1cE2va","Box--narrow-l--box-radius-m":"XWeqbw","Box--narrow-l--box-radius-l":"_14CqdZ","Box--medium-s--box-radius-none":"_2L7IWT","Box--medium-s--box-radius-m":"_2-nWrE","Box--medium-s--box-radius-l":"_2pnTll","Box--medium-l--box-radius-none":"_3BlbfP","Box--medium-l--box-radius-m":"_2e5Dhw","Box--medium-l--box-radius-l":"_1mWbTs","Box--wide-s--box-radius-none":"_3LsEJq","Box--wide-s--box-radius-m":"_14CRd4","Box--wide-s--box-radius-l":"_3Ms5_W","Box--wide-l--box-radius-none":"_3pxYkW","Box--wide-l--box-radius-m":"_2hl3vu","Box--wide-l--box-radius-l":"_2U_Skz","Box--background-white":"_2mtDSf","Box--background-gray-100":"_3IIy34","Box--background-gray-200":"_3Lojo1","Box--background-gray-300":"OgB_6M","Box--background-gray-400":"_1uNrWB","Box--background-gray-500":"_3qIVzD","Box--background-gray-600":"_2_k8Ey","Box--background-teal-100":"U9OjFS","Box--background-teal-200":"_2Hg15h","Box--background-teal-300":"_1Wax5r","Box--background-teal-400":"_51LDD8","Box--background-teal-500":"_37kqC2","Box--background-green-100":"_2sN3oI","Box--background-green-200":"_1hmzgV","Box--background-green-300":"_2jfUtL","Box--background-green-400":"_3bVf64","Box--background-green-500":"_3xJnu0","Box--background-yellow-100":"_2hpbs4","Box--background-yellow-200":"_3p4Tbx","Box--background-yellow-300":"_1GQjtV","Box--background-yellow-400":"_3uxOUH","Box--background-yellow-500":"_2YiKp0","Box--background-red-100":"_1zHk1U","Box--background-red-200":"_36Bojd","Box--background-red-300":"aesNAY","Box--background-red-400":"_3MppzQ","Box--background-red-500":"_2VO_hL","Box--background-blue-100":"_2WHPUw","Box--background-blue-200":"_1rcIL5","Box--background-blue-300":"_3D_7V1","Box--background-blue-400":"_112Y0Q","Box--background-blue-500":"_22KIb-","Box--background-magenta-100":"_2hbfen","Box--background-magenta-200":"_2hKbbK","Box--background-magenta-300":"Y8TBRy","Box--background-magenta-400":"_2x-3Vr","Box--background-magenta-500":"_6H3srp"};
+var css_248z = "._28AVC_{-webkit-box-flex:1;background-color:var(--786b9e);border:none;border-spacing:0;-webkit-box-shadow:var(--a814c9);box-shadow:var(--a814c9);color:var(--aface6);-ms-flex:1;flex:1;font-weight:inherit;list-style:none;margin:0;text-align:inherit}._1qmwET{border-radius:var(--84e079)}._2QG_l9{border-radius:var(--1c37d5)}._1IrJdo{border-radius:var(--9e57e5)}._3JoBQp{border-radius:var(--adc668)}._3rKfUa{border-radius:var(--9817c7)}._3nOSkL{border-radius:var(--7dcb5e)}.SnD0v_{border-radius:var(--2071ea)}._16WZKS{border-radius:var(--c1925d)}.MnZf3y{border-radius:var(--f3f949)}._33sEh3{border-radius:var(--67250f)}._1OqZw_{border-radius:var(--fba602)}._1QmK6F{border-radius:var(--f8b939)}._3RgUlv{border-radius:var(--4d9939)}._1VhJWZ{border-radius:var(--a78cb4)}._22byEQ{border-radius:var(--439947)}@media (min-width:400px){._1cE2va{border-radius:var(--84e079)}.XWeqbw{border-radius:var(--1c37d5)}._14CqdZ{border-radius:var(--9e57e5)}._2hMhK-{border-radius:var(--adc668)}._3BtjLO{border-radius:var(--9817c7)}._20b0hl{border-radius:var(--7dcb5e)}._37MLCS{border-radius:var(--2071ea)}._6Sf1zQ{border-radius:var(--c1925d)}._1qO59e{border-radius:var(--f3f949)}._30cQof{border-radius:var(--67250f)}._3prbjp{border-radius:var(--fba602)}.vEynuV{border-radius:var(--f8b939)}.M-gyQg{border-radius:var(--4d9939)}._1i_PMg{border-radius:var(--a78cb4)}._35Z5rX{border-radius:var(--439947)}}@media (min-width:700px){._2L7IWT{border-radius:var(--84e079)}._2-nWrE{border-radius:var(--1c37d5)}._2pnTll{border-radius:var(--9e57e5)}._2Pn4Fr{border-radius:var(--adc668)}._3JZLKA{border-radius:var(--9817c7)}._1uyJcS{border-radius:var(--7dcb5e)}._2FM1zo{border-radius:var(--2071ea)}._20aCDv{border-radius:var(--c1925d)}._3PXTQ0{border-radius:var(--f3f949)}._1pSigM{border-radius:var(--67250f)}._2fJIsw{border-radius:var(--fba602)}._1QpGyP{border-radius:var(--f8b939)}.ya1MEd{border-radius:var(--4d9939)}._1xev9X{border-radius:var(--a78cb4)}._1IZik-{border-radius:var(--439947)}}@media (min-width:880px){._3BlbfP{border-radius:var(--84e079)}._2e5Dhw{border-radius:var(--1c37d5)}._1mWbTs{border-radius:var(--9e57e5)}._2XCar4{border-radius:var(--adc668)}.u4rWIj{border-radius:var(--9817c7)}._24j_jP{border-radius:var(--7dcb5e)}._2K5BwQ{border-radius:var(--2071ea)}.NLNHHJ{border-radius:var(--c1925d)}._38ijyE{border-radius:var(--f3f949)}._3UoIWF{border-radius:var(--67250f)}._1S0LMZ{border-radius:var(--fba602)}._2qrbRU{border-radius:var(--f8b939)}._1g0Jj5{border-radius:var(--4d9939)}._1c9eOH{border-radius:var(--a78cb4)}.yhvXI0{border-radius:var(--439947)}}@media (min-width:1200px){._3LsEJq{border-radius:var(--84e079)}._14CRd4{border-radius:var(--1c37d5)}._3Ms5_W{border-radius:var(--9e57e5)}._1-mSZI{border-radius:var(--adc668)}._3CyzYh{border-radius:var(--9817c7)}._1YFB2K{border-radius:var(--7dcb5e)}._2hJRtK{border-radius:var(--2071ea)}._1JNndg{border-radius:var(--c1925d)}._16-Ae5{border-radius:var(--f3f949)}._1kuMyz{border-radius:var(--67250f)}._1oU3Ri{border-radius:var(--fba602)}._16cWPM{border-radius:var(--f8b939)}._24Mesx{border-radius:var(--4d9939)}.LWW-g2{border-radius:var(--a78cb4)}._3xqx8J{border-radius:var(--439947)}}@media (min-width:1900px){._3pxYkW{border-radius:var(--84e079)}._2hl3vu{border-radius:var(--1c37d5)}._2U_Skz{border-radius:var(--9e57e5)}._3avmXh{border-radius:var(--adc668)}._3gyQJh{border-radius:var(--9817c7)}._2vvBvM{border-radius:var(--7dcb5e)}._3LdNlv{border-radius:var(--2071ea)}.tc329r{border-radius:var(--c1925d)}._1wfec2{border-radius:var(--f3f949)}._5ySpXI{border-radius:var(--67250f)}._1fe2Pm{border-radius:var(--fba602)}._3xergt{border-radius:var(--f8b939)}._1m1xfm{border-radius:var(--4d9939)}.Xblivu{border-radius:var(--a78cb4)}._16ce3M{border-radius:var(--439947)}}._2mtDSf{background-color:var(--145676)}._3IIy34{background-color:var(--55407f)}._3Lojo1{background-color:var(--8f1238)}.OgB_6M{background-color:var(--da403c)}._1uNrWB{background-color:var(--7c8c3c)}._3qIVzD{background-color:var(--c9575b)}._2_k8Ey{background-color:var(--2fb6f7)}.U9OjFS{background-color:var(--54ed1d)}._2Hg15h{background-color:var(--b706bf)}._1Wax5r{background-color:var(--4adefb)}._51LDD8{background-color:var(--de8a40)}._37kqC2{background-color:var(--574543)}._2sN3oI{background-color:var(--1383a7)}._1hmzgV{background-color:var(--9f1066)}._2jfUtL{background-color:var(--d4cf94)}._3bVf64{background-color:var(--bbfa9f)}._3xJnu0{background-color:var(--5f8b30)}._2hpbs4{background-color:var(--c7d8be)}._3p4Tbx{background-color:var(--17bab8)}._1GQjtV{background-color:var(--f017e5)}._3uxOUH{background-color:var(--2242ed)}._2YiKp0{background-color:var(--e40de4)}._1zHk1U{background-color:var(--ecb5d5)}._36Bojd{background-color:var(--5b5cb0)}.aesNAY{background-color:var(--d55c71)}._3MppzQ{background-color:var(--4e47fe)}._2VO_hL{background-color:var(--3e7877)}._2WHPUw{background-color:var(--21906f)}._1rcIL5{background-color:var(--5d87f3)}._3D_7V1{background-color:var(--201e14)}._112Y0Q{background-color:var(--e1c27c)}._22KIb-{background-color:var(--6a1420)}._2hbfen{background-color:var(--1a9963)}._2hKbbK{background-color:var(--b774df)}.Y8TBRy{background-color:var(--f72cdd)}._2x-3Vr{background-color:var(--6cbd80)}._6H3srp{background-color:var(--5893e7)}._1U-eqs{background-color:var(--3546c3)}._1TOGeQ{background-color:var(--302ecf)}._1dFEET{background-color:var(--a5c761)}._1XpUM1{background-color:var(--02a0d5)}.R9-pRs{background-color:var(--319b29)}.xO7poF{background-color:var(--cd91ab)}._3-IPKW{background-color:var(--ff5021)}._2zrTQT{background-color:var(--5050c4)}._2SgZLJ{background-color:var(--6e8b10)}._1-FMaw{background-color:var(--e447b3)}.IplVgU{background-color:var(--b011aa)}";
+var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Box/style/index.module.less",__css:css_248z,"Box":"_28AVC_","Box--box-radius-none":"_1qmwET","Box--box-radius-m":"_2QG_l9","Box--box-radius-l":"_1IrJdo","Box--box-radius-2":"_3rKfUa","Box--box-radius-4":"_3nOSkL","Box--box-radius-8":"SnD0v_","Box--box-radius-0":"_3JoBQp","Box--box-radius-12":"_16WZKS","Box--box-radius-16":"MnZf3y","Box--box-radius-24":"_33sEh3","Box--box-radius-32":"_1OqZw_","Box--box-radius-48":"_1QmK6F","Box--box-radius-64":"_3RgUlv","Box--box-radius-96":"_1VhJWZ","Box--box-radius-160":"_22byEQ","Box--narrow-l--box-radius-none":"_1cE2va","Box--narrow-l--box-radius-m":"XWeqbw","Box--narrow-l--box-radius-l":"_14CqdZ","Box--narrow-l--box-radius-2":"_3BtjLO","Box--narrow-l--box-radius-4":"_20b0hl","Box--narrow-l--box-radius-8":"_37MLCS","Box--narrow-l--box-radius-0":"_2hMhK-","Box--narrow-l--box-radius-12":"_6Sf1zQ","Box--narrow-l--box-radius-16":"_1qO59e","Box--narrow-l--box-radius-24":"_30cQof","Box--narrow-l--box-radius-32":"_3prbjp","Box--narrow-l--box-radius-48":"vEynuV","Box--narrow-l--box-radius-64":"M-gyQg","Box--narrow-l--box-radius-96":"_1i_PMg","Box--narrow-l--box-radius-160":"_35Z5rX","Box--medium-s--box-radius-none":"_2L7IWT","Box--medium-s--box-radius-m":"_2-nWrE","Box--medium-s--box-radius-l":"_2pnTll","Box--medium-s--box-radius-2":"_3JZLKA","Box--medium-s--box-radius-4":"_1uyJcS","Box--medium-s--box-radius-8":"_2FM1zo","Box--medium-s--box-radius-0":"_2Pn4Fr","Box--medium-s--box-radius-12":"_20aCDv","Box--medium-s--box-radius-16":"_3PXTQ0","Box--medium-s--box-radius-24":"_1pSigM","Box--medium-s--box-radius-32":"_2fJIsw","Box--medium-s--box-radius-48":"_1QpGyP","Box--medium-s--box-radius-64":"ya1MEd","Box--medium-s--box-radius-96":"_1xev9X","Box--medium-s--box-radius-160":"_1IZik-","Box--medium-l--box-radius-none":"_3BlbfP","Box--medium-l--box-radius-m":"_2e5Dhw","Box--medium-l--box-radius-l":"_1mWbTs","Box--medium-l--box-radius-2":"u4rWIj","Box--medium-l--box-radius-4":"_24j_jP","Box--medium-l--box-radius-8":"_2K5BwQ","Box--medium-l--box-radius-0":"_2XCar4","Box--medium-l--box-radius-12":"NLNHHJ","Box--medium-l--box-radius-16":"_38ijyE","Box--medium-l--box-radius-24":"_3UoIWF","Box--medium-l--box-radius-32":"_1S0LMZ","Box--medium-l--box-radius-48":"_2qrbRU","Box--medium-l--box-radius-64":"_1g0Jj5","Box--medium-l--box-radius-96":"_1c9eOH","Box--medium-l--box-radius-160":"yhvXI0","Box--wide-s--box-radius-none":"_3LsEJq","Box--wide-s--box-radius-m":"_14CRd4","Box--wide-s--box-radius-l":"_3Ms5_W","Box--wide-s--box-radius-2":"_3CyzYh","Box--wide-s--box-radius-4":"_1YFB2K","Box--wide-s--box-radius-8":"_2hJRtK","Box--wide-s--box-radius-0":"_1-mSZI","Box--wide-s--box-radius-12":"_1JNndg","Box--wide-s--box-radius-16":"_16-Ae5","Box--wide-s--box-radius-24":"_1kuMyz","Box--wide-s--box-radius-32":"_1oU3Ri","Box--wide-s--box-radius-48":"_16cWPM","Box--wide-s--box-radius-64":"_24Mesx","Box--wide-s--box-radius-96":"LWW-g2","Box--wide-s--box-radius-160":"_3xqx8J","Box--wide-l--box-radius-none":"_3pxYkW","Box--wide-l--box-radius-m":"_2hl3vu","Box--wide-l--box-radius-l":"_2U_Skz","Box--wide-l--box-radius-2":"_3gyQJh","Box--wide-l--box-radius-4":"_2vvBvM","Box--wide-l--box-radius-8":"_3LdNlv","Box--wide-l--box-radius-0":"_3avmXh","Box--wide-l--box-radius-12":"tc329r","Box--wide-l--box-radius-16":"_1wfec2","Box--wide-l--box-radius-24":"_5ySpXI","Box--wide-l--box-radius-32":"_1fe2Pm","Box--wide-l--box-radius-48":"_3xergt","Box--wide-l--box-radius-64":"_1m1xfm","Box--wide-l--box-radius-96":"Xblivu","Box--wide-l--box-radius-160":"_16ce3M","Box--background-white":"_2mtDSf","Box--background-gray-100":"_3IIy34","Box--background-gray-200":"_3Lojo1","Box--background-gray-300":"OgB_6M","Box--background-gray-400":"_1uNrWB","Box--background-gray-500":"_3qIVzD","Box--background-gray-600":"_2_k8Ey","Box--background-teal-100":"U9OjFS","Box--background-teal-200":"_2Hg15h","Box--background-teal-300":"_1Wax5r","Box--background-teal-400":"_51LDD8","Box--background-teal-500":"_37kqC2","Box--background-green-100":"_2sN3oI","Box--background-green-200":"_1hmzgV","Box--background-green-300":"_2jfUtL","Box--background-green-400":"_3bVf64","Box--background-green-500":"_3xJnu0","Box--background-yellow-100":"_2hpbs4","Box--background-yellow-200":"_3p4Tbx","Box--background-yellow-300":"_1GQjtV","Box--background-yellow-400":"_3uxOUH","Box--background-yellow-500":"_2YiKp0","Box--background-red-100":"_1zHk1U","Box--background-red-200":"_36Bojd","Box--background-red-300":"aesNAY","Box--background-red-400":"_3MppzQ","Box--background-red-500":"_2VO_hL","Box--background-blue-100":"_2WHPUw","Box--background-blue-200":"_1rcIL5","Box--background-blue-300":"_3D_7V1","Box--background-blue-400":"_112Y0Q","Box--background-blue-500":"_22KIb-","Box--background-magenta-100":"_2hbfen","Box--background-magenta-200":"_2hKbbK","Box--background-magenta-300":"Y8TBRy","Box--background-magenta-400":"_2x-3Vr","Box--background-magenta-500":"_6H3srp","Box--background-primary":"_1U-eqs","Box--background-secondary":"_1TOGeQ","Box--background-tertiary":"_1dFEET","Box--background-accent":"_3-IPKW","Box--background-overlay":"_1XpUM1","Box--background-disabled":"R9-pRs","Box--background-brand":"xO7poF","Box--background-positive":"_2zrTQT","Box--background-info":"_2SgZLJ","Box--background-warning":"_1-FMaw","Box--background-critical":"IplVgU"};
 var stylesheet=css_248z;
 styleInject(css_248z);
 

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

@@ -29,4 +29,11 @@
             background-color: @@token-name;
         }
     });
+
+    each(@COLOR_BACKGROUND_OPTIONS, {
+        &--background-@{value} {
+            @token-name: 'color-background-@{value}';
+            background-color: @@token-name;
+        }
+    });
 }

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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--5836cb);background-color:var(--211bc0);border-radius:var(--c4b051);color:var(--41d493);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}._3wd25W:hover input{border-color:var(--398094)}._3wd25W input{background:none;border:var(--d9baa3) solid var(--29cd58);border-radius:var(--c4b051);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:calc(var(--d9baa3) + var(--1ba55a));padding-left:calc(var(--477fda) - var(--d9baa3));padding-right:var(--d9baa3)}._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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0;height:100%;left:calc(var(--477fda) - var(--d9baa3));pointer-events:none;position:absolute;top:0}.dR7X8n svg{color:var(--cbc724)}._2LQKru ._3wd25W input{padding-left:calc(var(--477fda) - var(--d9baa3) + var(--7c1b1c) + var(--1ba55a))}._2ywoTt ._3wd25W input{padding-right:58px}._2oOvNj ._3wd25W{background-color:var(--95df5b)}._2oOvNj ._3wd25W input{border-color:var(--eaf4a3);color:var(--7b0f41)}._2oOvNj .dR7X8n svg{color:var(--7b0f41)}._3VIW2W ._3wd25W input{border-color:var(--398094)}._2AzKuR ._3wd25W{background-color:var(--04daeb)}._2AzKuR ._3wd25W input{border-color:transparent}._3wd25W button{margin-bottom:calc(var(--1ba55a)*-1);margin-top:calc(var(--1ba55a)*-1);position:absolute;right:var(--6947b0);top:calc(var(--1ba55a) + var(--6947b0))}";
+var css_248z = "._3wd25W{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--302ecf);background-color:var(--211bc0);border-radius:var(--c4b051);color:var(--41d493);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}._3wd25W:hover input,._3wd25W:hover textarea{border-color:var(--398094)}._3wd25W input,._3wd25W textarea{background:none;border:var(--d9baa3) solid var(--29cd58);border-radius:var(--c4b051);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:calc(var(--d9baa3) + var(--1ba55a));padding-left:calc(var(--477fda) - var(--d9baa3));padding-right:var(--d9baa3)}._3wd25W input::-webkit-input-placeholder,._3wd25W textarea::-webkit-input-placeholder{color:var(--d9209f)}._3wd25W input::-moz-placeholder,._3wd25W textarea::-moz-placeholder{color:var(--d9209f)}._3wd25W input:-ms-input-placeholder,._3wd25W textarea:-ms-input-placeholder{color:var(--d9209f)}._3wd25W input::-ms-input-placeholder,._3wd25W textarea::-ms-input-placeholder{color:var(--d9209f)}._3wd25W input::placeholder,._3wd25W textarea::placeholder{color:var(--d9209f)}.dR7X8n{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0;height:100%;left:calc(var(--477fda) - var(--d9baa3));pointer-events:none;position:absolute;top:0}.dR7X8n svg{color:var(--cbc724)}._2LQKru ._3wd25W input{padding-left:calc(var(--477fda) - var(--d9baa3) + var(--7c1b1c) + var(--1ba55a))}._2ywoTt ._3wd25W input{padding-right:58px}._2oOvNj ._3wd25W{background-color:var(--95df5b)}._2oOvNj ._3wd25W input,._2oOvNj ._3wd25W textarea{border-color:var(--eaf4a3);color:var(--7b0f41)}._2oOvNj .dR7X8n svg{color:var(--7b0f41)}._3VIW2W ._3wd25W input,._3VIW2W ._3wd25W textarea{border-color:var(--398094)}._2AzKuR ._3wd25W{background-color:var(--04daeb)}._2AzKuR ._3wd25W input,._2AzKuR ._3wd25W textarea{border-color:transparent}._3wd25W button{margin-bottom:calc(var(--1ba55a)*-1);margin-top:calc(var(--1ba55a)*-1);position:absolute;right:var(--6947b0);top:calc(var(--1ba55a) + var(--6947b0))}";
 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-icon":"_2LQKru","FieldLayout--has-button":"_2ywoTt","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

@@ -13,14 +13,18 @@
         display: flex;
         position: relative;
         align-items: center;
-        background-color: @background-secondary;
+        background-color: @color-background-secondary;
         .color('input', 'base');
         .bg-color('input', 'base');
-        &:hover input {
-            .border-color('border', 'focus');
+        &:hover {
+            input,
+            textarea {
+                .border-color('border', 'focus');
+            }
         }
 
-        input {
+        input,
+        textarea {
             .border-color('border', 'base');
             .border-width('input', 'base');
             .border-radius('input', 'base');
@@ -69,7 +73,8 @@
     &--has-error &--input {
         .bg-color('input', 'error');
 
-        input {
+        input,
+        textarea {
             .border-color('border', 'error');
             .color('input', 'error');
         }
@@ -79,14 +84,18 @@
         color: @input-error-color;
     }
 
-    &--is-focused &--input input {
-        .border-color('border', 'focus');
+    &--is-focused &--input {
+        input,
+        textarea {
+            .border-color('border', 'focus');
+        }
     }
 
     &--is-disabled &--input {
         background-color: @action-base-disabled-bgColor;
 
-        input {
+        input,
+        textarea {
             border-color: transparent;
         }
     }

package/dist/components/Heading/Heading.d.ts

@@ -1,10 +1,14 @@
-import type { ColorName, Dataset, HeadingLevel, HeadingTag, Responsive } from '@preply/ds-core';
+import type { ColorName, Dataset, HeadingLevel, HeadingTag, Responsive, TextAccent } from '@preply/ds-core';
 import { FC, ReactNode } from 'react';
 export interface Props {
     level: HeadingLevel;
+    /**
+     * @deprecated There is no large version in Tokyo UI.
+     */
     large?: Responsive<boolean>;
     strong?: boolean;
     tag?: HeadingTag;
+    accent?: TextAccent;
     color?: ColorName;
     centered?: Responsive<boolean>;
     dataset?: Dataset;

package/dist/components/Heading/Heading.js

@@ -1,9 +1,9 @@
-import { useInstrument, useStyleExtract, moduleClassNames, booleanClassNames, useTextCenteredClassnames, useColorClassNames, useVisualModeClassNames, getDatasetProps } from '@preply/ds-web-core';
+import { useInstrument, useStyleExtract, moduleClassNames, booleanClassNames, useTextCenteredClassnames, useTextAccentClassnames, useColorClassNames, useVisualModeClassNames, getDatasetProps } from '@preply/ds-web-core';
 import React__default from 'react';
 import styles from './style/index.module.less.js';
 
 const HEADING = 'Heading';
-const Heading = ({ children, level, large = false, strong, tag, color, centered, dataset, }) => {
+const Heading = ({ children, accent, level, large = false, strong, tag, color, centered, dataset, }) => {
     useInstrument('render', {
         component: HEADING,
         props: { level, strong },
@@ -14,8 +14,16 @@ const Heading = ({ children, level, large = false, strong, tag, color, centered,
         booleanClassNames(`level-${level}-large`, `level-${level}-normal`, large),
     ]);
     const centeredClassNames = useTextCenteredClassnames(centered);
+    const actualColor = accent ? undefined : color;
+    const useDefaultAccent = !actualColor;
+    const accentClassNames = useTextAccentClassnames(useDefaultAccent, accent);
     const colorClassNames = useColorClassNames(color);
-    const allClassNames = [...classNames, ...centeredClassNames, ...colorClassNames];
+    const allClassNames = [
+        ...classNames,
+        ...centeredClassNames,
+        ...accentClassNames,
+        ...colorClassNames,
+    ];
     const props = {
         className: useVisualModeClassNames(allClassNames).join(' '),
         ...getDatasetProps(dataset),
@@ -24,4 +32,4 @@ const Heading = ({ children, level, large = false, strong, tag, color, centered,
 };
 
 export { Heading };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVhZGluZy5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSGVhZGluZy9IZWFkaW5nLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENvbG9yTmFtZSwgRGF0YXNldCwgSGVhZGluZ0xldmVsLCBIZWFkaW5nVGFnLCBSZXNwb25zaXZlIH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7XG4gICAgYm9vbGVhbkNsYXNzTmFtZXMsXG4gICAgZ2V0RGF0YXNldFByb3BzLFxuICAgIG1vZHVsZUNsYXNzTmFtZXMsXG4gICAgdXNlQ29sb3JDbGFzc05hbWVzLFxuICAgIHVzZUluc3RydW1lbnQsXG4gICAgdXNlU3R5bGVFeHRyYWN0LFxuICAgIHVzZVRleHRDZW50ZXJlZENsYXNzbmFtZXMsXG4gICAgdXNlVmlzdWFsTW9kZUNsYXNzTmFtZXMsXG59IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEZDLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUHJvcHMge1xuICAgIGxldmVsOiBIZWFkaW5nTGV2ZWw7XG4gICAgbGFyZ2U/OiBSZXNwb25zaXZlPGJvb2xlYW4+O1xuICAgIHN0cm9uZz86IGJvb2xlYW47XG4gICAgdGFnPzogSGVhZGluZ1RhZztcbiAgICBjb2xvcj86IENvbG9yTmFtZTtcbiAgICBjZW50ZXJlZD86IFJlc3BvbnNpdmU8Ym9vbGVhbj47XG4gICAgZGF0YXNldD86IERhdGFzZXQ7XG4gICAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEhFQURJTkcgPSAnSGVhZGluZyc7XG5cbmV4cG9ydCBjb25zdCBIZWFkaW5nOiBGQzxQcm9wcz4gPSAoe1xuICAgIGNoaWxkcmVuLFxuICAgIGxldmVsLFxuICAgIGxhcmdlID0gZmFsc2UsXG4gICAgc3Ryb25nLFxuICAgIHRhZyxcbiAgICBjb2xvcixcbiAgICBjZW50ZXJlZCxcbiAgICBkYXRhc2V0LFxufSkgPT4ge1xuICAgIHVzZUluc3RydW1lbnQoJ3JlbmRlcicsIHtcbiAgICAgICAgY29tcG9uZW50OiBIRUFESU5HLFxuICAgICAgICBwcm9wczogeyBsZXZlbCwgc3Ryb25nIH0sXG4gICAgfSk7XG5cbiAgICB1c2VTdHlsZUV4dHJhY3Qoc3R5bGVzKTtcblxuICAgIGNvbnN0IFRhZyA9ICh0YWcgfHwgbGV2ZWwpIGFzIEhlYWRpbmdUYWc7XG5cbiAgICBjb25zdCBjbGFzc05hbWVzID0gbW9kdWxlQ2xhc3NOYW1lcyhzdHlsZXMsIEhFQURJTkcsIFtcbiAgICAgICAgYm9vbGVhbkNsYXNzTmFtZXMoYGxldmVsLSR7bGV2ZWx9LWxhcmdlYCwgYGxldmVsLSR7bGV2ZWx9LW5vcm1hbGAsIGxhcmdlKSxcbiAgICBdKTtcbiAgICBjb25zdCBjZW50ZXJlZENsYXNzTmFtZXMgPSB1c2VUZXh0Q2VudGVyZWRDbGFzc25hbWVzKGNlbnRlcmVkKTtcbiAgICBjb25zdCBjb2xvckNsYXNzTmFtZXMgPSB1c2VDb2xvckNsYXNzTmFtZXMoY29sb3IpO1xuXG4gICAgY29uc3QgYWxsQ2xhc3NOYW1lcyA9IFsuLi5jbGFzc05hbWVzLCAuLi5jZW50ZXJlZENsYXNzTmFtZXMsIC4uLmNvbG9yQ2xhc3NOYW1lc107XG5cbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgICAgY2xhc3NOYW1lOiB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyhhbGxDbGFzc05hbWVzKS5qb2luKCcgJyksXG4gICAgICAgIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSxcbiAgICB9O1xuXG4gICAgcmV0dXJuIDxUYWcgey4uLnByb3BzfT57Y2hpbGRyZW59PC9UYWc+O1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7OztBQTBCQSxNQUFNLE9BQU8sR0FBRyxTQUFTLENBQUM7TUFFYixPQUFPLEdBQWMsQ0FBQyxFQUMvQixRQUFRLEVBQ1IsS0FBSyxFQUNMLEtBQUssR0FBRyxLQUFLLEVBQ2IsTUFBTSxFQUNOLEdBQUcsRUFDSCxLQUFLLEVBQ0wsUUFBUSxFQUNSLE9BQU8sR0FDVjtJQUNHLGFBQWEsQ0FBQyxRQUFRLEVBQUU7UUFDcEIsU0FBUyxFQUFFLE9BQU87UUFDbEIsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRTtLQUMzQixDQUFDLENBQUM7SUFFSCxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxHQUFHLElBQUksR0FBRyxJQUFJLEtBQUssQ0FBZSxDQUFDO0lBRXpDLE1BQU0sVUFBVSxHQUFHLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUU7UUFDakQsaUJBQWlCLENBQUMsU0FBUyxLQUFLLFFBQVEsRUFBRSxTQUFTLEtBQUssU0FBUyxFQUFFLEtBQUssQ0FBQztLQUM1RSxDQUFDLENBQUM7SUFDSCxNQUFNLGtCQUFrQixHQUFHLHlCQUF5QixDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQy9ELE1BQU0sZUFBZSxHQUFHLGtCQUFrQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBRWxELE1BQU0sYUFBYSxHQUFHLENBQUMsR0FBRyxVQUFVLEVBQUUsR0FBRyxrQkFBa0IsRUFBRSxHQUFHLGVBQWUsQ0FBQyxDQUFDO0lBRWpGLE1BQU0sS0FBSyxHQUFHO1FBQ1YsU0FBUyxFQUFFLHVCQUF1QixDQUFDLGFBQWEsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7UUFDM0QsR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDO0tBQzlCLENBQUM7SUFFRixPQUFPQSw2QkFBQyxHQUFHLG9CQUFLLEtBQUssR0FBRyxRQUFRLENBQU8sQ0FBQztBQUM1Qzs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVhZGluZy5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSGVhZGluZy9IZWFkaW5nLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7XG4gICAgQ29sb3JOYW1lLFxuICAgIERhdGFzZXQsXG4gICAgSGVhZGluZ0xldmVsLFxuICAgIEhlYWRpbmdUYWcsXG4gICAgUmVzcG9uc2l2ZSxcbiAgICBUZXh0QWNjZW50LFxufSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBib29sZWFuQ2xhc3NOYW1lcyxcbiAgICBnZXREYXRhc2V0UHJvcHMsXG4gICAgbW9kdWxlQ2xhc3NOYW1lcyxcbiAgICB1c2VDb2xvckNsYXNzTmFtZXMsXG4gICAgdXNlSW5zdHJ1bWVudCxcbiAgICB1c2VTdHlsZUV4dHJhY3QsXG4gICAgdXNlVGV4dEFjY2VudENsYXNzbmFtZXMsXG4gICAgdXNlVGV4dENlbnRlcmVkQ2xhc3NuYW1lcyxcbiAgICB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgbGV2ZWw6IEhlYWRpbmdMZXZlbDtcbiAgICAvKipcbiAgICAgKiBAZGVwcmVjYXRlZCBUaGVyZSBpcyBubyBsYXJnZSB2ZXJzaW9uIGluIFRva3lvIFVJLlxuICAgICAqL1xuICAgIGxhcmdlPzogUmVzcG9uc2l2ZTxib29sZWFuPjtcbiAgICBzdHJvbmc/OiBib29sZWFuO1xuICAgIHRhZz86IEhlYWRpbmdUYWc7XG4gICAgYWNjZW50PzogVGV4dEFjY2VudDtcbiAgICBjb2xvcj86IENvbG9yTmFtZTtcbiAgICBjZW50ZXJlZD86IFJlc3BvbnNpdmU8Ym9vbGVhbj47XG4gICAgZGF0YXNldD86IERhdGFzZXQ7XG4gICAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEhFQURJTkcgPSAnSGVhZGluZyc7XG5cbmV4cG9ydCBjb25zdCBIZWFkaW5nOiBGQzxQcm9wcz4gPSAoe1xuICAgIGNoaWxkcmVuLFxuICAgIGFjY2VudCxcbiAgICBsZXZlbCxcbiAgICBsYXJnZSA9IGZhbHNlLFxuICAgIHN0cm9uZyxcbiAgICB0YWcsXG4gICAgY29sb3IsXG4gICAgY2VudGVyZWQsXG4gICAgZGF0YXNldCxcbn0pID0+IHtcbiAgICB1c2VJbnN0cnVtZW50KCdyZW5kZXInLCB7XG4gICAgICAgIGNvbXBvbmVudDogSEVBRElORyxcbiAgICAgICAgcHJvcHM6IHsgbGV2ZWwsIHN0cm9uZyB9LFxuICAgIH0pO1xuXG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCBUYWcgPSAodGFnIHx8IGxldmVsKSBhcyBIZWFkaW5nVGFnO1xuXG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IG1vZHVsZUNsYXNzTmFtZXMoc3R5bGVzLCBIRUFESU5HLCBbXG4gICAgICAgIGJvb2xlYW5DbGFzc05hbWVzKGBsZXZlbC0ke2xldmVsfS1sYXJnZWAsIGBsZXZlbC0ke2xldmVsfS1ub3JtYWxgLCBsYXJnZSksXG4gICAgXSk7XG4gICAgY29uc3QgY2VudGVyZWRDbGFzc05hbWVzID0gdXNlVGV4dENlbnRlcmVkQ2xhc3NuYW1lcyhjZW50ZXJlZCk7XG4gICAgY29uc3QgYWN0dWFsQ29sb3IgPSBhY2NlbnQgPyB1bmRlZmluZWQgOiBjb2xvcjtcbiAgICBjb25zdCB1c2VEZWZhdWx0QWNjZW50ID0gIWFjdHVhbENvbG9yO1xuICAgIGNvbnN0IGFjY2VudENsYXNzTmFtZXMgPSB1c2VUZXh0QWNjZW50Q2xhc3NuYW1lcyh1c2VEZWZhdWx0QWNjZW50LCBhY2NlbnQpO1xuICAgIGNvbnN0IGNvbG9yQ2xhc3NOYW1lcyA9IHVzZUNvbG9yQ2xhc3NOYW1lcyhjb2xvcik7XG5cbiAgICBjb25zdCBhbGxDbGFzc05hbWVzID0gW1xuICAgICAgICAuLi5jbGFzc05hbWVzLFxuICAgICAgICAuLi5jZW50ZXJlZENsYXNzTmFtZXMsXG4gICAgICAgIC4uLmFjY2VudENsYXNzTmFtZXMsXG4gICAgICAgIC4uLmNvbG9yQ2xhc3NOYW1lcyxcbiAgICBdO1xuXG4gICAgY29uc3QgcHJvcHMgPSB7XG4gICAgICAgIGNsYXNzTmFtZTogdXNlVmlzdWFsTW9kZUNsYXNzTmFtZXMoYWxsQ2xhc3NOYW1lcykuam9pbignICcpLFxuICAgICAgICAuLi5nZXREYXRhc2V0UHJvcHMoZGF0YXNldCksXG4gICAgfTtcblxuICAgIHJldHVybiA8VGFnIHsuLi5wcm9wc30+e2NoaWxkcmVufTwvVGFnPjtcbn07XG4iXSwibmFtZXMiOlsiUmVhY3QiXSwibWFwcGluZ3MiOiI7Ozs7QUFzQ0EsTUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDO01BRWIsT0FBTyxHQUFjLENBQUMsRUFDL0IsUUFBUSxFQUNSLE1BQU0sRUFDTixLQUFLLEVBQ0wsS0FBSyxHQUFHLEtBQUssRUFDYixNQUFNLEVBQ04sR0FBRyxFQUNILEtBQUssRUFDTCxRQUFRLEVBQ1IsT0FBTyxHQUNWO0lBQ0csYUFBYSxDQUFDLFFBQVEsRUFBRTtRQUNwQixTQUFTLEVBQUUsT0FBTztRQUNsQixLQUFLLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFO0tBQzNCLENBQUMsQ0FBQztJQUVILGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUV4QixNQUFNLEdBQUcsSUFBSSxHQUFHLElBQUksS0FBSyxDQUFlLENBQUM7SUFFekMsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLE9BQU8sRUFBRTtRQUNqRCxpQkFBaUIsQ0FBQyxTQUFTLEtBQUssUUFBUSxFQUFFLFNBQVMsS0FBSyxTQUFTLEVBQUUsS0FBSyxDQUFDO0tBQzVFLENBQUMsQ0FBQztJQUNILE1BQU0sa0JBQWtCLEdBQUcseUJBQXlCLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDL0QsTUFBTSxXQUFXLEdBQUcsTUFBTSxHQUFHLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDL0MsTUFBTSxnQkFBZ0IsR0FBRyxDQUFDLFdBQVcsQ0FBQztJQUN0QyxNQUFNLGdCQUFnQixHQUFHLHVCQUF1QixDQUFDLGdCQUFnQixFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQzNFLE1BQU0sZUFBZSxHQUFHLGtCQUFrQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBRWxELE1BQU0sYUFBYSxHQUFHO1FBQ2xCLEdBQUcsVUFBVTtRQUNiLEdBQUcsa0JBQWtCO1FBQ3JCLEdBQUcsZ0JBQWdCO1FBQ25CLEdBQUcsZUFBZTtLQUNyQixDQUFDO0lBRUYsTUFBTSxLQUFLLEdBQUc7UUFDVixTQUFTLEVBQUUsdUJBQXVCLENBQUMsYUFBYSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUMzRCxHQUFHLGVBQWUsQ0FBQyxPQUFPLENBQUM7S0FDOUIsQ0FBQztJQUVGLE9BQU9BLDZCQUFDLEdBQUcsb0JBQUssS0FBSyxHQUFHLFFBQVEsQ0FBTyxDQUFDO0FBQzVDOzs7OyJ9

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,7 @@
+import { Dataset, Responsive, SpinnerSize } from '@preply/ds-core';
+import { FC } from 'react';
+export interface Props {
+    size?: Responsive<SpinnerSize>;
+    dataset?: Dataset;
+}
+export declare const Loader: FC<Props>;

package/dist/components/Loader/Loader.js

@@ -0,0 +1,19 @@
+import { useStyleExtract, moduleClassNames, useVisualModeClassNames, getDatasetProps } from '@preply/ds-web-core';
+import React__default from 'react';
+import { Spinner } from '../private/Spinner/Spinner.js';
+import styles from './style/index.module.less.js';
+
+const LOADER = 'Loader';
+const Loader = ({ size, dataset }) => {
+    useStyleExtract(styles);
+    const classNames = moduleClassNames(styles, LOADER, []);
+    const props = {
+        className: useVisualModeClassNames(classNames).join(' '),
+        ...getDatasetProps(dataset),
+    };
+    return (React__default.createElement("span", Object.assign({}, props),
+        React__default.createElement(Spinner, { size: size })));
+};
+
+export { Loader };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTG9hZGVyLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Mb2FkZXIvTG9hZGVyLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEYXRhc2V0LCBSZXNwb25zaXZlLCBTcGlubmVyU2l6ZSB9IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5pbXBvcnQge1xuICAgIGdldERhdGFzZXRQcm9wcyxcbiAgICBtb2R1bGVDbGFzc05hbWVzLFxuICAgIHVzZVN0eWxlRXh0cmFjdCxcbiAgICB1c2VWaXN1YWxNb2RlQ2xhc3NOYW1lcyxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFNwaW5uZXIgfSBmcm9tICcuLi9wcml2YXRlL1NwaW5uZXIvU3Bpbm5lcic7XG5cbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmNvbnN0IExPQURFUiA9ICdMb2FkZXInO1xuXG5leHBvcnQgaW50ZXJmYWNlIFByb3BzIHtcbiAgICBzaXplPzogUmVzcG9uc2l2ZTxTcGlubmVyU2l6ZT47XG4gICAgZGF0YXNldD86IERhdGFzZXQ7XG59XG5cbmV4cG9ydCBjb25zdCBMb2FkZXI6IEZDPFByb3BzPiA9ICh7IHNpemUsIGRhdGFzZXQgfSkgPT4ge1xuICAgIHVzZVN0eWxlRXh0cmFjdChzdHlsZXMpO1xuXG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IG1vZHVsZUNsYXNzTmFtZXMoc3R5bGVzLCBMT0FERVIsIFtdKTtcblxuICAgIGNvbnN0IHByb3BzID0ge1xuICAgICAgICBjbGFzc05hbWU6IHVzZVZpc3VhbE1vZGVDbGFzc05hbWVzKGNsYXNzTmFtZXMpLmpvaW4oJyAnKSxcbiAgICAgICAgLi4uZ2V0RGF0YXNldFByb3BzKGRhdGFzZXQpLFxuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8c3BhbiB7Li4ucHJvcHN9PlxuICAgICAgICAgICAgPFNwaW5uZXIgc2l6ZT17c2l6ZX0gLz5cbiAgICAgICAgPC9zcGFuPlxuICAgICk7XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7OztBQWFBLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQztNQU9YLE1BQU0sR0FBYyxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRTtJQUMvQyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxVQUFVLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxFQUFFLENBQUMsQ0FBQztJQUV4RCxNQUFNLEtBQUssR0FBRztRQUNWLFNBQVMsRUFBRSx1QkFBdUIsQ0FBQyxVQUFVLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQ3hELEdBQUcsZUFBZSxDQUFDLE9BQU8sQ0FBQztLQUM5QixDQUFDO0lBRUYsUUFDSUEsdURBQVUsS0FBSztRQUNYQSw2QkFBQyxPQUFPLElBQUMsSUFBSSxFQUFFLElBQUksR0FBSSxDQUNwQixFQUNUO0FBQ047Ozs7In0=

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

@@ -0,0 +1,8 @@
+@import '@preply/ds-web-core/dist/generated/tokens.less';
+
+.Loader {
+    display: inline-flex;
+    width: fit-content;
+    height: fit-content;
+    color: @spinner-icon-color
+}

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

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