@activecollab/components 2.0.177 → 2.0.178
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/InfoBox/InfoBox.js +14 -12
- package/dist/cjs/components/InfoBox/InfoBox.js.map +1 -1
- package/dist/cjs/components/InfoBox/Styles.js +18 -11
- package/dist/cjs/components/InfoBox/Styles.js.map +1 -1
- package/dist/cjs/utils/colors.js +12 -0
- package/dist/cjs/utils/colors.js.map +1 -1
- package/dist/esm/components/InfoBox/InfoBox.d.ts +4 -4
- package/dist/esm/components/InfoBox/InfoBox.d.ts.map +1 -1
- package/dist/esm/components/InfoBox/InfoBox.js +15 -13
- package/dist/esm/components/InfoBox/InfoBox.js.map +1 -1
- package/dist/esm/components/InfoBox/Styles.d.ts +6 -4
- package/dist/esm/components/InfoBox/Styles.d.ts.map +1 -1
- package/dist/esm/components/InfoBox/Styles.js +19 -10
- package/dist/esm/components/InfoBox/Styles.js.map +1 -1
- package/dist/esm/utils/colors.d.ts +12 -0
- package/dist/esm/utils/colors.d.ts.map +1 -1
- package/dist/esm/utils/colors.js +12 -0
- package/dist/esm/utils/colors.js.map +1 -1
- package/dist/index.js +12 -0
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.InfoBox = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _Styles = require("./Styles");
|
|
9
|
+
var _utils = require("../../utils");
|
|
9
10
|
var _Icons = require("../Icons");
|
|
10
11
|
var _Typography = require("../Typography");
|
|
11
12
|
var _excluded = ["type", "children", "showIcon", "icon", "title", "action"];
|
|
@@ -25,19 +26,18 @@ var InfoBox = exports.InfoBox = function InfoBox(_ref) {
|
|
|
25
26
|
action = _ref$action === void 0 ? null : _ref$action,
|
|
26
27
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
27
28
|
var statusColors = {
|
|
28
|
-
success:
|
|
29
|
-
warning:
|
|
30
|
-
note:
|
|
31
|
-
default:
|
|
32
|
-
neutral:
|
|
29
|
+
success: _utils.colors.greenSuccess.color,
|
|
30
|
+
warning: _utils.colors.redAlert.color,
|
|
31
|
+
note: _utils.colors.yellowWarning.color,
|
|
32
|
+
default: _utils.colors.blueSky.color,
|
|
33
|
+
neutral: _utils.colors.gray.color
|
|
33
34
|
};
|
|
34
|
-
|
|
35
35
|
// https://davidwalsh.name/hex-opacity
|
|
36
36
|
var opacity = "1A";
|
|
37
37
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoBoxWrapper, _extends({
|
|
38
|
-
color: "".concat(statusColors[type]),
|
|
39
|
-
opacity: opacity
|
|
40
|
-
}, rest), /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoBoxContainer, null,
|
|
38
|
+
$color: "".concat(statusColors[type]),
|
|
39
|
+
$opacity: opacity
|
|
40
|
+
}, rest), /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoBoxContainer, null, showIcon && /*#__PURE__*/_react.default.createElement("span", null, icon && /*#__PURE__*/_react.default.isValidElement(icon) ? ( /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
41
41
|
fill: statusColors[type],
|
|
42
42
|
width: 18
|
|
43
43
|
})) : type === "success" ? /*#__PURE__*/_react.default.createElement(_Icons.CheckboxBlankTogglerIcon, {
|
|
@@ -50,11 +50,13 @@ var InfoBox = exports.InfoBox = function InfoBox(_ref) {
|
|
|
50
50
|
fill: statusColors[type],
|
|
51
51
|
width: 18
|
|
52
52
|
}) : /*#__PURE__*/_react.default.createElement(_Icons.InfoIcon, {
|
|
53
|
-
fill: "
|
|
53
|
+
fill: statusColors["neutral"],
|
|
54
54
|
width: 18
|
|
55
|
-
})), /*#__PURE__*/_react.default.createElement(_Styles.
|
|
55
|
+
})), /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoBoxHeader, {
|
|
56
|
+
$hasTitle: title ? true : false
|
|
57
|
+
}, /*#__PURE__*/_react.default.createElement(_Styles.SyledInfoBoxInnerHeader, null, typeof title === "string" && title ? /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
|
|
56
58
|
weight: "bold",
|
|
57
59
|
lineHeight: "loose"
|
|
58
|
-
}, title) : title,
|
|
60
|
+
}, title) : title, action), children)));
|
|
59
61
|
};
|
|
60
62
|
//# sourceMappingURL=InfoBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBox.js","names":["_react","_interopRequireDefault","require","_Styles","_Icons","_Typography","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","InfoBox","exports","_ref","_ref$type","type","children","showIcon","icon","_ref$title","title","_ref$action","action","rest","statusColors","success","warning","note","neutral","opacity","createElement","StyledInfoBoxWrapper","color","concat","
|
|
1
|
+
{"version":3,"file":"InfoBox.js","names":["_react","_interopRequireDefault","require","_Styles","_utils","_Icons","_Typography","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","InfoBox","exports","_ref","_ref$type","type","children","showIcon","icon","_ref$title","title","_ref$action","action","rest","statusColors","success","colors","greenSuccess","color","warning","redAlert","note","yellowWarning","blueSky","neutral","gray","opacity","createElement","StyledInfoBoxWrapper","$color","concat","$opacity","StyledInfoBoxContainer","React","isValidElement","cloneElement","fill","width","CheckboxBlankTogglerIcon","CloseCircleIcon","InfoIcon","StyledInfoBoxHeader","$hasTitle","SyledInfoBoxInnerHeader","Body2","weight","lineHeight"],"sources":["../../../../src/components/InfoBox/InfoBox.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\n\nimport {\n StyledInfoBoxContainer,\n StyledInfoBoxHeader,\n StyledInfoBoxWrapper,\n SyledInfoBoxInnerHeader,\n} from \"./Styles\";\nimport { colors } from \"../../utils\";\nimport { CheckboxBlankTogglerIcon, CloseCircleIcon, InfoIcon } from \"../Icons\";\nimport { ElementWithRef } from \"../Select\";\nimport { Body2 } from \"../Typography\";\nexport type InfoBoxType =\n | \"success\"\n | \"warning\"\n | \"note\"\n | \"default\"\n | \"neutral\";\nexport interface InfoBoxProps {\n type: InfoBoxType;\n children?: ReactNode;\n showIcon?: boolean;\n title?: ReactNode | string;\n icon?: ElementWithRef<SVGSVGElement>;\n action?: ReactNode;\n}\nexport const InfoBox: React.FC<InfoBoxProps> = ({\n type = \"default\",\n children,\n showIcon,\n icon,\n title = null,\n action = null,\n ...rest\n}) => {\n const statusColors: Record<InfoBoxType, string> = {\n success: colors.greenSuccess.color,\n warning: colors.redAlert.color,\n note: colors.yellowWarning.color,\n default: colors.blueSky.color,\n neutral: colors.gray.color,\n };\n // https://davidwalsh.name/hex-opacity\n const opacity = \"1A\";\n\n return (\n <StyledInfoBoxWrapper\n $color={`${statusColors[type]}`}\n $opacity={opacity}\n {...rest}\n >\n <StyledInfoBoxContainer>\n {showIcon && (\n <span>\n {icon && React.isValidElement(icon) ? (\n React.cloneElement(icon, {\n fill: statusColors[type],\n width: 18,\n })\n ) : type === \"success\" ? (\n <CheckboxBlankTogglerIcon fill={statusColors[type]} width={18} />\n ) : type === \"warning\" ? (\n <CloseCircleIcon fill={statusColors[type]} width={18} />\n ) : type === \"note\" || type === \"default\" ? (\n <InfoIcon fill={statusColors[type]} width={18} />\n ) : (\n <InfoIcon fill={statusColors[\"neutral\"]} width={18} />\n )}\n </span>\n )}\n <StyledInfoBoxHeader $hasTitle={title ? true : false}>\n <SyledInfoBoxInnerHeader>\n {typeof title === \"string\" && title ? (\n <Body2 weight=\"bold\" lineHeight=\"loose\">\n {title}\n </Body2>\n ) : (\n title\n )}\n {action}\n </SyledInfoBoxInnerHeader>\n {children}\n </StyledInfoBoxHeader>\n </StyledInfoBoxContainer>\n </StyledInfoBoxWrapper>\n );\n};\n"],"mappings":"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"}
|
|
@@ -3,30 +3,37 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.SyledInfoBoxInnerHeader = exports.StyledInfoBoxWrapper = exports.StyledInfoBoxHeader = exports.StyledInfoBoxContainer = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
9
|
var StyledInfoBoxWrapper = exports.StyledInfoBoxWrapper = _styledComponents.default.div.withConfig({
|
|
10
10
|
displayName: "Styles__StyledInfoBoxWrapper",
|
|
11
11
|
componentId: "sc-amgpyr-0"
|
|
12
12
|
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;background-color:", ";border:1px solid ", ";position:relative;"], function (_ref) {
|
|
13
|
-
var color = _ref
|
|
14
|
-
opacity = _ref
|
|
15
|
-
return color + opacity;
|
|
13
|
+
var $color = _ref.$color,
|
|
14
|
+
$opacity = _ref.$opacity;
|
|
15
|
+
return $color + $opacity;
|
|
16
16
|
}, function (_ref2) {
|
|
17
|
-
var color = _ref2
|
|
18
|
-
return color;
|
|
17
|
+
var $color = _ref2.$color;
|
|
18
|
+
return $color;
|
|
19
19
|
});
|
|
20
|
+
StyledInfoBoxWrapper.displayName = "StyledInfoBoxWrapper";
|
|
20
21
|
var StyledInfoBoxHeader = exports.StyledInfoBoxHeader = _styledComponents.default.div.withConfig({
|
|
21
22
|
displayName: "Styles__StyledInfoBoxHeader",
|
|
22
23
|
componentId: "sc-amgpyr-1"
|
|
23
|
-
})(["display:flex;
|
|
24
|
+
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], function (_ref3) {
|
|
25
|
+
var $hasTitle = _ref3.$hasTitle;
|
|
26
|
+
return $hasTitle ? "12px" : "none";
|
|
27
|
+
});
|
|
28
|
+
StyledInfoBoxHeader.displayName = "StyledInfoBoxHeader";
|
|
24
29
|
var StyledInfoBoxContainer = exports.StyledInfoBoxContainer = _styledComponents.default.div.withConfig({
|
|
25
30
|
displayName: "Styles__StyledInfoBoxContainer",
|
|
26
31
|
componentId: "sc-amgpyr-2"
|
|
27
|
-
})(["display:flex;justify-items:space-between;width:100%;"]);
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
})(["display:flex;justify-items:space-between;width:100%;gap:8px;"]);
|
|
33
|
+
StyledInfoBoxContainer.displayName = "StyledInfoBoxContainer";
|
|
34
|
+
var SyledInfoBoxInnerHeader = exports.SyledInfoBoxInnerHeader = _styledComponents.default.div.withConfig({
|
|
35
|
+
displayName: "Styles__SyledInfoBoxInnerHeader",
|
|
30
36
|
componentId: "sc-amgpyr-3"
|
|
31
|
-
})(["display:flex;
|
|
37
|
+
})(["display:flex;"]);
|
|
38
|
+
SyledInfoBoxInnerHeader.displayName = "SyledInfoBoxInnerHeader";
|
|
32
39
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledInfoBoxWrapper","exports","styled","div","withConfig","displayName","componentId","_ref","color","opacity","_ref2","StyledInfoBoxHeader","StyledInfoBoxContainer","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledInfoBoxWrapper","exports","styled","div","withConfig","displayName","componentId","_ref","$color","$opacity","_ref2","StyledInfoBoxHeader","_ref3","$hasTitle","StyledInfoBoxContainer","SyledInfoBoxInnerHeader"],"sources":["../../../../src/components/InfoBox/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nexport const StyledInfoBoxWrapper = styled.div<{\n $color: string;\n $opacity: string;\n}>`\n gap: 4px;\n width: 100%;\n border-radius: 8px;\n padding-inline: 16px;\n padding-block: 12px;\n background-color: ${({ $color, $opacity }) => $color + $opacity};\n border: 1px solid ${({ $color }) => $color};\n position: relative;\n`;\nStyledInfoBoxWrapper.displayName = \"StyledInfoBoxWrapper\";\nexport const StyledInfoBoxHeader = styled.div<{\n $hasTitle: boolean;\n}>`\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: ${({ $hasTitle }) => ($hasTitle ? \"12px\" : \"none\")};\n`;\nStyledInfoBoxHeader.displayName = \"StyledInfoBoxHeader\";\nexport const StyledInfoBoxContainer = styled.div`\n display: flex;\n justify-items: space-between;\n width: 100%;\n gap: 8px;\n`;\nStyledInfoBoxContainer.displayName = \"StyledInfoBoxContainer\";\nexport const SyledInfoBoxInnerHeader = styled.div`\n display: flex;\n`;\nSyledInfoBoxInnerHeader.displayName = \"SyledInfoBoxInnerHeader\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAChC,IAAMG,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mJASxB,UAAAC,IAAA;EAAA,IAAGC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAAA,OAAOD,MAAM,GAAGC,QAAQ;AAAA,GAC3C,UAAAC,KAAA;EAAA,IAAGF,MAAM,GAAAE,KAAA,CAANF,MAAM;EAAA,OAAOA,MAAM;AAAA,EAE3C;AACDR,oBAAoB,CAACK,WAAW,GAAG,sBAAsB;AAClD,IAAMM,mBAAmB,GAAAV,OAAA,CAAAU,mBAAA,GAAGT,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gEAMpC,UAAAM,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OAAQA,SAAS,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,CACxD;AACDF,mBAAmB,CAACN,WAAW,GAAG,qBAAqB;AAChD,IAAMS,sBAAsB,GAAAb,OAAA,CAAAa,sBAAA,GAAGZ,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oEAK/C;AACDQ,sBAAsB,CAACT,WAAW,GAAG,wBAAwB;AACtD,IAAMU,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAGb,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qBAEhD;AACDS,uBAAuB,CAACV,WAAW,GAAG,yBAAyB"}
|
package/dist/cjs/utils/colors.js
CHANGED
|
@@ -94,6 +94,18 @@ var colors = exports.colors = {
|
|
|
94
94
|
color: "#CACACA",
|
|
95
95
|
darker: "#757575",
|
|
96
96
|
lighter: "#7D7D7D"
|
|
97
|
+
},
|
|
98
|
+
greenSuccess: {
|
|
99
|
+
name: "Green success",
|
|
100
|
+
color: "#64CD93"
|
|
101
|
+
},
|
|
102
|
+
redAlert: {
|
|
103
|
+
name: "Red alert",
|
|
104
|
+
color: "#ED6161"
|
|
105
|
+
},
|
|
106
|
+
yellowWarning: {
|
|
107
|
+
name: "Yellow warning",
|
|
108
|
+
color: "#FFCC6B"
|
|
97
109
|
}
|
|
98
110
|
};
|
|
99
111
|
//# sourceMappingURL=colors.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","names":["colors","exports","yellow","name","color","darker","lighter","orange","beige","pink","coral","purpleDirty","purple","blueAqua","bluePale","blueSky","turquoise","greenPale","greenOliveDrab","graySilver","gray"],"sources":["../../../src/utils/colors.ts"],"sourcesContent":["export const colors = {\n yellow: {\n name: \"Yellow\",\n color: \"#FDF196\",\n darker: \"#948D5D\",\n lighter: \"#EBD429\",\n },\n orange: {\n name: \"Orange\",\n color: \"#FBBB75\",\n darker: \"#916C43\",\n lighter: \"#E99841\",\n },\n beige: {\n name: \"Beige\",\n color: \"#EAC2AD\",\n darker: \"#877064\",\n lighter: \"#B98A72\",\n },\n pink: {\n name: \"Pink\",\n color: \"#FBD6E7\",\n darker: \"#917C86\",\n lighter: \"#E4A1C0\",\n },\n coral: {\n name: \"Coral\",\n color: \"#FF9C9C\",\n darker: \"#945A5A\",\n lighter: \"#DB4545\",\n },\n purpleDirty: {\n name: \"Purple dirty\",\n color: \"#C49CB6\",\n darker: \"#715A69\",\n lighter: \"#B16E9A\",\n },\n purple: {\n name: \"Purple\",\n color: \"#BEACF9\",\n darker: \"#6E6390\",\n lighter: \"#9B86DF\",\n },\n blueAqua: {\n name: \"Blue aqua\",\n color: \"#BDF7FD\",\n darker: \"#6D8F92\",\n lighter: \"#7BDDE7\",\n },\n bluePale: {\n name: \"Blue pale\",\n color: \"#BEEAFF\",\n darker: \"#6E8794\",\n lighter: \"#92BFD4\",\n },\n blueSky: {\n name: \"Blue sky\",\n color: \"#A0CBFD\",\n darker: \"#5C7592\",\n lighter: \"#568CCB\",\n },\n turquoise: {\n name: \"Turquoise\",\n color: \"#B9E4E0\",\n darker: \"#6B8482\",\n lighter: \"#70BFB8\",\n },\n greenPale: {\n name: \"Green pale\",\n color: \"#C3E799\",\n darker: \"#718658\",\n lighter: \"#80C333\",\n },\n greenOliveDrab: {\n name: \"Green olive drab\",\n color: \"#98B57C\",\n darker: \"#647157\",\n lighter: \"#819F65\",\n },\n graySilver: {\n name: \"Gray silver\",\n color: \"#DDDDDD\",\n darker: \"#808080\",\n lighter: \"#ACACAC\",\n },\n gray: {\n name: \"Gray\",\n color: \"#CACACA\",\n darker: \"#757575\",\n lighter: \"#7D7D7D\",\n },\n};\n"],"mappings":";;;;;;AAAO,IAAMA,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG;EACpBE,MAAM,EAAE;IACNC,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDC,MAAM,EAAE;IACNJ,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDE,KAAK,EAAE;IACLL,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDG,IAAI,EAAE;IACJN,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDI,KAAK,EAAE;IACLP,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDK,WAAW,EAAE;IACXR,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDM,MAAM,EAAE;IACNT,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDO,QAAQ,EAAE;IACRV,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDQ,QAAQ,EAAE;IACRX,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDS,OAAO,EAAE;IACPZ,IAAI,EAAE,UAAU;IAChBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDU,SAAS,EAAE;IACTb,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDW,SAAS,EAAE;IACTd,IAAI,EAAE,YAAY;IAClBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDY,cAAc,EAAE;IACdf,IAAI,EAAE,kBAAkB;IACxBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDa,UAAU,EAAE;IACVhB,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDc,IAAI,EAAE;IACJjB,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"colors.js","names":["colors","exports","yellow","name","color","darker","lighter","orange","beige","pink","coral","purpleDirty","purple","blueAqua","bluePale","blueSky","turquoise","greenPale","greenOliveDrab","graySilver","gray","greenSuccess","redAlert","yellowWarning"],"sources":["../../../src/utils/colors.ts"],"sourcesContent":["export const colors = {\n yellow: {\n name: \"Yellow\",\n color: \"#FDF196\",\n darker: \"#948D5D\",\n lighter: \"#EBD429\",\n },\n orange: {\n name: \"Orange\",\n color: \"#FBBB75\",\n darker: \"#916C43\",\n lighter: \"#E99841\",\n },\n beige: {\n name: \"Beige\",\n color: \"#EAC2AD\",\n darker: \"#877064\",\n lighter: \"#B98A72\",\n },\n pink: {\n name: \"Pink\",\n color: \"#FBD6E7\",\n darker: \"#917C86\",\n lighter: \"#E4A1C0\",\n },\n coral: {\n name: \"Coral\",\n color: \"#FF9C9C\",\n darker: \"#945A5A\",\n lighter: \"#DB4545\",\n },\n purpleDirty: {\n name: \"Purple dirty\",\n color: \"#C49CB6\",\n darker: \"#715A69\",\n lighter: \"#B16E9A\",\n },\n purple: {\n name: \"Purple\",\n color: \"#BEACF9\",\n darker: \"#6E6390\",\n lighter: \"#9B86DF\",\n },\n blueAqua: {\n name: \"Blue aqua\",\n color: \"#BDF7FD\",\n darker: \"#6D8F92\",\n lighter: \"#7BDDE7\",\n },\n bluePale: {\n name: \"Blue pale\",\n color: \"#BEEAFF\",\n darker: \"#6E8794\",\n lighter: \"#92BFD4\",\n },\n blueSky: {\n name: \"Blue sky\",\n color: \"#A0CBFD\",\n darker: \"#5C7592\",\n lighter: \"#568CCB\",\n },\n turquoise: {\n name: \"Turquoise\",\n color: \"#B9E4E0\",\n darker: \"#6B8482\",\n lighter: \"#70BFB8\",\n },\n greenPale: {\n name: \"Green pale\",\n color: \"#C3E799\",\n darker: \"#718658\",\n lighter: \"#80C333\",\n },\n greenOliveDrab: {\n name: \"Green olive drab\",\n color: \"#98B57C\",\n darker: \"#647157\",\n lighter: \"#819F65\",\n },\n graySilver: {\n name: \"Gray silver\",\n color: \"#DDDDDD\",\n darker: \"#808080\",\n lighter: \"#ACACAC\",\n },\n gray: {\n name: \"Gray\",\n color: \"#CACACA\",\n darker: \"#757575\",\n lighter: \"#7D7D7D\",\n },\n greenSuccess: {\n name: \"Green success\",\n color: \"#64CD93\",\n },\n redAlert: {\n name: \"Red alert\",\n color: \"#ED6161\",\n },\n yellowWarning: {\n name: \"Yellow warning\",\n color: \"#FFCC6B\",\n },\n};\n"],"mappings":";;;;;;AAAO,IAAMA,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG;EACpBE,MAAM,EAAE;IACNC,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDC,MAAM,EAAE;IACNJ,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDE,KAAK,EAAE;IACLL,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDG,IAAI,EAAE;IACJN,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDI,KAAK,EAAE;IACLP,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDK,WAAW,EAAE;IACXR,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDM,MAAM,EAAE;IACNT,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDO,QAAQ,EAAE;IACRV,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDQ,QAAQ,EAAE;IACRX,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDS,OAAO,EAAE;IACPZ,IAAI,EAAE,UAAU;IAChBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDU,SAAS,EAAE;IACTb,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDW,SAAS,EAAE;IACTd,IAAI,EAAE,YAAY;IAClBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDY,cAAc,EAAE;IACdf,IAAI,EAAE,kBAAkB;IACxBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDa,UAAU,EAAE;IACVhB,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDc,IAAI,EAAE;IACJjB,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDe,YAAY,EAAE;IACZlB,IAAI,EAAE,eAAe;IACrBC,KAAK,EAAE;EACT,CAAC;EACDkB,QAAQ,EAAE;IACRnB,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE;EACT,CAAC;EACDmB,aAAa,EAAE;IACbpB,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE;EACT;AACF,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
2
|
import { ElementWithRef } from "../Select";
|
|
3
|
-
type
|
|
4
|
-
|
|
3
|
+
export type InfoBoxType = "success" | "warning" | "note" | "default" | "neutral";
|
|
4
|
+
export interface InfoBoxProps {
|
|
5
|
+
type: InfoBoxType;
|
|
5
6
|
children?: ReactNode;
|
|
6
7
|
showIcon?: boolean;
|
|
7
8
|
title?: ReactNode | string;
|
|
8
9
|
icon?: ElementWithRef<SVGSVGElement>;
|
|
9
10
|
action?: ReactNode;
|
|
10
|
-
}
|
|
11
|
+
}
|
|
11
12
|
export declare const InfoBox: React.FC<InfoBoxProps>;
|
|
12
|
-
export {};
|
|
13
13
|
//# sourceMappingURL=InfoBox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBox.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoBox/InfoBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InfoBox.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoBox/InfoBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUzC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE3C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,CAAC;AACd,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4D1C,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { StyledInfoBoxContainer, StyledInfoBoxHeader, StyledInfoBoxWrapper,
|
|
3
|
+
import { StyledInfoBoxContainer, StyledInfoBoxHeader, StyledInfoBoxWrapper, SyledInfoBoxInnerHeader } from "./Styles";
|
|
4
|
+
import { colors } from "../../utils";
|
|
4
5
|
import { CheckboxBlankTogglerIcon, CloseCircleIcon, InfoIcon } from "../Icons";
|
|
5
6
|
import { Body2 } from "../Typography";
|
|
6
7
|
export const InfoBox = _ref => {
|
|
@@ -14,19 +15,18 @@ export const InfoBox = _ref => {
|
|
|
14
15
|
...rest
|
|
15
16
|
} = _ref;
|
|
16
17
|
const statusColors = {
|
|
17
|
-
success:
|
|
18
|
-
warning:
|
|
19
|
-
note:
|
|
20
|
-
default:
|
|
21
|
-
neutral:
|
|
18
|
+
success: colors.greenSuccess.color,
|
|
19
|
+
warning: colors.redAlert.color,
|
|
20
|
+
note: colors.yellowWarning.color,
|
|
21
|
+
default: colors.blueSky.color,
|
|
22
|
+
neutral: colors.gray.color
|
|
22
23
|
};
|
|
23
|
-
|
|
24
24
|
// https://davidwalsh.name/hex-opacity
|
|
25
25
|
const opacity = "1A";
|
|
26
26
|
return /*#__PURE__*/React.createElement(StyledInfoBoxWrapper, _extends({
|
|
27
|
-
color: "" + statusColors[type],
|
|
28
|
-
opacity: opacity
|
|
29
|
-
}, rest), /*#__PURE__*/React.createElement(StyledInfoBoxContainer, null,
|
|
27
|
+
$color: "" + statusColors[type],
|
|
28
|
+
$opacity: opacity
|
|
29
|
+
}, rest), /*#__PURE__*/React.createElement(StyledInfoBoxContainer, null, showIcon && /*#__PURE__*/React.createElement("span", null, icon && /*#__PURE__*/React.isValidElement(icon) ? ( /*#__PURE__*/React.cloneElement(icon, {
|
|
30
30
|
fill: statusColors[type],
|
|
31
31
|
width: 18
|
|
32
32
|
})) : type === "success" ? /*#__PURE__*/React.createElement(CheckboxBlankTogglerIcon, {
|
|
@@ -39,11 +39,13 @@ export const InfoBox = _ref => {
|
|
|
39
39
|
fill: statusColors[type],
|
|
40
40
|
width: 18
|
|
41
41
|
}) : /*#__PURE__*/React.createElement(InfoIcon, {
|
|
42
|
-
fill: "
|
|
42
|
+
fill: statusColors["neutral"],
|
|
43
43
|
width: 18
|
|
44
|
-
})), /*#__PURE__*/React.createElement(
|
|
44
|
+
})), /*#__PURE__*/React.createElement(StyledInfoBoxHeader, {
|
|
45
|
+
$hasTitle: title ? true : false
|
|
46
|
+
}, /*#__PURE__*/React.createElement(SyledInfoBoxInnerHeader, null, typeof title === "string" && title ? /*#__PURE__*/React.createElement(Body2, {
|
|
45
47
|
weight: "bold",
|
|
46
48
|
lineHeight: "loose"
|
|
47
|
-
}, title) : title,
|
|
49
|
+
}, title) : title, action), children)));
|
|
48
50
|
};
|
|
49
51
|
//# sourceMappingURL=InfoBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBox.js","names":["React","StyledInfoBoxContainer","StyledInfoBoxHeader","StyledInfoBoxWrapper","
|
|
1
|
+
{"version":3,"file":"InfoBox.js","names":["React","StyledInfoBoxContainer","StyledInfoBoxHeader","StyledInfoBoxWrapper","SyledInfoBoxInnerHeader","colors","CheckboxBlankTogglerIcon","CloseCircleIcon","InfoIcon","Body2","InfoBox","_ref","type","children","showIcon","icon","title","action","rest","statusColors","success","greenSuccess","color","warning","redAlert","note","yellowWarning","default","blueSky","neutral","gray","opacity","createElement","_extends","$color","$opacity","isValidElement","cloneElement","fill","width","$hasTitle","weight","lineHeight"],"sources":["../../../../src/components/InfoBox/InfoBox.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\n\nimport {\n StyledInfoBoxContainer,\n StyledInfoBoxHeader,\n StyledInfoBoxWrapper,\n SyledInfoBoxInnerHeader,\n} from \"./Styles\";\nimport { colors } from \"../../utils\";\nimport { CheckboxBlankTogglerIcon, CloseCircleIcon, InfoIcon } from \"../Icons\";\nimport { ElementWithRef } from \"../Select\";\nimport { Body2 } from \"../Typography\";\nexport type InfoBoxType =\n | \"success\"\n | \"warning\"\n | \"note\"\n | \"default\"\n | \"neutral\";\nexport interface InfoBoxProps {\n type: InfoBoxType;\n children?: ReactNode;\n showIcon?: boolean;\n title?: ReactNode | string;\n icon?: ElementWithRef<SVGSVGElement>;\n action?: ReactNode;\n}\nexport const InfoBox: React.FC<InfoBoxProps> = ({\n type = \"default\",\n children,\n showIcon,\n icon,\n title = null,\n action = null,\n ...rest\n}) => {\n const statusColors: Record<InfoBoxType, string> = {\n success: colors.greenSuccess.color,\n warning: colors.redAlert.color,\n note: colors.yellowWarning.color,\n default: colors.blueSky.color,\n neutral: colors.gray.color,\n };\n // https://davidwalsh.name/hex-opacity\n const opacity = \"1A\";\n\n return (\n <StyledInfoBoxWrapper\n $color={`${statusColors[type]}`}\n $opacity={opacity}\n {...rest}\n >\n <StyledInfoBoxContainer>\n {showIcon && (\n <span>\n {icon && React.isValidElement(icon) ? (\n React.cloneElement(icon, {\n fill: statusColors[type],\n width: 18,\n })\n ) : type === \"success\" ? (\n <CheckboxBlankTogglerIcon fill={statusColors[type]} width={18} />\n ) : type === \"warning\" ? (\n <CloseCircleIcon fill={statusColors[type]} width={18} />\n ) : type === \"note\" || type === \"default\" ? (\n <InfoIcon fill={statusColors[type]} width={18} />\n ) : (\n <InfoIcon fill={statusColors[\"neutral\"]} width={18} />\n )}\n </span>\n )}\n <StyledInfoBoxHeader $hasTitle={title ? true : false}>\n <SyledInfoBoxInnerHeader>\n {typeof title === \"string\" && title ? (\n <Body2 weight=\"bold\" lineHeight=\"loose\">\n {title}\n </Body2>\n ) : (\n title\n )}\n {action}\n </SyledInfoBoxInnerHeader>\n {children}\n </StyledInfoBoxHeader>\n </StyledInfoBoxContainer>\n </StyledInfoBoxWrapper>\n );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,SACEC,sBAAsB,EACtBC,mBAAmB,EACnBC,oBAAoB,EACpBC,uBAAuB,QAClB,UAAU;AACjB,SAASC,MAAM,QAAQ,aAAa;AACpC,SAASC,wBAAwB,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,UAAU;AAE9E,SAASC,KAAK,QAAQ,eAAe;AAerC,OAAO,MAAMC,OAA+B,GAAGC,IAAA,IAQzC;EAAA,IAR0C;IAC9CC,IAAI,GAAG,SAAS;IAChBC,QAAQ;IACRC,QAAQ;IACRC,IAAI;IACJC,KAAK,GAAG,IAAI;IACZC,MAAM,GAAG,IAAI;IACb,GAAGC;EACL,CAAC,GAAAP,IAAA;EACC,MAAMQ,YAAyC,GAAG;IAChDC,OAAO,EAAEf,MAAM,CAACgB,YAAY,CAACC,KAAK;IAClCC,OAAO,EAAElB,MAAM,CAACmB,QAAQ,CAACF,KAAK;IAC9BG,IAAI,EAAEpB,MAAM,CAACqB,aAAa,CAACJ,KAAK;IAChCK,OAAO,EAAEtB,MAAM,CAACuB,OAAO,CAACN,KAAK;IAC7BO,OAAO,EAAExB,MAAM,CAACyB,IAAI,CAACR;EACvB,CAAC;EACD;EACA,MAAMS,OAAO,GAAG,IAAI;EAEpB,oBACE/B,KAAA,CAAAgC,aAAA,CAAC7B,oBAAoB,EAAA8B,QAAA;IACnBC,MAAM,OAAKf,YAAY,CAACP,IAAI,CAAI;IAChCuB,QAAQ,EAAEJ;EAAQ,GACdb,IAAI,gBAERlB,KAAA,CAAAgC,aAAA,CAAC/B,sBAAsB,QACpBa,QAAQ,iBACPd,KAAA,CAAAgC,aAAA,eACGjB,IAAI,iBAAIf,KAAK,CAACoC,cAAc,CAACrB,IAAI,CAAC,kBACjCf,KAAK,CAACqC,YAAY,CAACtB,IAAI,EAAE;IACvBuB,IAAI,EAAEnB,YAAY,CAACP,IAAI,CAAC;IACxB2B,KAAK,EAAE;EACT,CAAC,CAAC,IACA3B,IAAI,KAAK,SAAS,gBACpBZ,KAAA,CAAAgC,aAAA,CAAC1B,wBAAwB;IAACgC,IAAI,EAAEnB,YAAY,CAACP,IAAI,CAAE;IAAC2B,KAAK,EAAE;EAAG,CAAE,CAAC,GAC/D3B,IAAI,KAAK,SAAS,gBACpBZ,KAAA,CAAAgC,aAAA,CAACzB,eAAe;IAAC+B,IAAI,EAAEnB,YAAY,CAACP,IAAI,CAAE;IAAC2B,KAAK,EAAE;EAAG,CAAE,CAAC,GACtD3B,IAAI,KAAK,MAAM,IAAIA,IAAI,KAAK,SAAS,gBACvCZ,KAAA,CAAAgC,aAAA,CAACxB,QAAQ;IAAC8B,IAAI,EAAEnB,YAAY,CAACP,IAAI,CAAE;IAAC2B,KAAK,EAAE;EAAG,CAAE,CAAC,gBAEjDvC,KAAA,CAAAgC,aAAA,CAACxB,QAAQ;IAAC8B,IAAI,EAAEnB,YAAY,CAAC,SAAS,CAAE;IAACoB,KAAK,EAAE;EAAG,CAAE,CAEnD,CACP,eACDvC,KAAA,CAAAgC,aAAA,CAAC9B,mBAAmB;IAACsC,SAAS,EAAExB,KAAK,GAAG,IAAI,GAAG;EAAM,gBACnDhB,KAAA,CAAAgC,aAAA,CAAC5B,uBAAuB,QACrB,OAAOY,KAAK,KAAK,QAAQ,IAAIA,KAAK,gBACjChB,KAAA,CAAAgC,aAAA,CAACvB,KAAK;IAACgC,MAAM,EAAC,MAAM;IAACC,UAAU,EAAC;EAAO,GACpC1B,KACI,CAAC,GAERA,KACD,EACAC,MACsB,CAAC,EACzBJ,QACkB,CACC,CACJ,CAAC;AAE3B,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
export declare const StyledInfoBoxWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
-
color: string;
|
|
3
|
-
opacity: string;
|
|
2
|
+
$color: string;
|
|
3
|
+
$opacity: string;
|
|
4
|
+
}, never>;
|
|
5
|
+
export declare const StyledInfoBoxHeader: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
$hasTitle: boolean;
|
|
4
7
|
}, never>;
|
|
5
|
-
export declare const StyledInfoBoxHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
8
|
export declare const StyledInfoBoxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
-
export declare const
|
|
9
|
+
export declare const SyledInfoBoxInnerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
10
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoBox/Styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoBox/Styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,oBAAoB;YACvB,MAAM;cACJ,MAAM;SAUjB,CAAC;AAEF,eAAO,MAAM,mBAAmB;eACnB,OAAO;SAMnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,oEAKlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}
|
|
@@ -4,26 +4,35 @@ export const StyledInfoBoxWrapper = styled.div.withConfig({
|
|
|
4
4
|
componentId: "sc-amgpyr-0"
|
|
5
5
|
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;background-color:", ";border:1px solid ", ";position:relative;"], _ref => {
|
|
6
6
|
let {
|
|
7
|
-
color,
|
|
8
|
-
opacity
|
|
7
|
+
$color,
|
|
8
|
+
$opacity
|
|
9
9
|
} = _ref;
|
|
10
|
-
return color + opacity;
|
|
10
|
+
return $color + $opacity;
|
|
11
11
|
}, _ref2 => {
|
|
12
12
|
let {
|
|
13
|
-
color
|
|
13
|
+
$color
|
|
14
14
|
} = _ref2;
|
|
15
|
-
return color;
|
|
15
|
+
return $color;
|
|
16
16
|
});
|
|
17
|
+
StyledInfoBoxWrapper.displayName = "StyledInfoBoxWrapper";
|
|
17
18
|
export const StyledInfoBoxHeader = styled.div.withConfig({
|
|
18
19
|
displayName: "Styles__StyledInfoBoxHeader",
|
|
19
20
|
componentId: "sc-amgpyr-1"
|
|
20
|
-
})(["display:flex;
|
|
21
|
+
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], _ref3 => {
|
|
22
|
+
let {
|
|
23
|
+
$hasTitle
|
|
24
|
+
} = _ref3;
|
|
25
|
+
return $hasTitle ? "12px" : "none";
|
|
26
|
+
});
|
|
27
|
+
StyledInfoBoxHeader.displayName = "StyledInfoBoxHeader";
|
|
21
28
|
export const StyledInfoBoxContainer = styled.div.withConfig({
|
|
22
29
|
displayName: "Styles__StyledInfoBoxContainer",
|
|
23
30
|
componentId: "sc-amgpyr-2"
|
|
24
|
-
})(["display:flex;justify-items:space-between;width:100%;"]);
|
|
25
|
-
|
|
26
|
-
|
|
31
|
+
})(["display:flex;justify-items:space-between;width:100%;gap:8px;"]);
|
|
32
|
+
StyledInfoBoxContainer.displayName = "StyledInfoBoxContainer";
|
|
33
|
+
export const SyledInfoBoxInnerHeader = styled.div.withConfig({
|
|
34
|
+
displayName: "Styles__SyledInfoBoxInnerHeader",
|
|
27
35
|
componentId: "sc-amgpyr-3"
|
|
28
|
-
})(["display:flex;
|
|
36
|
+
})(["display:flex;"]);
|
|
37
|
+
SyledInfoBoxInnerHeader.displayName = "SyledInfoBoxInnerHeader";
|
|
29
38
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","StyledInfoBoxWrapper","div","withConfig","displayName","componentId","_ref","color","opacity","_ref2","StyledInfoBoxHeader","StyledInfoBoxContainer","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","StyledInfoBoxWrapper","div","withConfig","displayName","componentId","_ref","$color","$opacity","_ref2","StyledInfoBoxHeader","_ref3","$hasTitle","StyledInfoBoxContainer","SyledInfoBoxInnerHeader"],"sources":["../../../../src/components/InfoBox/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nexport const StyledInfoBoxWrapper = styled.div<{\n $color: string;\n $opacity: string;\n}>`\n gap: 4px;\n width: 100%;\n border-radius: 8px;\n padding-inline: 16px;\n padding-block: 12px;\n background-color: ${({ $color, $opacity }) => $color + $opacity};\n border: 1px solid ${({ $color }) => $color};\n position: relative;\n`;\nStyledInfoBoxWrapper.displayName = \"StyledInfoBoxWrapper\";\nexport const StyledInfoBoxHeader = styled.div<{\n $hasTitle: boolean;\n}>`\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: ${({ $hasTitle }) => ($hasTitle ? \"12px\" : \"none\")};\n`;\nStyledInfoBoxHeader.displayName = \"StyledInfoBoxHeader\";\nexport const StyledInfoBoxContainer = styled.div`\n display: flex;\n justify-items: space-between;\n width: 100%;\n gap: 8px;\n`;\nStyledInfoBoxContainer.displayName = \"StyledInfoBoxContainer\";\nexport const SyledInfoBoxInnerHeader = styled.div`\n display: flex;\n`;\nSyledInfoBoxInnerHeader.displayName = \"SyledInfoBoxInnerHeader\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,OAAO,MAAMC,oBAAoB,GAAGD,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mJASxBC,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAAF,IAAA;EAAA,OAAKC,MAAM,GAAGC,QAAQ;AAAA,GAC3CC,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA,EAE3C;AACDN,oBAAoB,CAACG,WAAW,GAAG,sBAAsB;AACzD,OAAO,MAAMM,mBAAmB,GAAGV,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gEAMpCM,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,CACxD;AACDF,mBAAmB,CAACN,WAAW,GAAG,qBAAqB;AACvD,OAAO,MAAMS,sBAAsB,GAAGb,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oEAK/C;AACDQ,sBAAsB,CAACT,WAAW,GAAG,wBAAwB;AAC7D,OAAO,MAAMU,uBAAuB,GAAGd,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qBAEhD;AACDS,uBAAuB,CAACV,WAAW,GAAG,yBAAyB"}
|
|
@@ -89,5 +89,17 @@ export declare const colors: {
|
|
|
89
89
|
darker: string;
|
|
90
90
|
lighter: string;
|
|
91
91
|
};
|
|
92
|
+
greenSuccess: {
|
|
93
|
+
name: string;
|
|
94
|
+
color: string;
|
|
95
|
+
};
|
|
96
|
+
redAlert: {
|
|
97
|
+
name: string;
|
|
98
|
+
color: string;
|
|
99
|
+
};
|
|
100
|
+
yellowWarning: {
|
|
101
|
+
name: string;
|
|
102
|
+
color: string;
|
|
103
|
+
};
|
|
92
104
|
};
|
|
93
105
|
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGlB,CAAC"}
|
package/dist/esm/utils/colors.js
CHANGED
|
@@ -88,6 +88,18 @@ export const colors = {
|
|
|
88
88
|
color: "#CACACA",
|
|
89
89
|
darker: "#757575",
|
|
90
90
|
lighter: "#7D7D7D"
|
|
91
|
+
},
|
|
92
|
+
greenSuccess: {
|
|
93
|
+
name: "Green success",
|
|
94
|
+
color: "#64CD93"
|
|
95
|
+
},
|
|
96
|
+
redAlert: {
|
|
97
|
+
name: "Red alert",
|
|
98
|
+
color: "#ED6161"
|
|
99
|
+
},
|
|
100
|
+
yellowWarning: {
|
|
101
|
+
name: "Yellow warning",
|
|
102
|
+
color: "#FFCC6B"
|
|
91
103
|
}
|
|
92
104
|
};
|
|
93
105
|
//# sourceMappingURL=colors.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","names":["colors","yellow","name","color","darker","lighter","orange","beige","pink","coral","purpleDirty","purple","blueAqua","bluePale","blueSky","turquoise","greenPale","greenOliveDrab","graySilver","gray"],"sources":["../../../src/utils/colors.ts"],"sourcesContent":["export const colors = {\n yellow: {\n name: \"Yellow\",\n color: \"#FDF196\",\n darker: \"#948D5D\",\n lighter: \"#EBD429\",\n },\n orange: {\n name: \"Orange\",\n color: \"#FBBB75\",\n darker: \"#916C43\",\n lighter: \"#E99841\",\n },\n beige: {\n name: \"Beige\",\n color: \"#EAC2AD\",\n darker: \"#877064\",\n lighter: \"#B98A72\",\n },\n pink: {\n name: \"Pink\",\n color: \"#FBD6E7\",\n darker: \"#917C86\",\n lighter: \"#E4A1C0\",\n },\n coral: {\n name: \"Coral\",\n color: \"#FF9C9C\",\n darker: \"#945A5A\",\n lighter: \"#DB4545\",\n },\n purpleDirty: {\n name: \"Purple dirty\",\n color: \"#C49CB6\",\n darker: \"#715A69\",\n lighter: \"#B16E9A\",\n },\n purple: {\n name: \"Purple\",\n color: \"#BEACF9\",\n darker: \"#6E6390\",\n lighter: \"#9B86DF\",\n },\n blueAqua: {\n name: \"Blue aqua\",\n color: \"#BDF7FD\",\n darker: \"#6D8F92\",\n lighter: \"#7BDDE7\",\n },\n bluePale: {\n name: \"Blue pale\",\n color: \"#BEEAFF\",\n darker: \"#6E8794\",\n lighter: \"#92BFD4\",\n },\n blueSky: {\n name: \"Blue sky\",\n color: \"#A0CBFD\",\n darker: \"#5C7592\",\n lighter: \"#568CCB\",\n },\n turquoise: {\n name: \"Turquoise\",\n color: \"#B9E4E0\",\n darker: \"#6B8482\",\n lighter: \"#70BFB8\",\n },\n greenPale: {\n name: \"Green pale\",\n color: \"#C3E799\",\n darker: \"#718658\",\n lighter: \"#80C333\",\n },\n greenOliveDrab: {\n name: \"Green olive drab\",\n color: \"#98B57C\",\n darker: \"#647157\",\n lighter: \"#819F65\",\n },\n graySilver: {\n name: \"Gray silver\",\n color: \"#DDDDDD\",\n darker: \"#808080\",\n lighter: \"#ACACAC\",\n },\n gray: {\n name: \"Gray\",\n color: \"#CACACA\",\n darker: \"#757575\",\n lighter: \"#7D7D7D\",\n },\n};\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,MAAM,EAAE;IACNC,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDC,MAAM,EAAE;IACNJ,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDE,KAAK,EAAE;IACLL,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDG,IAAI,EAAE;IACJN,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDI,KAAK,EAAE;IACLP,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDK,WAAW,EAAE;IACXR,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDM,MAAM,EAAE;IACNT,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDO,QAAQ,EAAE;IACRV,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDQ,QAAQ,EAAE;IACRX,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDS,OAAO,EAAE;IACPZ,IAAI,EAAE,UAAU;IAChBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDU,SAAS,EAAE;IACTb,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDW,SAAS,EAAE;IACTd,IAAI,EAAE,YAAY;IAClBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDY,cAAc,EAAE;IACdf,IAAI,EAAE,kBAAkB;IACxBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDa,UAAU,EAAE;IACVhB,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDc,IAAI,EAAE;IACJjB,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"colors.js","names":["colors","yellow","name","color","darker","lighter","orange","beige","pink","coral","purpleDirty","purple","blueAqua","bluePale","blueSky","turquoise","greenPale","greenOliveDrab","graySilver","gray","greenSuccess","redAlert","yellowWarning"],"sources":["../../../src/utils/colors.ts"],"sourcesContent":["export const colors = {\n yellow: {\n name: \"Yellow\",\n color: \"#FDF196\",\n darker: \"#948D5D\",\n lighter: \"#EBD429\",\n },\n orange: {\n name: \"Orange\",\n color: \"#FBBB75\",\n darker: \"#916C43\",\n lighter: \"#E99841\",\n },\n beige: {\n name: \"Beige\",\n color: \"#EAC2AD\",\n darker: \"#877064\",\n lighter: \"#B98A72\",\n },\n pink: {\n name: \"Pink\",\n color: \"#FBD6E7\",\n darker: \"#917C86\",\n lighter: \"#E4A1C0\",\n },\n coral: {\n name: \"Coral\",\n color: \"#FF9C9C\",\n darker: \"#945A5A\",\n lighter: \"#DB4545\",\n },\n purpleDirty: {\n name: \"Purple dirty\",\n color: \"#C49CB6\",\n darker: \"#715A69\",\n lighter: \"#B16E9A\",\n },\n purple: {\n name: \"Purple\",\n color: \"#BEACF9\",\n darker: \"#6E6390\",\n lighter: \"#9B86DF\",\n },\n blueAqua: {\n name: \"Blue aqua\",\n color: \"#BDF7FD\",\n darker: \"#6D8F92\",\n lighter: \"#7BDDE7\",\n },\n bluePale: {\n name: \"Blue pale\",\n color: \"#BEEAFF\",\n darker: \"#6E8794\",\n lighter: \"#92BFD4\",\n },\n blueSky: {\n name: \"Blue sky\",\n color: \"#A0CBFD\",\n darker: \"#5C7592\",\n lighter: \"#568CCB\",\n },\n turquoise: {\n name: \"Turquoise\",\n color: \"#B9E4E0\",\n darker: \"#6B8482\",\n lighter: \"#70BFB8\",\n },\n greenPale: {\n name: \"Green pale\",\n color: \"#C3E799\",\n darker: \"#718658\",\n lighter: \"#80C333\",\n },\n greenOliveDrab: {\n name: \"Green olive drab\",\n color: \"#98B57C\",\n darker: \"#647157\",\n lighter: \"#819F65\",\n },\n graySilver: {\n name: \"Gray silver\",\n color: \"#DDDDDD\",\n darker: \"#808080\",\n lighter: \"#ACACAC\",\n },\n gray: {\n name: \"Gray\",\n color: \"#CACACA\",\n darker: \"#757575\",\n lighter: \"#7D7D7D\",\n },\n greenSuccess: {\n name: \"Green success\",\n color: \"#64CD93\",\n },\n redAlert: {\n name: \"Red alert\",\n color: \"#ED6161\",\n },\n yellowWarning: {\n name: \"Yellow warning\",\n color: \"#FFCC6B\",\n },\n};\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,MAAM,EAAE;IACNC,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDC,MAAM,EAAE;IACNJ,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDE,KAAK,EAAE;IACLL,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDG,IAAI,EAAE;IACJN,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDI,KAAK,EAAE;IACLP,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDK,WAAW,EAAE;IACXR,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDM,MAAM,EAAE;IACNT,IAAI,EAAE,QAAQ;IACdC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDO,QAAQ,EAAE;IACRV,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDQ,QAAQ,EAAE;IACRX,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDS,OAAO,EAAE;IACPZ,IAAI,EAAE,UAAU;IAChBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDU,SAAS,EAAE;IACTb,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDW,SAAS,EAAE;IACTd,IAAI,EAAE,YAAY;IAClBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDY,cAAc,EAAE;IACdf,IAAI,EAAE,kBAAkB;IACxBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDa,UAAU,EAAE;IACVhB,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDc,IAAI,EAAE;IACJjB,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;EACX,CAAC;EACDe,YAAY,EAAE;IACZlB,IAAI,EAAE,eAAe;IACrBC,KAAK,EAAE;EACT,CAAC;EACDkB,QAAQ,EAAE;IACRnB,IAAI,EAAE,WAAW;IACjBC,KAAK,EAAE;EACT,CAAC;EACDmB,aAAa,EAAE;IACbpB,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE;EACT;AACF,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -569,6 +569,18 @@
|
|
|
569
569
|
color: "#CACACA",
|
|
570
570
|
darker: "#757575",
|
|
571
571
|
lighter: "#7D7D7D"
|
|
572
|
+
},
|
|
573
|
+
greenSuccess: {
|
|
574
|
+
name: "Green success",
|
|
575
|
+
color: "#64CD93"
|
|
576
|
+
},
|
|
577
|
+
redAlert: {
|
|
578
|
+
name: "Red alert",
|
|
579
|
+
color: "#ED6161"
|
|
580
|
+
},
|
|
581
|
+
yellowWarning: {
|
|
582
|
+
name: "Yellow warning",
|
|
583
|
+
color: "#FFCC6B"
|
|
572
584
|
}
|
|
573
585
|
};
|
|
574
586
|
|