esewa-ui-library 1.0.2 → 1.0.3

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.
@@ -250,7 +250,7 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
250
250
  };
251
251
 
252
252
  var _templateObject$4;
253
- var StyledCheckBox = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n .container {\n display: flex;\n align-items: flex-start;\n position: relative;\n padding-left: 24px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n .checkmark {\n position: absolute;\n top: 8%;\n left: 0;\n height: 16px;\n width: 16px;\n // transform: translateY(-50%);\n background-color: var(--gray-50);\n border-radius: var(--grid-borderradius-border-radius-xxxs);\n }\n\n .container:hover input:not(:disabled) ~ .checkmark {\n background-color: var(--text-dark);\n }\n\n .container input:checked ~ .checkmark {\n background-color: var(--primary-500);\n }\n\n .checkmark:after {\n content: '';\n position: absolute;\n display: none;\n }\n\n /* Show the checkmark when checked */\n .container input:checked ~ .checkmark:after {\n display: block;\n }\n\n /* Style the checkmark/indicator */\n .container .checkmark:after {\n left: 5px;\n top: 2px;\n width: 3px;\n height: 8px;\n border: solid var(--white);\n border-width: 0 3px 2px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n }\n\n .container.disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .container input:disabled ~ .checkmark {\n background-color: var(--gray-200);\n }\n"])));
253
+ var StyledCheckBox = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n .container {\n display: flex;\n align-items: flex-start;\n position: relative;\n padding-left: 24px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n .checkmark {\n position: absolute;\n top: 8%;\n left: 0;\n height: 16px;\n width: 16px;\n // transform: translateY(-50%);\n background-color: var(--gray-50);\n border-radius: var(--grid-borderradius-border-radius-xxxs);\n }\n\n .container input:checked ~ .checkmark {\n background-color: var(--primary-500);\n }\n\n .checkmark:after {\n content: '';\n position: absolute;\n display: none;\n }\n\n /* Show the checkmark when checked */\n .container input:checked ~ .checkmark:after {\n display: block;\n content: '\uEA58';\n }\n\n /* Style the checkmark/indicator */\n .container .checkmark:after {\n font-family: 'esewa-font';\n content: '';\n left: 1px;\n top: -4px;\n width: 4px;\n height: 8px;\n color:var(--white);\n }\n\n .container.disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .container input:disabled ~ .checkmark {\n background-color: var(--gray-200);\n }\n"])));
254
254
  var ESewaCheckbox = function ESewaCheckbox(_ref) {
255
255
  var label = _ref.label,
256
256
  className = _ref.className,
@@ -659,7 +659,7 @@ var ESewaInputFeildTextArea = forwardRef(function (_ref, ref) {
659
659
  });
660
660
 
661
661
  var _templateObject$c;
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
+ 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: 8px;\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;\n cursor: pointer;\n\n &:hover {\n background-color: var(--success-bg-light);\n border-radius: 8px;\n }\n\n input {\n font-family: 'esewa-font';\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: '\uEA58';\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"])));
663
663
  var ESewaMultiSelect = function ESewaMultiSelect(_ref) {
664
664
  var options = _ref.options,
665
665
  onChange = _ref.onChange,
@@ -2738,7 +2738,7 @@ var ESewaRating = function ESewaRating(_ref) {
2738
2738
  };
2739
2739
  return React__default.createElement(StyledRating, null, React__default.createElement("div", {
2740
2740
  className: "rating " + className
2741
- }, React__default.createElement("div", null, renderStars()), count && React__default.createElement("span", {
2741
+ }, renderStars(), count && React__default.createElement("span", {
2742
2742
  className: 'rating-count'
2743
2743
  }, "(", count, ")")));
2744
2744
  };