@preply/ds-web-lib 0.4.3-beta.32

package/README.md

@@ -0,0 +1,51 @@
+# `@preply/ds-web-lib`
+
+> DS component library for web.
+
+## Using the Design System in your application or library?
+
+Follow the instructions in [@preply/ds-workspace](../../README.md).
+
+**tl;dr:**
+
+```tsx
+import { RootProvider } from `@preply/ds-web-root`;
+import { Heading, Button } from `@preply/ds-web-lib`;
+
+export const App: FC = () => (
+  <RootProvider>
+    <Heading level="h1">Hello!</Heading>
+    <Button>Go!</Button>
+  </RootProvider>
+);
+```
+
+## Contributing
+
+Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.
+
+## Development
+
+You probably want to execute `yarn dev` and/or `yarn docs` in the root, as per instructions in [@preply/ds-workspace](../../README.md).
+
+For quicker - and more focused - feedback, you can also directly use the scripts in this package directory, but make sure you have first executed `yarn build` in root, or that you have the root `yarn dev` script running in the background.
+
+## Tooling
+
+Details about tools and configurations in [@preply/ds-workspace](../../README.md).
+
+## Dependencies
+
+**Note:** `@preply/ds-***` are declared both as direct and peer dependencies:
+
+- to ensure `rollup` excludes them from the bundle.
+- to ensure Lerna honours build sequence (does not do so for peer dependencies).
+
+### Dev dependencies
+
+We only list the dependencies used directly in stories, MDX docs and tests (`@storybook/react`, `@testing-library/react`, ...).
+
+**Do NOT add dependencies on** linting, testing, building tools unless:
+
+- you need to require some resource in a doc file or a test.
+- you need to add a very specific plugin to this package only and you want to signal the dependency loudly.

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import type { AvatarSize } from './types';
+export interface Props {
+    size?: AvatarSize;
+    round?: boolean;
+    src?: string;
+    alt?: string;
+}
+export declare const Avatar: FC<Props>;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,17 @@
+import { safeClassName, localClasses } from '@preply/ds-web-core';
+import React from 'react';
+import { AVATAR_SIZE_DEFAULT, AVATAR_SRC_DEFAULT } from './constants.js';
+import styles from './style/index.module.less.js';
+
+const AVATAR = 'Avatar';
+const Avatar = ({ size = AVATAR_SIZE_DEFAULT, round = true, src, alt = '', }) => {
+    const classNames = [
+        safeClassName(styles, AVATAR),
+        ...localClasses(styles, AVATAR, [['size', size], round ? 'round' : undefined]),
+    ];
+    return (React.createElement("picture", { className: classNames.join(' ') },
+        React.createElement("img", { src: src || AVATAR_SRC_DEFAULT, alt: alt })));
+};
+
+export { Avatar };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXZhdGFyLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBsb2NhbENsYXNzZXMsIHNhZmVDbGFzc05hbWUgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQVZBVEFSX1NJWkVfREVGQVVMVCwgQVZBVEFSX1NSQ19ERUZBVUxUIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcbmltcG9ydCB0eXBlIHsgQXZhdGFyU2l6ZSB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFByb3BzIHtcbiAgICBzaXplPzogQXZhdGFyU2l6ZTtcbiAgICByb3VuZD86IGJvb2xlYW47XG4gICAgc3JjPzogc3RyaW5nO1xuICAgIGFsdD86IHN0cmluZztcbn1cblxuY29uc3QgQVZBVEFSID0gJ0F2YXRhcic7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXI6IEZDPFByb3BzPiA9ICh7XG4gICAgc2l6ZSA9IEFWQVRBUl9TSVpFX0RFRkFVTFQsXG4gICAgcm91bmQgPSB0cnVlLFxuICAgIHNyYyxcbiAgICBhbHQgPSAnJyxcbn06IFByb3BzKSA9PiB7XG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IFtcbiAgICAgICAgc2FmZUNsYXNzTmFtZShzdHlsZXMsIEFWQVRBUiksXG4gICAgICAgIC4uLmxvY2FsQ2xhc3NlcyhzdHlsZXMsIEFWQVRBUiwgW1snc2l6ZScsIHNpemVdLCByb3VuZCA/ICdyb3VuZCcgOiB1bmRlZmluZWRdKSxcbiAgICBdO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPHBpY3R1cmUgY2xhc3NOYW1lPXtjbGFzc05hbWVzLmpvaW4oJyAnKX0+XG4gICAgICAgICAgICA8aW1nIHNyYz17c3JjIHx8IEFWQVRBUl9TUkNfREVGQVVMVH0gYWx0PXthbHR9IC8+XG4gICAgICAgIDwvcGljdHVyZT5cbiAgICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQWNBLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQztNQUVYLE1BQU0sR0FBYyxDQUFDLEVBQzlCLElBQUksR0FBRyxtQkFBbUIsRUFDMUIsS0FBSyxHQUFHLElBQUksRUFDWixHQUFHLEVBQ0gsR0FBRyxHQUFHLEVBQUUsR0FDSjtJQUNKLE1BQU0sVUFBVSxHQUFHO1FBQ2YsYUFBYSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUM7UUFDN0IsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxFQUFFLEtBQUssR0FBRyxPQUFPLEdBQUcsU0FBUyxDQUFDLENBQUM7S0FDakYsQ0FBQztJQUVGLFFBQ0ksaUNBQVMsU0FBUyxFQUFFLFVBQVUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQ3BDLDZCQUFLLEdBQUcsRUFBRSxHQUFHLElBQUksa0JBQWtCLEVBQUUsR0FBRyxFQUFFLEdBQUcsR0FBSSxDQUMzQyxFQUNaO0FBQ047Ozs7In0=

package/dist/components/Avatar/constants.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarSize } from './types';
+export declare const AVATAR_SRC_DEFAULT = "https://static.preply.com/images/user_default.gif";
+export declare const AVATAR_SIZE_DEFAULT: AvatarSize;

package/dist/components/Avatar/constants.js

@@ -0,0 +1,5 @@
+const AVATAR_SRC_DEFAULT = 'https://static.preply.com/images/user_default.gif';
+const AVATAR_SIZE_DEFAULT = 'base';
+
+export { AVATAR_SIZE_DEFAULT, AVATAR_SRC_DEFAULT };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9BdmF0YXIvY29uc3RhbnRzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQXZhdGFyU2l6ZSB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQVZBVEFSX1NSQ19ERUZBVUxUID0gJ2h0dHBzOi8vc3RhdGljLnByZXBseS5jb20vaW1hZ2VzL3VzZXJfZGVmYXVsdC5naWYnO1xuZXhwb3J0IGNvbnN0IEFWQVRBUl9TSVpFX0RFRkFVTFQ6IEF2YXRhclNpemUgPSAnYmFzZSc7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ik1BRWEsa0JBQWtCLEdBQUcsb0RBQW9EO01BQ3pFLG1CQUFtQixHQUFlOzs7OyJ9

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

@@ -0,0 +1,9 @@
+@import './mixins.less';
+
+.Avatar {
+    .avatar-base();
+
+    .avatar-sizes();
+
+    .avatar-radius();
+}

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

