@xfers/design-system 4.1.1-dev.2c52cf86b5 → 4.1.1-dev.2e0066cfba

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfers/design-system",
-  "version": "4.1.1-dev.2c52cf86b5",
+  "version": "4.1.1-dev.2e0066cfba",
   "description": "",
   "keywords": [
     "xfers",
@@ -29,7 +29,7 @@
     "lint/ci:changed": "eslint $@ --cache",
     "clean": "rimraf dist cjs es",
     "prebuild": "yarn clean",
-    "build:prod": "tsc --module commonjs && rollup -c rollup.config.js",
+    "build:prod": "tsc --module commonjs && rollup -c rollup.config.js && rimraf node_modules/react node_modules/react-dom",
     "start": "rollup -c rollup.config.js -w",
     "test": "jest --coverage",
     "test:watch": "jest --coverage --watch",
@@ -160,5 +160,13 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
   }
 }

package/dist/components/Alert/Alert.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-require("antd/es/alert/style/css");
-var icons_1 = require("src/icons");
-var Typography_1 = require("src/constants/Typography/Typography");
-var colors_1 = require("src/constants/colors");
-var styles_1 = require("./styles");
-var CustomAlert = function (_a) {
-    var type = _a.type, message = _a.message, closable = _a.closable, icon = _a.icon, showIcon = _a.showIcon, onClose = _a.onClose, title = _a.title;
-    var _b = (0, react_1.useState)(true), isVisible = _b[0], setIsVisible = _b[1];
-    var getIcon = function () {
-        var iconElement = icon ? (react_1.default.cloneElement(icon, {
-            width: 20,
-            height: 20
-        }))
-            : (react_1.default.createElement(icons_1.Bell, { width: 20, height: 20 }));
-        return react_1.default.createElement(styles_1.AlertIconContainer, null, iconElement);
-    };
-    var Message = function () {
-        var textColor = type === 'info' ? colors_1.WHITE.DEFAULT : colors_1.BLACK.DEFAULT;
-        return (react_1.default.createElement(styles_1.StyledAlertMessageContainer, null,
-            title && (react_1.default.createElement(Typography_1.Typography.Label, { color: textColor, size: "md" }, title)),
-            react_1.default.createElement(Typography_1.Typography.Body, { color: textColor, size: "md" }, message)));
-    };
-    var CloseIcon = function () { return react_1.default.createElement(icons_1.Cross, { width: 14, height: 14 }); };
-    var handleClose = function () {
-        setIsVisible(false);
-        if (onClose) {
-            onClose();
-        }
-    };
-    if (!isVisible)
-        return null;
-    return (react_1.default.createElement(styles_1.StyledAlert, { type: type || 'warning', message: react_1.default.createElement(Message, null), closable: closable, icon: getIcon(), showIcon: showIcon, onClose: handleClose, closeIcon: react_1.default.createElement(CloseIcon, null) }));
-};
-exports.default = CustomAlert;
-//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;AAAA,+BAAuC;AACvC,mCAAgC;AAChC,mCAAuC;AACvC,kEAAgE;AAChE,+CAAmD;AAEnD,mCAIiB;AAEjB,IAAM,WAAW,GAAG,UAAC,EAQF;QAPjB,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAA4B,IAAA,gBAAQ,EAAC,IAAI,CAAC,EAAzC,SAAS,QAAA,EAAE,YAAY,QAAkB,CAAA;IAEhD,IAAM,OAAO,GAAG;QACd,IAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,CACzB,eAAK,CAAC,YAAY,CAAC,IAA0B,EAAE;YAC7C,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX,CAAC,CACH;YACC,CAAC,CAAC,CACE,8BAAC,YAAI,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAChC,CAAA;QAEL,OAAO,8BAAC,2BAAkB,QAAE,WAAW,CAAsB,CAAA;IAC/D,CAAC,CAAA;IAED,IAAM,OAAO,GAAG;QACd,IAAM,SAAS,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,CAAA;QAEjE,OAAO,CACL,8BAAC,oCAA2B;YACzB,KAAK,IAAI,CACR,8BAAC,uBAAU,CAAC,KAAK,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,IAC1C,KAAK,CACW,CACpB;YACD,8BAAC,uBAAU,CAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,IACzC,OAAO,CACQ,CACU,CAC/B,CAAA;IACH,CAAC,CAAA;IAED,IAAM,SAAS,GAAG,cAAM,OAAA,8BAAC,aAAK,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EAAhC,CAAgC,CAAA;IAExD,IAAM,WAAW,GAAG;QAClB,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,IAAI,OAAO,EAAE;YACX,OAAO,EAAE,CAAA;SACV;IACH,CAAC,CAAA;IAED,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAA;IAE3B,OAAO,CACL,8BAAC,oBAAW,IACV,IAAI,EAAE,IAAI,IAAI,SAAS,EACvB,OAAO,EAAE,8BAAC,OAAO,OAAG,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,OAAO,EAAE,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,8BAAC,SAAS,OAAG,GACxB,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}

