@activecollab/components 2.0.220 → 2.0.221
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 +6 -3
- package/dist/cjs/components/InfoBox/InfoBox.js.map +1 -1
- package/dist/cjs/components/InfoBox/Styles.js +6 -8
- package/dist/cjs/components/InfoBox/Styles.js.map +1 -1
- package/dist/esm/components/InfoBox/InfoBox.d.ts +1 -1
- package/dist/esm/components/InfoBox/InfoBox.d.ts.map +1 -1
- package/dist/esm/components/InfoBox/InfoBox.js +6 -3
- package/dist/esm/components/InfoBox/InfoBox.js.map +1 -1
- package/dist/esm/components/InfoBox/Styles.d.ts +1 -0
- package/dist/esm/components/InfoBox/Styles.d.ts.map +1 -1
- package/dist/esm/components/InfoBox/Styles.js +5 -9
- package/dist/esm/components/InfoBox/Styles.js.map +1 -1
- package/dist/index.js +12 -11
- 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
|
@@ -30,14 +30,17 @@ var InfoBox = exports.InfoBox = function InfoBox(_ref) {
|
|
|
30
30
|
warning: _utils.colors.redAlert.color,
|
|
31
31
|
note: _utils.colors.yellowWarning.color,
|
|
32
32
|
default: _utils.colors.blueSky.color,
|
|
33
|
-
neutral: _utils.colors.gray.color
|
|
33
|
+
neutral: _utils.colors.gray.color,
|
|
34
|
+
ai: _utils.colors.gray.color
|
|
34
35
|
};
|
|
36
|
+
|
|
35
37
|
// https://davidwalsh.name/hex-opacity
|
|
36
38
|
var opacity = "1A";
|
|
37
39
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoBoxWrapper, _extends({
|
|
38
40
|
$color: "".concat(statusColors[type]),
|
|
39
|
-
$opacity: opacity
|
|
40
|
-
|
|
41
|
+
$opacity: opacity,
|
|
42
|
+
$type: type
|
|
43
|
+
}, rest), /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoBoxContainer, null, showIcon && type !== "ai" && /*#__PURE__*/_react.default.createElement("span", null, icon && /*#__PURE__*/_react.default.isValidElement(icon) ? ( /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
41
44
|
fill: statusColors[type],
|
|
42
45
|
width: 18
|
|
43
46
|
})) : type === "success" ? /*#__PURE__*/_react.default.createElement(_Icons.CheckboxBlankTogglerIcon, {
|
|
@@ -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","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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,WAAA,GAAAJ,OAAA;AAAsC,IAAAK,SAAA;AAAA,SAAAN,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,SAAAQ,yBAAAN,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,GAAAY,6BAAA,CAAAR,MAAA,EAAAO,QAAA,OAAAN,GAAA,EAAAJ,CAAA,MAAAJ,MAAA,CAAAgB,qBAAA,QAAAC,gBAAA,GAAAjB,MAAA,CAAAgB,qBAAA,CAAAT,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAa,gBAAA,CAAAX,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAS,gBAAA,CAAAb,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,uBAAAR,MAAA,CAAAS,SAAA,CAAAU,oBAAA,CAAAR,IAAA,CAAAJ,MAAA,EAAAC,GAAA,aAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAL,MAAA;AAAA,SAAAY,8BAAAR,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,WAAAiB,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAd,MAAA,OAAAC,GAAA,EAAAJ,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAgB,UAAA,CAAAd,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAY,UAAA,CAAAhB,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,kBAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAL,MAAA;
|
|
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","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.gray.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 && type !== \"ai\" && (\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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"}
|
|
@@ -9,20 +9,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
9
9
|
var StyledInfoBoxWrapper = exports.StyledInfoBoxWrapper = _styledComponents.default.div.withConfig({
|
|
10
10
|
displayName: "Styles__StyledInfoBoxWrapper",
|
|
11
11
|
componentId: "sc-amgpyr-0"
|
|
12
|
-
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;
|
|
13
|
-
var $
|
|
12
|
+
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;", " position:relative;"], function (_ref) {
|
|
13
|
+
var $type = _ref.$type,
|
|
14
|
+
$color = _ref.$color,
|
|
14
15
|
$opacity = _ref.$opacity;
|
|
15
|
-
return $color + $opacity;
|
|
16
|
-
}, function (_ref2) {
|
|
17
|
-
var $color = _ref2.$color;
|
|
18
|
-
return $color;
|
|
16
|
+
return $type === "ai" ? "\n background: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n border: none;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n padding: 1px;\n border-radius: 0.375rem;\n background: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n z-index: 1;\n }\n " : "\n background-color: ".concat($color + $opacity, ";\n border: 1px solid ").concat($color, ";\n ");
|
|
19
17
|
});
|
|
20
18
|
StyledInfoBoxWrapper.displayName = "StyledInfoBoxWrapper";
|
|
21
19
|
var StyledInfoBoxHeader = exports.StyledInfoBoxHeader = _styledComponents.default.div.withConfig({
|
|
22
20
|
displayName: "Styles__StyledInfoBoxHeader",
|
|
23
21
|
componentId: "sc-amgpyr-1"
|
|
24
|
-
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], function (
|
|
25
|
-
var $hasTitle =
|
|
22
|
+
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], function (_ref2) {
|
|
23
|
+
var $hasTitle = _ref2.$hasTitle;
|
|
26
24
|
return $hasTitle ? "4px" : "none";
|
|
27
25
|
});
|
|
28
26
|
StyledInfoBoxHeader.displayName = "StyledInfoBoxHeader";
|
|
@@ -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","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledInfoBoxWrapper","exports","styled","div","withConfig","displayName","componentId","_ref","$type","$color","$opacity","concat","StyledInfoBoxHeader","_ref2","$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 $type?: string;\n}>`\n gap: 4px;\n width: 100%;\n border-radius: 8px;\n padding-inline: 16px;\n padding-block: 12px;\n ${({ $type, $color, $opacity }) =>\n $type === \"ai\"\n ? `\n background: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n border: none;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n padding: 1px;\n border-radius: 0.375rem;\n background: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n z-index: 1;\n }\n `\n : `\n background-color: ${$color + $opacity};\n border: 1px solid ${$color};\n `}\n position: relative;\n`;\n\nStyledInfoBoxWrapper.displayName = \"StyledInfoBoxWrapper\";\n\nexport const StyledInfoBoxHeader = styled.div<{\n $hasTitle: boolean;\n}>`\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: ${({ $hasTitle }) => ($hasTitle ? \"4px\" : \"none\")};\n`;\n\nStyledInfoBoxHeader.displayName = \"StyledInfoBoxHeader\";\n\nexport const StyledInfoBoxContainer = styled.div`\n display: flex;\n justify-items: space-between;\n width: 100%;\n gap: 8px;\n`;\n\nStyledInfoBoxContainer.displayName = \"StyledInfoBoxContainer\";\n\nexport const SyledInfoBoxInnerHeader = styled.div`\n display: flex;\n`;\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,4GAU1C,UAAAC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EAAA,OAC1BF,KAAK,KAAK,IAAI,8pBAAAG,MAAA,CA0BMF,MAAM,GAAGC,QAAQ,+BAAAC,MAAA,CACjBF,MAAM,UAC3B;AAAA,EAEF;AAEDT,oBAAoB,CAACK,WAAW,GAAG,sBAAsB;AAElD,IAAMO,mBAAmB,GAAAX,OAAA,CAAAW,mBAAA,GAAGV,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gEAMpC,UAAAO,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OAAQA,SAAS,GAAG,KAAK,GAAG,MAAM;AAAA,CAAC,CACvD;AAEDF,mBAAmB,CAACP,WAAW,GAAG,qBAAqB;AAEhD,IAAMU,sBAAsB,GAAAd,OAAA,CAAAc,sBAAA,GAAGb,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oEAK/C;AAEDS,sBAAsB,CAACV,WAAW,GAAG,wBAAwB;AAEtD,IAAMW,uBAAuB,GAAAf,OAAA,CAAAe,uBAAA,GAAGd,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qBAEhD;AAEDU,uBAAuB,CAACX,WAAW,GAAG,yBAAyB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
2
|
import { ElementWithRef } from "../Select";
|
|
3
|
-
export type InfoBoxType = "success" | "warning" | "note" | "default" | "neutral";
|
|
3
|
+
export type InfoBoxType = "success" | "warning" | "note" | "default" | "neutral" | "ai";
|
|
4
4
|
export interface InfoBoxProps {
|
|
5
5
|
type: InfoBoxType;
|
|
6
6
|
children?: ReactNode;
|
|
@@ -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;
|
|
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,CA+D1C,CAAC"}
|
|
@@ -19,14 +19,17 @@ export const InfoBox = _ref => {
|
|
|
19
19
|
warning: colors.redAlert.color,
|
|
20
20
|
note: colors.yellowWarning.color,
|
|
21
21
|
default: colors.blueSky.color,
|
|
22
|
-
neutral: colors.gray.color
|
|
22
|
+
neutral: colors.gray.color,
|
|
23
|
+
ai: colors.gray.color
|
|
23
24
|
};
|
|
25
|
+
|
|
24
26
|
// https://davidwalsh.name/hex-opacity
|
|
25
27
|
const opacity = "1A";
|
|
26
28
|
return /*#__PURE__*/React.createElement(StyledInfoBoxWrapper, _extends({
|
|
27
29
|
$color: "" + statusColors[type],
|
|
28
|
-
$opacity: opacity
|
|
29
|
-
|
|
30
|
+
$opacity: opacity,
|
|
31
|
+
$type: type
|
|
32
|
+
}, rest), /*#__PURE__*/React.createElement(StyledInfoBoxContainer, null, showIcon && type !== "ai" && /*#__PURE__*/React.createElement("span", null, icon && /*#__PURE__*/React.isValidElement(icon) ? ( /*#__PURE__*/React.cloneElement(icon, {
|
|
30
33
|
fill: statusColors[type],
|
|
31
34
|
width: 18
|
|
32
35
|
})) : type === "success" ? /*#__PURE__*/React.createElement(CheckboxBlankTogglerIcon, {
|
|
@@ -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","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;
|
|
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","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.gray.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 && type !== \"ai\" && (\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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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const StyledInfoBoxWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
2
2
|
$color: string;
|
|
3
3
|
$opacity: string;
|
|
4
|
+
$type?: string | undefined;
|
|
4
5
|
}, never>;
|
|
5
6
|
export declare const StyledInfoBoxHeader: import("styled-components").StyledComponent<"div", any, {
|
|
6
7
|
$hasTitle: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoBox/Styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,oBAAoB;YACvB,MAAM;cACJ,MAAM
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoBox/Styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,oBAAoB;YACvB,MAAM;cACJ,MAAM;;SAuCjB,CAAC;AAIF,eAAO,MAAM,mBAAmB;eACnB,OAAO;SAMnB,CAAC;AAIF,eAAO,MAAM,sBAAsB,oEAKlC,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}
|
|
@@ -2,26 +2,22 @@ import styled from "styled-components";
|
|
|
2
2
|
export const StyledInfoBoxWrapper = styled.div.withConfig({
|
|
3
3
|
displayName: "Styles__StyledInfoBoxWrapper",
|
|
4
4
|
componentId: "sc-amgpyr-0"
|
|
5
|
-
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;
|
|
5
|
+
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;", " position:relative;"], _ref => {
|
|
6
6
|
let {
|
|
7
|
+
$type,
|
|
7
8
|
$color,
|
|
8
9
|
$opacity
|
|
9
10
|
} = _ref;
|
|
10
|
-
return $color + $opacity;
|
|
11
|
-
}, _ref2 => {
|
|
12
|
-
let {
|
|
13
|
-
$color
|
|
14
|
-
} = _ref2;
|
|
15
|
-
return $color;
|
|
11
|
+
return $type === "ai" ? "\n background: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n border: none;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n padding: 1px;\n border-radius: 0.375rem;\n background: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n z-index: 1;\n }\n " : "\n background-color: " + ($color + $opacity) + ";\n border: 1px solid " + $color + ";\n ";
|
|
16
12
|
});
|
|
17
13
|
StyledInfoBoxWrapper.displayName = "StyledInfoBoxWrapper";
|
|
18
14
|
export const StyledInfoBoxHeader = styled.div.withConfig({
|
|
19
15
|
displayName: "Styles__StyledInfoBoxHeader",
|
|
20
16
|
componentId: "sc-amgpyr-1"
|
|
21
|
-
})(["display:flex;width:100%;flex-direction:column;gap:", ";"],
|
|
17
|
+
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], _ref2 => {
|
|
22
18
|
let {
|
|
23
19
|
$hasTitle
|
|
24
|
-
} =
|
|
20
|
+
} = _ref2;
|
|
25
21
|
return $hasTitle ? "4px" : "none";
|
|
26
22
|
});
|
|
27
23
|
StyledInfoBoxHeader.displayName = "StyledInfoBoxHeader";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","StyledInfoBoxWrapper","div","withConfig","displayName","componentId","_ref","$
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","StyledInfoBoxWrapper","div","withConfig","displayName","componentId","_ref","$type","$color","$opacity","StyledInfoBoxHeader","_ref2","$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 $type?: string;\n}>`\n gap: 4px;\n width: 100%;\n border-radius: 8px;\n padding-inline: 16px;\n padding-block: 12px;\n ${({ $type, $color, $opacity }) =>\n $type === \"ai\"\n ? `\n background: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n border: none;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n padding: 1px;\n border-radius: 0.375rem;\n background: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n z-index: 1;\n }\n `\n : `\n background-color: ${$color + $opacity};\n border: 1px solid ${$color};\n `}\n position: relative;\n`;\n\nStyledInfoBoxWrapper.displayName = \"StyledInfoBoxWrapper\";\n\nexport const StyledInfoBoxHeader = styled.div<{\n $hasTitle: boolean;\n}>`\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: ${({ $hasTitle }) => ($hasTitle ? \"4px\" : \"none\")};\n`;\n\nStyledInfoBoxHeader.displayName = \"StyledInfoBoxHeader\";\n\nexport const StyledInfoBoxContainer = styled.div`\n display: flex;\n justify-items: space-between;\n width: 100%;\n gap: 8px;\n`;\n\nStyledInfoBoxContainer.displayName = \"StyledInfoBoxContainer\";\n\nexport const SyledInfoBoxInnerHeader = styled.div`\n display: flex;\n`;\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,4GAU1CC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAAH,IAAA;EAAA,OAC5BC,KAAK,KAAK,IAAI,iqBA0BMC,MAAM,GAAGC,QAAQ,kCACjBD,MAAM,UAC3B;AAAA,EAEF;AAEDP,oBAAoB,CAACG,WAAW,GAAG,sBAAsB;AAEzD,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,KAAK,GAAG,MAAM;AAAA,CAAC,CACvD;AAEDF,mBAAmB,CAACN,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMS,sBAAsB,GAAGb,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oEAK/C;AAEDQ,sBAAsB,CAACT,WAAW,GAAG,wBAAwB;AAE7D,OAAO,MAAMU,uBAAuB,GAAGd,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qBAEhD;AAEDS,uBAAuB,CAACV,WAAW,GAAG,yBAAyB"}
|
package/dist/index.js
CHANGED
|
@@ -21038,20 +21038,18 @@
|
|
|
21038
21038
|
var StyledInfoBoxWrapper = styled__default["default"].div.withConfig({
|
|
21039
21039
|
displayName: "Styles__StyledInfoBoxWrapper",
|
|
21040
21040
|
componentId: "sc-amgpyr-0"
|
|
21041
|
-
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;
|
|
21042
|
-
var $
|
|
21041
|
+
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;", " position:relative;"], function (_ref) {
|
|
21042
|
+
var $type = _ref.$type,
|
|
21043
|
+
$color = _ref.$color,
|
|
21043
21044
|
$opacity = _ref.$opacity;
|
|
21044
|
-
return $color + $opacity;
|
|
21045
|
-
}, function (_ref2) {
|
|
21046
|
-
var $color = _ref2.$color;
|
|
21047
|
-
return $color;
|
|
21045
|
+
return $type === "ai" ? "\n background: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n border: none;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n padding: 1px;\n border-radius: 0.375rem;\n background: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n z-index: 1;\n }\n " : "\n background-color: ".concat($color + $opacity, ";\n border: 1px solid ").concat($color, ";\n ");
|
|
21048
21046
|
});
|
|
21049
21047
|
StyledInfoBoxWrapper.displayName = "StyledInfoBoxWrapper";
|
|
21050
21048
|
var StyledInfoBoxHeader = styled__default["default"].div.withConfig({
|
|
21051
21049
|
displayName: "Styles__StyledInfoBoxHeader",
|
|
21052
21050
|
componentId: "sc-amgpyr-1"
|
|
21053
|
-
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], function (
|
|
21054
|
-
var $hasTitle =
|
|
21051
|
+
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], function (_ref2) {
|
|
21052
|
+
var $hasTitle = _ref2.$hasTitle;
|
|
21055
21053
|
return $hasTitle ? "4px" : "none";
|
|
21056
21054
|
});
|
|
21057
21055
|
StyledInfoBoxHeader.displayName = "StyledInfoBoxHeader";
|
|
@@ -21083,14 +21081,17 @@
|
|
|
21083
21081
|
warning: colors$1.redAlert.color,
|
|
21084
21082
|
note: colors$1.yellowWarning.color,
|
|
21085
21083
|
default: colors$1.blueSky.color,
|
|
21086
|
-
neutral: colors$1.gray.color
|
|
21084
|
+
neutral: colors$1.gray.color,
|
|
21085
|
+
ai: colors$1.gray.color
|
|
21087
21086
|
};
|
|
21087
|
+
|
|
21088
21088
|
// https://davidwalsh.name/hex-opacity
|
|
21089
21089
|
var opacity = "1A";
|
|
21090
21090
|
return /*#__PURE__*/React__default["default"].createElement(StyledInfoBoxWrapper, _extends({
|
|
21091
21091
|
$color: "".concat(statusColors[type]),
|
|
21092
|
-
$opacity: opacity
|
|
21093
|
-
|
|
21092
|
+
$opacity: opacity,
|
|
21093
|
+
$type: type
|
|
21094
|
+
}, rest), /*#__PURE__*/React__default["default"].createElement(StyledInfoBoxContainer, null, showIcon && type !== "ai" && /*#__PURE__*/React__default["default"].createElement("span", null, icon && /*#__PURE__*/React__default["default"].isValidElement(icon) ? ( /*#__PURE__*/React__default["default"].cloneElement(icon, {
|
|
21094
21095
|
fill: statusColors[type],
|
|
21095
21096
|
width: 18
|
|
21096
21097
|
})) : type === "success" ? /*#__PURE__*/React__default["default"].createElement(CheckboxBlankTogglerIcon$1, {
|