@@ -0,0 +1,9 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "._2lMMST {\n  display: inline-block;\n}\n._2lMMST img {\n  vertical-align: bottom;\n  -o-object-fit: cover;\n     object-fit: cover;\n  border-radius: var(--avatar--radius);\n}\n._3xNvIM img {\n  width: var(--avatar--size-small--size);\n  height: var(--avatar--size-small--size);\n}\n.OFtKGj img {\n  width: var(--avatar--size-base--size);\n  height: var(--avatar--size-base--size);\n}\n._1-dWj7 img {\n  width: var(--avatar--size-medium--size);\n  height: var(--avatar--size-medium--size);\n}\n.zNHaS3 img {\n  width: var(--avatar--size-large--size);\n  height: var(--avatar--size-large--size);\n}\n._3Pa4yW img {\n  width: var(--avatar--size-xlarge--size);\n  height: var(--avatar--size-xlarge--size);\n}\n._3sb-3k img {\n  border-radius: 50%;\n}\n";
+var styles = {"Avatar":"_2lMMST","Avatar--size-small":"_3xNvIM","Avatar--size-base":"OFtKGj","Avatar--size-medium":"_1-dWj7","Avatar--size-large":"zNHaS3","Avatar--size-xlarge":"_3Pa4yW","Avatar--round":"_3sb-3k"};
+var stylesheet="._2lMMST {\n  display: inline-block;\n}\n._2lMMST img {\n  vertical-align: bottom;\n  -o-object-fit: cover;\n     object-fit: cover;\n  border-radius: var(--avatar--radius);\n}\n._3xNvIM img {\n  width: var(--avatar--size-small--size);\n  height: var(--avatar--size-small--size);\n}\n.OFtKGj img {\n  width: var(--avatar--size-base--size);\n  height: var(--avatar--size-base--size);\n}\n._1-dWj7 img {\n  width: var(--avatar--size-medium--size);\n  height: var(--avatar--size-medium--size);\n}\n.zNHaS3 img {\n  width: var(--avatar--size-large--size);\n  height: var(--avatar--size-large--size);\n}\n._3Pa4yW img {\n  width: var(--avatar--size-xlarge--size);\n  height: var(--avatar--size-xlarge--size);\n}\n._3sb-3k img {\n  border-radius: 50%;\n}\n";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qix3REFBNEQ7QUFDcEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7In0=

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

@@ -0,0 +1,34 @@
+@import '@preply/ds-web-core/dist/theme/style/declarations.mixins.less';
+
+@namespace: 'avatar';
+
+@avatar-sizes: small, base, medium, large, xlarge;
+
+.avatar-base() {
+    display: inline-block;
+
+    img {
+        vertical-align: bottom;
+        object-fit: cover;
+        border-radius: var(--avatar--radius);
+    }
+}
+
+.avatar-sizes() {
+    each(@avatar-sizes, {
+        &--size-@{value} {
+            img {
+                @token: 'size-@{value}';
+                .size(@namespace, @token);
+            }
+        }
+    });
+}
+
+.avatar-radius() {
+    &--round {
+        img {
+            border-radius: 50%;
+        }
+    }
+}

package/dist/components/Avatar/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/Avatar/types.d.ts

@@ -0,0 +1 @@
+export declare type AvatarSize = 'small' | 'base' | 'medium' | 'large' | 'xlarge';

package/dist/components/Avatar/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,19 @@
+import type { Dataset } from '@preply/ds-core';
+import type { ThemeProps } from '@preply/ds-web-core';
+import React, { MouseEvent } from 'react';
+import type { ButtonSize, ButtonVariant } from './types';
+interface OwnProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    url?: string;
+    opensInNewTab?: boolean;
+    isSubmit?: boolean;
+    a11yLabel?: string;
+    onClick?: (event: MouseEvent) => void;
+    dataset?: Dataset;
+}
+export declare type Props = OwnProps & ThemeProps;
+export declare const Button: React.FC<Props>;
+export {};

package/dist/components/Button/Button.js

