dhre-component-lib 0.8.17 → 0.8.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.
package/dist/index.esm.js CHANGED
@@ -116,7 +116,7 @@ const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/"
116
116
  index < items.length - 1 && (React__default.createElement("span", { className: `${'separator'} ${separatorClassName}` }, separator)))))));
117
117
  };
118
118
 
119
- var css$k = ".custom-checkbox {\n display: flex;\n align-items: center;\n}\n.custom-checkbox input[type=checkbox] {\n /* Hide the default checkbox */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 8px;\n border: 2px solid #000000;\n border-radius: 4px;\n background-color: #ffffff;\n cursor: pointer;\n position: relative;\n /* Create the white tick mark */\n}\n.custom-checkbox input[type=checkbox]:checked {\n background-color: #000000;\n}\n.custom-checkbox input[type=checkbox]:checked::after {\n content: \"\";\n position: absolute;\n top: 0;\n inset-inline-start: 5px;\n width: 5px;\n height: 10px;\n border: solid #ffffff;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n.custom-checkbox input[type=checkbox]:focus {\n outline: none;\n box-shadow: 0 0 3px #000000;\n}\n.custom-checkbox .checkbox-label {\n font-size: 14px;\n color: #000000; /* Adjust the text color if needed */\n}";
119
+ var css$k = ".custom-checkbox {\n display: flex;\n align-items: center;\n}\n.custom-checkbox input[type=checkbox] {\n /* Hide the default checkbox */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-inline-end: 8px;\n border: 2px solid #000000;\n border-radius: 4px;\n background-color: #ffffff;\n cursor: pointer;\n position: relative;\n /* Create the white tick mark */\n}\n.custom-checkbox input[type=checkbox]:checked {\n background-color: #000000;\n}\n.custom-checkbox input[type=checkbox]:checked::after {\n content: \"\";\n position: absolute;\n top: 0;\n inset-inline-start: 5px;\n width: 5px;\n height: 10px;\n border: solid #ffffff;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n.custom-checkbox input[type=checkbox]:focus {\n outline: none;\n box-shadow: 0 0 3px #000000;\n}\n.custom-checkbox .checkbox-label {\n font-size: 14px;\n color: #000000; /* Adjust the text color if needed */\n}";
120
120
  n(css$k,{});
121
121
 
122
122
  const Checkbox = ({ label, checked = false, onChange, className = '', checkboxClassName = '', labelClassName = '', ...rest }) => {
@@ -21871,7 +21871,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) =>
21871
21871
  React__default.createElement("div", { className: "counts" }, tab?.count))))))));
21872
21872
  };
21873
21873
 
21874
- var css$9 = ".dropdown {\n width: 100%;\n border: 0.0625rem solid #686868;\n height: 3.5rem;\n border-radius: 0.5rem;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n position: relative;\n cursor: pointer;\n z-index: 1;\n}\n\n.astreik {\n color: #eb0542;\n}\n\n.dropdownLabel {\n position: absolute;\n z-index: 2;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.placeholder {\n color: #686868;\n}\n\n.dropPosition {\n position: relative;\n}\n\n.zIndexProp {\n z-index: 0;\n}\n\n.dropdownValues {\n border: 0.0625rem solid #e1e1e1;\n box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n border-radius: 0.5rem;\n margin-top: 0.3125rem;\n position: absolute;\n width: 100%;\n z-index: 9;\n}\n\n.unselectedText {\n background: #ffffff;\n min-height: 3.24rem;\n padding: 1rem;\n color: #686868;\n cursor: pointer;\n}\n\n.value {\n color: #000000;\n}\n\n.unselectedText:hover {\n background: #e1e1e1;\n color: #000000;\n font-weight: 700 !important;\n}\n\n.backdropDropdown {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 4;\n}\n\n.dropdown select {\n background: transparent;\n width: 10.625rem;\n padding: 0.5rem;\n border: 0;\n border-radius: 0;\n height: 2.1875rem;\n}\n\n.bold {\n font-weight: 700;\n}";
21874
+ var css$9 = ".dropdown {\n width: 100%;\n border: 0.0625rem solid #686868;\n height: 3.5rem;\n border-radius: 0.5rem;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n position: relative;\n cursor: pointer;\n z-index: 1;\n}\n\n.astreik {\n color: #eb0542;\n}\n\n.dropdownLabel {\n position: absolute;\n z-index: 2;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.placeholder {\n color: #686868;\n}\n\n.dropPosition {\n position: relative;\n}\n\n.zIndexProp {\n z-index: 0;\n}\n\n.dropdownValues {\n border: 0.0625rem solid #e1e1e1;\n box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n border-radius: 0.5rem;\n margin-top: 0.3125rem;\n position: absolute;\n width: 100%;\n z-index: 9;\n max-height: 30vh;\n overflow-y: auto;\n}\n\n.unselectedText {\n background: #ffffff;\n min-height: 3.24rem;\n padding: 1rem;\n color: #686868;\n cursor: pointer;\n}\n\n.value {\n color: #000000;\n}\n\n.unselectedText:hover {\n background: #e1e1e1;\n color: #000000;\n font-weight: 700 !important;\n}\n\n.backdropDropdown {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 4;\n}\n\n.dropdown select {\n background: transparent;\n width: 10.625rem;\n padding: 0.5rem;\n border: 0;\n border-radius: 0;\n height: 2.1875rem;\n}\n\n.bold {\n font-weight: 700;\n}";
21875
21875
  n(css$9,{});
