@unbxd-ui/unbxd-react-components 0.3.2-beta.9 → 0.3.3-beta.1

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 (18) hide show
  1. package/components/Form/Input.js +4 -2
  2. package/components/Form/Textarea.js +4 -2
  3. package/components/Form/formCore.css +1 -1
  4. package/components/Form/formCore.scss +1 -1
  5. package/components/Form/stories/Dropdown.stories.js +10 -3
  6. package/components/Form/summarySelection.css +1 -1
  7. package/components/Form/summarySelection.scss +4 -4
  8. package/components/MetricCard/MetricCard.css +1 -1
  9. package/components/MetricCard/MetricCard.js +30 -18
  10. package/components/MetricCard/MetricCard.scss +59 -57
  11. package/components/MetricCard/MetriicCard.stories.js +120 -59
  12. package/components/PIDItemComponent/PIDItemComponent.js +2 -1
  13. package/components/PIDItemComponent/PIDItemComponentCore.css +1 -1
  14. package/components/PIDItemComponent/PIDItemComponentCore.scss +2 -1
  15. package/components/UIDItemComponent/UIDItemComponent.js +15 -18
  16. package/components/core.css +2 -2
  17. package/components/theme.css +2 -2
  18. package/package.json +2 -2
package/components/Form/Input.js CHANGED
@@ -108,9 +108,11 @@ var Input = function Input(props, ref) {
108
108
  htmlFor: name
109
109
  }, label), /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("div", {
110
110
  className: "RCB-form-limit-container"
111
- }, (error || errorInfo) && /*#__PURE__*/_react["default"].createElement("div", {
111
+ }, error || errorInfo ? /*#__PURE__*/_react["default"].createElement("div", {
112
112
  className: "RCB-form-error ".concat(textDirection)
113
- }, error || errorInfo), limit && /*#__PURE__*/_react["default"].createElement("div", {
113
+ }, error || errorInfo) : /*#__PURE__*/_react["default"].createElement("div", {
114
+ className: ""
115
+ }), limit && /*#__PURE__*/_react["default"].createElement("div", {
114
116
  className: "RCB-form-limit ".concat(textDirection)
115
117
  }, value.length, " / ", limit)));
116
118
  };
package/components/Form/Textarea.js CHANGED
@@ -89,9 +89,11 @@ var Textarea = function Textarea(props) {
89
89
  htmlFor: name
90
90
  }, label), /*#__PURE__*/_react["default"].createElement("textarea", inputProps), /*#__PURE__*/_react["default"].createElement("div", {
91
91
  className: "RCB-form-limit-container"
92
- }, errorInfo && /*#__PURE__*/_react["default"].createElement("div", {
92
+ }, errorInfo ? /*#__PURE__*/_react["default"].createElement("div", {
93
93
  className: "RCB-form-error ".concat(textDirection)
94
- }, errorInfo), limit && /*#__PURE__*/_react["default"].createElement("div", {
94
+ }, errorInfo) : /*#__PURE__*/_react["default"].createElement("div", {
95
+ className: ""
96
+ }), limit && /*#__PURE__*/_react["default"].createElement("div", {
95
97
  className: "RCB-form-limit ".concat(textDirection)
96
98
  }, value.length, " / ", limit)));
97
99
  };
