esewa-ui-library 1.0.1 → 1.0.2
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.modern.js
CHANGED
|
@@ -83,7 +83,7 @@ var ESewaCard = function ESewaCard(_ref) {
|
|
|
83
83
|
};
|
|
84
84
|
|
|
85
85
|
var _templateObject$2;
|
|
86
|
-
var StyledAlert = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .alert-card {\n display: flex;\n flex-direction: column;\n gap: var(--values-value-8);\n\n &--header {\n display: flex;\n align-items: center;\n gap: var(--values-value-10);\n &--icon{\n font-size: 28px;\n }\n &--title {\n flex: 1;\n }\n &--dismiss-icon {\n cursor: pointer;\n font-size: 16px;\n }\n }\n\n &.success {\n background-color: var(--success-bg-light);\n\n * {\n color: var(--primary);\n }\n }\n\n &.warning {\n background-color: var(--warning-bg-light);\n\n * {\n color: var(--warning);\n }\n }\n\n &.error {\n background-color: var(--danger-bg-light);\n\n * {\n color: var(--danger);\n }\n }\n\n &.info {\n background-color: var(--info-bg-light);\n * {\n color: var(--info);\n }\n }\n }\n"])));
|
|
86
|
+
var StyledAlert = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .alert-card {\n display: flex;\n flex-direction: column;\n gap: var(--values-value-8);\n border-radius: var(--values-value-8);\n\n &--header {\n display: flex;\n align-items: center;\n gap: var(--values-value-10);\n &--icon{\n display: flex;\n font-size: 28px;\n }\n &--title {\n flex: 1;\n }\n &--dismiss-icon {\n display: flex;\n cursor: pointer;\n font-size: 16px;\n line-height: 16px;\n }\n }\n\n &.success {\n background-color: var(--success-bg-light);\n\n * {\n color: var(--primary);\n }\n }\n\n &.warning {\n background-color: var(--warning-bg-light);\n\n * {\n color: var(--warning);\n }\n }\n\n &.error {\n background-color: var(--danger-bg-light);\n\n * {\n color: var(--danger);\n }\n }\n\n &.info {\n background-color: var(--info-bg-light);\n * {\n color: var(--info);\n }\n }\n }\n"])));
|
|
87
87
|
var ESewaAlertCard = function ESewaAlertCard(_ref) {
|
|
88
88
|
var alertCardClass = _ref.alertCardClass,
|
|
89
89
|
_ref$variant = _ref.variant,
|
|
@@ -565,7 +565,7 @@ var ESewaImage = function ESewaImage(_ref2) {
|
|
|
565
565
|
|
|
566
566
|
var _excluded$2 = ["type", "name", "label", "placeholder", "value", "checked", "min", "max", "step", "required", "readOnly", "disabled", "className", "onChange", "validationMessage", "autoFocus"];
|
|
567
567
|
var _templateObject$a;
|
|
568
|
-
var StyledInput = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n .flex-auto {\n flex: 1 1 auto !important;\n }\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: ", ";\n }\n\n input {\n flex-grow: 1;\n border-radius: var(--values-value-8); \n padding: var(--values-value-
|
|
568
|
+
var StyledInput = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n .flex-auto {\n flex: 1 1 auto !important;\n }\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: ", ";\n }\n\n input {\n flex-grow: 1;\n border-radius: var(--values-value-8); \n padding: var(--values-value-10) var(--values-value-12);\n color: var(--text-dark);\n background: var(--input-bg);\n transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n box-shadow 0.2s;\n appearance: none;\n outline-color: transparent;\n height: 48px;\n border: 1px solid var(--default-input-border);\n box-sizing: border-box;\n\n &::placeholder {\n color: var(--input-placeholder);\n letter-spacing: 0.5px;\n font-weight: 400;\n opacity: 1;\n }\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n &.error {\n border-color: var(--danger-border);\n outline: none;\n }\n\n ::-ms-input-placeholder {\n color: var(--input-placeholder);\n font-weight: 400;\n letter-spacing: 0.5px;\n font-size: 16px;\n line-height: 20px;\n }\n }\n\n .validationMessage {\n color: var(--danger-text);\n }\n"])), function (props) {
|
|
569
569
|
return props.theme['text-dark'];
|
|
570
570
|
});
|
|
571
571
|
var ESewaInputField = forwardRef(function (_ref, ref) {
|
|
@@ -618,8 +618,8 @@ var ESewaInputField = forwardRef(function (_ref, ref) {
|
|
|
618
618
|
|
|
619
619
|
var _excluded$3 = ["name", "label", "placeholder", "value", "maxLength", "rows", "required", "readOnly", "disabled", "className", "onChange", "validationMessage"];
|
|
620
620
|
var _templateObject$b;
|
|
621
|
-
var StyledTextArea = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n .text-area {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 16px;\n\n .flex-auto {\n flex: 1 1 auto !important;\n }\n\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: var(--text-dark);\n }\n\n .validationMessage {\n font-weight: 400;\n font-size: 12px;\n line-height: 15px;\n letter-spacing: 0.4px;\n color: var(--danger-text);\n }\n\n textarea {\n flex-grow: 1;\n border-radius:
|
|
622
|
-
var ESewaInputFeildTextArea = function
|
|
621
|
+
var StyledTextArea = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n .text-area {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 16px;\n\n .flex-auto {\n flex: 1 1 auto !important;\n }\n\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: var(--text-dark);\n }\n\n .validationMessage {\n font-weight: 400;\n font-size: 12px;\n line-height: 15px;\n letter-spacing: 0.4px;\n color: var(--danger-text);\n }\n\n textarea {\n flex-grow: 1;\n border-radius: var(--values-value-8);\n padding: var(--values-value-10) var(--values-value-12);\n color: var(--text-dark);\n background: var(--input-bg);\n transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n box-shadow 0.2s;\n appearance: none;\n outline-color: transparent;\n border: 1px solid var(--default-input-border);\n box-sizing: border-box;\n font-family: \"Source Sans Pro\", sans-serif;\n\n &::placeholder {\n color: var(--input-placeholder);\n letter-spacing: 0.5px;\n font-weight: 500;\n opacity: 1;\n }\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n &.error {\n border-color: var(--danger);\n outline: none;\n }\n\n ::-ms-input-placeholder {\n color: var(--input-placeholder);\n font-weight: 400;\n letter-spacing: 0.5px;\n font-size: 16px;\n line-height: 20px;\n }\n }\n }\n"])));
|
|
622
|
+
var ESewaInputFeildTextArea = forwardRef(function (_ref, ref) {
|
|
623
623
|
var name = _ref.name,
|
|
624
624
|
label = _ref.label,
|
|
625
625
|
placeholder = _ref.placeholder,
|
|
@@ -643,6 +643,7 @@ var ESewaInputFeildTextArea = function ESewaInputFeildTextArea(_ref) {
|
|
|
643
643
|
}, " *")), React__default.createElement("div", {
|
|
644
644
|
className: 'flex-auto full-width'
|
|
645
645
|
}, React__default.createElement("textarea", Object.assign({
|
|
646
|
+
ref: ref,
|
|
646
647
|
className: "body1 " + (validationMessage ? 'error' : ''),
|
|
647
648
|
value: value,
|
|
648
649
|
rows: rows,
|
|
@@ -655,10 +656,10 @@ var ESewaInputFeildTextArea = function ESewaInputFeildTextArea(_ref) {
|
|
|
655
656
|
}, rest))), validationMessage && React__default.createElement("div", {
|
|
656
657
|
className: 'caption validationMessage'
|
|
657
658
|
}, " ", validationMessage)));
|
|
658
|
-
};
|
|
659
|
+
});
|
|
659
660
|
|
|
660
661
|
var _templateObject$c;
|
|
661
|
-
var StyledMultiSelect = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n .multi-select {\n position: relative;\n width: auto;\n\n &__toggle {\n border: 1px solid var(--default-input-border);\n padding:
|
|
662
|
+
var StyledMultiSelect = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n .multi-select {\n position: relative;\n width: auto;\n\n &__toggle {\n border: 1px solid var(--default-input-border);\n padding: var(--values-value-10) var(--values-value-12);\n cursor: pointer;\n border-radius: 8px;\n background-color: var(--input-bg);\n transition: border-color 0.2s;\n user-select: none;\n color: var(--input-placeholder);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n height: 48px;\n display: flex;\n align-items: center;\n &:hover {\n border-color: var(--input-bg);\n }\n }\n\n &__dropdown {\n position: absolute;\n top: 52px;\n left: 0;\n right: 0;\n border-radius: 8px;\n background-color: var(--card-bg);\n max-height: 200px;\n overflow-y: auto;\n z-index: 1000;\n box-shadow: var(--shadow--2--umbra);\n border: 1px solid var(--default-input-border);\n padding: 8px 0;\n animation: fadeIn 0.2s ease-in-out;\n min-width: 100%;\n }\n\n &__dropdown-inner {\n padding: 8px;\n width: 100%;\n box-sizing: border-box;\n }\n\n &__search {\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n margin-bottom: 5px;\n border: 1px solid var(--default-input-border);\n background-color: var(--input-bg);\n transition: border-color 0.2s;\n user-select: none;\n color: var(--input-placeholder);\n box-sizing: border-box;\n &::placeholder {\n color: var(--input-placeholder);\n letter-spacing: -0.5px;\n font-weight: 500;\n opacity: 1;\n }\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n &.error {\n border-color: var(--danger);\n outline: none;\n }\n }\n\n &__option {\n display: flex;\n align-items: center;\n padding: 8px 0;\n cursor: pointer;\n\n &:hover {\n background-color: var(--success-bg-light);\n }\n\n input {\n position: relative;\n margin-right: 8px;\n\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background-color: var(--default-input-border);\n border: 2px solid var(--default-input-border);\n transition: background-color 0.3s ease, border-color 0.3s ease;\n }\n\n input:checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n\n input:checked::after {\n content: '\u2714';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 10px;\n color: white;\n }\n }\n\n &__no-options {\n padding: 10px;\n color: #999;\n text-align: center;\n }\n }\n"])));
|
|
662
663
|
var ESewaMultiSelect = function ESewaMultiSelect(_ref) {
|
|
663
664
|
var options = _ref.options,
|
|
664
665
|
onChange = _ref.onChange,
|
|
@@ -7140,7 +7141,7 @@ var ESIcon = function ESIcon(_ref) {
|
|
|
7140
7141
|
};
|
|
7141
7142
|
|
|
7142
7143
|
var _templateObject$n;
|
|
7143
|
-
var StylesSelect = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n .select-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 16px;\n\n .flex-auto {\n flex: 1 1 auto !important;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: var(--text-dark);\n\n .required {\n color: var(--primary);\n }\n }\n\n select {\n flex-grow: 1;\n border-radius: var(--values-value-8); \n font-size: 16px;\n color:
|
|
7144
|
+
var StylesSelect = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n .select-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 16px;\n\n .flex-auto {\n flex: 1 1 auto !important;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: var(--text-dark);\n\n .required {\n color: var(--primary);\n }\n }\n\n select {\n flex-grow: 1;\n border-radius: var(--values-value-8); \n font-size: 16px;\n color: var(--text-dark);\n padding: var(--values-value-10) var(--values-value-12);\n background: rgba(28, 37, 46, 0.03);\n transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n box-shadow 0.2s;\n appearance: none;\n letter-spacing: 0.5px;\n line-height: 22px;\n outline-color: transparent;\n border: 1px solid var(--default-input-border);\n height: 48px;\n box-sizing: border-box;\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n\n ::placeholder {\n color: var(--input-placeholder);\n letter-spacing: 0.5px;\n font-weight: 500;\n opacity: 1;\n }\n\n ::-ms-input-placeholder {\n color: var(--input-placeholder);\n font-weight: 500;\n letter-spacing: 0.5px;\n }\n }\n\n .validationMessage {\n font-weight: 400;\n font-size: 12px;\n line-height: 15px;\n letter-spacing: 0.4px;\n color: var(--danger-text);\n }\n }\n"])));
|
|
7144
7145
|
var ESewaSelectNative = function ESewaSelectNative(_ref) {
|
|
7145
7146
|
var placeholder = _ref.placeholder,
|
|
7146
7147
|
_ref$options = _ref.options,
|