sccoreui 1.1.6 → 1.1.7

package/dist/assets/App.scss

@@ -0,0 +1,61 @@
+@import url('./assets/theme.css');
+@import url('./assets/sccoreui.css');
+@import url('./assets/sccoreicons.css');
+@import url('./assets/flex.css');
+
+:root {
+  --fw-600: 600;
+  --fw-400: 400;
+  --fs-24: 24px;
+  --fs-18: 18px;
+  --fs-16: 16px;
+  --lh:24px;
+  --fs-14:14px;
+  --grey-bg:#101828;
+  --border-none: border-none;
+}
+
+@font-face {
+  font-family: 'Lato-400';
+  font-weight: 400;
+  src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Lato-600';
+  font-weight: 600;
+  src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
+}
+
+
+body {
+  margin: 0;
+  font-family: 'Lato-400', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: var(--lh);
+}
+
+code {
+  font-family: 'Lato-400', monospace;
+}
+
+h1 {
+  font-size: var(--fs-24);
+  font-weight: var(--fw-600);
+}
+
+h2 {
+  font-size: var(--fs-18);
+  font-weight: var(--fw-600);
+}
+
+h3 {
+  font-size: var(--fs-16);
+  font-weight: var(--fw-400);
+}
+
+// p {
+//   font-size: var(--fs-16);
+//   font-weight: var(--fw-400);
+// }

package/dist/assets/sccoreui.css