package/components/Form/formCore.css CHANGED
@@ -1 +1 @@
1
- .search-icon,.RCB-dropdown .RCB-dd-search-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='218 216 16 16'%3E%3Cpath d='M227.01 217.379C231.071 218.805 232.756 223.521 230.554 227.212C230.503 227.297 230.457 227.385 230.393 227.498C230.485 227.598 230.574 227.703 230.671 227.8C231.619 228.749 232.573 229.694 233.517 230.647C234.132 231.267 234.16 232.077 233.601 232.622C233.054 233.155 232.263 233.125 231.653 232.525C230.686 231.574 229.726 230.615 228.777 229.647C228.578 229.444 228.441 229.39 228.169 229.551C225.807 230.953 222.874 230.765 220.648 229.088C218.504 227.473 217.537 224.669 218.213 222.027C218.874 219.442 221.125 217.428 223.788 217.042C223.788 217.042 225.433 216.825 227.01 217.379ZM224.784 228.887C227.639 228.863 229.957 226.523 229.931 223.689C229.905 220.85 227.552 218.551 224.698 218.577C221.883 218.604 219.56 220.969 219.594 223.775C219.628 226.604 221.97 228.91 224.784 228.887Z' fill='%23B2BACB'/%3E%3C/svg%3E");width:16px;height:16px}.down-arrow-dark,.RCB-select-arrow:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='121 122 12 9'%3E%3Cpath d='M127.498 130H127.504C127.674 129.999 127.837 129.921 127.953 129.786L132.832 124.136C133.067 123.864 133.054 123.437 132.803 123.182C132.552 122.928 132.157 122.941 131.922 123.214L127.49 128.346L123.07 123.401C122.831 123.133 122.436 123.127 122.189 123.386C121.943 123.646 121.936 124.073 122.176 124.341L127.051 129.795C127.168 129.926 127.329 130 127.498 130Z' fill='%238592AC' stroke='%238592AC'/%3E%3C/svg%3E");width:13px;height:9px;cursor:pointer}.RCB-form-el-inline{margin:20px 0;display:inline-block}.RCB-form-el-inline .RCB-form-el-label{margin-right:15px}.RCB-form-el-inline .RCB-toggle{display:inline-block}.RCB-form-el-block{margin:20px 0}.RCB-form-el-block .RCB-form-el-label{display:block}.RCB-dropdown .RCB-list-item{list-style-type:none;padding:10px;cursor:pointer}.RCB-dropdown .RCB-list-item:hover{background-color:#f4f8ff;box-shadow:inset 3px 0 0 0 #3e71f2;color:#273251}.RCB-dropdown .RCB-list-item.selected{background-color:#f4f8ff;box-shadow:inset 3px 0 0 0 #3e71f2;color:#273251}.RCB-dropdown .RCB-list{overflow-y:auto;max-height:250px}.RCB-dd-with-create .RCB-inline-modal-body{display:flex;flex-direction:column}.RCB-dd-with-create .RCB-inline-modal-body .RCB-list{flex:1;overflow:scroll}.RCB-dd-with-create .RCB-dd-create-cta{padding:10px;text-align:center;border:1px solid #bfbfbf;cursor:pointer}.RCB-clear-selected{background:#f2f0f0;padding:3px 6px;font-size:11px;border-radius:15px;border:1px solid #ccc}.RCB-selection-wrapper{float:right}.RCB-selection-wrapper .RCB-select-arrow{float:unset}.RCB-select-arrow{float:right;font-size:12px;color:#96a9bc;margin-right:12px;margin-left:8px}.RCB-select-arrow:after{content:"\25BC";vertical-align:middle}.RCB-dd-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:70%;vertical-align:top;white-space:nowrap}.RCB-file-input{cursor:pointer}.RCB-drag-drop-uploader{border:2px dashed rgba(104,128,145,0.42);padding:20px;text-align:center}.RCB-drag-over{background:#f3f3f3}.RCB-toggle{padding:2px 3px;background-color:#fff;border:1px solid #ccc;border-radius:20px;box-sizing:content-box;cursor:pointer}.RCB-toggle.active{background-color:#00c48c}.RCB-toggle.active .RCB-toggle-knob{background-color:#fff}.RCB-toggle-disable{cursor:not-allowed;opacity:0.8;background-color:#b7b7c6;box-shadow:none}.RCB-toggle-disable.active{background-color:#f6f6f6}.RCB-toggle-knob{background-color:#8399ae;border-radius:50%;-webkit-transition:transform 0.3s ease;-moz-transition:transform 0.3s ease;-ms-transition:transform 0.3s ease;transition:transform 0.3s ease}.RCB-searchabledd-list-container{position:absolute;z-index:1;width:100%}.RCB-searchabledd{position:relative;width:100%}.RCB-searchabledd .RCB-dd-search{border:1px solid #dae1e9;border-radius:4px}.RCB-searchabledd .RCB-dd-search-ip{padding:10px 30px !important}.disabled-form-el,.RCB-form-el:disabled,.RCB-dropdown.RCB-disabled .RCB-inline-modal-btn{background:#efefef;border-color:#efefef;color:#a0a0a0;cursor:not-allowed}.disabled-form-el:hover,.RCB-form-el:hover:disabled,.RCB-dropdown.RCB-disabled .RCB-inline-modal-btn:hover{border-color:#efefef}form-form-el-cont{margin-bottom:30px}.RCB-form-el-block{margin:30px 0}.RCB-form-el-label{display:inline-block;margin-bottom:8px;color:#17173a;font-size:14px;font-weight:600;letter-spacing:0.42px}.RCB-form-el{color:#17173a;font-size:14px;border-radius:4px;border:1px solid #dde2ee;padding:10px 15px;width:100%}.RCB-form-el[type="checkbox"]{width:auto}.RCB-form-el.ltr{direction:ltr;text-align:left}.RCB-form-el.ltr+.ltr{text-align:left}.RCB-form-el.rtl{direction:rtl;text-align:right}.RCB-form-el.rtl+.rtl{text-align:right}.RCB-form-el[type="text"],.RCB-form-el[type="number"],.RCB-form-el[type="password"],.RCB-form-el[type="email"]{height:40px;box-sizing:border-box}.RCB-form-el[type="text"]:focus,.RCB-form-el[type="number"]:focus,.RCB-form-el[type="password"]:focus,.RCB-form-el[type="email"]:focus{border-color:#3e71f2;border-radius:4px;box-shadow:0px 0px 0px 4px #dbe7ff;background-color:#fff;outline:none}.RCB-form-el[type="text"]:hover,.RCB-form-el[type="number"]:hover,.RCB-form-el[type="password"]:hover,.RCB-form-el[type="email"]:hover{border-color:#3e71f2}.RCB-form-el[type="text"]:hover:disabled,.RCB-form-el[type="number"]:hover:disabled,.RCB-form-el[type="password"]:hover:disabled,.RCB-form-el[type="email"]:hover:disabled{border-color:#dde2ee}.RCB-form-el::placeholder{color:#6f6f8d}.RCB-form-el.error{border-color:#f05c5c}.RCB-form-el.error:hover{border-color:#f05c5c}.RCB-form-el.error:focus{border-color:#f05c5c;box-shadow:0px 0px 0px 4px #f05c5c33;outline:none}.RCB-form-el.warning{border-color:#ffcf5c}.RCB-form-el.warning:hover{border-color:#ffcf5c}.RCB-form-el.warning:focus{border-color:#ffcf5c;box-shadow:0px 0px 0px 4px #ffcf5c33;outline:none}.RCB-form-el.success{border-color:#00c48c}.RCB-form-el.success:hover{border-color:#00c48c}.RCB-form-el.success:focus{border-color:#00c48c;box-shadow:0px 0px 0px 4px #00c48c33;outline:none}.RCB-form-el-cont textarea{font-family:"Nunito Sans", "Helvetica Neue", "Helvetica", "Roboto", "sans-serif"}.RCB-form-el-cont textarea:focus{border-color:#3e71f2;border-radius:4px;box-shadow:0px 0px 0px 4px #dbe7ff;background-color:#fff;outline:none}.RCB-form-el-cont textarea:hover{border-color:#3e71f2}.RCB-form-el-cont.error .RCB-form-el{border-color:#f05c5c}.RCB-form-el-cont.error .RCB-form-el:hover{border-color:#f05c5c}.RCB-form-el-cont.error .RCB-form-el:focus{border-color:#f05c5c;box-shadow:0px 0px 0px 4px #f05c5c33;outline:none}.RCB-form-el-cont.warning .RCB-form-el{border-color:#ffcf5c}.RCB-form-el-cont.warning .RCB-form-el:hover{border-color:#ffcf5c}.RCB-form-el-cont.warning .RCB-form-el:focus{border-color:#ffcf5c;box-shadow:0px 0px 0px 4px #ffcf5c33;outline:none}.RCB-form-el-cont.success .RCB-form-el{border-color:#00c48c}.RCB-form-el-cont.success .RCB-form-el:hover{border-color:#00c48c}.RCB-form-el-cont.success .RCB-form-el:focus{border-color:#00c48c;box-shadow:0px 0px 0px 4px #00c48c33;outline:none}.RCB-form-error{margin-top:5px}.RCB-dropdown .RCB-form-el{padding:0;border:none}.RCB-dropdown .RCB-inline-modal-btn{padding:9px 10px;background:#fff;width:100%;height:100%}.RCB-dropdown .RCB-dd-search-icon{top:9px}.RCB-dropdown .RCB-dd-search-icon:before{content:none}.RCB-dropdown .RCB-clear-selected{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.RCB-dropdown .RCB-clear-selected .RCB-clear-icon{font-size:20px;line-height:1;color:#999;font-weight:bold}.RCB-dropdown .RCB-clear-selected .RCB-clear-icon:hover{color:#666}.RCB-dropdown .RCB-clear-selected:hover .RCB-clear-icon{color:#333}.RCB-dd-searchabledd-search-ip{border:1px solid #dde2ee;border-radius:4px;padding:10px 30px}.RCB-dd-searchabledd-search-ip.RCB-has-clear-icon{padding-right:40px}.RCB-select-arrow{margin-right:0;display:inline-flex}.RCB-select-arrow:after{content:" "}.RCB-toggle-knob{border:1px solid #cccbcb;background:linear-gradient(180deg, #fff 0%, #f2f5f8 100%);box-shadow:-2px 1px 3px 0 rgba(9,13,15,0.14)}.RCB-toggle{height:19px;background-color:#6f6f8d;border-radius:10px;border:none;padding:0;vertical-align:middle}.RCB-toggle-knob{top:3px;left:2px;position:relative;border:none;box-shadow:none}.RCB-toggle div.RCB-toggle-knob:hover{box-shadow:0 0 0px 8px rgba(0,0,0,0.15)}.RCB-toggle.active{background-color:#00c48c}.RCB-toggle.active .RCB-toggle-knob{position:relative;height:26px;width:26px;left:-2px;top:3px;background-color:white;-webkit-transition:0.4s;transition:0.4s;border:none;box-shadow:none}.RCB-toggle.active div.RCB-toggle-knob:hover{box-shadow:0 0 0px 8px rgba(0,196,140,0.15)}.RCB-toggle-disable{cursor:not-allowed;opacity:0.5;background-color:#6f6f8d;box-shadow:none}.RCB-toggle-disable.active{background-color:#00c48c;opacity:0.5}.RCB-toggle-disable.active div.RCB-toggle-knob:hover{box-shadow:none}.RCB-toggle-disable div.RCB-toggle-knob:hover{box-shadow:none}.RCB-btn{text-decoration:none;height:35px;font-weight:500;white-space:nowrap}.RCB-btn:disabled{display:inline-flex;height:35px;padding:8px 12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border-radius:5px;opacity:0.5;background:#728ddf;cursor:no-drop}.RCB-btn-default{color:#fff;background-color:#67b8dc;padding:4px 12px;border:0}.RCB-btn-default:hover{background-color:#50b2dd}.RCB-btn-primary{background-color:#3E71F2;font-size:14px;padding:8px 12px;border-radius:4px;outline:none}.RCB-btn-primary:hover{color:#fff;text-decoration:none;background-color:#3865d9}.RCB-btn-primary:active{background-color:#3e71f2;box-shadow:inset 0 2px 3px 0 rgba(0,0,0,0.5)}.RCB-btn-primary:visited{color:#fff}.RCB-btn-primary:disabled{background-color:#728ddf;color:#fff;opacity:0.5;cursor:no-drop}.RCB-btn-primary:disabled:active{box-shadow:unset}.RCB-btn-secondary{font-size:14px;color:#3e71f2;background-color:#fff;padding:8px 12px;border-radius:5px;border:1.5px solid #3e71f2}.RCB-btn-secondary:hover{color:#3e71f2;text-decoration:none;background-color:#ecf2ff}.RCB-btn-secondary:focus{background-color:#eff3f7}.RCB-btn-secondary:disabled{color:#3e71f2;background-color:#eef4ff;border:1.5px solid #3e71f2;cursor:no-drop}.RCB-btn-secondary:visited{color:#61697d}.RCB-btn-link{background-color:transparent;color:#3E71F2;border-color:transparent}.RCB-btn-link:hover{background:transparent}.RCB-tag-btn{background-color:#ffffff;border:solid 1px #a1b3c0;width:30px;height:30px}.custom-toggle-large .RCB-toggle{height:36px;border-radius:60px}.last-form-el{margin-bottom:15px}.demo-dropdown.RCB-form-el-inline.RCB-dropdown{width:100%}.RCB-checkbox-wrapper{margin:unset;display:flex;align-items:center;padding-left:12px;cursor:pointer;margin-bottom:0}.RCB-checkbox-wrapper .RCB-form-el[type="checkbox"] ~ label{padding:5px 15px;position:relative;width:100%;color:#273251;font-size:14px;font-weight:600;display:flex;align-items:center;padding-left:12px;cursor:pointer;margin-bottom:0}.RCB-dropdown .RCB-inline-modal-body{overflow:hidden}.RCB-form-limit-container{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font-size:12px;color:#6f6f8d}
1
+ .search-icon,.RCB-dropdown .RCB-dd-search-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='218 216 16 16'%3E%3Cpath d='M227.01 217.379C231.071 218.805 232.756 223.521 230.554 227.212C230.503 227.297 230.457 227.385 230.393 227.498C230.485 227.598 230.574 227.703 230.671 227.8C231.619 228.749 232.573 229.694 233.517 230.647C234.132 231.267 234.16 232.077 233.601 232.622C233.054 233.155 232.263 233.125 231.653 232.525C230.686 231.574 229.726 230.615 228.777 229.647C228.578 229.444 228.441 229.39 228.169 229.551C225.807 230.953 222.874 230.765 220.648 229.088C218.504 227.473 217.537 224.669 218.213 222.027C218.874 219.442 221.125 217.428 223.788 217.042C223.788 217.042 225.433 216.825 227.01 217.379ZM224.784 228.887C227.639 228.863 229.957 226.523 229.931 223.689C229.905 220.85 227.552 218.551 224.698 218.577C221.883 218.604 219.56 220.969 219.594 223.775C219.628 226.604 221.97 228.91 224.784 228.887Z' fill='%23B2BACB'/%3E%3C/svg%3E");width:16px;height:16px}.down-arrow-dark,.RCB-select-arrow:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='121 122 12 9'%3E%3Cpath d='M127.498 130H127.504C127.674 129.999 127.837 129.921 127.953 129.786L132.832 124.136C133.067 123.864 133.054 123.437 132.803 123.182C132.552 122.928 132.157 122.941 131.922 123.214L127.49 128.346L123.07 123.401C122.831 123.133 122.436 123.127 122.189 123.386C121.943 123.646 121.936 124.073 122.176 124.341L127.051 129.795C127.168 129.926 127.329 130 127.498 130Z' fill='%238592AC' stroke='%238592AC'/%3E%3C/svg%3E");width:13px;height:9px;cursor:pointer}.RCB-form-el-inline{margin:20px 0;display:inline-block}.RCB-form-el-inline .RCB-form-el-label{margin-right:15px}.RCB-form-el-inline .RCB-toggle{display:inline-block}.RCB-form-el-block{margin:20px 0}.RCB-form-el-block .RCB-form-el-label{display:block}.RCB-dropdown .RCB-list-item{list-style-type:none;padding:10px;cursor:pointer}.RCB-dropdown .RCB-list-item:hover{background-color:#f4f8ff;box-shadow:inset 3px 0 0 0 #3e71f2;color:#273251}.RCB-dropdown .RCB-list-item.selected{background-color:#f4f8ff;box-shadow:inset 3px 0 0 0 #3e71f2;color:#273251}.RCB-dropdown .RCB-list{overflow-y:auto;max-height:250px}.RCB-dd-with-create .RCB-inline-modal-body{display:flex;flex-direction:column}.RCB-dd-with-create .RCB-inline-modal-body .RCB-list{flex:1;overflow:scroll}.RCB-dd-with-create .RCB-dd-create-cta{padding:10px;text-align:center;border:1px solid #bfbfbf;cursor:pointer}.RCB-clear-selected{background:#f2f0f0;padding:3px 6px;font-size:11px;border-radius:15px;border:1px solid #ccc}.RCB-selection-wrapper{float:right}.RCB-selection-wrapper .RCB-select-arrow{float:unset}.RCB-select-arrow{float:right;font-size:12px;color:#96a9bc;margin-right:12px;margin-left:8px}.RCB-select-arrow:after{content:"\25BC";vertical-align:middle}.RCB-dd-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;width:calc(100% - 30px)}.RCB-file-input{cursor:pointer}.RCB-drag-drop-uploader{border:2px dashed rgba(104,128,145,0.42);padding:20px;text-align:center}.RCB-drag-over{background:#f3f3f3}.RCB-toggle{padding:2px 3px;background-color:#fff;border:1px solid #ccc;border-radius:20px;box-sizing:content-box;cursor:pointer}.RCB-toggle.active{background-color:#00c48c}.RCB-toggle.active .RCB-toggle-knob{background-color:#fff}.RCB-toggle-disable{cursor:not-allowed;opacity:0.8;background-color:#b7b7c6;box-shadow:none}.RCB-toggle-disable.active{background-color:#f6f6f6}.RCB-toggle-knob{background-color:#8399ae;border-radius:50%;-webkit-transition:transform 0.3s ease;-moz-transition:transform 0.3s ease;-ms-transition:transform 0.3s ease;transition:transform 0.3s ease}.RCB-searchabledd-list-container{position:absolute;z-index:1;width:100%}.RCB-searchabledd{position:relative;width:100%}.RCB-searchabledd .RCB-dd-search{border:1px solid #dae1e9;border-radius:4px}.RCB-searchabledd .RCB-dd-search-ip{padding:10px 30px !important}.disabled-form-el,.RCB-form-el:disabled,.RCB-dropdown.RCB-disabled .RCB-inline-modal-btn{background:#efefef;border-color:#efefef;color:#a0a0a0;cursor:not-allowed}.disabled-form-el:hover,.RCB-form-el:hover:disabled,.RCB-dropdown.RCB-disabled .RCB-inline-modal-btn:hover{border-color:#efefef}form-form-el-cont{margin-bottom:30px}.RCB-form-el-block{margin:30px 0}.RCB-form-el-label{display:inline-block;margin-bottom:8px;color:#17173a;font-size:14px;font-weight:600;letter-spacing:0.42px}.RCB-form-el{color:#17173a;font-size:14px;border-radius:4px;border:1px solid #dde2ee;padding:10px 15px;width:100%}.RCB-form-el[type="checkbox"]{width:auto}.RCB-form-el.ltr{direction:ltr;text-align:left}.RCB-form-el.ltr+.ltr{text-align:left}.RCB-form-el.rtl{direction:rtl;text-align:right}.RCB-form-el.rtl+.rtl{text-align:right}.RCB-form-el[type="text"],.RCB-form-el[type="number"],.RCB-form-el[type="password"],.RCB-form-el[type="email"]{height:40px;box-sizing:border-box}.RCB-form-el[type="text"]:focus,.RCB-form-el[type="number"]:focus,.RCB-form-el[type="password"]:focus,.RCB-form-el[type="email"]:focus{border-color:#3e71f2;border-radius:4px;box-shadow:0px 0px 0px 4px #dbe7ff;background-color:#fff;outline:none}.RCB-form-el[type="text"]:hover,.RCB-form-el[type="number"]:hover,.RCB-form-el[type="password"]:hover,.RCB-form-el[type="email"]:hover{border-color:#3e71f2}.RCB-form-el[type="text"]:hover:disabled,.RCB-form-el[type="number"]:hover:disabled,.RCB-form-el[type="password"]:hover:disabled,.RCB-form-el[type="email"]:hover:disabled{border-color:#dde2ee}.RCB-form-el::placeholder{color:#6f6f8d}.RCB-form-el.error{border-color:#f05c5c}.RCB-form-el.error:hover{border-color:#f05c5c}.RCB-form-el.error:focus{border-color:#f05c5c;box-shadow:0px 0px 0px 4px #f05c5c33;outline:none}.RCB-form-el.warning{border-color:#ffcf5c}.RCB-form-el.warning:hover{border-color:#ffcf5c}.RCB-form-el.warning:focus{border-color:#ffcf5c;box-shadow:0px 0px 0px 4px #ffcf5c33;outline:none}.RCB-form-el.success{border-color:#00c48c}.RCB-form-el.success:hover{border-color:#00c48c}.RCB-form-el.success:focus{border-color:#00c48c;box-shadow:0px 0px 0px 4px #00c48c33;outline:none}.RCB-form-el-cont textarea{font-family:"Nunito Sans", "Helvetica Neue", "Helvetica", "Roboto", "sans-serif"}.RCB-form-el-cont textarea:focus{border-color:#3e71f2;border-radius:4px;box-shadow:0px 0px 0px 4px #dbe7ff;background-color:#fff;outline:none}.RCB-form-el-cont textarea:hover{border-color:#3e71f2}.RCB-form-el-cont.error .RCB-form-el{border-color:#f05c5c}.RCB-form-el-cont.error .RCB-form-el:hover{border-color:#f05c5c}.RCB-form-el-cont.error .RCB-form-el:focus{border-color:#f05c5c;box-shadow:0px 0px 0px 4px #f05c5c33;outline:none}.RCB-form-el-cont.warning .RCB-form-el{border-color:#ffcf5c}.RCB-form-el-cont.warning .RCB-form-el:hover{border-color:#ffcf5c}.RCB-form-el-cont.warning .RCB-form-el:focus{border-color:#ffcf5c;box-shadow:0px 0px 0px 4px #ffcf5c33;outline:none}.RCB-form-el-cont.success .RCB-form-el{border-color:#00c48c}.RCB-form-el-cont.success .RCB-form-el:hover{border-color:#00c48c}.RCB-form-el-cont.success .RCB-form-el:focus{border-color:#00c48c;box-shadow:0px 0px 0px 4px #00c48c33;outline:none}.RCB-form-error{margin-top:5px}.RCB-dropdown .RCB-form-el{padding:0;border:none}.RCB-dropdown .RCB-inline-modal-btn{padding:9px 10px;background:#fff;width:100%;height:100%}.RCB-dropdown .RCB-dd-search-icon{top:9px}.RCB-dropdown .RCB-dd-search-icon:before{content:none}.RCB-dropdown .RCB-clear-selected{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.RCB-dropdown .RCB-clear-selected .RCB-clear-icon{font-size:20px;line-height:1;color:#999;font-weight:bold}.RCB-dropdown .RCB-clear-selected .RCB-clear-icon:hover{color:#666}.RCB-dropdown .RCB-clear-selected:hover .RCB-clear-icon{color:#333}.RCB-dd-searchabledd-search-ip{border:1px solid #dde2ee;border-radius:4px;padding:10px 30px}.RCB-dd-searchabledd-search-ip.RCB-has-clear-icon{padding-right:40px}.RCB-select-arrow{margin-right:0;display:inline-flex}.RCB-select-arrow:after{content:" "}.RCB-toggle-knob{border:1px solid #cccbcb;background:linear-gradient(180deg, #fff 0%, #f2f5f8 100%);box-shadow:-2px 1px 3px 0 rgba(9,13,15,0.14)}.RCB-toggle{height:19px;background-color:#6f6f8d;border-radius:10px;border:none;padding:0;vertical-align:middle}.RCB-toggle-knob{top:3px;left:2px;position:relative;border:none;box-shadow:none}.RCB-toggle div.RCB-toggle-knob:hover{box-shadow:0 0 0px 8px rgba(0,0,0,0.15)}.RCB-toggle.active{background-color:#00c48c}.RCB-toggle.active .RCB-toggle-knob{position:relative;height:26px;width:26px;left:-2px;top:3px;background-color:white;-webkit-transition:0.4s;transition:0.4s;border:none;box-shadow:none}.RCB-toggle.active div.RCB-toggle-knob:hover{box-shadow:0 0 0px 8px rgba(0,196,140,0.15)}.RCB-toggle-disable{cursor:not-allowed;opacity:0.5;background-color:#6f6f8d;box-shadow:none}.RCB-toggle-disable.active{background-color:#00c48c;opacity:0.5}.RCB-toggle-disable.active div.RCB-toggle-knob:hover{box-shadow:none}.RCB-toggle-disable div.RCB-toggle-knob:hover{box-shadow:none}.RCB-btn{text-decoration:none;height:35px;font-weight:500;white-space:nowrap}.RCB-btn:disabled{display:inline-flex;height:35px;padding:8px 12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border-radius:5px;opacity:0.5;background:#728ddf;cursor:no-drop}.RCB-btn-default{color:#fff;background-color:#67b8dc;padding:4px 12px;border:0}.RCB-btn-default:hover{background-color:#50b2dd}.RCB-btn-primary{background-color:#3E71F2;font-size:14px;padding:8px 12px;border-radius:4px;outline:none}.RCB-btn-primary:hover{color:#fff;text-decoration:none;background-color:#3865d9}.RCB-btn-primary:active{background-color:#3e71f2;box-shadow:inset 0 2px 3px 0 rgba(0,0,0,0.5)}.RCB-btn-primary:visited{color:#fff}.RCB-btn-primary:disabled{background-color:#728ddf;color:#fff;opacity:0.5;cursor:no-drop}.RCB-btn-primary:disabled:active{box-shadow:unset}.RCB-btn-secondary{font-size:14px;color:#3e71f2;background-color:#fff;padding:8px 12px;border-radius:5px;border:1.5px solid #3e71f2}.RCB-btn-secondary:hover{color:#3e71f2;text-decoration:none;background-color:#ecf2ff}.RCB-btn-secondary:focus{background-color:#eff3f7}.RCB-btn-secondary:disabled{color:#3e71f2;background-color:#eef4ff;border:1.5px solid #3e71f2;cursor:no-drop}.RCB-btn-secondary:visited{color:#61697d}.RCB-btn-link{background-color:transparent;color:#3E71F2;border-color:transparent}.RCB-btn-link:hover{background:transparent}.RCB-tag-btn{background-color:#ffffff;border:solid 1px #a1b3c0;width:30px;height:30px}.custom-toggle-large .RCB-toggle{height:36px;border-radius:60px}.last-form-el{margin-bottom:15px}.demo-dropdown.RCB-form-el-inline.RCB-dropdown{width:100%}.RCB-checkbox-wrapper{margin:unset;display:flex;align-items:center;padding-left:12px;cursor:pointer;margin-bottom:0}.RCB-checkbox-wrapper .RCB-form-el[type="checkbox"] ~ label{padding:5px 15px;position:relative;width:100%;color:#273251;font-size:14px;font-weight:600;display:flex;align-items:center;padding-left:12px;cursor:pointer;margin-bottom:0}.RCB-dropdown .RCB-inline-modal-body{overflow:hidden}.RCB-form-limit-container{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font-size:12px;color:#6f6f8d}
package/components/Form/formCore.scss CHANGED
@@ -114,9 +114,9 @@
114
114
  display: inline-block;
115
115
  overflow: hidden;
116
116
  text-overflow: ellipsis;
117
- max-width: 70%;
118
117
  vertical-align: top;
119
118
  white-space: nowrap;
119
+ width: calc(100% - 30px);
120
120
  }