@@ -0,0 +1,50 @@
+import { withTheme, safeClassName, globalClasses, localClasses, getDatasetProps, getExternalUrlProps, mapEdgeKeyToStandard } from '@preply/ds-web-core';
+import React, { useRef } from 'react';
+import { BUTTON_VARIANT_DEFAULT, BUTTON_SIZE_DEFAULT } from './constants.js';
+import styles from './style/index.module.less.js';
+
+const BUTTON = 'Button';
+const ButtonBase = ({ themeClassName, variant = BUTTON_VARIANT_DEFAULT, size = BUTTON_SIZE_DEFAULT, fullWidth, url, opensInNewTab, isSubmit, a11yLabel, onClick, disabled, dataset, children, }) => {
+    const ref = useRef(null);
+    // const { colorSchemeClassName } = useColorSchemeContext() DES-23 use scheme
+    const handleClick = (event) => {
+        if (disabled) {
+            event.preventDefault();
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    const handleKeyPress = (event) => {
+        var _a;
+        const key = mapEdgeKeyToStandard(event.key);
+        if (key === ' ' || key === 'Enter') {
+            event.preventDefault();
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    };
+    const classNames = [
+        safeClassName(styles, BUTTON),
+        ...globalClasses([themeClassName]),
+        ...localClasses(styles, BUTTON, [
+            ['variant', variant],
+            ['size', size],
+            { if: fullWidth, then: 'width-full' },
+        ]),
+    ];
+    const props = {
+        ...getDatasetProps(dataset),
+        className: classNames.join(' '),
+        'aria-label': a11yLabel,
+        onClick: handleClick,
+        disabled,
+    };
+    if (!url) {
+        return (React.createElement("button", Object.assign({}, props, { type: isSubmit ? 'submit' : 'button' }), children));
+    }
+    return (React.createElement("a", Object.assign({}, props, getExternalUrlProps(url, opensInNewTab), { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled ? 'true' : undefined, href: url, onKeyDown: handleKeyPress }), children));
+};
+const Button = withTheme(ButtonBase);
+
+export { Button };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IERhdGFzZXQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHR5cGUgeyBUaGVtZVByb3BzLCBXaXRoVGhlbWVQcm9wcyB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IHtcbiAgICBnZXREYXRhc2V0UHJvcHMsXG4gICAgZ2V0RXh0ZXJuYWxVcmxQcm9wcyxcbiAgICBnbG9iYWxDbGFzc2VzLFxuICAgIGxvY2FsQ2xhc3NlcyxcbiAgICBtYXBFZGdlS2V5VG9TdGFuZGFyZCxcbiAgICBzYWZlQ2xhc3NOYW1lLFxuICAgIHdpdGhUaGVtZSxcbn0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMsIEtleWJvYXJkRXZlbnQsIE1vdXNlRXZlbnQsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQlVUVE9OX1NJWkVfREVGQVVMVCwgQlVUVE9OX1ZBUklBTlRfREVGQVVMVCB9IGZyb20gJy4vY29uc3RhbnRzJztcbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5pbXBvcnQgdHlwZSB7IEJ1dHRvblNpemUsIEJ1dHRvblZhcmlhbnQgfSBmcm9tICcuL3R5cGVzJztcblxuaW50ZXJmYWNlIE93blByb3BzIHtcbiAgICB2YXJpYW50PzogQnV0dG9uVmFyaWFudDtcbiAgICBzaXplPzogQnV0dG9uU2l6ZTtcbiAgICBmdWxsV2lkdGg/OiBib29sZWFuO1xuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgICB1cmw/OiBzdHJpbmc7XG4gICAgb3BlbnNJbk5ld1RhYj86IGJvb2xlYW47XG4gICAgaXNTdWJtaXQ/OiBib29sZWFuO1xuICAgIGExMXlMYWJlbD86IHN0cmluZztcbiAgICBvbkNsaWNrPzogKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB2b2lkO1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xufVxuXG5jb25zdCBCVVRUT04gPSAnQnV0dG9uJztcblxuZXhwb3J0IHR5cGUgUHJvcHMgPSBPd25Qcm9wcyAmIFRoZW1lUHJvcHM7XG5cbmNvbnN0IEJ1dHRvbkJhc2U6IEZDPE93blByb3BzICYgV2l0aFRoZW1lUHJvcHM+ID0gKHtcbiAgICB0aGVtZUNsYXNzTmFtZSxcbiAgICB2YXJpYW50ID0gQlVUVE9OX1ZBUklBTlRfREVGQVVMVCxcbiAgICBzaXplID0gQlVUVE9OX1NJWkVfREVGQVVMVCxcbiAgICBmdWxsV2lkdGgsXG4gICAgdXJsLFxuICAgIG9wZW5zSW5OZXdUYWIsXG4gICAgaXNTdWJtaXQsXG4gICAgYTExeUxhYmVsLFxuICAgIG9uQ2xpY2ssXG4gICAgZGlzYWJsZWQsXG4gICAgZGF0YXNldCxcbiAgICBjaGlsZHJlbixcbn0pID0+IHtcbiAgICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEFuY2hvckVsZW1lbnQ+KG51bGwpO1xuXG4gICAgLy8gY29uc3QgeyBjb2xvclNjaGVtZUNsYXNzTmFtZSB9ID0gdXNlQ29sb3JTY2hlbWVDb250ZXh0KCkgREVTLTIzIHVzZSBzY2hlbWVcblxuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgICAgIGlmIChkaXNhYmxlZCkge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgfVxuICAgICAgICBpZiAob25DbGljaykge1xuICAgICAgICAgICAgb25DbGljayhldmVudCk7XG4gICAgICAgIH1cbiAgICB9O1xuXG4gICAgY29uc3QgaGFuZGxlS2V5UHJlc3MgPSAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpID0+IHtcbiAgICAgICAgY29uc3Qga2V5ID0gbWFwRWRnZUtleVRvU3RhbmRhcmQoZXZlbnQua2V5KTtcbiAgICAgICAgaWYgKGtleSA9PT0gJyAnIHx8IGtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIHJlZi5jdXJyZW50Py5jbGljaygpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIGNvbnN0IGNsYXNzTmFtZXMgPSBbXG4gICAgICAgIHNhZmVDbGFzc05hbWUoc3R5bGVzLCBCVVRUT04pLFxuICAgICAgICAuLi5nbG9iYWxDbGFzc2VzKFt0aGVtZUNsYXNzTmFtZV0pLFxuICAgICAgICAuLi5sb2NhbENsYXNzZXMoc3R5bGVzLCBCVVRUT04sIFtcbiAgICAgICAgICAgIFsndmFyaWFudCcsIHZhcmlhbnRdLFxuICAgICAgICAgICAgWydzaXplJywgc2l6ZV0sXG4gICAgICAgICAgICB7IGlmOiBmdWxsV2lkdGgsIHRoZW46ICd3aWR0aC1mdWxsJyB9LFxuICAgICAgICBdKSxcbiAgICBdO1xuXG4gICAgY29uc3QgcHJvcHMgPSB7XG4gICAgICAgIC4uLmdldERhdGFzZXRQcm9wcyhkYXRhc2V0KSxcbiAgICAgICAgY2xhc3NOYW1lOiBjbGFzc05hbWVzLmpvaW4oJyAnKSxcbiAgICAgICAgJ2FyaWEtbGFiZWwnOiBhMTF5TGFiZWwsXG4gICAgICAgIG9uQ2xpY2s6IGhhbmRsZUNsaWNrLFxuICAgICAgICBkaXNhYmxlZCxcbiAgICB9O1xuXG4gICAgaWYgKCF1cmwpIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxidXR0b24gey4uLnByb3BzfSB0eXBlPXtpc1N1Ym1pdCA/ICdzdWJtaXQnIDogJ2J1dHRvbid9PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICApO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICAgIDxhXG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgICB7Li4uZ2V0RXh0ZXJuYWxVcmxQcm9wcyh1cmwsIG9wZW5zSW5OZXdUYWIpfVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIHRhYkluZGV4PXtkaXNhYmxlZCA/IC0xIDogMH1cbiAgICAgICAgICAgIGFyaWEtZGlzYWJsZWQ9e2Rpc2FibGVkID8gJ3RydWUnIDogdW5kZWZpbmVkfVxuICAgICAgICAgICAgaHJlZj17dXJsfVxuICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlQcmVzc31cbiAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L2E+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBCdXR0b24gPSB3aXRoVGhlbWU8T3duUHJvcHM+KEJ1dHRvbkJhc2UpO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBOEJBLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQztBQUl4QixNQUFNLFVBQVUsR0FBa0MsQ0FBQyxFQUMvQyxjQUFjLEVBQ2QsT0FBTyxHQUFHLHNCQUFzQixFQUNoQyxJQUFJLEdBQUcsbUJBQW1CLEVBQzFCLFNBQVMsRUFDVCxHQUFHLEVBQ0gsYUFBYSxFQUNiLFFBQVEsRUFDUixTQUFTLEVBQ1QsT0FBTyxFQUNQLFFBQVEsRUFDUixPQUFPLEVBQ1AsUUFBUSxHQUNYO0lBQ0csTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFvQixJQUFJLENBQUMsQ0FBQzs7SUFJNUMsTUFBTSxXQUFXLEdBQUcsQ0FBQyxLQUFpQjtRQUNsQyxJQUFJLFFBQVEsRUFBRTtZQUNWLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztTQUMxQjtRQUNELElBQUksT0FBTyxFQUFFO1lBQ1QsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ2xCO0tBQ0osQ0FBQztJQUVGLE1BQU0sY0FBYyxHQUFHLENBQUMsS0FBb0I7O1FBQ3hDLE1BQU0sR0FBRyxHQUFHLG9CQUFvQixDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM1QyxJQUFJLEdBQUcsS0FBSyxHQUFHLElBQUksR0FBRyxLQUFLLE9BQU8sRUFBRTtZQUNoQyxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdkIsTUFBQSxHQUFHLENBQUMsT0FBTywwQ0FBRSxLQUFLLEdBQUc7U0FDeEI7S0FDSixDQUFDO0lBRUYsTUFBTSxVQUFVLEdBQUc7UUFDZixhQUFhLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQztRQUM3QixHQUFHLGFBQWEsQ0FBQyxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQ2xDLEdBQUcsWUFBWSxDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUU7WUFDNUIsQ0FBQyxTQUFTLEVBQUUsT0FBTyxDQUFDO1lBQ3BCLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQztZQUNkLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQUUsWUFBWSxFQUFFO1NBQ3hDLENBQUM7S0FDTCxDQUFDO0lBRUYsTUFBTSxLQUFLLEdBQUc7UUFDVixHQUFHLGVBQWUsQ0FBQyxPQUFPLENBQUM7UUFDM0IsU0FBUyxFQUFFLFVBQVUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQy9CLFlBQVksRUFBRSxTQUFTO1FBQ3ZCLE9BQU8sRUFBRSxXQUFXO1FBQ3BCLFFBQVE7S0FDWCxDQUFDO0lBRUYsSUFBSSxDQUFDLEdBQUcsRUFBRTtRQUNOLFFBQ0ksZ0RBQVksS0FBSyxJQUFFLElBQUksRUFBRSxRQUFRLEdBQUcsUUFBUSxHQUFHLFFBQVEsS0FDbEQsUUFBUSxDQUNKLEVBQ1g7S0FDTDtJQUVELFFBQ0ksMkNBQ1EsS0FBSyxFQUNMLG1CQUFtQixDQUFDLEdBQUcsRUFBRSxhQUFhLENBQUMsSUFDM0MsR0FBRyxFQUFFLEdBQUcsRUFDUixJQUFJLEVBQUMsUUFBUSxFQUNiLFFBQVEsRUFBRSxRQUFRLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxtQkFDWixRQUFRLEdBQUcsTUFBTSxHQUFHLFNBQVMsRUFDNUMsSUFBSSxFQUFFLEdBQUcsRUFDVCxTQUFTLEVBQUUsY0FBYyxLQUV4QixRQUFRLENBQ1QsRUFDTjtBQUNOLENBQUMsQ0FBQztNQUVXLE1BQU0sR0FBRyxTQUFTLENBQVcsVUFBVTs7OzsifQ==

package/dist/components/Button/constants.d.ts

@@ -0,0 +1,3 @@
+import { ButtonSize, ButtonVariant } from './types';
+export declare const BUTTON_VARIANT_DEFAULT: ButtonVariant;
+export declare const BUTTON_SIZE_DEFAULT: ButtonSize;

package/dist/components/Button/constants.js

@@ -0,0 +1,5 @@
+const BUTTON_VARIANT_DEFAULT = 'primary';
+const BUTTON_SIZE_DEFAULT = 'base';
+
+export { BUTTON_SIZE_DEFAULT, BUTTON_VARIANT_DEFAULT };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vY29uc3RhbnRzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJ1dHRvblNpemUsIEJ1dHRvblZhcmlhbnQgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IEJVVFRPTl9WQVJJQU5UX0RFRkFVTFQ6IEJ1dHRvblZhcmlhbnQgPSAncHJpbWFyeSc7XG5leHBvcnQgY29uc3QgQlVUVE9OX1NJWkVfREVGQVVMVDogQnV0dG9uU2l6ZSA9ICdiYXNlJztcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiTUFFYSxzQkFBc0IsR0FBa0IsVUFBVTtNQUNsRCxtQkFBbUIsR0FBZTs7OzsifQ==

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

@@ -0,0 +1,13 @@
+@import './mixins.less';
+
+.Button {
+    .button-base();
+
+    .button-sizes();
+
+    .button-variants();
+
+    &--width-full {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,9 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "._2K2A6a {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  grid-gap: var(--action--base--space);\n  gap: var(--action--base--space);\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  vertical-align: baseline;\n  font-family: inherit;\n  line-height: var(--text--size-base--line-height);\n  font-weight: var(--t-font-weight--bold);\n  text-decoration: none;\n  background-color: transparent;\n  border-radius: var(--action--base--border-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: transparent;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n._2K2A6a[disabled] {\n  cursor: default;\n  pointer-events: none;\n}\n._2K2A6a._2l4V5u {\n  outline-style: solid;\n  outline-color: transparent;\n  outline-width: var(--action--base-focus--outline-width);\n  outline-offset: var(--action--base-focus--outline-offset);\n}\n._2K2A6a:focus-visible {\n  outline-style: solid;\n  outline-color: transparent;\n  outline-width: var(--action--base-focus--outline-width);\n  outline-offset: var(--action--base-focus--outline-offset);\n}\n._1i2dON {\n  min-height: var(--action--size-small--height);\n  padding: var(--action--size-small--padding);\n  font-size: var(--action--size-small--font-size);\n}\n._1Grpfz {\n  min-height: var(--action--size-base--height);\n  padding: var(--action--size-base--padding);\n  font-size: var(--action--size-base--font-size);\n}\n._3T9ZZt {\n  min-height: var(--action--size-medium--height);\n  padding: var(--action--size-medium--padding);\n  font-size: var(--action--size-medium--font-size);\n}\n._2DlIsK {\n  min-height: var(--action--size-large--height);\n  padding: var(--action--size-large--padding);\n  font-size: var(--action--size-large--font-size);\n}\n._2YwoR1 {\n  min-height: var(--action--size-xlarge--height);\n  padding: var(--action--size-xlarge--padding);\n  font-size: var(--action--size-xlarge--font-size);\n}\n._2oPEsT {\n  color: var(--scheme--action-primary--color);\n  background-color: var(--scheme--action-primary--bg-color);\n  border-color: var(--scheme--action-primary--border-color);\n}\n._2oPEsT:hover {\n  -webkit-filter: brightness(var(--scheme--action-primary-hover--brigthness));\n          filter: brightness(var(--scheme--action-primary-hover--brigthness));\n}\n._2oPEsT:active {\n  -webkit-filter: brightness(var(--scheme--action-primary-active--brigthness));\n          filter: brightness(var(--scheme--action-primary-active--brigthness));\n}\n._2oPEsT._2l4V5u {\n  outline-color: var(--scheme--action-primary-focus--outline-color);\n}\n._2oPEsT:focus-visible {\n  outline-color: var(--scheme--action-primary-focus--outline-color);\n}\n._2oPEsT[disabled] {\n  color: var(--scheme--action-primary-disabled--color);\n  background-color: var(--scheme--action-primary-disabled--bg-color);\n  border-color: transparent;\n}\n.M4_8bJ {\n  color: var(--scheme--action-secondary--color);\n  background-color: var(--scheme--action-secondary--bg-color);\n  border-color: var(--scheme--action-secondary--border-color);\n}\n.M4_8bJ:hover {\n  -webkit-filter: brightness(var(--scheme--action-secondary-hover--brigthness));\n          filter: brightness(var(--scheme--action-secondary-hover--brigthness));\n}\n.M4_8bJ:active {\n  -webkit-filter: brightness(var(--scheme--action-secondary-active--brigthness));\n          filter: brightness(var(--scheme--action-secondary-active--brigthness));\n}\n.M4_8bJ._2l4V5u {\n  outline-color: var(--scheme--action-secondary-focus--outline-color);\n}\n.M4_8bJ:focus-visible {\n  outline-color: var(--scheme--action-secondary-focus--outline-color);\n}\n.M4_8bJ[disabled] {\n  color: var(--scheme--action-secondary-disabled--color);\n  background-color: var(--scheme--action-secondary-disabled--bg-color);\n  border-color: transparent;\n}\n._2MKEet {\n  color: var(--scheme--action-plain--color);\n  background-color: var(--scheme--action-plain--bg-color);\n  border-color: var(--scheme--action-plain--border-color);\n}\n._2MKEet:hover {\n  -webkit-filter: brightness(var(--scheme--action-plain-hover--brigthness));\n          filter: brightness(var(--scheme--action-plain-hover--brigthness));\n}\n._2MKEet:active {\n  -webkit-filter: brightness(var(--scheme--action-plain-active--brigthness));\n          filter: brightness(var(--scheme--action-plain-active--brigthness));\n}\n._2MKEet._2l4V5u {\n  outline-color: var(--scheme--action-plain-focus--outline-color);\n}\n._2MKEet:focus-visible {\n  outline-color: var(--scheme--action-plain-focus--outline-color);\n}\n._2MKEet[disabled] {\n  color: var(--scheme--action-plain-disabled--color);\n  background-color: var(--scheme--action-plain-disabled--bg-color);\n  border-color: transparent;\n}\n._3pkpwd {\n  color: var(--scheme--action-danger--color);\n  background-color: var(--scheme--action-danger--bg-color);\n  border-color: var(--scheme--action-danger--border-color);\n}\n._3pkpwd:hover {\n  -webkit-filter: brightness(var(--scheme--action-danger-hover--brigthness));\n          filter: brightness(var(--scheme--action-danger-hover--brigthness));\n}\n._3pkpwd:active {\n  -webkit-filter: brightness(var(--scheme--action-danger-active--brigthness));\n          filter: brightness(var(--scheme--action-danger-active--brigthness));\n}\n._3pkpwd._2l4V5u {\n  outline-color: var(--scheme--action-danger-focus--outline-color);\n}\n._3pkpwd:focus-visible {\n  outline-color: var(--scheme--action-danger-focus--outline-color);\n}\n._3pkpwd[disabled] {\n  color: var(--scheme--action-danger-disabled--color);\n  background-color: var(--scheme--action-danger-disabled--bg-color);\n  border-color: transparent;\n}\n._31304r {\n  width: 100%;\n}\n";
+var styles = {"Button":"_2K2A6a","focus-visible":"_2l4V5u","Button--size-small":"_1i2dON","Button--size-base":"_1Grpfz","Button--size-medium":"_3T9ZZt","Button--size-large":"_2DlIsK","Button--size-xlarge":"_2YwoR1","Button--variant-primary":"_2oPEsT","Button--variant-secondary":"M4_8bJ","Button--variant-plain":"_2MKEet","Button--variant-danger":"_3pkpwd","Button--width-full":"_31304r"};
+var stylesheet="._2K2A6a {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  grid-gap: var(--action--base--space);\n  gap: var(--action--base--space);\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  vertical-align: baseline;\n  font-family: inherit;\n  line-height: var(--text--size-base--line-height);\n  font-weight: var(--t-font-weight--bold);\n  text-decoration: none;\n  background-color: transparent;\n  border-radius: var(--action--base--border-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: transparent;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n._2K2A6a[disabled] {\n  cursor: default;\n  pointer-events: none;\n}\n._2K2A6a._2l4V5u {\n  outline-style: solid;\n  outline-color: transparent;\n  outline-width: var(--action--base-focus--outline-width);\n  outline-offset: var(--action--base-focus--outline-offset);\n}\n._2K2A6a:focus-visible {\n  outline-style: solid;\n  outline-color: transparent;\n  outline-width: var(--action--base-focus--outline-width);\n  outline-offset: var(--action--base-focus--outline-offset);\n}\n._1i2dON {\n  min-height: var(--action--size-small--height);\n  padding: var(--action--size-small--padding);\n  font-size: var(--action--size-small--font-size);\n}\n._1Grpfz {\n  min-height: var(--action--size-base--height);\n  padding: var(--action--size-base--padding);\n  font-size: var(--action--size-base--font-size);\n}\n._3T9ZZt {\n  min-height: var(--action--size-medium--height);\n  padding: var(--action--size-medium--padding);\n  font-size: var(--action--size-medium--font-size);\n}\n._2DlIsK {\n  min-height: var(--action--size-large--height);\n  padding: var(--action--size-large--padding);\n  font-size: var(--action--size-large--font-size);\n}\n._2YwoR1 {\n  min-height: var(--action--size-xlarge--height);\n  padding: var(--action--size-xlarge--padding);\n  font-size: var(--action--size-xlarge--font-size);\n}\n._2oPEsT {\n  color: var(--scheme--action-primary--color);\n  background-color: var(--scheme--action-primary--bg-color);\n  border-color: var(--scheme--action-primary--border-color);\n}\n._2oPEsT:hover {\n  -webkit-filter: brightness(var(--scheme--action-primary-hover--brigthness));\n          filter: brightness(var(--scheme--action-primary-hover--brigthness));\n}\n._2oPEsT:active {\n  -webkit-filter: brightness(var(--scheme--action-primary-active--brigthness));\n          filter: brightness(var(--scheme--action-primary-active--brigthness));\n}\n._2oPEsT._2l4V5u {\n  outline-color: var(--scheme--action-primary-focus--outline-color);\n}\n._2oPEsT:focus-visible {\n  outline-color: var(--scheme--action-primary-focus--outline-color);\n}\n._2oPEsT[disabled] {\n  color: var(--scheme--action-primary-disabled--color);\n  background-color: var(--scheme--action-primary-disabled--bg-color);\n  border-color: transparent;\n}\n.M4_8bJ {\n  color: var(--scheme--action-secondary--color);\n  background-color: var(--scheme--action-secondary--bg-color);\n  border-color: var(--scheme--action-secondary--border-color);\n}\n.M4_8bJ:hover {\n  -webkit-filter: brightness(var(--scheme--action-secondary-hover--brigthness));\n          filter: brightness(var(--scheme--action-secondary-hover--brigthness));\n}\n.M4_8bJ:active {\n  -webkit-filter: brightness(var(--scheme--action-secondary-active--brigthness));\n          filter: brightness(var(--scheme--action-secondary-active--brigthness));\n}\n.M4_8bJ._2l4V5u {\n  outline-color: var(--scheme--action-secondary-focus--outline-color);\n}\n.M4_8bJ:focus-visible {\n  outline-color: var(--scheme--action-secondary-focus--outline-color);\n}\n.M4_8bJ[disabled] {\n  color: var(--scheme--action-secondary-disabled--color);\n  background-color: var(--scheme--action-secondary-disabled--bg-color);\n  border-color: transparent;\n}\n._2MKEet {\n  color: var(--scheme--action-plain--color);\n  background-color: var(--scheme--action-plain--bg-color);\n  border-color: var(--scheme--action-plain--border-color);\n}\n._2MKEet:hover {\n  -webkit-filter: brightness(var(--scheme--action-plain-hover--brigthness));\n          filter: brightness(var(--scheme--action-plain-hover--brigthness));\n}\n._2MKEet:active {\n  -webkit-filter: brightness(var(--scheme--action-plain-active--brigthness));\n          filter: brightness(var(--scheme--action-plain-active--brigthness));\n}\n._2MKEet._2l4V5u {\n  outline-color: var(--scheme--action-plain-focus--outline-color);\n}\n._2MKEet:focus-visible {\n  outline-color: var(--scheme--action-plain-focus--outline-color);\n}\n._2MKEet[disabled] {\n  color: var(--scheme--action-plain-disabled--color);\n  background-color: var(--scheme--action-plain-disabled--bg-color);\n  border-color: transparent;\n}\n._3pkpwd {\n  color: var(--scheme--action-danger--color);\n  background-color: var(--scheme--action-danger--bg-color);\n  border-color: var(--scheme--action-danger--border-color);\n}\n._3pkpwd:hover {\n  -webkit-filter: brightness(var(--scheme--action-danger-hover--brigthness));\n          filter: brightness(var(--scheme--action-danger-hover--brigthness));\n}\n._3pkpwd:active {\n  -webkit-filter: brightness(var(--scheme--action-danger-active--brigthness));\n          filter: brightness(var(--scheme--action-danger-active--brigthness));\n}\n._3pkpwd._2l4V5u {\n  outline-color: var(--scheme--action-danger-focus--outline-color);\n}\n._3pkpwd:focus-visible {\n  outline-color: var(--scheme--action-danger-focus--outline-color);\n}\n._3pkpwd[disabled] {\n  color: var(--scheme--action-danger-disabled--color);\n  background-color: var(--scheme--action-danger-disabled--bg-color);\n  border-color: transparent;\n}\n._31304r {\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qix3REFBNEQ7QUFDcEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7In0=

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

@@ -0,0 +1,80 @@
+@import '@preply/ds-web-core/dist/theme/style/declarations.mixins.less';
+
+// DES-22 encapsulate things?
+@namespace: 'button';
+
+@sizes: small, base, medium, large, xlarge;
+@variants: primary, secondary, plain, danger;
+
+.button-base() {
+    display: inline-flex;
+    align-items: center;
+    .gap('action', 'base');
+    justify-content: center;
+    vertical-align: baseline;
+    font-family: inherit;
+    line-height: var(--text--size-base--line-height);
+    font-weight: var(--t-font-weight--bold);
+    text-decoration: none;
+    background-color: transparent;
+    .border-radius('action', 'base');
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    user-select: none;
+    cursor: pointer;
+
+    &[disabled] {
+        cursor: default;
+        pointer-events: none;
+    }
+
+    &:focus-visible {
+        outline-style: solid;
+        outline-color: transparent;
+        .focus-outline-width('action', 'base');
+        .focus-outline-offset('action', 'base');
+    }
+}
+
+.button-sizes() {
+    each(@sizes, {
+        &--size-@{value} {
+            @token: 'size-@{value}';
+            .min-height('action', @token);
+            .padding('action', @token);
+            .font-size('action', @token);
+        }
+    });
+}
+
+.button-variants() {
+    each(@variants, #(@variant) {
+        &--variant-@{variant} {
+            @token: 'action-@{variant}';
+
+            .color('scheme', @token);
+            .bg-color('scheme', @token);
+            .border-color('scheme', @token);
+
+            &:hover {
+                .hover-filter('scheme', @token);
+            }
+
+            &:active {
+                .active-filter('scheme', @token);
+            }
+
+            &:focus-visible {
+                .focus-outline-color('scheme', @token);
+            }
+
+            &[disabled] {
+                @token: 'action-@{variant}-disabled';
+                .color('scheme', @token);
+                .bg-color('scheme', @token);
+                border-color: transparent;
+            }
+        }
+    });
+}

package/dist/components/Button/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/Button/types.d.ts

@@ -0,0 +1,2 @@
+export declare type ButtonVariant = 'primary' | 'secondary' | 'plain';
+export declare type ButtonSize = 'small' | 'base' | 'medium' | 'large' | 'xlarge';

package/dist/components/Button/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

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

@@ -0,0 +1,8 @@
+import type { HeadingLevel, HeadingTag } from '@preply/ds-core';
+import { FC } from 'react';
+export interface Props {
+    level: HeadingLevel;
+    strong?: boolean;
+    tag?: HeadingTag;
+}
+export declare const Heading: FC<Props>;

package/dist/components/Heading/Heading.js

@@ -0,0 +1,16 @@
+import { safeClassName, localClasses } from '@preply/ds-web-core';
+import React from 'react';
+import styles from './style/index.module.less.js';
+
+const HEADING = 'Heading';
+const Heading = ({ children, level, strong, tag }) => {
+    const Tag = (tag || level);
+    const classNames = [
+        safeClassName(styles, HEADING),
+        ...localClasses(styles, HEADING, [['level', level], { if: strong, then: 'strong' }]),
+    ];
+    return React.createElement(Tag, { className: classNames.join(' ') }, children);
+};
+
+export { Heading };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVhZGluZy5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSGVhZGluZy9IZWFkaW5nLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IEhlYWRpbmdMZXZlbCwgSGVhZGluZ1RhZyB9IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5pbXBvcnQgeyBsb2NhbENsYXNzZXMsIHNhZmVDbGFzc05hbWUgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgbGV2ZWw6IEhlYWRpbmdMZXZlbDtcbiAgICBzdHJvbmc/OiBib29sZWFuO1xuICAgIHRhZz86IEhlYWRpbmdUYWc7XG59XG5cbmNvbnN0IEhFQURJTkcgPSAnSGVhZGluZyc7XG5cbmV4cG9ydCBjb25zdCBIZWFkaW5nOiBGQzxQcm9wcz4gPSAoeyBjaGlsZHJlbiwgbGV2ZWwsIHN0cm9uZywgdGFnIH0pID0+IHtcbiAgICBjb25zdCBUYWcgPSAodGFnIHx8IGxldmVsKSBhcyBIZWFkaW5nVGFnO1xuXG4gICAgY29uc3QgY2xhc3NOYW1lcyA9IFtcbiAgICAgICAgc2FmZUNsYXNzTmFtZShzdHlsZXMsIEhFQURJTkcpLFxuICAgICAgICAuLi5sb2NhbENsYXNzZXMoc3R5bGVzLCBIRUFESU5HLCBbWydsZXZlbCcsIGxldmVsXSwgeyBpZjogc3Ryb25nLCB0aGVuOiAnc3Ryb25nJyB9XSksXG4gICAgXTtcblxuICAgIHJldHVybiA8VGFnIGNsYXNzTmFtZT17Y2xhc3NOYW1lcy5qb2luKCcgJyl9PntjaGlsZHJlbn08L1RhZz47XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFZQSxNQUFNLE9BQU8sR0FBRyxTQUFTLENBQUM7TUFFYixPQUFPLEdBQWMsQ0FBQyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRTtJQUMvRCxNQUFNLEdBQUcsSUFBSSxHQUFHLElBQUksS0FBSyxDQUFlLENBQUM7SUFFekMsTUFBTSxVQUFVLEdBQUc7UUFDZixhQUFhLENBQUMsTUFBTSxFQUFFLE9BQU8sQ0FBQztRQUM5QixHQUFHLFlBQVksQ0FBQyxNQUFNLEVBQUUsT0FBTyxFQUFFLENBQUMsQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO0tBQ3ZGLENBQUM7SUFFRixPQUFPLG9CQUFDLEdBQUcsSUFBQyxTQUFTLEVBQUUsVUFBVSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBRyxRQUFRLENBQU8sQ0FBQztBQUNsRTs7OzsifQ==

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

@@ -0,0 +1,8 @@
+@import '@preply/ds-web-core/dist/typography/style/mixins.less';
+@import './mixins.less';
+
+.Heading {
+    .heading-base();
+    .heading-strong();
+    .heading-levels();
+}

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

@@ -0,0 +1,9 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "._3DJ88_ {\n  margin: 0;\n  line-height: var(--text--size-base--line-height);\n  font-weight: var(--t-font-weight--base);\n}\n._2rnwCX {\n  font-weight: var(--t-font-weight--bold);\n}\n.Mz4Kul {\n  font-size: var(--heading--level-h1--font-size);\n}\n._39hW1C {\n  font-size: var(--heading--level-h2--font-size);\n}\n._1Vkbje {\n  font-size: var(--heading--level-h3--font-size);\n}\n._3j1kRK {\n  font-size: var(--heading--level-h4--font-size);\n}\n._3nK_wK {\n  font-size: var(--heading--level-h5--font-size);\n}\n";
+var styles = {"Heading":"_3DJ88_","Heading--strong":"_2rnwCX","Heading--level-h1":"Mz4Kul","Heading--level-h2":"_39hW1C","Heading--level-h3":"_1Vkbje","Heading--level-h4":"_3j1kRK","Heading--level-h5":"_3nK_wK"};
+var stylesheet="._3DJ88_ {\n  margin: 0;\n  line-height: var(--text--size-base--line-height);\n  font-weight: var(--t-font-weight--base);\n}\n._2rnwCX {\n  font-weight: var(--t-font-weight--bold);\n}\n.Mz4Kul {\n  font-size: var(--heading--level-h1--font-size);\n}\n._39hW1C {\n  font-size: var(--heading--level-h2--font-size);\n}\n._1Vkbje {\n  font-size: var(--heading--level-h3--font-size);\n}\n._3j1kRK {\n  font-size: var(--heading--level-h4--font-size);\n}\n._3nK_wK {\n  font-size: var(--heading--level-h5--font-size);\n}\n";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qix3REFBNEQ7QUFDcEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7In0=

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

@@ -0,0 +1,12 @@
+.heading-base() {
+    margin: 0;
+    line-height: var(--text--size-base--line-height);
+}
+
+.heading-strong() {
+    font-weight: var(--t-font-weight--base);
+
+    &--strong {
+        font-weight: var(--t-font-weight--bold);
+    }
+}

package/dist/components/Heading/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/Icon/Icon.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import type { IconAccent, IconSize, ReactSVGComponentType } from './types';
+export interface Props {
+    svg: ReactSVGComponentType;
+    accent?: IconAccent;
+    size?: IconSize;
+    label?: string;
+}
+export declare const Icon: FC<Props>;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,25 @@
+import { safeClassName, localClasses } from '@preply/ds-web-core';
+import React from 'react';
+import { ICON_SIZE_DEFAULT } from './constants.js';
+import styles from './style/index.module.less.js';
+
+const ICON = 'Icon';
+const Icon = ({ svg: Svg, size = ICON_SIZE_DEFAULT, accent, label }) => {
+    const useNumericSize = !Number.isNaN(Number(size));
+    const style = useNumericSize ? { width: `${size}px`, height: `${size}px` } : {};
+    const classNames = [
+        safeClassName(styles, ICON),
+        ...localClasses(styles, ICON, [
+            ['accent', accent],
+            ['size', !useNumericSize ? size : undefined],
+        ]),
+    ];
+    if (!Svg) {
+        throw new Error('Icon prop svg is mandatory');
+    }
+    return (React.createElement("span", { className: classNames.join(' '), style: style, "aria-hidden": !label, "aria-label": label },
+        React.createElement(Svg, { "aria-hidden": "true", focusable: "false" })));
+};
+
+export { Icon };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSWNvbi9JY29uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBsb2NhbENsYXNzZXMsIHNhZmVDbGFzc05hbWUgfSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgSUNPTl9TSVpFX0RFRkFVTFQgfSBmcm9tICcuL2NvbnN0YW50cyc7XG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGUvaW5kZXgubW9kdWxlLmxlc3MnO1xuaW1wb3J0IHR5cGUgeyBJY29uQWNjZW50LCBJY29uU2l6ZSwgUmVhY3RTVkdDb21wb25lbnRUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUHJvcHMge1xuICAgIHN2ZzogUmVhY3RTVkdDb21wb25lbnRUeXBlO1xuICAgIGFjY2VudD86IEljb25BY2NlbnQ7XG4gICAgc2l6ZT86IEljb25TaXplO1xuICAgIGxhYmVsPzogc3RyaW5nO1xufVxuXG5jb25zdCBJQ09OID0gJ0ljb24nO1xuXG5leHBvcnQgY29uc3QgSWNvbjogRkM8UHJvcHM+ID0gKHsgc3ZnOiBTdmcsIHNpemUgPSBJQ09OX1NJWkVfREVGQVVMVCwgYWNjZW50LCBsYWJlbCB9KSA9PiB7XG4gICAgY29uc3QgdXNlTnVtZXJpY1NpemUgPSAhTnVtYmVyLmlzTmFOKE51bWJlcihzaXplKSk7XG5cbiAgICBjb25zdCBzdHlsZSA9IHVzZU51bWVyaWNTaXplID8geyB3aWR0aDogYCR7c2l6ZX1weGAsIGhlaWdodDogYCR7c2l6ZX1weGAgfSA6IHt9O1xuICAgIGNvbnN0IGNsYXNzTmFtZXMgPSBbXG4gICAgICAgIHNhZmVDbGFzc05hbWUoc3R5bGVzLCBJQ09OKSxcbiAgICAgICAgLi4ubG9jYWxDbGFzc2VzKHN0eWxlcywgSUNPTiwgW1xuICAgICAgICAgICAgWydhY2NlbnQnLCBhY2NlbnRdLFxuICAgICAgICAgICAgWydzaXplJywgIXVzZU51bWVyaWNTaXplID8gKHNpemUgYXMgc3RyaW5nKSA6IHVuZGVmaW5lZF0sXG4gICAgICAgIF0pLFxuICAgIF07XG5cbiAgICBpZiAoIVN2Zykge1xuICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ0ljb24gcHJvcCBzdmcgaXMgbWFuZGF0b3J5Jyk7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPHNwYW5cbiAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcy5qb2luKCcgJyl9XG4gICAgICAgICAgICBzdHlsZT17c3R5bGV9XG4gICAgICAgICAgICBhcmlhLWhpZGRlbj17IWxhYmVsfVxuICAgICAgICAgICAgYXJpYS1sYWJlbD17bGFiZWx9XG4gICAgICAgID5cbiAgICAgICAgICAgIDxTdmcgYXJpYS1oaWRkZW49XCJ0cnVlXCIgZm9jdXNhYmxlPVwiZmFsc2VcIiAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFjQSxNQUFNLElBQUksR0FBRyxNQUFNLENBQUM7TUFFUCxJQUFJLEdBQWMsQ0FBQyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsSUFBSSxHQUFHLGlCQUFpQixFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7SUFDakYsTUFBTSxjQUFjLEdBQUcsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRW5ELE1BQU0sS0FBSyxHQUFHLGNBQWMsR0FBRyxFQUFFLEtBQUssRUFBRSxHQUFHLElBQUksSUFBSSxFQUFFLE1BQU0sRUFBRSxHQUFHLElBQUksSUFBSSxFQUFFLEdBQUcsRUFBRSxDQUFDO0lBQ2hGLE1BQU0sVUFBVSxHQUFHO1FBQ2YsYUFBYSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUM7UUFDM0IsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRTtZQUMxQixDQUFDLFFBQVEsRUFBRSxNQUFNLENBQUM7WUFDbEIsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxjQUFjLEdBQUksSUFBZSxHQUFHLFNBQVMsQ0FBQztTQUMzRCxDQUFDO0tBQ0wsQ0FBQztJQUVGLElBQUksQ0FBQyxHQUFHLEVBQUU7UUFDTixNQUFNLElBQUksS0FBSyxDQUFDLDRCQUE0QixDQUFDLENBQUM7S0FDakQ7SUFFRCxRQUNJLDhCQUNJLFNBQVMsRUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUMvQixLQUFLLEVBQUUsS0FBSyxpQkFDQyxDQUFDLEtBQUssZ0JBQ1AsS0FBSztRQUVqQixvQkFBQyxHQUFHLG1CQUFhLE1BQU0sRUFBQyxTQUFTLEVBQUMsT0FBTyxHQUFHLENBQ3pDLEVBQ1Q7QUFDTjs7OzsifQ==

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

@@ -0,0 +1,2 @@
+import { IconSize } from './types';
+export declare const ICON_SIZE_DEFAULT: IconSize;

package/dist/components/Icon/constants.js

@@ -0,0 +1,4 @@
+const ICON_SIZE_DEFAULT = 'base';
+
+export { ICON_SIZE_DEFAULT };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9JY29uL2NvbnN0YW50cy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJY29uU2l6ZSB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgSUNPTl9TSVpFX0RFRkFVTFQ6IEljb25TaXplID0gJ2Jhc2UnO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJNQUVhLGlCQUFpQixHQUFhOzs7OyJ9

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

@@ -0,0 +1,9 @@
+@import './mixins.less';
+
+.Icon {
+    .icon-base();
+
+    .icon-sizes();
+
+    .icon-accents();
+}

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

@@ -0,0 +1,9 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".nKoHrt {\n  display: inline-block;\n  vertical-align: text-top;\n}\n.nKoHrt svg {\n  display: block;\n  width: 100%;\n  min-width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  fill: currentColor;\n}\n.KgUENg {\n  width: var(--icon--size-xsmall--width);\n  height: var(--icon--size-xsmall--width);\n}\n.ei-SjZ {\n  width: var(--icon--size-small--width);\n  height: var(--icon--size-small--width);\n}\n._2EKmte {\n  width: var(--icon--size-base--width);\n  height: var(--icon--size-base--width);\n}\n.KEKq9X {\n  width: var(--icon--size-medium--width);\n  height: var(--icon--size-medium--width);\n}\n._2EZ_Ud {\n  width: var(--icon--size-large--width);\n  height: var(--icon--size-large--width);\n}\n.QOHF2X {\n  width: var(--icon--size-xlarge--width);\n  height: var(--icon--size-xlarge--width);\n}\n._2ML-d7 svg {\n  fill: var(--scheme--text-normal--color);\n}\n.idQhUK svg {\n  fill: var(--scheme--text-muted--color);\n}\n._1IcAUz svg {\n  fill: var(--scheme--text-positive--color);\n}\n._2_bfg9 svg {\n  fill: var(--scheme--text-highlighted--color);\n}\n._2FixNT svg {\n  fill: var(--scheme--text-brand--color);\n}\n";
+var styles = {"Icon":"nKoHrt","Icon--size-xsmall":"KgUENg","Icon--size-small":"ei-SjZ","Icon--size-base":"_2EKmte","Icon--size-medium":"KEKq9X","Icon--size-large":"_2EZ_Ud","Icon--size-xlarge":"QOHF2X","Icon--accent-normal":"_2ML-d7","Icon--accent-muted":"idQhUK","Icon--accent-positive":"_1IcAUz","Icon--accent-highlighted":"_2_bfg9","Icon--accent-brand":"_2FixNT"};
+var stylesheet=".nKoHrt {\n  display: inline-block;\n  vertical-align: text-top;\n}\n.nKoHrt svg {\n  display: block;\n  width: 100%;\n  min-width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  fill: currentColor;\n}\n.KgUENg {\n  width: var(--icon--size-xsmall--width);\n  height: var(--icon--size-xsmall--width);\n}\n.ei-SjZ {\n  width: var(--icon--size-small--width);\n  height: var(--icon--size-small--width);\n}\n._2EKmte {\n  width: var(--icon--size-base--width);\n  height: var(--icon--size-base--width);\n}\n.KEKq9X {\n  width: var(--icon--size-medium--width);\n  height: var(--icon--size-medium--width);\n}\n._2EZ_Ud {\n  width: var(--icon--size-large--width);\n  height: var(--icon--size-large--width);\n}\n.QOHF2X {\n  width: var(--icon--size-xlarge--width);\n  height: var(--icon--size-xlarge--width);\n}\n._2ML-d7 svg {\n  fill: var(--scheme--text-normal--color);\n}\n.idQhUK svg {\n  fill: var(--scheme--text-muted--color);\n}\n._1IcAUz svg {\n  fill: var(--scheme--text-positive--color);\n}\n._2_bfg9 svg {\n  fill: var(--scheme--text-highlighted--color);\n}\n._2FixNT svg {\n  fill: var(--scheme--text-brand--color);\n}\n";
+styleInject(css_248z);
+
+export { styles as default, stylesheet };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qix3REFBNEQ7QUFDcEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7In0=

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

@@ -0,0 +1,44 @@
+@import '@preply/ds-web-core/dist/theme/style/declarations.mixins.less';
+@import '@preply/ds-web-core/dist/typography/style/mixins.less';
+
+@namespace: 'icon';
+
+@icon-accents: @text-accents;
+@icon-sizes: xsmall, small, base, medium, large, xlarge;
+
+.icon-base() {
+    display: inline-block;
+    vertical-align: text-top;
+
+    svg {
+        display: block;
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        fill: currentColor;
+    }
+}
+
+.icon-sizes() {
+    each(@icon-sizes, {
+        &--size-@{value} {
+            @token: 'size-@{value}';
+            @var: .token(@namespace, @token, 'width')[];
+            width: @var;
+            height: @var;
+        }
+    });
+}
+
+.icon-accents() {
+    each(@icon-accents, #(@accent) {
+        &--accent-@{accent} {
+
+            svg {
+                @token: 'text-@{accent}';
+                .fill('scheme', @token);
+            }
+        }
+    });
+}

package/dist/components/Icon/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