@activecollab/components 2.0.224 → 2.0.226
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 +4 -1
- package/dist/cjs/components/InfoBox/InfoBox.js.map +1 -1
- package/dist/esm/components/InfoBox/InfoBox.d.ts.map +1 -1
- package/dist/esm/components/InfoBox/InfoBox.js +4 -1
- package/dist/esm/components/InfoBox/InfoBox.js.map +1 -1
- package/dist/index.js +4 -1
- 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
|
@@ -40,7 +40,7 @@ var InfoBox = exports.InfoBox = function InfoBox(_ref) {
|
|
|
40
40
|
$color: "".concat(statusColors[type]),
|
|
41
41
|
$opacity: opacity,
|
|
42
42
|
$type: type
|
|
43
|
-
}, rest), /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoBoxContainer, null, showIcon &&
|
|
43
|
+
}, 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, {
|
|
44
44
|
fill: statusColors[type],
|
|
45
45
|
width: 18
|
|
46
46
|
})) : type === "success" ? /*#__PURE__*/_react.default.createElement(_Icons.CheckboxBlankTogglerIcon, {
|
|
@@ -49,6 +49,9 @@ var InfoBox = exports.InfoBox = function InfoBox(_ref) {
|
|
|
49
49
|
}) : type === "warning" ? /*#__PURE__*/_react.default.createElement(_Icons.CloseCircleIcon, {
|
|
50
50
|
fill: statusColors[type],
|
|
51
51
|
width: 18
|
|
52
|
+
}) : type === "ai" ? /*#__PURE__*/_react.default.createElement(_Icons.InfoIcon, {
|
|
53
|
+
gradient: statusColors[type],
|
|
54
|
+
width: 18
|
|
52
55
|
}) : type === "note" || type === "default" ? /*#__PURE__*/_react.default.createElement(_Icons.InfoIcon, {
|
|
53
56
|
fill: statusColors[type],
|
|
54
57
|
width: 18
|
|
@@ -1 +1 @@
|
|
|
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","ai","aiGradient","opacity","createElement","StyledInfoBoxWrapper","$color","concat","$opacity","$type","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\";\n\nexport type InfoBoxType =\n | \"success\"\n | \"warning\"\n | \"note\"\n | \"default\"\n | \"neutral\"\n | \"ai\";\n\nexport interface InfoBoxProps {\n type: InfoBoxType;\n children?: ReactNode;\n showIcon?: boolean;\n title?: ReactNode | string;\n icon?: ElementWithRef<SVGSVGElement>;\n action?: ReactNode;\n}\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 ai: colors.aiGradient.color,\n };\n\n // https://davidwalsh.name/hex-opacity\n const opacity = \"1A\";\n\n return (\n <StyledInfoBoxWrapper\n $color={`${statusColors[type]}`}\n $opacity={opacity}\n $type={type}\n {...rest}\n >\n <StyledInfoBoxContainer>\n {showIcon &&
|
|
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","ai","aiGradient","opacity","createElement","StyledInfoBoxWrapper","$color","concat","$opacity","$type","StyledInfoBoxContainer","React","isValidElement","cloneElement","fill","width","CheckboxBlankTogglerIcon","CloseCircleIcon","InfoIcon","gradient","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\";\n\nexport type InfoBoxType =\n | \"success\"\n | \"warning\"\n | \"note\"\n | \"default\"\n | \"neutral\"\n | \"ai\";\n\nexport interface InfoBoxProps {\n type: InfoBoxType;\n children?: ReactNode;\n showIcon?: boolean;\n title?: ReactNode | string;\n icon?: ElementWithRef<SVGSVGElement>;\n action?: ReactNode;\n}\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 ai: colors.aiGradient.color,\n };\n\n // https://davidwalsh.name/hex-opacity\n const opacity = \"1A\";\n\n return (\n <StyledInfoBoxWrapper\n $color={`${statusColors[type]}`}\n $opacity={opacity}\n $type={type}\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 === \"ai\" ? (\n <InfoIcon gradient={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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"}
|
|
@@ -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;AAUzC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAG3C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,IAAI,CAAC;AAET,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;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,
|
|
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;AAG3C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,IAAI,CAAC;AAET,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;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiE1C,CAAC"}
|
|
@@ -29,7 +29,7 @@ export const InfoBox = _ref => {
|
|
|
29
29
|
$color: "" + statusColors[type],
|
|
30
30
|
$opacity: opacity,
|
|
31
31
|
$type: type
|
|
32
|
-
}, rest), /*#__PURE__*/React.createElement(StyledInfoBoxContainer, null, showIcon &&
|
|
32
|
+
}, rest), /*#__PURE__*/React.createElement(StyledInfoBoxContainer, null, showIcon && /*#__PURE__*/React.createElement("span", null, icon && /*#__PURE__*/React.isValidElement(icon) ? ( /*#__PURE__*/React.cloneElement(icon, {
|
|
33
33
|
fill: statusColors[type],
|
|
34
34
|
width: 18
|
|
35
35
|
})) : type === "success" ? /*#__PURE__*/React.createElement(CheckboxBlankTogglerIcon, {
|
|
@@ -38,6 +38,9 @@ export const InfoBox = _ref => {
|
|
|
38
38
|
}) : type === "warning" ? /*#__PURE__*/React.createElement(CloseCircleIcon, {
|
|
39
39
|
fill: statusColors[type],
|
|
40
40
|
width: 18
|
|
41
|
+
}) : type === "ai" ? /*#__PURE__*/React.createElement(InfoIcon, {
|
|
42
|
+
gradient: statusColors[type],
|
|
43
|
+
width: 18
|
|
41
44
|
}) : type === "note" || type === "default" ? /*#__PURE__*/React.createElement(InfoIcon, {
|
|
42
45
|
fill: statusColors[type],
|
|
43
46
|
width: 18
|
|
@@ -1 +1 @@
|
|
|
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","ai","aiGradient","opacity","createElement","_extends","$color","$opacity","$type","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\";\n\nexport type InfoBoxType =\n | \"success\"\n | \"warning\"\n | \"note\"\n | \"default\"\n | \"neutral\"\n | \"ai\";\n\nexport interface InfoBoxProps {\n type: InfoBoxType;\n children?: ReactNode;\n showIcon?: boolean;\n title?: ReactNode | string;\n icon?: ElementWithRef<SVGSVGElement>;\n action?: ReactNode;\n}\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 ai: colors.aiGradient.color,\n };\n\n // https://davidwalsh.name/hex-opacity\n const opacity = \"1A\";\n\n return (\n <StyledInfoBoxWrapper\n $color={`${statusColors[type]}`}\n $opacity={opacity}\n $type={type}\n {...rest}\n >\n <StyledInfoBoxContainer>\n {showIcon &&
|
|
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","ai","aiGradient","opacity","createElement","_extends","$color","$opacity","$type","isValidElement","cloneElement","fill","width","gradient","$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\";\n\nexport type InfoBoxType =\n | \"success\"\n | \"warning\"\n | \"note\"\n | \"default\"\n | \"neutral\"\n | \"ai\";\n\nexport interface InfoBoxProps {\n type: InfoBoxType;\n children?: ReactNode;\n showIcon?: boolean;\n title?: ReactNode | string;\n icon?: ElementWithRef<SVGSVGElement>;\n action?: ReactNode;\n}\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 ai: colors.aiGradient.color,\n };\n\n // https://davidwalsh.name/hex-opacity\n const opacity = \"1A\";\n\n return (\n <StyledInfoBoxWrapper\n $color={`${statusColors[type]}`}\n $opacity={opacity}\n $type={type}\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 === \"ai\" ? (\n <InfoIcon gradient={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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"}
|
package/dist/index.js
CHANGED
|
@@ -23798,7 +23798,7 @@
|
|
|
23798
23798
|
$color: "".concat(statusColors[type]),
|
|
23799
23799
|
$opacity: opacity,
|
|
23800
23800
|
$type: type
|
|
23801
|
-
}, rest), /*#__PURE__*/React__default["default"].createElement(StyledInfoBoxContainer, null, showIcon &&
|
|
23801
|
+
}, rest), /*#__PURE__*/React__default["default"].createElement(StyledInfoBoxContainer, null, showIcon && /*#__PURE__*/React__default["default"].createElement("span", null, icon && /*#__PURE__*/React__default["default"].isValidElement(icon) ? ( /*#__PURE__*/React__default["default"].cloneElement(icon, {
|
|
23802
23802
|
fill: statusColors[type],
|
|
23803
23803
|
width: 18
|
|
23804
23804
|
})) : type === "success" ? /*#__PURE__*/React__default["default"].createElement(CheckboxBlankTogglerIcon$1, {
|
|
@@ -23807,6 +23807,9 @@
|
|
|
23807
23807
|
}) : type === "warning" ? /*#__PURE__*/React__default["default"].createElement(CloseCircleIcon$1, {
|
|
23808
23808
|
fill: statusColors[type],
|
|
23809
23809
|
width: 18
|
|
23810
|
+
}) : type === "ai" ? /*#__PURE__*/React__default["default"].createElement(InfoIcon$1, {
|
|
23811
|
+
gradient: statusColors[type],
|
|
23812
|
+
width: 18
|
|
23810
23813
|
}) : type === "note" || type === "default" ? /*#__PURE__*/React__default["default"].createElement(InfoIcon$1, {
|
|
23811
23814
|
fill: statusColors[type],
|
|
23812
23815
|
width: 18
|