121
121
 
122
122
  &-file-input {
package/components/Form/stories/Dropdown.stories.js CHANGED
@@ -5,6 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports["default"] = exports.WithoutCreateCTA = exports.WithUIDItemComponent = exports.WithPreselectedValue = exports.WithPIDItemComponent = exports.WithLabel = exports.WithCreateCTA = exports.Disabled = exports.Default = exports.CustomOptionRenderer = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
+ var _p = _interopRequireDefault(require("../../../assets/p1.svg"));
9
+ var _p2 = _interopRequireDefault(require("../../../assets/p2.svg"));
10
+ var _p3 = _interopRequireDefault(require("../../../assets/p3.svg"));
11
+ var _p4 = _interopRequireDefault(require("../../../assets/p4.svg"));
12
+ var _p5 = _interopRequireDefault(require("../../../assets/p5.svg"));
8
13
  var _dataLoader = _interopRequireDefault(require("../../../core/dataLoader"));
9
14
  var _PIDItemComponent = _interopRequireDefault(require("../../PIDItemComponent/PIDItemComponent"));
10
15
  var _UIDItemComponent = _interopRequireDefault(require("../../UIDItemComponent/UIDItemComponent"));
@@ -416,6 +421,7 @@ var WithUIDItemComponent = exports.WithUIDItemComponent = {
416
421
  cities: ['Toronto']
417
422
  }
418
423
  }];