21876
21876
 
21877
21877
  function Dropdown(props) {
@@ -22088,7 +22088,7 @@ const Menu = (props) => {
22088
22088
  " "))));
22089
22089
  };
22090
22090
 
22091
- var css$3 = ".toast {\n display: flex;\n align-items: center;\n position: fixed;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n color: #fff;\n border-radius: 8px;\n z-index: 10000 !important;\n opacity: 1;\n top: 127px;\n padding: 0 1rem;\n}\n.toast .icon {\n margin-inline-end: 10px;\n margin-top: 5px;\n}\n.toast .icon1 {\n margin-inline-end: 10px;\n margin-top: 5px;\n background: none;\n border: none;\n}\n.toast .text {\n flex-grow: 1;\n text-align: start;\n}\n.toast .undo {\n color: #fff;\n background: none;\n border: none;\n text-decoration: underline;\n cursor: pointer;\n margin-inline-start: auto; /* Pushes the undo button to the right */\n padding: 0;\n float: inline-end;\n}\n.toast .suggestion-item {\n padding: 20px 8px 16px 0;\n cursor: pointer;\n text-align: start;\n}\n.toast .progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n transition: width 0.1s linear;\n}\n.toast.successMain {\n background-color: #008256;\n}\n.toast .successProgress {\n background-color: #024324;\n}\n.toast.errorMain {\n background-color: #dc3545;\n}\n.toast .errorProgress {\n background-color: #c82333;\n}";
22091
+ var css$3 = ".toast {\n display: flex;\n align-items: center;\n position: fixed;\n inset-inline: 30%;\n color: #fff;\n border-radius: 8px;\n z-index: 10000 !important;\n opacity: 1;\n top: 127px;\n padding: 0 1rem;\n}\n.toast .icon {\n margin-inline-end: 10px;\n margin-top: 5px;\n}\n.toast .icon1 {\n margin-inline-end: 10px;\n margin-top: 5px;\n background: none;\n border: none;\n}\n.toast .text {\n flex-grow: 1;\n text-align: start;\n}\n.toast .undo {\n color: #fff;\n background: none;\n border: none;\n text-decoration: underline;\n cursor: pointer;\n margin-inline-start: auto; /* Pushes the undo button to the right */\n padding: 0;\n float: inline-end;\n}\n.toast .suggestion-item {\n padding: 20px 8px 16px 0;\n cursor: pointer;\n text-align: start;\n}\n.toast .progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n transition: width 0.1s linear;\n}\n.toast.successMain {\n background-color: #008256;\n}\n.toast .successProgress {\n background-color: #024324;\n}\n.toast.errorMain {\n background-color: #dc3545;\n}\n.toast .errorProgress {\n background-color: #c82333;\n}";
22092
22092
  n(css$3,{});
22093
22093
 
