@cakemail-org/ui-components-v2 2.2.16 → 2.2.18

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.
Files changed (11) hide show
  1. package/dist/cjs/components/icon/types.d.ts +1 -0
  2. package/dist/cjs/components/icons/18/Chevron.d.ts +4 -0
  3. package/dist/cjs/data/theme/MuiTableCell.d.ts +7 -0
  4. package/dist/cjs/data/theme/MuiTextField.d.ts +5 -2
  5. package/dist/cjs/index.js +26 -10
  6. package/dist/esm/components/icon/types.d.ts +1 -0
  7. package/dist/esm/components/icons/18/Chevron.d.ts +4 -0
  8. package/dist/esm/data/theme/MuiTableCell.d.ts +7 -0
  9. package/dist/esm/data/theme/MuiTextField.d.ts +5 -2
  10. package/dist/esm/index.js +26 -10
  11. package/package.json +1 -1
package/dist/cjs/components/icon/types.d.ts CHANGED
@@ -33,6 +33,7 @@ export declare enum EIconName {
33
33
  "Code18" = "Code18",
34
34
  "Collapse18" = "Collapse18",
35
35
  "Copy18" = "Copy18",
36
+ "Chevron18" = "Chevron18",
36
37
  "Delete18" = "Delete18",
37
38
  "Domainauthenticated18" = "Domainauthenticated18",
38
39
  "Domainblocked18" = "Domainblocked18",
package/dist/cjs/components/icons/18/Chevron.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { SvgIconProps } from '@mui/material/SvgIcon';
2
+ import React from "react";
3
+ declare function AccountProfile18(props: SvgIconProps): React.JSX.Element;
4
+ export default AccountProfile18;
package/dist/cjs/data/theme/MuiTableCell.d.ts CHANGED
@@ -7,6 +7,13 @@ export default function getMuiTableCell(theme: Theme): {
7
7
  marginBottom: string;
8
8
  border: string;
9
9
  maxWidth: string;
10
+ overflow: string;
11
+ ".cellContainer .MuiTypography-root, .cellContainer p": {
12
+ maxWidth: string;
13
+ overflow: string;
14
+ textOverflow: string;
15
+ whiteSpace: string;
16
+ };
10
17
  verticalAlign: string;
11
18
  "&:nth-child(2)": {
12
19
  paddingLeft: string;
package/dist/cjs/data/theme/MuiTextField.d.ts CHANGED
@@ -847,10 +847,9 @@ export default function getMuiTextField(theme: Theme): {
847
847
  "&.MuiOutlinedInput-root": {};
848
848
  "&.MuiFilledInput-root": {};
849
849
  "&.MuiInput-root": {};
850
- input: {
850
+ "input, textarea": {
851
851
  fontWeight: number;
852
852
  borderRadius: number;
853
- padding: string;
854
853
  backgroundColor: string;
855
854
  "&:not(:placeholder-shown)": {
856
855
  color: string;
@@ -1277,6 +1276,7 @@ export default function getMuiTextField(theme: Theme): {
1277
1276
  outline?: import("csstype").Property.Outline<string | number> | undefined;
1278
1277
  overflow?: import("csstype").Property.Overflow | undefined;
1279
1278
  overscrollBehavior?: import("csstype").Property.OverscrollBehavior | undefined;
1279
+ padding?: import("csstype").Property.Padding<string | number> | undefined;
1280
1280
  paddingBlock?: import("csstype").Property.PaddingBlock<string | number> | undefined;
1281
1281
  paddingInline?: import("csstype").Property.PaddingInline<string | number> | undefined;
1282
1282
  placeContent?: import("csstype").Property.PlaceContent | undefined;
@@ -1677,6 +1677,9 @@ export default function getMuiTextField(theme: Theme): {
1677
1677
  textAnchor?: import("csstype").Property.TextAnchor | undefined;
1678
1678
  vectorEffect?: import("csstype").Property.VectorEffect | undefined;
1679
1679
  };
1680
+ input: {
1681
+ padding: string;
1682
+ };
1680
1683
  fieldset: {
1681
1684
  borderRadius: number;
1682
1685
  borderColor: string;
package/dist/cjs/index.js CHANGED
@@ -678,7 +678,7 @@ function X14(props) {
678
678
  React.createElement("rect", { id: "Rectangle 153_2", x: "2.75867", y: "12.6554", width: "2", height: "13.9959", rx: "1", transform: "rotate(-135 2.75867 12.6554)" }));
679
679
  }
680
680
 
681
- function AccountProfile18(props) {
681
+ function AccountProfile18$1(props) {
682
682
  return React.createElement(SvgIcon, __assign({}, props, { width: "18", height: "18", viewBox: "0 0 18 18" }),
683
683
  React.createElement("rect", { x: "4", y: "4", width: "3", height: "3", rx: "1.5" }),
684
684
  React.createElement("rect", { x: "4", y: "12", width: "5", height: "2", rx: "1" }),
@@ -781,6 +781,11 @@ function Copy18(props) {
781
781
  React.createElement("path", { d: "M6 15H8C8 15.5523 8.44772 16 9 16H15C15.5523 16 16 15.5523 16 15V9C16 8.44772 15.5523 8 15 8V6C16.6569 6 18 7.34315 18 9V15C18 16.6569 16.6569 18 15 18H9C7.34315 18 6 16.6568 6 15Z" }));
782
782
  }
783
783
 
784
+ function AccountProfile18(props) {
785
+ return React.createElement(SvgIcon, __assign({}, props, { width: "18", height: "10", viewBox: "0 0 18 10" }),
786
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L9 7.58579L16.2929 0.292893C16.6834 -0.0976311 17.3166 -0.0976311 17.7071 0.292893C18.0976 0.683418 18.0976 1.31658 17.7071 1.70711L9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z" }));
787
+ }
788
+
784
789
  function Dashboard18(props) {
785
790
  return React.createElement(SvgIcon, __assign({}, props, { width: "18", height: "18", viewBox: "0 0 18 18" }),
786
791
  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.4 0H6.6C7.3732 0 8 0.626801 8 1.4V6.6C8 7.3732 7.3732 8 6.6 8H1.4C0.626801 8 0 7.3732 0 6.6V1.4C0 0.626801 0.626801 0 1.4 0ZM2 2V6H6V2H2Z" }),
@@ -1458,7 +1463,7 @@ function Icon(_a) {
1458
1463
  Activity18: Activity18,
1459
1464
  Add18: Add18,
1460
1465
  AddTags18: AddTags18,
1461
- AccountProfile18: AccountProfile18,
1466
+ AccountProfile18: AccountProfile18$1,
1462
1467
  Attribute18: Attribute18,
1463
1468
  Integrations18: Integrations18,
1464
1469
  Arrow18: Arrow18,
@@ -1468,6 +1473,7 @@ function Icon(_a) {
1468
1473
  Campaigns18: Campaigns18,
1469
1474
  Collapse18: Collapse18,
1470
1475
  Clicks18: Clicks18,
1476
+ Chevron18: AccountProfile18,
1471
1477
  Copy18: Copy18,
1472
1478
  Code18: Code18,
1473
1479
  Dashboard18: Dashboard18,
@@ -7014,8 +7020,15 @@ function getMuiTableCell(theme) {
7014
7020
  boxSizing: "border-box",
7015
7021
  marginBottom: theme.spacing(5),
7016
7022
  border: "none",
7017
- maxWidth: "unset",
7018
- verticalAlign: "top",
7023
+ maxWidth: "25rem !important",
7024
+ overflow: "hidden",
7025
+ ".cellContainer .MuiTypography-root, .cellContainer p": {
7026
+ maxWidth: "25rem !important",
7027
+ overflow: "hidden",
7028
+ textOverflow: "ellipsis",
7029
+ whiteSpace: "nowrap",
7030
+ },
7031
+ verticalAlign: "center",
7019
7032
  "&:nth-child(2)": {
7020
7033
  paddingLeft: theme.spacing(5) + "!important",
7021
7034
  },
@@ -7302,9 +7315,12 @@ function getMuiTextField(theme) {
7302
7315
  "&.MuiOutlinedInput-root": {},
7303
7316
  "&.MuiFilledInput-root": {},
7304
7317
  "&.MuiInput-root": {},
7305
- "input": __assign(__assign({ height: "unset" }, theme.typography.body1L), { fontWeight: 600, borderRadius: 8, padding: theme.spacing(4, 3.5), backgroundColor: theme.palette.common.white, "&:not(:placeholder-shown)": {
7318
+ "input, textarea": __assign(__assign({ height: "unset" }, theme.typography.body1L), { fontWeight: 600, borderRadius: 8, backgroundColor: theme.palette.common.white, "&:not(:placeholder-shown)": {
7306
7319
  color: theme.palette.primary.main
7307
7320
  } }),
7321
+ "input": {
7322
+ padding: theme.spacing(4, 3.5),
7323
+ },
7308
7324
  "fieldset": {
7309
7325
  borderRadius: 8,
7310
7326
  borderColor: theme.palette.wildSand.main,
@@ -8297,7 +8313,7 @@ function OverlayHeading(props) {
8297
8313
  else {
8298
8314
  rContent.push(rightContent);
8299
8315
  }
8300
- if (onClose)
8316
+ if (onClose && closeBtnText)
8301
8317
  rContent.push(React.createElement(Button, { key: "modal-close-btn", color: "cloud", size: "medium", onClick: onClose }, closeBtnText));
8302
8318
  return React.createElement(FullBar, { left: lContent, right: rContent });
8303
8319
  }
@@ -16871,7 +16887,7 @@ function Radio(_a) {
16871
16887
  return React.createElement(material.Radio, __assign({}, props));
16872
16888
  }
16873
16889
 
16874
- var css_248z$3 = ".resourceEdit-component-v2 {\n width: 100%;\n padding-bottom: 1.5rem;\n}\n.resourceEdit-component-v2 .resource-heading {\n flex: 1;\n width: 100%;\n}\n.resourceEdit-component-v2 .resource-heading .resource-title {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark {\n width: 24px;\n height: 24px;\n border-radius: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0.5rem;\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.valid {\n background-color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.warning {\n background-color: var(--warning-brand-color, var(--orange, #FF9E0E));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.error {\n background-color: var(--error-brand-color, var(--rad-red, #FF4835));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.empty {\n background-color: var(--shade500, #939292);\n}";
16890
+ var css_248z$3 = ".resourceEdit-component-v2 {\n width: 100%;\n padding-bottom: 1.5rem;\n}\n.resourceEdit-component-v2 .resource-heading {\n flex: 1;\n width: 100%;\n}\n.resourceEdit-component-v2 .resource-heading.editable {\n cursor: pointer;\n}\n.resourceEdit-component-v2 .resource-heading .resource-title {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark {\n width: 24px;\n height: 24px;\n border-radius: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0.5rem;\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.valid {\n background-color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.warning {\n background-color: var(--warning-brand-color, var(--orange, #FF9E0E));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.error {\n background-color: var(--error-brand-color, var(--rad-red, #FF4835));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.empty {\n background-color: var(--shade500, #939292);\n}";
16875
16891
  styleInject(css_248z$3);
16876
16892
 
16877
16893
  function ResourceEdit(_a) {
@@ -16881,7 +16897,7 @@ function ResourceEdit(_a) {
16881
16897
  setOpen(!open);
16882
16898
  }
16883
16899
  return React.createElement(material.Stack, { className: "resourceEdit-component-v2 ".concat(className || ""), gap: 4 },
16884
- React.createElement(material.Stack, { direction: "row", className: "resource-heading", justifyContent: "space-between", gap: 4 },
16900
+ React.createElement(material.Stack, { direction: "row", className: "resource-heading ".concat(editable ? "editable" : ""), justifyContent: "space-between", gap: 4, onClick: editable ? handleToggleOpen : undefined },
16885
16901
  React.createElement(material.Stack, { gap: 1 },
16886
16902
  React.createElement(material.Typography, { className: "resource-title", variant: "titleS" },
16887
16903
  title,
@@ -16890,8 +16906,8 @@ function ResourceEdit(_a) {
16890
16906
  React.createElement(Icon, { name: status === "valid" ? "Checkmark10" : "X14", color: "white" }))),
16891
16907
  desc && React.createElement(material.Typography, { variant: "body1", color: "shade500.main" }, desc)),
16892
16908
  editable && React.createElement(material.Box, null,
16893
- React.createElement(Button, { onClick: handleToggleOpen, color: "body1", variant: 'outlined', iconOnly: true },
16894
- React.createElement(Icon, { name: "Edit18" })))),
16909
+ React.createElement(Button, { color: "body1", variant: 'text', iconOnly: true, onClick: handleToggleOpen },
16910
+ React.createElement(Icon, { name: "Chevron18" })))),
16895
16911
  !!editableContent && React.createElement(material.Box, { className: "resource-content ".concat(open ? "open" : "hidden") }, editableContent),
16896
16912
  !!support && React.createElement(material.Box, { className: "resource-support ".concat(!open ? "open" : "hidden") }, support));
16897
16913
  }
package/dist/esm/components/icon/types.d.ts CHANGED
@@ -33,6 +33,7 @@ export declare enum EIconName {
33
33
  "Code18" = "Code18",
34
34
  "Collapse18" = "Collapse18",
35
35
  "Copy18" = "Copy18",
36
+ "Chevron18" = "Chevron18",
36
37
  "Delete18" = "Delete18",
37
38
  "Domainauthenticated18" = "Domainauthenticated18",
38
39
  "Domainblocked18" = "Domainblocked18",
package/dist/esm/components/icons/18/Chevron.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { SvgIconProps } from '@mui/material/SvgIcon';
2
+ import React from "react";
3
+ declare function AccountProfile18(props: SvgIconProps): React.JSX.Element;
4
+ export default AccountProfile18;
package/dist/esm/data/theme/MuiTableCell.d.ts CHANGED
@@ -7,6 +7,13 @@ export default function getMuiTableCell(theme: Theme): {
7
7
  marginBottom: string;
8
8
  border: string;
9
9
  maxWidth: string;
10
+ overflow: string;
11
+ ".cellContainer .MuiTypography-root, .cellContainer p": {
12
+ maxWidth: string;
13
+ overflow: string;
14
+ textOverflow: string;
15
+ whiteSpace: string;
16
+ };
10
17
  verticalAlign: string;
11
18
  "&:nth-child(2)": {
12
19
  paddingLeft: string;
package/dist/esm/data/theme/MuiTextField.d.ts CHANGED
@@ -847,10 +847,9 @@ export default function getMuiTextField(theme: Theme): {
847
847
  "&.MuiOutlinedInput-root": {};
848
848
  "&.MuiFilledInput-root": {};
849
849
  "&.MuiInput-root": {};
850
- input: {
850
+ "input, textarea": {
851
851
  fontWeight: number;
852
852
  borderRadius: number;
853
- padding: string;
854
853
  backgroundColor: string;
855
854
  "&:not(:placeholder-shown)": {
856
855
  color: string;
@@ -1277,6 +1276,7 @@ export default function getMuiTextField(theme: Theme): {
1277
1276
  outline?: import("csstype").Property.Outline<string | number> | undefined;
1278
1277
  overflow?: import("csstype").Property.Overflow | undefined;
1279
1278
  overscrollBehavior?: import("csstype").Property.OverscrollBehavior | undefined;
1279
+ padding?: import("csstype").Property.Padding<string | number> | undefined;
1280
1280
  paddingBlock?: import("csstype").Property.PaddingBlock<string | number> | undefined;
1281
1281
  paddingInline?: import("csstype").Property.PaddingInline<string | number> | undefined;
1282
1282
  placeContent?: import("csstype").Property.PlaceContent | undefined;
@@ -1677,6 +1677,9 @@ export default function getMuiTextField(theme: Theme): {
1677
1677
  textAnchor?: import("csstype").Property.TextAnchor | undefined;
1678
1678
  vectorEffect?: import("csstype").Property.VectorEffect | undefined;
1679
1679
  };
1680
+ input: {
1681
+ padding: string;
1682
+ };
1680
1683
  fieldset: {
1681
1684
  borderRadius: number;
1682
1685
  borderColor: string;
package/dist/esm/index.js CHANGED
@@ -658,7 +658,7 @@ function X14(props) {
658
658
  React__default.createElement("rect", { id: "Rectangle 153_2", x: "2.75867", y: "12.6554", width: "2", height: "13.9959", rx: "1", transform: "rotate(-135 2.75867 12.6554)" }));
659
659
  }
660
660
 
661
- function AccountProfile18(props) {
661
+ function AccountProfile18$1(props) {
662
662
  return React__default.createElement(SvgIcon, __assign({}, props, { width: "18", height: "18", viewBox: "0 0 18 18" }),
663
663
  React__default.createElement("rect", { x: "4", y: "4", width: "3", height: "3", rx: "1.5" }),
664
664
  React__default.createElement("rect", { x: "4", y: "12", width: "5", height: "2", rx: "1" }),
@@ -761,6 +761,11 @@ function Copy18(props) {
761
761
  React__default.createElement("path", { d: "M6 15H8C8 15.5523 8.44772 16 9 16H15C15.5523 16 16 15.5523 16 15V9C16 8.44772 15.5523 8 15 8V6C16.6569 6 18 7.34315 18 9V15C18 16.6569 16.6569 18 15 18H9C7.34315 18 6 16.6568 6 15Z" }));
762
762
  }
763
763
 
764
+ function AccountProfile18(props) {
765
+ return React__default.createElement(SvgIcon, __assign({}, props, { width: "18", height: "10", viewBox: "0 0 18 10" }),
766
+ React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L9 7.58579L16.2929 0.292893C16.6834 -0.0976311 17.3166 -0.0976311 17.7071 0.292893C18.0976 0.683418 18.0976 1.31658 17.7071 1.70711L9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z" }));
767
+ }
768
+
764
769
  function Dashboard18(props) {
765
770
  return React__default.createElement(SvgIcon, __assign({}, props, { width: "18", height: "18", viewBox: "0 0 18 18" }),
766
771
  React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.4 0H6.6C7.3732 0 8 0.626801 8 1.4V6.6C8 7.3732 7.3732 8 6.6 8H1.4C0.626801 8 0 7.3732 0 6.6V1.4C0 0.626801 0.626801 0 1.4 0ZM2 2V6H6V2H2Z" }),
@@ -1438,7 +1443,7 @@ function Icon(_a) {
1438
1443
  Activity18: Activity18,
1439
1444
  Add18: Add18,
1440
1445
  AddTags18: AddTags18,
1441
- AccountProfile18: AccountProfile18,
1446
+ AccountProfile18: AccountProfile18$1,
1442
1447
  Attribute18: Attribute18,
1443
1448
  Integrations18: Integrations18,
1444
1449
  Arrow18: Arrow18,
@@ -1448,6 +1453,7 @@ function Icon(_a) {
1448
1453
  Campaigns18: Campaigns18,
1449
1454
  Collapse18: Collapse18,
1450
1455
  Clicks18: Clicks18,
1456
+ Chevron18: AccountProfile18,
1451
1457
  Copy18: Copy18,
1452
1458
  Code18: Code18,
1453
1459
  Dashboard18: Dashboard18,
@@ -6994,8 +7000,15 @@ function getMuiTableCell(theme) {
6994
7000
  boxSizing: "border-box",
6995
7001
  marginBottom: theme.spacing(5),
6996
7002
  border: "none",
6997
- maxWidth: "unset",
6998
- verticalAlign: "top",
7003
+ maxWidth: "25rem !important",
7004
+ overflow: "hidden",
7005
+ ".cellContainer .MuiTypography-root, .cellContainer p": {
7006
+ maxWidth: "25rem !important",
7007
+ overflow: "hidden",
7008
+ textOverflow: "ellipsis",
7009
+ whiteSpace: "nowrap",
7010
+ },
7011
+ verticalAlign: "center",
6999
7012
  "&:nth-child(2)": {
7000
7013
  paddingLeft: theme.spacing(5) + "!important",
7001
7014
  },
@@ -7282,9 +7295,12 @@ function getMuiTextField(theme) {
7282
7295
  "&.MuiOutlinedInput-root": {},
7283
7296
  "&.MuiFilledInput-root": {},
7284
7297
  "&.MuiInput-root": {},
7285
- "input": __assign(__assign({ height: "unset" }, theme.typography.body1L), { fontWeight: 600, borderRadius: 8, padding: theme.spacing(4, 3.5), backgroundColor: theme.palette.common.white, "&:not(:placeholder-shown)": {
7298
+ "input, textarea": __assign(__assign({ height: "unset" }, theme.typography.body1L), { fontWeight: 600, borderRadius: 8, backgroundColor: theme.palette.common.white, "&:not(:placeholder-shown)": {
7286
7299
  color: theme.palette.primary.main
7287
7300
  } }),
7301
+ "input": {
7302
+ padding: theme.spacing(4, 3.5),
7303
+ },
7288
7304
  "fieldset": {
7289
7305
  borderRadius: 8,
7290
7306
  borderColor: theme.palette.wildSand.main,
@@ -8277,7 +8293,7 @@ function OverlayHeading(props) {
8277
8293
  else {
8278
8294
  rContent.push(rightContent);
8279
8295
  }
8280
- if (onClose)
8296
+ if (onClose && closeBtnText)
8281
8297
  rContent.push(React__default.createElement(Button, { key: "modal-close-btn", color: "cloud", size: "medium", onClick: onClose }, closeBtnText));
8282
8298
  return React__default.createElement(FullBar, { left: lContent, right: rContent });
8283
8299
  }
@@ -16851,7 +16867,7 @@ function Radio(_a) {
16851
16867
  return React__default.createElement(Radio$1, __assign({}, props));
16852
16868
  }
16853
16869
 
16854
- var css_248z$3 = ".resourceEdit-component-v2 {\n width: 100%;\n padding-bottom: 1.5rem;\n}\n.resourceEdit-component-v2 .resource-heading {\n flex: 1;\n width: 100%;\n}\n.resourceEdit-component-v2 .resource-heading .resource-title {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark {\n width: 24px;\n height: 24px;\n border-radius: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0.5rem;\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.valid {\n background-color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.warning {\n background-color: var(--warning-brand-color, var(--orange, #FF9E0E));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.error {\n background-color: var(--error-brand-color, var(--rad-red, #FF4835));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.empty {\n background-color: var(--shade500, #939292);\n}";
16870
+ var css_248z$3 = ".resourceEdit-component-v2 {\n width: 100%;\n padding-bottom: 1.5rem;\n}\n.resourceEdit-component-v2 .resource-heading {\n flex: 1;\n width: 100%;\n}\n.resourceEdit-component-v2 .resource-heading.editable {\n cursor: pointer;\n}\n.resourceEdit-component-v2 .resource-heading .resource-title {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark {\n width: 24px;\n height: 24px;\n border-radius: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0.5rem;\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.valid {\n background-color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.warning {\n background-color: var(--warning-brand-color, var(--orange, #FF9E0E));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.error {\n background-color: var(--error-brand-color, var(--rad-red, #FF4835));\n}\n.resourceEdit-component-v2 .resource-heading .statusCheckmark.empty {\n background-color: var(--shade500, #939292);\n}";
16855
16871
  styleInject(css_248z$3);
16856
16872
 
16857
16873
  function ResourceEdit(_a) {
@@ -16861,7 +16877,7 @@ function ResourceEdit(_a) {
16861
16877
  setOpen(!open);
16862
16878
  }
16863
16879
  return React__default.createElement(Stack$1, { className: "resourceEdit-component-v2 ".concat(className || ""), gap: 4 },
16864
- React__default.createElement(Stack$1, { direction: "row", className: "resource-heading", justifyContent: "space-between", gap: 4 },
16880
+ React__default.createElement(Stack$1, { direction: "row", className: "resource-heading ".concat(editable ? "editable" : ""), justifyContent: "space-between", gap: 4, onClick: editable ? handleToggleOpen : undefined },
16865
16881
  React__default.createElement(Stack$1, { gap: 1 },
16866
16882
  React__default.createElement(Typography$1, { className: "resource-title", variant: "titleS" },
16867
16883
  title,
@@ -16870,8 +16886,8 @@ function ResourceEdit(_a) {
16870
16886
  React__default.createElement(Icon, { name: status === "valid" ? "Checkmark10" : "X14", color: "white" }))),
16871
16887
  desc && React__default.createElement(Typography$1, { variant: "body1", color: "shade500.main" }, desc)),
16872
16888
  editable && React__default.createElement(Box, null,
16873
- React__default.createElement(Button, { onClick: handleToggleOpen, color: "body1", variant: 'outlined', iconOnly: true },
16874
- React__default.createElement(Icon, { name: "Edit18" })))),
16889
+ React__default.createElement(Button, { color: "body1", variant: 'text', iconOnly: true, onClick: handleToggleOpen },
16890
+ React__default.createElement(Icon, { name: "Chevron18" })))),
16875
16891
  !!editableContent && React__default.createElement(Box, { className: "resource-content ".concat(open ? "open" : "hidden") }, editableContent),
16876
16892
  !!support && React__default.createElement(Box, { className: "resource-support ".concat(!open ? "open" : "hidden") }, support));
16877
16893
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cakemail-org/ui-components-v2",
3
- "version": "2.2.16",
3
+ "version": "2.2.18",
4
4
  "description": "ui library kit made with material UI",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",