424
+ var avatars = [_p["default"], _p2["default"], _p3["default"], _p4["default"], _p5["default"]];
419
425
  return /*#__PURE__*/_react["default"].createElement("div", {
420
426
  style: {
421
427
  width: '500px'
@@ -427,10 +433,10 @@ var WithUIDItemComponent = exports.WithUIDItemComponent = {
427
433
  options: userOptions,
428
434
  value: selectedValue,
429
435
  onChange: function onChange(value) {
430
- console.log('Selected User:', value);
431
436
  setSelectedValue(value);
432
437
  },
433
438
  DropdownItem: _UIDItemComponent["default"],
439
+ avatars: avatars,
434
440
  placeholder: "Choose a user...",
435
441
  className: "demo-dropdown",
436
442
  showSearch: true,
@@ -472,7 +478,7 @@ var WithPIDItemComponent = exports.WithPIDItemComponent = {
472
478
  }];
473
479
  var keysMap = {
474
480
  uniqueIdMap: 'uniqueId',
475
- imageUrlMap: 'imageUrl',
481
+ imageUrlMap: 'imageUrl4',
476
482
  titleMap: 'title'
477
483
  };
478
484
  return /*#__PURE__*/_react["default"].createElement("div", {
@@ -493,7 +499,8 @@ var WithPIDItemComponent = exports.WithPIDItemComponent = {
493
499
  placeholder: "Choose a product...",
494
500
  className: "demo-dropdown",
495
501
  showSearch: true,
496
- searchPlaceholder: "Search products..."
502
+ searchPlaceholder: "Search products...",
503
+ keysMap: keysMap
497
504
  }));
498
505
  }
499
506
  };
package/components/Form/summarySelection.css CHANGED
@@ -1 +1 @@
1
- .summary-tags-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:calc(100% - 40px)}.summary-tags-wrapper .RCB-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.summary-tags-wrapper .light-close-icon{font-size:12px;color:#6f6f8d;cursor:pointer;margin-left:6px}.merch-dd-icon{position:absolute;right:15px;top:16px}.merch-tag-box{display:flex;align-items:center;justify-content:center;border:1px solid #dae1e9;border-radius:4px;background-color:#ffffff;padding:5px 10px 5px 10px;font-size:12px;text-transform:capitalize}.new-summary-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.summary-pill-tag{margin-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;border-radius:4px;border:1px solid #dae1e9;background-color:#ffffff;padding:5px 10px 5px 10px;font-size:12px;text-transform:capitalize;display:flex;align-items:center;justify-content:center;max-height:28px;min-width:36px;margin-left:6px}.custom-attribute{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center}.filters-sub-header{color:#616e7a;font-size:14px;font-weight:600;line-height:19.1px;padding-top:20px}.view-more-link{color:#3E71F2;cursor:pointer;font-size:14px;text-decoration:none;padding-left:10px;white-space:nowrap;display:inline-flex;align-items:center;flex-shrink:0}.view-more-link:active{color:#0056b3}.RCB-inline-modal-btn{display:flex;justify-content:space-between}
1
+ .summary-tags-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:calc(100% - 40px)}.summary-tags-wrapper .RCB-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.summary-tags-wrapper .light-close-icon{font-size:12px;color:#6f6f8d;cursor:pointer;margin-left:6px}.merch-dd-icon{position:absolute;right:15px;top:16px}.merch-tag-box{display:flex;align-items:center;justify-content:center;border:1px solid #dae1e9;border-radius:4px;background-color:#ffffff;padding:5px 10px 5px 10px;font-size:12px;text-transform:capitalize}.new-summary-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.summary-pill-tag{margin-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;border-radius:4px;border:1px solid #dae1e9;background-color:#ffffff;padding:5px 10px 5px 10px;font-size:12px;text-transform:capitalize;display:flex;align-items:center;justify-content:center;max-height:28px;min-width:36px;margin-left:6px}.custom-attribute{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center}.filters-sub-header{color:#616e7a;font-size:14px;font-weight:600;line-height:19.1px;padding-top:20px}.view-more-link{color:#3E71F2;cursor:pointer;font-size:14px;text-decoration:none;padding-left:10px;white-space:nowrap;display:inline-flex;align-items:center;flex-shrink:0}.view-more-link:active{color:#0056b3}.view-more-link .RCB-inline-modal-btn{display:flex;justify-content:space-between}
package/components/Form/summarySelection.scss CHANGED
@@ -98,9 +98,9 @@
98
98
  &:active {
99
99
  color: #0056b3;
100
100
  }
101
+ .RCB-inline-modal-btn {
102
+ display: flex;
103
+ justify-content: space-between;
104
+ }
101
105
  }