22094
22094
  const Toast = ({ icon, text, onActionText, onAction, onHide, type, className, duration, showCrossIcon, crossIcon }) => {
package/dist/index.js CHANGED
@@ -139,7 +139,7 @@ const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/"
139
139
  index < items.length - 1 && (React__namespace.default.createElement("span", { className: `${'separator'} ${separatorClassName}` }, separator)))))));
140
140
  };
141
141
 
142
- var css$k = ".custom-checkbox {\n display: flex;\n align-items: center;\n}\n.custom-checkbox input[type=checkbox] {\n /* Hide the default checkbox */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 8px;\n border: 2px solid #000000;\n border-radius: 4px;\n background-color: #ffffff;\n cursor: pointer;\n position: relative;\n /* Create the white tick mark */\n}\n.custom-checkbox input[type=checkbox]:checked {\n background-color: #000000;\n}\n.custom-checkbox input[type=checkbox]:checked::after {\n content: \"\";\n position: absolute;\n top: 0;\n inset-inline-start: 5px;\n width: 5px;\n height: 10px;\n border: solid #ffffff;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n.custom-checkbox input[type=checkbox]:focus {\n outline: none;\n box-shadow: 0 0 3px #000000;\n}\n.custom-checkbox .checkbox-label {\n font-size: 14px;\n color: #000000; /* Adjust the text color if needed */\n}";
142
+ var css$k = ".custom-checkbox {\n display: flex;\n align-items: center;\n}\n.custom-checkbox input[type=checkbox] {\n /* Hide the default checkbox */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-inline-end: 8px;\n border: 2px solid #000000;\n border-radius: 4px;\n background-color: #ffffff;\n cursor: pointer;\n position: relative;\n /* Create the white tick mark */\n}\n.custom-checkbox input[type=checkbox]:checked {\n background-color: #000000;\n}\n.custom-checkbox input[type=checkbox]:checked::after {\n content: \"\";\n position: absolute;\n top: 0;\n inset-inline-start: 5px;\n width: 5px;\n height: 10px;\n border: solid #ffffff;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n.custom-checkbox input[type=checkbox]:focus {\n outline: none;\n box-shadow: 0 0 3px #000000;\n}\n.custom-checkbox .checkbox-label {\n font-size: 14px;\n color: #000000; /* Adjust the text color if needed */\n}";
143
143
  n(css$k,{});
144
144
 
145
145
  const Checkbox = ({ label, checked = false, onChange, className = '', checkboxClassName = '', labelClassName = '', ...rest }) => {
@@ -21894,7 +21894,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, wrapperClassName }) =>
21894
21894
  React__namespace.default.createElement("div", { className: "counts" }, tab?.count))))))));
21895
21895
  };
21896
21896
 
21897
- var css$9 = ".dropdown {\n width: 100%;\n border: 0.0625rem solid #686868;\n height: 3.5rem;\n border-radius: 0.5rem;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n position: relative;\n cursor: pointer;\n z-index: 1;\n}\n\n.astreik {\n color: #eb0542;\n}\n\n.dropdownLabel {\n position: absolute;\n z-index: 2;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.placeholder {\n color: #686868;\n}\n\n.dropPosition {\n position: relative;\n}\n\n.zIndexProp {\n z-index: 0;\n}\n\n.dropdownValues {\n border: 0.0625rem solid #e1e1e1;\n box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n border-radius: 0.5rem;\n margin-top: 0.3125rem;\n position: absolute;\n width: 100%;\n z-index: 9;\n}\n\n.unselectedText {\n background: #ffffff;\n min-height: 3.24rem;\n padding: 1rem;\n color: #686868;\n cursor: pointer;\n}\n\n.value {\n color: #000000;\n}\n\n.unselectedText:hover {\n background: #e1e1e1;\n color: #000000;\n font-weight: 700 !important;\n}\n\n.backdropDropdown {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 4;\n}\n\n.dropdown select {\n background: transparent;\n width: 10.625rem;\n padding: 0.5rem;\n border: 0;\n border-radius: 0;\n height: 2.1875rem;\n}\n\n.bold {\n font-weight: 700;\n}";
21897
+ var css$9 = ".dropdown {\n width: 100%;\n border: 0.0625rem solid #686868;\n height: 3.5rem;\n border-radius: 0.5rem;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n position: relative;\n cursor: pointer;\n z-index: 1;\n}\n\n.astreik {\n color: #eb0542;\n}\n\n.dropdownLabel {\n position: absolute;\n z-index: 2;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.placeholder {\n color: #686868;\n}\n\n.dropPosition {\n position: relative;\n}\n\n.zIndexProp {\n z-index: 0;\n}\n\n.dropdownValues {\n border: 0.0625rem solid #e1e1e1;\n box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n border-radius: 0.5rem;\n margin-top: 0.3125rem;\n position: absolute;\n width: 100%;\n z-index: 9;\n max-height: 30vh;\n overflow-y: auto;\n}\n\n.unselectedText {\n background: #ffffff;\n min-height: 3.24rem;\n padding: 1rem;\n color: #686868;\n cursor: pointer;\n}\n\n.value {\n color: #000000;\n}\n\n.unselectedText:hover {\n background: #e1e1e1;\n color: #000000;\n font-weight: 700 !important;\n}\n\n.backdropDropdown {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 4;\n}\n\n.dropdown select {\n background: transparent;\n width: 10.625rem;\n padding: 0.5rem;\n border: 0;\n border-radius: 0;\n height: 2.1875rem;\n}\n\n.bold {\n font-weight: 700;\n}";
21898
21898
  n(css$9,{});