@@ -91,7 +91,7 @@ a {
 }
 
 .p-error {
-  color: #e24c4c;
+  color: var(--red-500);
 }
 
 .p-text-secondary {
@@ -697,7 +697,8 @@ a {
   height: 16px;
 
   border-radius: 25%;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+    box-shadow 0.2s;
 }
 .p-checkbox .p-checkbox-box .p-checkbox-icon {
   transition-duration: 0.2s;
@@ -742,7 +743,8 @@ a {
 .p-checkbox.p-checkcircle .p-checkbox-box {
   border-radius: 50%;
 }
-.p-checkbox.p-checkcircle .p-checkbox-box.p-highlight, .p-checkbox.p-checkcircle .p-checkbox-box.p-highlight:hover {
+.p-checkbox.p-checkcircle .p-checkbox-box.p-highlight,
+.p-checkbox.p-checkcircle .p-checkbox-box.p-highlight:hover {
   background: var(--primary-600);
 }
 /* ############################################################## Checkbox CSS changes END ############################################################### */
@@ -762,11 +764,14 @@ a {
   background: #4338ca;
 }
 
+.p-chips .p-inputtext {
+  line-height: 0;
+  height: 128px;
+  display: flow-root;
+}
+
 .p-chips .p-chips-multiple-container {
-  padding: 0.375rem 0.75rem;
-  display: flex;
-  align-items: start;
-  flex-wrap: wrap;
+  padding: 10px 14px 10px 14px;
 }
 .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
   border-color: #6366f1;
@@ -778,13 +783,14 @@ a {
   border-color: #6366f1;
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
-  padding: 0px 10px;
-  margin: 3px;
-  height: 1.5rem;
-  background: #ffffff;
-  color: var(--gray-700);
-  border: 1px solid var(--gray-300);
+  padding: 0 5px 0 5px;
+  margin-right: 0.5rem;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.87);
   border-radius: 6px;
+  border: 1px solid var(--gray-300);
+  height: 28px;
+  margin-bottom: 5px;
 }
 .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
   margin-left: 0.5rem;
@@ -837,6 +843,15 @@ a {
   width: 15px;
 }
 .p-dropdown {
+  background: #ffffff;
+  border: 1px solid var(--gray-300);
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+    box-shadow 0.2s;
+  border-radius: 8px;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  padding: 10px 14px;
+}
+.p-inputgroup > .p-dropdown {
   background: #ffffff;
   height: 40px;
   border: 1px solid var(--gray-300);
@@ -844,7 +859,6 @@ a {
     box-shadow 0.2s;
   border-radius: 8px;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  padding: 10px 3px;
 }
 
 /* .p-dropdown:not(.p-disabled):hover {
@@ -858,12 +872,20 @@ a {
   border: 1px solid var(--primary-300);
 }
 
-.p-inputgroup>.p-dropdown:not(.p-disabled).p-focus {
+.p-inputgroup > .p-dropdown:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+    0px 0px 0px 4px var(--primary-100);
+  border: 1px solid var(--gray-300);
+}
+.p-inputgroup > .p-invalid.p-dropdown:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
   border: 1px solid var(--gray-300);
 }
+
 .p-dropdown.p-dropdown-clearable .p-dropdown-label {
   padding-right: 1.75rem;
 }
@@ -876,11 +898,10 @@ a {
   padding-inline-start: 0px;
 }
 .p-inputgroup > .p-dropdown > .p-dropdown-label {
-  padding: 0px 5px;
+  padding: 0px 0px;
   width: 3rem;
 }
-.p-dropdown-status {
-}
+
 .p-dropdown .p-dropdown-label.p-placeholder {
   color: var(--gray-500);
   text-align: left;
@@ -1306,7 +1327,7 @@ a {
   font-size: var(--fs-16);
   color: var(--gray-900);
   background: #ffffff;
-  padding: 0px 14px;
+  padding: 0px 12px;
   height: 40px;
   border: 1px solid #d0d5dd;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s,
@@ -1332,7 +1353,15 @@ a {
   border-radius: 8px;
   border: 1px solid var(--primary-300);
 }
-/*========= iput number invalid color =====*/
+/* input text invalid properties */
+.p-inputtext.p-invalid:enabled:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
+  border-radius: 8px;
+  border: 1px solid var(--red-300);
+}
+/*========= input number invalid color =====*/
 .p-invalid.p-inputnumber-input:enabled:focus {
   outline: 0 none;
   outline-offset: 0;
@@ -1349,8 +1378,8 @@ a {
 }
 
 .p-inputtext.p-invalid.p-component {
-  border: 1px solid #ecb1b7;
-  background-color: #fffafa;
+  border: 1px solid var(--red-300);
+  background-color: var(--surface-a);
 }
 .p-inputtext.p-inputtext-sm {
   font-size: 0.875rem;
@@ -1379,7 +1408,7 @@ a {
 }
 
 .p-input-icon-left > .p-inputtext {
-  padding-left: 32px;
+  padding-left: 40px;
 }
 
 .p-input-icon-left.p-float-label > label {
@@ -1394,11 +1423,11 @@ a {
 .p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > .p-input-suffix {
   right: 0.75rem;
-  color: #6c757d;
+  color: var(--gray-400);
 }
 
 .p-input-icon-right > .p-inputtext {
-  padding-right: 2.5rem;
+  padding-right: 2.25rem;
 }
 
 ::-webkit-input-placeholder {
@@ -7983,17 +8012,16 @@ button:focus {
 
 .p-inputgroup > .p-button {
   height: 40px !important;
-  border: 1px solid #d0d5dd;
+  border: 1px solid var(--gray-300);
 }
 .p-inputgroup > .p-button:hover {
   height: 40px !important;
-  border: 1px solid #d0d5dd;
+  border: 1px solid var(--gray-300);
 }
 
 .p-inputgroup > .p-button.p-button-outlined:enabled:active {
   background: #fff;
-  color: #162578;
-  border: 1px solid #d0d5dd;
+  border: 1px solid var(--gray-300);
 }
 
 input[type="number"]::-webkit-inner-spin-button,
@@ -8001,8 +8029,3 @@ input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
-.textareachips > .p-inputtext.p-chips-multiple-container {
-  height: auto;
-  min-height: 8rem;
-}

package/dist/assets/svg/svg.js

@@ -1,8 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoLogo = void 0;
+exports.Times = exports.Copy = exports.Dollar = exports.Message = exports.Error = exports.Card = exports.InfoLogo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const InfoLogo = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M6.05992 5.99998C6.21665 5.55442 6.52602 5.17872 6.93322 4.9394C7.34042 4.70009 7.81918 4.61261 8.2847 4.69245C8.75022 4.7723 9.17246 5.01433 9.47664 5.37567C9.78081 5.737 9.94729 6.19433 9.94659 6.66665C9.94659 7.99998 7.94659 8.66665 7.94659 8.66665M7.99992 11.3333H8.00659M14.6666 7.99998C14.6666 11.6819 11.6818 14.6666 7.99992 14.6666C4.31802 14.6666 1.33325 11.6819 1.33325 7.99998C1.33325 4.31808 4.31802 1.33331 7.99992 1.33331C11.6818 1.33331 14.6666 4.31808 14.6666 7.99998Z", stroke: "#98A2B3", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M6.05992 5.99998C6.21665 5.55442 6.52602 5.17872 6.93322 4.9394C7.34042 4.70009 7.81918 4.61261 8.2847 4.69245C8.75022 4.7723 9.17246 5.01433 9.47664 5.37567C9.78081 5.737 9.94729 6.19433 9.94659 6.66665C9.94659 7.99998 7.94659 8.66665 7.94659 8.66665M7.99992 11.3333H8.00659M14.6666 7.99998C14.6666 11.6819 11.6818 14.6666 7.99992 14.6666C4.31802 14.6666 1.33325 11.6819 1.33325 7.99998C1.33325 4.31808 4.31802 1.33331 7.99992 1.33331C11.6818 1.33331 14.6666 4.31808 14.6666 7.99998Z", stroke: "#98A2B3", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 exports.InfoLogo = InfoLogo;
+const Card = () => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "34", height: "24", viewBox: "0 0 34 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("rect", { x: "0.5", y: "0.5", width: "33", height: "23", rx: "3.5", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.179 16.8295C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02972 9.03582 5.03003 12.7807 5.03003C14.459 5.03003 15.9949 5.63253 17.179 6.63057C18.363 5.63253 19.8989 5.03003 21.5773 5.03003C25.3221 5.03003 28.358 8.02972 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8295Z", fill: "#ED0006" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1792 16.8295C18.6371 15.6006 19.5616 13.772 19.5616 11.73C19.5616 9.68807 18.6371 7.85947 17.1792 6.63057C18.3632 5.63253 19.8992 5.03003 21.5775 5.03003C25.3224 5.03003 28.3582 8.02972 28.3582 11.73C28.3582 15.4303 25.3224 18.43 21.5775 18.43C19.8992 18.43 18.3632 17.8275 17.1792 16.8295Z", fill: "#F9A000" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1788 16.8295C18.6367 15.6006 19.5611 13.772 19.5611 11.7301C19.5611 9.68811 18.6367 7.85952 17.1788 6.63062C15.7208 7.85952 14.7964 9.68811 14.7964 11.7301C14.7964 13.772 15.7208 15.6006 17.1788 16.8295Z", fill: "#FF5E00" }), (0, jsx_runtime_1.jsx)("rect", { x: "0.5", y: "0.5", width: "33", height: "23", rx: "3.5", stroke: "#F2F4F7" })] }));
+};
+exports.Card = Card;
+const Error = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.99992 5.33337V8.00004M7.99992 10.6667H8.00659M14.6666 8.00004C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00004C1.33325 4.31814 4.31802 1.33337 7.99992 1.33337C11.6818 1.33337 14.6666 4.31814 14.6666 8.00004Z", stroke: "var(--red-500)", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.Error = Error;
+const Message = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "16", viewBox: "0 0 20 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M1.66675 3.83331L8.47085 8.59618C9.02182 8.98187 9.29731 9.17471 9.59697 9.2494C9.86166 9.31538 10.1385 9.31538 10.4032 9.2494C10.7029 9.17471 10.9783 8.98187 11.5293 8.59618L18.3334 3.83331M5.66675 14.6666H14.3334C15.7335 14.6666 16.4336 14.6666 16.9684 14.3942C17.4388 14.1545 17.8212 13.772 18.0609 13.3016C18.3334 12.7668 18.3334 12.0668 18.3334 10.6666V5.33331C18.3334 3.93318 18.3334 3.23312 18.0609 2.69834C17.8212 2.22793 17.4388 1.84548 16.9684 1.6058C16.4336 1.33331 15.7335 1.33331 14.3334 1.33331H5.66675C4.26662 1.33331 3.56655 1.33331 3.03177 1.6058C2.56137 1.84548 2.17892 2.22793 1.93923 2.69834C1.66675 3.23312 1.66675 3.93318 1.66675 5.33331V10.6666C1.66675 12.0668 1.66675 12.7668 1.93923 13.3016C2.17892 13.772 2.56137 14.1545 3.03177 14.3942C3.56655 14.6666 4.26662 14.6666 5.66675 14.6666Z", stroke: "#667085", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.Message = Message;
+const Dollar = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M4.904 12.904C5.256 12.872 5.56533 12.7973 5.832 12.68C6.09867 12.5573 6.32267 12.4027 6.504 12.216C6.69067 12.0293 6.82933 11.8133 6.92 11.568C7.016 11.3173 7.064 11.0427 7.064 10.744C7.064 10.4773 7.01333 10.248 6.912 10.056C6.816 9.864 6.68267 9.69867 6.512 9.56C6.34133 9.416 6.14133 9.296 5.912 9.2C5.68267 9.09867 5.43733 9.00533 5.176 8.92L4.904 12.904ZM4.64 3.656C4.29333 3.688 3.992 3.75733 3.736 3.864C3.48533 3.97067 3.27733 4.104 3.112 4.264C2.94667 4.424 2.824 4.60533 2.744 4.808C2.664 5.00533 2.624 5.21333 2.624 5.432C2.624 5.688 2.66933 5.912 2.76 6.104C2.85067 6.29067 2.976 6.456 3.136 6.6C3.296 6.744 3.48267 6.86933 3.696 6.976C3.90933 7.08267 4.14133 7.17867 4.392 7.264L4.64 3.656ZM5.272 7.544C5.656 7.66667 6.03467 7.79733 6.408 7.936C6.78133 8.07467 7.11733 8.25333 7.416 8.472C7.71467 8.69067 7.95467 8.96533 8.136 9.296C8.32267 9.62133 8.416 10.0293 8.416 10.52C8.416 11 8.336 11.4507 8.176 11.872C8.016 12.2933 7.78133 12.664 7.472 12.984C7.168 13.304 6.792 13.5653 6.344 13.768C5.90133 13.9653 5.39467 14.0827 4.824 14.12L4.728 15.52C4.72267 15.6213 4.68267 15.7093 4.608 15.784C4.53333 15.864 4.44 15.904 4.328 15.904H3.8L3.92 14.104C3.27467 14.04 2.68533 13.88 2.152 13.624C1.624 13.3627 1.168 13.032 0.784 12.632L1.216 11.976C1.25867 11.9173 1.312 11.8693 1.376 11.832C1.44 11.7947 1.50933 11.776 1.584 11.776C1.68533 11.776 1.8 11.8267 1.928 11.928C2.056 12.0293 2.21333 12.144 2.4 12.272C2.592 12.4 2.816 12.5253 3.072 12.648C3.33333 12.7707 3.64533 12.8533 4.008 12.896L4.296 8.648C3.92267 8.536 3.55467 8.41067 3.192 8.272C2.83467 8.13333 2.512 7.94933 2.224 7.72C1.94133 7.49067 1.712 7.20533 1.536 6.864C1.36533 6.52267 1.28 6.09333 1.28 5.576C1.28 5.18667 1.35467 4.808 1.504 4.44C1.65867 4.06667 1.88267 3.736 2.176 3.448C2.46933 3.16 2.82933 2.92533 3.256 2.744C3.68267 2.55733 4.17067 2.45333 4.72 2.432L4.8 1.28C4.80533 1.17867 4.84267 1.088 4.912 1.008C4.98667 0.927999 5.08267 0.888 5.2 0.888H5.728L5.624 2.464C6.17867 2.53333 6.65867 2.67733 7.064 2.896C7.47467 3.11467 7.83733 3.38133 8.152 3.696L7.808 4.224C7.70133 4.384 7.57867 4.464 7.44 4.464C7.36533 4.464 7.272 4.432 7.16 4.368C7.05333 4.29867 6.92267 4.21867 6.768 4.128C6.61867 4.03733 6.44 3.94933 6.232 3.864C6.02933 3.77867 5.79733 3.71467 5.536 3.672L5.272 7.544Z", fill: "#475467" }) }));
+};
+exports.Dollar = Dollar;
+const Copy = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "var(--gray-700)", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M4.1665 12.5C3.38993 12.5 3.00165 12.5 2.69536 12.3732C2.28698 12.204 1.96253 11.8795 1.79337 11.4712C1.6665 11.1649 1.6665 10.7766 1.6665 10V4.33335C1.6665 3.39993 1.6665 2.93322 1.84816 2.5767C2.00795 2.2631 2.26292 2.00813 2.57652 1.84834C2.93304 1.66669 3.39975 1.66669 4.33317 1.66669H9.99984C10.7764 1.66669 11.1647 1.66669 11.471 1.79355C11.8794 1.96271 12.2038 2.28717 12.373 2.69555C12.4998 3.00183 12.4998 3.39012 12.4998 4.16669M10.1665 18.3334H15.6665C16.5999 18.3334 17.0666 18.3334 17.4232 18.1517C17.7368 17.9919 17.9917 17.7369 18.1515 17.4233C18.3332 17.0668 18.3332 16.6001 18.3332 15.6667V10.1667C18.3332 9.23327 18.3332 8.76656 18.1515 8.41004C17.9917 8.09643 17.7368 7.84147 17.4232 7.68168C17.0666 7.50002 16.5999 7.50002 15.6665 7.50002H10.1665C9.23308 7.50002 8.76637 7.50002 8.40985 7.68168C8.09625 7.84147 7.84128 8.09643 7.68149 8.41004C7.49984 8.76656 7.49984 9.23327 7.49984 10.1667V15.6667C7.49984 16.6001 7.49984 17.0668 7.68149 17.4233C7.84128 17.7369 8.09625 17.9919 8.40985 18.1517C8.76637 18.3334 9.23308 18.3334 10.1665 18.3334Z", stroke: "#344054", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.Copy = Copy;
+const Times = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 1L1 7M1 1L7 7", stroke: "#98A2B3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.Times = Times;

package/dist/types/assets/svg/svg.d.ts

@@ -1 +1,7 @@
 export function InfoLogo(): import("react/jsx-runtime").JSX.Element;
+export function Card(): import("react/jsx-runtime").JSX.Element;
+export function Error(): import("react/jsx-runtime").JSX.Element;
+export function Message(): import("react/jsx-runtime").JSX.Element;
+export function Dollar(): import("react/jsx-runtime").JSX.Element;
+export function Copy(): import("react/jsx-runtime").JSX.Element;
+export function Times(): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",