@xfers/design-system 4.1.1-dev.461f5db012 → 4.1.1-dev.ccc8b981e6

package/dist/components/Alert/Alert.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var icons_1 = require("src/icons");
+var styles_1 = require("./styles");
+var Typography_1 = require("src/constants/Typography/Typography");
+var colors_1 = require("src/constants/colors");
+require("antd/es/alert/style/css");
+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 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("div", { style: { width: 24, height: 24 } }, iconElement));
+    };
+    var Message = function () {
+        return (react_1.default.createElement(styles_1.StyledAlertMessageContainer, null,
+            title && (react_1.default.createElement(Typography_1.Typography.Label, { color: type === 'info' ? colors_1.WHITE.DEFAULT : colors_1.BLACK.DEFAULT, size: "md" }, title)),
+            react_1.default.createElement(Typography_1.Typography.Body, { color: type === 'info' ? colors_1.WHITE.DEFAULT : colors_1.BLACK.DEFAULT, size: "md" }, message)));
+    };
+    var CloseIcon = function () {
+        return (react_1.default.createElement(icons_1.Cross, { width: 14, height: 14 }));
+    };
+    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: onClose, closeIcon: react_1.default.createElement(CloseIcon, null) }));
+};
+exports.default = CustomAlert;
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;AAAA,+BAAyB;AAEzB,mCAAuC;AACvC,mCAAmE;AACnE,kEAAgE;AAChE,+CAAmD;AACnD,mCAAgC;AAEhC,IAAM,WAAW,GAAG,UAAC,EAA6E;QAA3E,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA;IAC1E,IAAM,OAAO,GAAG;QACZ,IAAM,WAAW,GAAG,IAAI,CAAC,CAAC;YACtB,eAAK,CAAC,YAAY,CAAC,IAA0B,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;YAC3E,8BAAC,YAAI,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAA;QAEnC,OAAO,CACH,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAChC,WAAW,CACV,CACT,CAAA;IACL,CAAC,CAAA;IAED,IAAM,OAAO,GAAG;QACZ,OAAO,CACH,8BAAC,oCAA2B;YAEpB,KAAK,IAAI,CACL,8BAAC,uBAAU,CAAC,KAAK,IAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,EAAE,IAAI,EAAC,IAAI,IAAE,KAAK,CAAoB,CACjH;YAEL,8BAAC,uBAAU,CAAC,IAAI,IAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,EAAE,IAAI,EAAC,IAAI,IAAE,OAAO,CAAmB,CACpF,CACjC,CAAA;IACL,CAAC,CAAA;IAED,IAAM,SAAS,GAAG;QACd,OAAO,CACH,8BAAC,aAAK,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACnC,CAAA;IACL,CAAC,CAAA;IAED,OAAO,CACH,8BAAC,oBAAW,IACR,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,OAAO,EAChB,SAAS,EAAE,8BAAC,SAAS,OAAG,GAC1B,CACL,CAAA;AACL,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}

package/dist/components/Alert/index.js

@@ -0,0 +1,6 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,31 @@
+"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.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 SuccessStyle = "\n    border: 1px solid ".concat(ColorStyles_1.GREEN_COLORS.G400, "!important;\n    .ant-alert-icon {\n        color: ").concat(ColorStyles_1.GREEN_COLORS.G400, "!important;\n    }\n    .ant-alert-close-icon {\n        color: ").concat(ColorStyles_1.GREEN_COLORS.G400, "!important;\n    }\n    background-color: ").concat(ColorStyles_1.GREEN_COLORS.G100, "!important;\n");
+var WarningStyle = "\n    border: 1px solid ".concat(ColorStyles_1.YELLOW_COLORS.Y400, "!important;\n    .ant-alert-icon {\n        color: ").concat(ColorStyles_1.YELLOW_COLORS.Y400, "!important;\n    }\n    .ant-alert-close-icon {\n        color: ").concat(ColorStyles_1.YELLOW_COLORS.Y400, "!important;\n    }\n    background-color: ").concat(ColorStyles_1.YELLOW_COLORS.Y100, "!important;\n");
+var ErrorStyle = "\n    border: 1px solid ".concat(ColorStyles_1.RED_COLORS.R400, "!important;\n    .ant-alert-icon {\n        color: ").concat(ColorStyles_1.RED_COLORS.R400, "!important;\n    }\n    .ant-alert-close-icon {\n        color: ").concat(ColorStyles_1.RED_COLORS.R400, "!important;\n    }\n    background-color: ").concat(ColorStyles_1.RED_COLORS.R100, "!important;\n");
+var InfoStyle = "\n    border: none!important;\n    .ant-alert-icon {\n        color: ".concat(colors_1.WHITE.DEFAULT, "!important;\n    }\n    .ant-alert-close-icon {\n        color: ").concat(colors_1.WHITE.DEFAULT, "!important;\n    }\n    background-color: ").concat(colors_1.GREEN.CONTRAST, "!important;\n");
+exports.StyledAlert = (0, styled_1.default)(alert_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.ant-alert {\n        width: 328px!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        \n        ", "\n        ", "\n        ", "\n        ", "\n    }\n"], ["\n    &.ant-alert {\n        width: 328px!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        \n        ", "\n        ", "\n        ", "\n        ", "\n    }\n"])), 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, p, div {\n        font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n        font-family: 'Red Hat Display', 'Inter', sans-serif !important;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n\n    span, p, div {\n        font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n        font-family: 'Red Hat Display', 'Inter', sans-serif !important;\n    }\n"])));
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,0CAAoC;AACpC,uCAAiC;AACjC,+CAAmD;AACnD,sDAA6F;AAE7F,IAAM,YAAY,GAAG,kCACG,0BAAY,CAAC,IAAI,gEAExB,0BAAY,CAAC,IAAI,6EAGjB,0BAAY,CAAC,IAAI,uDAEV,0BAAY,CAAC,IAAI,kBACxC,CAAA;AAED,IAAM,YAAY,GAAG,kCACG,2BAAa,CAAC,IAAI,gEAEzB,2BAAa,CAAC,IAAI,6EAGlB,2BAAa,CAAC,IAAI,uDAEX,2BAAa,CAAC,IAAI,kBACzC,CAAA;AAED,IAAM,UAAU,GAAG,kCACK,wBAAU,CAAC,IAAI,gEAEtB,wBAAU,CAAC,IAAI,6EAGf,wBAAU,CAAC,IAAI,uDAER,wBAAU,CAAC,IAAI,kBACtC,CAAA;AAED,IAAM,SAAS,GAAG,+EAGD,cAAK,CAAC,OAAO,6EAGb,cAAK,CAAC,OAAO,uDAEN,cAAK,CAAC,QAAQ,kBACrC,CAAA;AAEY,QAAA,WAAW,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,wZAAoD,8RAWlF,EAAgD,YAChD,EAAgD,YAChD,EAA4C,YAC5C,EAA0C,WAEnD,KALS,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,EAEnD;AAEY,QAAA,2BAA2B,GAAG,gBAAM,CAAC,GAAG,6UAAA,0QAWpD,KAAA"}

package/dist/components/Alert/types.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+/// <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>;

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

@@ -0,0 +1,4 @@
+import { AlertProps } from 'antd/es/alert';
+export type CustomAlertProps = Pick<AlertProps, 'type' | 'message' | 'closable' | 'icon' | 'showIcon' | 'onClose'> & {
+    title?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfers/design-system",
-  "version": "4.1.1-dev.461f5db012",
+  "version": "4.1.1-dev.ccc8b981e6",
   "description": "",
   "keywords": [
     "xfers",