21899
21899
 
21900
21900
  function Dropdown(props) {
@@ -22111,7 +22111,7 @@ const Menu = (props) => {
22111
22111
  " "))));
22112
22112
  };
22113
22113
 
22114
- var css$3 = ".toast {\n display: flex;\n align-items: center;\n position: fixed;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n color: #fff;\n border-radius: 8px;\n z-index: 10000 !important;\n opacity: 1;\n top: 127px;\n padding: 0 1rem;\n}\n.toast .icon {\n margin-inline-end: 10px;\n margin-top: 5px;\n}\n.toast .icon1 {\n margin-inline-end: 10px;\n margin-top: 5px;\n background: none;\n border: none;\n}\n.toast .text {\n flex-grow: 1;\n text-align: start;\n}\n.toast .undo {\n color: #fff;\n background: none;\n border: none;\n text-decoration: underline;\n cursor: pointer;\n margin-inline-start: auto; /* Pushes the undo button to the right */\n padding: 0;\n float: inline-end;\n}\n.toast .suggestion-item {\n padding: 20px 8px 16px 0;\n cursor: pointer;\n text-align: start;\n}\n.toast .progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n transition: width 0.1s linear;\n}\n.toast.successMain {\n background-color: #008256;\n}\n.toast .successProgress {\n background-color: #024324;\n}\n.toast.errorMain {\n background-color: #dc3545;\n}\n.toast .errorProgress {\n background-color: #c82333;\n}";
22114
+ var css$3 = ".toast {\n display: flex;\n align-items: center;\n position: fixed;\n inset-inline: 30%;\n color: #fff;\n border-radius: 8px;\n z-index: 10000 !important;\n opacity: 1;\n top: 127px;\n padding: 0 1rem;\n}\n.toast .icon {\n margin-inline-end: 10px;\n margin-top: 5px;\n}\n.toast .icon1 {\n margin-inline-end: 10px;\n margin-top: 5px;\n background: none;\n border: none;\n}\n.toast .text {\n flex-grow: 1;\n text-align: start;\n}\n.toast .undo {\n color: #fff;\n background: none;\n border: none;\n text-decoration: underline;\n cursor: pointer;\n margin-inline-start: auto; /* Pushes the undo button to the right */\n padding: 0;\n float: inline-end;\n}\n.toast .suggestion-item {\n padding: 20px 8px 16px 0;\n cursor: pointer;\n text-align: start;\n}\n.toast .progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n transition: width 0.1s linear;\n}\n.toast.successMain {\n background-color: #008256;\n}\n.toast .successProgress {\n background-color: #024324;\n}\n.toast.errorMain {\n background-color: #dc3545;\n}\n.toast .errorProgress {\n background-color: #c82333;\n}";
22115
22115
  n(css$3,{});
22116
22116
 
22117
22117
  const Toast = ({ icon, text, onActionText, onAction, onHide, type, className, duration, showCrossIcon, crossIcon }) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dhre-component-lib",
3
- "version": "0.8.17",
3
+ "version": "0.8.18",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "test": "jest",