sccoreui 4.1.7 → 4.1.9

package/dist/App.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 // import Home from './pages/home';
 require("./App.scss");
+// import Home from "./pages/home";
 const App = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", {}) }));
+    return ((0, jsx_runtime_1.jsx)("div", {}));
 };
 exports.default = App;

package/dist/App.scss

@@ -26,38 +26,35 @@
 //   src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
 // }
 
-// * {
-//   padding: 0;
-//   margin: 0;
-// }
 
 body {
   font-family: 'Lato', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  line-height: var(--lh);
+  line-height: 20px;
   padding: 0;
   margin: 0;
+  color: var(--gray-700);
 }
 
 code {
   font-family: 'Lato', sans-serif;
 }
 
-h1 {
-  font-size: var(--fs-24);
-  font-weight: var(--fw-600);
-}
+// h1 {
+//   font-size: var(--fs-24);
+//   font-weight: var(--fw-600);
+// }
 
-h2 {
-  font-size: var(--fs-18);
-  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);
-}
+// h3 {
+//   font-size: var(--fs-16);
+//   font-weight: var(--fw-400);
+// }
 
 // ============= custom progress steps ===============  //
 
@@ -104,7 +101,7 @@ h3 {
 
 .progress-step-item {
   &.horizontal {
-    // transform: translateX(10%);
+ 
 
     &:nth-of-type(1) {
       transform: translateX(-50%);
@@ -168,7 +165,7 @@ h3 {
 }
 
 .sc_custom_multiselect {
-  // max-width: 197px;
+
   width: max-content;
 
   * {
@@ -306,16 +303,6 @@ h3 {
   }
 }
 
-// .status_dropdown_item:before {
-//   content: '';
-//   width: 10px;
-//   height: 10px;
-//   position: absolute;
-//   transform: translateY(-50%);
-//   top: 50%;
-//   left: 10px;
-//   border-radius: 50px;
-// }
 
 .status_dropdown_item.Active::before {
   background: #12B76A;
@@ -345,11 +332,10 @@ h3 {
 .custom_date_picker_sec {
   .custom_date_picker {
 
-    // padding-left: 134px;
+  
     .p-inputtext {
       padding-right: 16px;
       width: 130px;
-      // max-width: max-content;
     }
 
     .p-inputtext {
@@ -372,7 +358,7 @@ h3 {
   .custom_date_picker.multiple {
     .p-inputtext {
       width: 236px;
-      // max-width: max-content;
+   
     }
   }
 
@@ -420,9 +406,7 @@ div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker table td>spa
   height: 40px;
 }
 
-// .date_item {
-//   height: 40px;
-// }
+
 
 div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
   width: 328px;
@@ -472,9 +456,7 @@ div:has(ul.date_filter) .p-datepicker-footer {
   }
 }
 
-// div:has(ul.date_filter) .p-datepicker-group-container {
-//   padding: 0;
-// }
+
 
 .Multi_select_dropdown_panel.hidePanelHeader {
   .p-multiselect-header {

package/dist/assets/flex.css

@@ -8533,18 +8533,22 @@
 
 .text-sm {
   font-size: 12px !important;
+  line-height: 20px;
 }
 
 .text-base {
   font-size: 14px !important;
+  line-height: 20px;
 }
 
 .text-lg {
   font-size: 16px !important;
+  line-height: 24px;
 }
 
 .text-xl {
-  font-size: 20px !important;
+  font-size: 18px !important;
+  line-height: 28px;
 }
 
 .text-2xl {
@@ -8575,6 +8579,36 @@
   font-size: 48px !important;
 }
 
+.display-xs {
+  font-size: 20px;
+  line-height: 30px;
+}
+
+.display-sm {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.display-md {
+  font-size: 30px;
+  line-height: 38px;
+}
+
+.display-lg {
+  font-size: 36px;
+  line-height: 44px;
+}
+
+.display-xl {
+  font-size: 48px;
+  line-height: 60px;
+}
+
+.display-2xl {
+  font-size: 60px;
+  line-height: 72px;
+}
+
 @media screen and (min-width: 576px) {
   .sm\:text-xs {
     font-size: 10px !important;

package/dist/assets/sccoreui.css

@@ -55,8 +55,12 @@
   box-sizing: border-box;
 }
 
+body {
+  line-height: 20px;
+}
+
 p {
-  color: var(--text-color);
+  color: var(--gray-700);
 }
 h1,
 h2,
@@ -64,7 +68,25 @@ h3,
 h4,
 h5,
 h6 {
-  color: var(--heading-color);
+  color: var(--gray-900);
+}
+
+h1 {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: var(--fw-600);
+}
+
+h2 {
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: var(--fw-600);
+}
+
+h3 {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: var(--fw-600);
 }
 
 label {
@@ -81,6 +103,10 @@ a {
   text-decoration: none;
 }
 
+.help-text {
+  color: var(--gray-500);
+}
+
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;

package/dist/components/form/form-fields/form-fields.js

@@ -16,7 +16,7 @@ const InputTextField = (props) => {
 };
 const InputNumberField = (props) => {
     const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ min: min, max: max, disabled: disabled, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, maxFractionDigits: 2, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: `full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ min: min, max: max, disabled: disabled, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, maxFractionDigits: 0, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: `full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
 };
 const InputCurrencyField = (props) => {
     const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled } = props;

package/dist/components/multi-select-dropdown/multi-select-dropdown.js

@@ -46,17 +46,17 @@ const MultiSelectDropDown = (props) => {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `status_dropdown_item pl-6 ${option.name.replaceAll(' ', '').toLowerCase()}` }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'status_dot', style: { background: option.color } }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'otption_name mr-8' }, { children: option.name }))] })) }));
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType === 'withIcon' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
+                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
                             (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), (props.clear && items.length > 1) &&
                                         clearIcon()] }))] })), props.dropdownType === 'default' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.icon !== undefined ? 'left_icon' : 'no_icon'} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [props.icon !== undefined &&
-                            (0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
+                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${props.icon !== undefined ? 'left_icon' : 'no_icon'} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [props.icon !== undefined &&
+                            (0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
                             (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
                                         clearIcon()] }))] })), props.dropdownType === 'status' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''} ${items.length > 3 ? 'moreThanThreeItems' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
+                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${props.className} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''} ${items.length > 3 ? 'moreThanThreeItems' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
                             (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
                                         clearIcon()] }))] })), props.dropdownType === '' &&
-                (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` })] }));
+                (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` })] }));
 };
 exports.MultiSelectDropDown = MultiSelectDropDown;
 exports.default = exports.MultiSelectDropDown;