package/dist/components/Alert/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Alert_1 = require("./Alert");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Alert_1.default; } });
-//# sourceMappingURL=index.js.map

package/dist/components/Alert/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":";;;AAAA,iCAAiC;AAAxB,gGAAA,OAAO,OAAA"}

package/dist/components/Alert/styles.js

@@ -1,34 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertIconContainer = exports.StyledAlertMessageContainer = exports.StyledAlert = void 0;
-var styled_1 = require("@emotion/styled");
-var alert_1 = require("antd/es/alert");
-var colors_1 = require("src/constants/colors");
-var ColorStyles_1 = require("src/shared/ColorStyles");
-var baseAlertStyles = "\n  width: 328px !important;\n  min-height: 52px !important;\n  border-radius: 8px !important;\n  padding: 8px 12px !important;\n  \n  .ant-alert-icon {\n    align-self: flex-start !important;\n    margin-top: 0 !important;\n  }\n";
-var getThemeStyles = function (borderColor, iconColor, backgroundColor) { return "\n  border: 1px solid ".concat(borderColor, " !important;\n  background-color: ").concat(backgroundColor, " !important;\n  \n  .ant-alert-icon {\n    color: ").concat(iconColor, " !important;\n  }\n  \n  .ant-alert-close-icon {\n    color: ").concat(iconColor, " !important;\n  }\n"); };
-var SuccessStyle = getThemeStyles(ColorStyles_1.GREEN_COLORS.G400, ColorStyles_1.GREEN_COLORS.G400, ColorStyles_1.GREEN_COLORS.G100);
-var WarningStyle = getThemeStyles(ColorStyles_1.YELLOW_COLORS.Y400, ColorStyles_1.YELLOW_COLORS.Y400, ColorStyles_1.YELLOW_COLORS.Y100);
-var ErrorStyle = getThemeStyles(ColorStyles_1.RED_COLORS.R400, ColorStyles_1.RED_COLORS.R400, ColorStyles_1.RED_COLORS.R100);
-var InfoStyle = "\n  border: none !important;\n  background-color: ".concat(colors_1.GREEN.CONTRAST, " !important;\n  \n  .ant-alert-icon {\n    color: ").concat(colors_1.WHITE.DEFAULT, " !important;\n  }\n  \n  .ant-alert-close-icon {\n    color: ").concat(colors_1.WHITE.DEFAULT, " !important;\n  }\n");
-exports.StyledAlert = (0, styled_1.default)(alert_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.ant-alert {\n    ", "\n    \n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  &.ant-alert {\n    ", "\n    \n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), baseAlertStyles, function (_a) {
-    var type = _a.type;
-    return type === 'success' && SuccessStyle;
-}, function (_a) {
-    var type = _a.type;
-    return type === 'warning' && WarningStyle;
-}, function (_a) {
-    var type = _a.type;
-    return type === 'error' && ErrorStyle;
-}, function (_a) {
-    var type = _a.type;
-    return type === 'info' && InfoStyle;
-});
-exports.StyledAlertMessageContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  span,\n  p,\n  div {\n    font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: 'Red Hat Display', 'Inter', sans-serif !important;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  span,\n  p,\n  div {\n    font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: 'Red Hat Display', 'Inter', sans-serif !important;\n  }\n"])));
-exports.AlertIconContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n"], ["\n  width: 24px;\n  height: 24px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
-//# sourceMappingURL=styles.js.map

package/dist/components/Alert/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,0CAAoC;AACpC,uCAAiC;AACjC,+CAAmD;AACnD,sDAAgF;AAEhF,IAAM,eAAe,GAAG,wOAUvB,CAAA;AAED,IAAM,cAAc,GAAG,UACrB,WAAmB,EACnB,SAAiB,EACjB,eAAuB,IACpB,OAAA,gCACiB,WAAW,+CACX,eAAe,+DAGxB,SAAS,0EAIT,SAAS,wBAErB,EAXI,CAWJ,CAAA;AAED,IAAM,YAAY,GAAG,cAAc,CACjC,0BAAY,CAAC,IAAI,EACjB,0BAAY,CAAC,IAAI,EACjB,0BAAY,CAAC,IAAI,CAClB,CAAA;AACD,IAAM,YAAY,GAAG,cAAc,CACjC,2BAAa,CAAC,IAAI,EAClB,2BAAa,CAAC,IAAI,EAClB,2BAAa,CAAC,IAAI,CACnB,CAAA;AACD,IAAM,UAAU,GAAG,cAAc,CAC/B,wBAAU,CAAC,IAAI,EACf,wBAAU,CAAC,IAAI,EACf,wBAAU,CAAC,IAAI,CAChB,CAAA;AACD,IAAM,SAAS,GAAG,4DAEI,cAAK,CAAC,QAAQ,+DAGvB,cAAK,CAAC,OAAO,0EAIb,cAAK,CAAC,OAAO,wBAEzB,CAAA;AAEY,QAAA,WAAW,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,qJAEtC,yBAEI,EAAe,cAEf,EAAgD,QAChD,EAAgD,QAChD,EAA4C,QAC5C,EAA0C,SAE/C,KAPK,eAAe,EAEf,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,IAAI,KAAK,SAAS,IAAI,YAAY;AAAlC,CAAkC,EAChD,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,IAAI,KAAK,SAAS,IAAI,YAAY;AAAlC,CAAkC,EAChD,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,IAAI,KAAK,OAAO,IAAI,UAAU;AAA9B,CAA8B,EAC5C,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,IAAI,KAAK,MAAM,IAAI,SAAS;AAA5B,CAA4B,EAE/C;AAEY,QAAA,2BAA2B,GAAG,gBAAM,CAAC,GAAG,8UAAA,2QAkBpD,KAAA;AAEY,QAAA,kBAAkB,GAAG,gBAAM,CAAC,GAAG,wGAAA,qCAG3C,KAAA"}

package/dist/components/Alert/types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

package/dist/components/Alert/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":""}

package/dist/types/components/Alert/Alert.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import 'antd/es/alert/style/css';
-import { CustomAlertProps } from './types';
-declare const CustomAlert: ({ type, message, closable, icon, showIcon, onClose, title }: CustomAlertProps) => JSX.Element | null;
-export default CustomAlert;

package/dist/types/components/Alert/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Alert';

package/dist/types/components/Alert/styles.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const StyledAlert: import("@emotion/styled-base").StyledComponent<import("antd/es/alert").AlertProps & {
-    children?: import("react").ReactNode;
-}, {
-    type: 'success' | 'warning' | 'error' | 'info';
-}, object>;
-export declare const StyledAlertMessageContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AlertIconContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/dist/types/components/Alert/types.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { AlertProps } from 'antd/es/alert';
-export type CustomAlertProps = Pick<AlertProps, 'type' | 'closable' | 'icon' | 'showIcon'> & {
-    title?: React.ReactNode;
-    onClose?: () => void;
-    message?: React.ReactNode;
-};