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

package/dist/components/Alert/Alert.js

@@ -0,0 +1,34 @@
+"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 styles_1 = require("./styles");
+var Typography_1 = require("src/constants/Typography/Typography");
+var colors_1 = require("src/constants/colors");
+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);
+        onClose === null || onClose === void 0 ? void 0 : 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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;AAAA,+BAAuC;AACvC,mCAAgC;AAEhC,mCAAuC;AACvC,mCAAuF;AACvF,kEAAgE;AAChE,+CAAmD;AAEnD,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;YACtB,CAAC,CAAC,eAAK,CAAC,YAAY,CAAC,IAA0B,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;YAC3E,CAAC,CAAC,8BAAC,YAAI,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAA;QAEnC,OAAO,CACL,8BAAC,2BAAkB,QAChB,WAAW,CACO,CACtB,CAAA;IACH,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,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;IACb,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

@@ -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,34 @@
+"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, 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"])));
+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

@@ -0,0 +1 @@
+{"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,UAAC,WAAmB,EAAE,SAAiB,EAAE,eAAuB,IAAK,OAAA,gCACtE,WAAW,+CACX,eAAe,+DAGxB,SAAS,0EAIT,SAAS,wBAErB,EAX2F,CAW3F,CAAA;AAED,IAAM,YAAY,GAAG,cAAc,CAAC,0BAAY,CAAC,IAAI,EAAE,0BAAY,CAAC,IAAI,EAAE,0BAAY,CAAC,IAAI,CAAC,CAAA;AAC5F,IAAM,YAAY,GAAG,cAAc,CAAC,2BAAa,CAAC,IAAI,EAAE,2BAAa,CAAC,IAAI,EAAE,2BAAa,CAAC,IAAI,CAAC,CAAA;AAC/F,IAAM,UAAU,GAAG,cAAc,CAAC,wBAAU,CAAC,IAAI,EAAE,wBAAU,CAAC,IAAI,EAAE,wBAAU,CAAC,IAAI,CAAC,CAAA;AACpF,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,qJAAoD,yBAEtF,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,yTAAA,sPAWpD,KAAA;AAEY,QAAA,kBAAkB,GAAG,gBAAM,CAAC,GAAG,wGAAA,qCAG3C,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 '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

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

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

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

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

package/package.json

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