102
106
 
103
- .RCB-inline-modal-btn {
104
- display: flex;
105
- justify-content: space-between;
106
- }
package/components/MetricCard/MetricCard.css CHANGED
@@ -1 +1 @@
1
- .RCB-metric-card-wrapper{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;margin-bottom:32px}@media (min-width: 768px){.RCB-metric-card-wrapper{grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}}@media (min-width: 1024px){.RCB-metric-card-wrapper{grid-template-columns:repeat(6, minmax(0, 1fr));gap:20px}}.RCB-metric-card-wrapper .RCB-metric-card-item{border-radius:12px;padding:16px;position:relative;overflow:hidden;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;background:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #e1e7ef;animation:slide-up 0.5s ease-out}.RCB-metric-card-wrapper .RCB-metric-card-item:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data{position:relative;z-index:10}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title .RCB-metric-title-icon{background-color:#06b6d4;padding:0.5rem;border-radius:0.75rem;border:1px solid #e1e7ef;height:34px}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title .RCB-metric-title-text{font-size:0.875rem;line-height:1.25rem;color:#65758b}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value{display:flex;align-items:center;gap:0.5rem}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-value-text{font-size:1.125rem;line-height:1.75rem;font-weight:700;color:#0f1729;letter-spacing:-0.025em}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text{display:flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;border-radius:9999px;font-size:0.75rem;line-height:1rem;font-weight:500}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text.positive{background-color:#dcfce7;color:#15803d}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text.negative{background-color:#fee2e2;color:#b91c1c}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-bottom-right-circle{position:absolute;right:-1rem;bottom:-1rem;width:5rem;height:5rem;border-radius:50%;opacity:0.1;background-color:var(--decorative-color, #06b6d4)}@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
1
+ .RCB-metric-card-wrapper{display:flex;gap:16px;margin-bottom:32px}.RCB-metric-card-wrapper .RCB-metric-card-item{flex:1;border-radius:12px;padding:10px;position:relative;overflow:hidden;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;background:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #e1e7ef;animation:slide-up 0.5s ease-out;width:52px;height:fit-content}.RCB-metric-card-wrapper .RCB-metric-card-item:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data{position:relative;z-index:10;display:flex;align-items:center;gap:10px}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title-icon{flex:0.2}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title-icon .RCB-metric-title-icon-inner{width:35px;aspect-ratio:1;padding:8px;border-radius:12px;display:flex;align-items:center;justify-content:center}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container{flex:1;display:flex;flex-direction:column;gap:4px}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container{display:flex;align-items:center;justify-content:space-between}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container .RCB-metric-title-text{font-size:0.875rem;line-height:1.25rem;color:#65758b}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container .RCB-metric-compare-text{display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;font-size:0.75rem;line-height:1rem;font-weight:500}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container .RCB-metric-compare-text.positive{background-color:#dcfce7;color:#15803d}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-title-container .RCB-metric-compare-text.negative{background-color:#fee2e2;color:#b91c1c}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-data-value-container .RCB-metric-value-text{font-size:1.125rem;line-height:1.75rem;font-weight:700;color:#0f1729;letter-spacing:-0.025em}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-bottom-right-circle{position:absolute;right:-16px;bottom:-16px;width:80px;height:80px;border-radius:50%;opacity:0.1;background-color:var(--decorative-color, #06b6d4)}@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
package/components/MetricCard/MetricCard.js CHANGED
@@ -9,9 +9,11 @@ var _icon = _interopRequireDefault(require("../../core/icon"));
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
10
10
  function MetricCard(props) {
11
11
  var _props$metricConfigs = props.metricConfigs,
12
- metricConfigs = _props$metricConfigs === void 0 ? [] : _props$metricConfigs;
12
+ metricConfigs = _props$metricConfigs === void 0 ? [] : _props$metricConfigs,
13
+ _props$className = props.className,
14
+ className = _props$className === void 0 ? '' : _props$className;
13
15
  return /*#__PURE__*/_react["default"].createElement("div", {
14
- className: "RCB-metric-card-wrapper"
16
+ className: "RCB-metric-card-wrapper ".concat(className)
15
17
  }, metricConfigs.map(function () {
16
18
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
17
19
  _ref$id = _ref.id,
@@ -24,42 +26,52 @@ function MetricCard(props) {
24
26
  icon = _ref$icon === void 0 ? '' : _ref$icon,
25
27
  _ref$iconBgColor = _ref.iconBgColor,
26
28
  iconBgColor = _ref$iconBgColor === void 0 ? '#ccc' : _ref$iconBgColor,
29
+ _ref$iconColor = _ref.iconColor,
30
+ iconColor = _ref$iconColor === void 0 ? 'white' : _ref$iconColor,
27
31
  _ref$hasDiff = _ref.hasDiff,
28
32
  hasDiff = _ref$hasDiff === void 0 ? false : _ref$hasDiff,
29
33
  _ref$comparePercentag = _ref.comparePercentage,
30
- comparePercentage = _ref$comparePercentag === void 0 ? 0 : _ref$comparePercentag;
34
+ comparePercentage = _ref$comparePercentag === void 0 ? 0 : _ref$comparePercentag,
35
+ _ref$className = _ref.className,
36
+ cardClassName = _ref$className === void 0 ? '' : _ref$className,
37
+ _ref$diffPosition = _ref.diffPosition,
38
+ diffPosition = _ref$diffPosition === void 0 ? 'top' : _ref$diffPosition;
31
39
  return /*#__PURE__*/_react["default"].createElement("div", {
32
- className: "RCB-metric-card-item",
40
+ className: "RCB-metric-card-item ".concat(cardClassName),
33
41
  key: id
34
42
  }, /*#__PURE__*/_react["default"].createElement("div", {
35
43
  className: "RCB-metric-data"
36
44
  }, /*#__PURE__*/_react["default"].createElement("div", {
37
- className: "RCB-metric-title"
45
+ className: "RCB-metric-title-icon"
38
46
  }, /*#__PURE__*/_react["default"].createElement("div", {
39
- className: "RCB-metric-title-icon",
47
+ className: "RCB-metric-title-icon-inner",
40
48
  style: {
41
49
  backgroundColor: iconBgColor
42
50
  }
43
51
  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
44
52
  icon: icon,
45
- size: "16px",
46
- color: "white"
47
- })), /*#__PURE__*/_react["default"].createElement("div", {
53
+ size: "20px",
54
+ color: iconColor
55
+ }))), /*#__PURE__*/_react["default"].createElement("div", {
56
+ className: "RCB-metric-data-value-container"
57
+ }, /*#__PURE__*/_react["default"].createElement("div", {
58
+ className: "RCB-metric-title-container"
59
+ }, /*#__PURE__*/_react["default"].createElement("div", {
48
60
  className: "RCB-metric-title-text"
49
- }, " ", name, " ")), /*#__PURE__*/_react["default"].createElement("div", {
50
- className: "RCB-metric-value"
61
+ }, " ", name, " "), hasDiff && diffPosition === 'top' ? /*#__PURE__*/_react["default"].createElement("div", {
62
+ className: "RCB-metric-compare-text ".concat(comparePercentage < 0 ? 'negative' : 'positive')
63
+ }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
64
+ icon: comparePercentage < 0 ? 'arrow-down' : 'arrow-up',
65
+ size: "12px"
66
+ }), Math.abs(comparePercentage) + '%') : null), /*#__PURE__*/_react["default"].createElement("div", {
67
+ className: "RCB-metric-title-container"
51
68
  }, /*#__PURE__*/_react["default"].createElement("div", {
52
69
  className: "RCB-metric-value-text"
53
- }, value), hasDiff ? /*#__PURE__*/_react["default"].createElement("div", {
70
+ }, value), hasDiff && diffPosition === 'bottom' ? /*#__PURE__*/_react["default"].createElement("div", {
54
71
  className: "RCB-metric-compare-text ".concat(comparePercentage < 0 ? 'negative' : 'positive')
55
72
  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
56
73
  icon: comparePercentage < 0 ? 'arrow-down' : 'arrow-up',
57
74
  size: "12px"
58
- }), Math.abs(comparePercentage) + '%') : null)), /*#__PURE__*/_react["default"].createElement("div", {
59
- className: "RCB-bottom-right-circle",
60
- style: {
61
- backgroundColor: iconBgColor
62
- }
63
- }));
75
+ }), Math.abs(comparePercentage) + '%') : null))));
64
76
  }));
65
77
  }
package/components/MetricCard/MetricCard.scss CHANGED
@@ -1,22 +1,12 @@
1
1
  .RCB-metric-card-wrapper {
2
- display: grid;
3
- grid-template-columns: repeat(2, minmax(0, 1fr));
2
+ display: flex;
4
3
  gap: 16px;
5
4
  margin-bottom: 32px;
6
5
 
7
- @media (min-width: 768px) {
8
- grid-template-columns: repeat(3, minmax(0, 1fr));
9
- gap: 16px;
10
- }
11
-
12
- @media (min-width: 1024px) {
13
- grid-template-columns: repeat(6, minmax(0, 1fr));
14
- gap: 20px;
15
- }
16
-
17
6
  .RCB-metric-card-item {
7
+ flex: 1;
18
8
  border-radius: 12px;
19
- padding: 16px;
9
+ padding: 10px;
20
10
  position: relative;
21
11
  overflow: hidden;
22
12
  transition-property: all;
@@ -27,6 +17,8 @@
27
17
  -webkit-backdrop-filter: blur(10px);
28
18
  border: 1px solid hsl(214, 32%, 91%);
29
19
  animation: slide-up 0.5s ease-out;
20
+ width: 52px;
21
+ height: fit-content;
30
22
 
31
23
  &:hover {
32
24
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
@@ -36,69 +28,79 @@
36
28
  .RCB-metric-data {
37
29
  position: relative;
38
30
  z-index: 10;
31
+ display: flex;
32
+ align-items: center;
33
+ gap: 10px;
39
34
 
40
- .RCB-metric-title {
41
- display: flex;
42
- align-items: center;
43
- gap: 0.75rem;
44
- margin-bottom: 0.75rem;
45
-
46
- .RCB-metric-title-icon {
47
- background-color: rgb(6, 182, 212);
48
- padding: 0.5rem;
49
- border-radius: 0.75rem;
50
- border: 1px solid #e1e7ef;
51
- height: 34px;
52
- }
35
+ .RCB-metric-title-icon {
36
+ flex: 0.2;
53
37
 
54
- .RCB-metric-title-text {
55
- font-size: 0.875rem;
56
- line-height: 1.25rem;
57
- color: hsl(215, 16%, 47%);
38
+ .RCB-metric-title-icon-inner {
39
+ width: 35px;
40
+ aspect-ratio: 1;
41
+ padding: 8px;
42
+ border-radius: 12px;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
58
46
  }
59
47
  }
60
48
 
61
- .RCB-metric-value {
49
+ .RCB-metric-data-value-container {
50
+ flex: 1;
62
51
  display: flex;
63
- align-items: center;
64
- gap: 0.5rem;
65
- .RCB-metric-value-text {
66
- font-size: 1.125rem;
67
- line-height: 1.75rem;
68
- font-weight: 700;
69
- color: #0f1729;
70
- letter-spacing: -0.025em;
71
- }
52
+ flex-direction: column;
53
+ gap: 4px;
72
54
 
73
- .RCB-metric-compare-text {
55
+ .RCB-metric-title-container {
74
56
  display: flex;
75
57
  align-items: center;
76
- gap: 0.25rem;
77
- padding: 0.125rem 0.5rem;
78
- border-radius: 9999px;
79
- font-size: 0.75rem;
80
- line-height: 1rem;
81
- font-weight: 500;
58
+ justify-content: space-between;
82
59
 
83
- &.positive {
84
- background-color: #dcfce7;
85
- color: #15803d;
60
+ .RCB-metric-title-text {
61
+ font-size: 0.875rem;
62
+ line-height: 1.25rem;
63
+ color: hsl(215, 16%, 47%);
86
64
  }
87
65
 
88
- &.negative {
89
- background-color: #fee2e2;
90
- color: #b91c1c;
66
+ .RCB-metric-compare-text {
67
+ display: flex;
68
+ align-items: center;
69
+ gap: 4px;
70
+ padding: 2px 8px;
71
+ border-radius: 9999px;
72
+ font-size: 0.75rem;
73
+ line-height: 1rem;
74
+ font-weight: 500;
75
+
76
+ &.positive {
77
+ background-color: #dcfce7;
78
+ color: #15803d;
79
+ }
80
+
81
+ &.negative {
82
+ background-color: #fee2e2;
83
+ color: #b91c1c;
84
+ }
91
85
  }
92
86
  }
87
+
88
+ .RCB-metric-value-text {
89
+ font-size: 1.125rem;
90
+ line-height: 1.75rem;
91
+ font-weight: 700;
92
+ color: #0f1729;
93
+ letter-spacing: -0.025em;
94
+ }
93
95
  }
94
96
  }
95
97
 
96
98
  .RCB-bottom-right-circle {
97
99
  position: absolute;
98
- right: -1rem;
99
- bottom: -1rem;
100
- width: 5rem;
101
- height: 5rem;
100
+ right: -16px;
101
+ bottom: -16px;
102
+ width: 80px;
103
+ height: 80px;
102
104
  border-radius: 50%;
103
105
  opacity: 0.1;
104
106
  background-color: var(--decorative-color, rgb(6, 182, 212));