@mexi/uikit 0.0.9 → 0.0.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/dist/index.cjs.js +11 -10
  2. package/dist/index.esm.js +11 -10
  3. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -230,7 +230,7 @@ var styleVariants$2 = (_b$3 = {},
230
230
  color: "primary",
231
231
  },
232
232
  _b$3[variants$6.SUBTLE] = {
233
- backgroundColor: "textSubtle",
233
+ backgroundColor: "#4AC7D5",
234
234
  color: "backgroundAlt",
235
235
  },
236
236
  _b$3[variants$6.DANGER] = {
@@ -269,7 +269,7 @@ var getOpacity = function (_a) {
269
269
  var _b = _a.$isLoading, $isLoading = _b === void 0 ? false : _b;
270
270
  return $isLoading ? ".5" : "1";
271
271
  };
272
- var StyledButton = styled__default['default'].button(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ",
272
+ var StyledButton = styled__default['default'].button(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n text-transform: uppercase;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n text-transform: uppercase;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ",
273
273
  "\n ",
274
274
  "\n ", "\n ", "\n"])), getOpacity, getDisabledStyles, styledSystem.variant({
275
275
  prop: "scale",
@@ -1993,7 +1993,7 @@ var templateObject_1$T, templateObject_2$v, templateObject_3$c, templateObject_4
1993
1993
 
1994
1994
  var PriceLink = styled__default['default'].a(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n svg {\n transition: transform 0.3s;\n }\n :hover {\n svg {\n transform: scale(1.2);\n }\n }\n"], ["\n display: flex;\n align-items: center;\n svg {\n transition: transform 0.3s;\n }\n :hover {\n svg {\n transform: scale(1.2);\n }\n }\n"])));
1995
1995
  var CakePrice = function (_a) {
1996
- var cakePriceUsd = _a.cakePriceUsd, _b = _a.color, color = _b === void 0 ? "textSubtle" : _b;
1996
+ var cakePriceUsd = _a.cakePriceUsd, _b = _a.color, color = _b === void 0 ? "#fff" : _b;
1997
1997
  return cakePriceUsd ? (React__default['default'].createElement(PriceLink, { href: "https://pancakeswap.finance/swap?inputCurrency=0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c&outputCurrency=0x70D8d5B3416888fD05e806195312DD2D9597d50C", target: "_blank" },
1998
1998
  React__default['default'].createElement(Icon$16, { width: "24px", mr: "8px" }),
1999
1999
  React__default['default'].createElement(Text, { ml: "4px", color: color, bold: true }, "$" + cakePriceUsd.toFixed(6)))) : (React__default['default'].createElement(Skeleton, { width: 80, height: 24 }));
@@ -2881,30 +2881,32 @@ var bunnyHeadMax = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%223
2881
2881
 
2882
2882
  var bunnyButt = "data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2232%22%20viewBox%3D%220%200%2015%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.58803%2020.8649C7.72935%2021.3629%208.02539%2024.0334%208.76388%2026.7895C9.50238%2029.5456%2010.5812%2032.0062%2012.4399%2031.5082C14.2986%2031.0102%2015.2334%2028.0099%2014.4949%2025.2538C13.7564%2022.4978%2011.4467%2020.3669%209.58803%2020.8649Z%22%20fill%3D%22%230098A1%22%2F%3E%3Cpath%20d%3D%22M1%2024.4516C1%2020.8885%203.88849%2018%207.45161%2018H15V28H4.54839C2.58867%2028%201%2026.4113%201%2024.4516Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3Cpath%20d%3D%22M6.11115%2017.2246C6.79693%2018.4124%205.77784%2019.3343%204.52793%2020.0559C3.27802%2020.7776%201.97011%2021.1992%201.28433%2020.0114C0.598546%2018.8236%201.1635%2017.1151%202.41341%2016.3935C3.66332%2015.6718%205.42537%2016.0368%206.11115%2017.2246Z%22%20fill%3D%22%2353DEE9%22%2F%3E%3Cpath%20d%3D%22M1.64665%2023.6601C0.285995%2025.0207%201.87759%2027.1854%203.89519%2029.203C5.91279%2031.2206%208.07743%2032.8122%209.43808%2031.4515C10.7987%2030.0909%2010.1082%2027.0252%208.09058%2025.0076C6.07298%2022.99%203.0073%2022.2994%201.64665%2023.6601Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3C%2Fsvg%3E";
2883
2883
 
2884
+ var rectangle = "data:image/svg+xml,%3Csvg%20width%3D%2231%22%20height%3D%2232%22%20viewBox%3D%220%200%2031%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.5033%202.01304L2.01172%2015.5046L15.5033%2028.9962L28.9949%2015.5046L15.5033%202.01304Z%22%20fill%3D%22%234AC7D5%22%2F%3E%3Cpath%20d%3D%22M15.3643%200.464783L0%2015.8291L15.3643%2031.1934L30.7286%2015.8291L15.3643%200.464783Z%22%20fill%3D%22%23238E9A%22%2F%3E%3Cpath%20d%3D%22M15.3702%200.470581L1.21094%2014.6299L15.3702%2028.7892L29.5295%2014.6299L15.3702%200.470581Z%22%20fill%3D%22%2362DEEC%22%2F%3E%3Cpath%20d%3D%22M15.3631%203.9345L4.50195%2014.7957L15.3631%2025.6568L26.2243%2014.7957L15.3631%203.9345Z%22%20fill%3D%22%234AC7D5%22%2F%3E%3C%2Fsvg%3E";
2885
+
2884
2886
  var getCursorStyle = function (_a) {
2885
2887
  var _b = _a.disabled, disabled = _b === void 0 ? false : _b;
2886
2888
  return disabled ? "not-allowed" : "cursor";
2887
2889
  };
2888
2890
  var getBaseThumbStyles = function (_a) {
2889
2891
  var isMax = _a.isMax, disabled = _a.disabled;
2890
- return "\n -webkit-appearance: none;\n background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 24px;\n height: 32px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1) translate(-2px, -2px)" : "scale(1.1) translate(-3px, -3px)") + ";\n }\n";
2892
+ return "\n -webkit-appearance: none;\n // background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-image: url(" + rectangle + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 31px;\n height: 31px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n // transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1)" : "scale(1.1)") + ";\n }\n";
2891
2893
  };
2892
2894
  var SliderLabelContainer = styled__default['default'].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"], ["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"])));
2893
2895
  var SliderLabel = styled__default['default'](Text)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"], ["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"])), function (_a) {
2894
2896
  var progress = _a.progress;
2895
2897
  return progress;
2896
2898
  });
2897
- var BunnyButt = styled__default['default'].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"], ["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"])), bunnyButt, function (_a) {
2899
+ styled__default['default'].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"], ["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"])), bunnyButt, function (_a) {
2898
2900
  var disabled = _a.disabled;
2899
2901
  return (disabled ? "grayscale(100%)" : "none");
2900
2902
  });
2901
- var BunnySlider = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n left: 14px;\n width: calc(100% - 14px);\n"], ["\n position: absolute;\n left: 14px;\n width: calc(100% - 14px);\n"])));
2903
+ var BunnySlider = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n /* left: 14px; */\n /* width: calc(100% - 14px); */\n"], ["\n position: absolute;\n width: 100%;\n /* left: 14px; */\n /* width: calc(100% - 14px); */\n"])));
2902
2904
  var StyledInput = styled__default['default'].input(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n cursor: ", ";\n height: 32px;\n position: relative;\n\n ::-webkit-slider-thumb {\n ", "\n }\n\n ::-moz-range-thumb {\n ", "\n }\n\n ::-ms-thumb {\n ", "\n }\n"], ["\n cursor: ", ";\n height: 32px;\n position: relative;\n\n ::-webkit-slider-thumb {\n ", "\n }\n\n ::-moz-range-thumb {\n ", "\n }\n\n ::-ms-thumb {\n ", "\n }\n"])), getCursorStyle, getBaseThumbStyles, getBaseThumbStyles, getBaseThumbStyles);
2903
2905
  var BarBackground = styled__default['default'].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n background-color: ", ";\n height: 2px;\n position: absolute;\n top: 18px;\n width: 100%;\n"], ["\n background-color: ", ";\n height: 2px;\n position: absolute;\n top: 18px;\n width: 100%;\n"])), function (_a) {
2904
2906
  var theme = _a.theme, disabled = _a.disabled;
2905
2907
  return theme.colors[disabled ? "textDisabled" : "inputSecondary"];
2906
2908
  });
2907
- var BarProgress = styled__default['default'].div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n background-color: ", ";\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 18px;\n"], ["\n background-color: ", ";\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 18px;\n"])), function (_a) {
2909
+ var BarProgress = styled__default['default'].div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n /* background-color: ", "; */\n background-color: #4AC7D5;\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 14px;\n"], ["\n /* background-color: ", "; */\n background-color: #4AC7D5;\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 14px;\n"])), function (_a) {
2908
2910
  var theme = _a.theme;
2909
2911
  return theme.colors.primary;
2910
2912
  }, function (_a) {
@@ -2937,7 +2939,6 @@ var Slider = function (_a) {
2937
2939
  var labelProgress = isMax ? "calc(100% - 12px)" : progressPercentage + "%";
2938
2940
  var displayValueLabel = isMax ? "MAX" : valueLabel;
2939
2941
  return (React__default['default'].createElement(Box, __assign({ position: "relative", height: "48px" }, props),
2940
- React__default['default'].createElement(BunnyButt, { disabled: disabled }),
2941
2942
  React__default['default'].createElement(BunnySlider, null,
2942
2943
  React__default['default'].createElement(BarBackground, { disabled: disabled }),
2943
2944
  React__default['default'].createElement(BarProgress, { style: { width: progressWidth }, disabled: disabled }),
@@ -4648,13 +4649,13 @@ var DropdownMenu = function (_a) {
4648
4649
  };
4649
4650
  }, [targetRef, tooltipRef, hideTimeout, isHoveringOverTooltip, setIsOpen, openMenuTimeout, isOpen, isBottomNav]);
4650
4651
  React.useEffect(function () {
4651
- if (setMenuOpenByIndex && index !== undefined) {
4652
+ if (setMenuOpenByIndex && index !== undefined && showItemsOnMobile) {
4652
4653
  setMenuOpenByIndex(function (prevValue) {
4653
4654
  var _a;
4654
4655
  return (__assign(__assign({}, prevValue), (_a = {}, _a[index] = isOpen, _a)));
4655
4656
  });
4656
4657
  }
4657
- }, [isOpen, setMenuOpenByIndex, index]);
4658
+ }, [isOpen, setMenuOpenByIndex, index, showItemsOnMobile]);
4658
4659
  return (React__default['default'].createElement(Box, __assign({ style: { display: "flex", alignItems: "center" }, ref: isBottomNav ? null : setTargetRef }, props),
4659
4660
  React__default['default'].createElement(Box, { ref: isBottomNav ? setTargetRef : null }, children),
4660
4661
  hasItems && (React__default['default'].createElement(StyledDropdownMenu, __assign({ style: styles.popper, ref: setTooltipRef }, attributes.popper, { "$isBottomNav": isBottomNav, "$isOpen": isOpen && ((isBottomNav && showItemsOnMobile) || !isBottomNav) }), items
package/dist/index.esm.js CHANGED
@@ -196,7 +196,7 @@ var styleVariants$2 = (_b$3 = {},
196
196
  color: "primary",
197
197
  },
198
198
  _b$3[variants$6.SUBTLE] = {
199
- backgroundColor: "textSubtle",
199
+ backgroundColor: "#4AC7D5",
200
200
  color: "backgroundAlt",
201
201
  },
202
202
  _b$3[variants$6.DANGER] = {
@@ -235,7 +235,7 @@ var getOpacity = function (_a) {
235
235
  var _b = _a.$isLoading, $isLoading = _b === void 0 ? false : _b;
236
236
  return $isLoading ? ".5" : "1";
237
237
  };
238
- var StyledButton = styled.button(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ",
238
+ var StyledButton = styled.button(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n text-transform: uppercase;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n"], ["\n align-items: center;\n border: 0;\n border-radius: 16px;\n box-shadow: 0px -1px 0px 0px rgba(14, 14, 44, 0.4) inset;\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n justify-content: center;\n letter-spacing: 0.03em;\n line-height: 1;\n text-transform: uppercase;\n opacity: ", ";\n outline: 0;\n transition: background-color 0.2s, opacity 0.2s;\n\n &:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) {\n opacity: 0.65;\n }\n\n &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) {\n opacity: 0.85;\n transform: translateY(1px);\n box-shadow: none;\n }\n\n ", "\n ",
239
239
  "\n ",
240
240
  "\n ", "\n ", "\n"])), getOpacity, getDisabledStyles, variant$1({
241
241
  prop: "scale",
@@ -1959,7 +1959,7 @@ var templateObject_1$T, templateObject_2$v, templateObject_3$c, templateObject_4
1959
1959
 
1960
1960
  var PriceLink = styled.a(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n svg {\n transition: transform 0.3s;\n }\n :hover {\n svg {\n transform: scale(1.2);\n }\n }\n"], ["\n display: flex;\n align-items: center;\n svg {\n transition: transform 0.3s;\n }\n :hover {\n svg {\n transform: scale(1.2);\n }\n }\n"])));
1961
1961
  var CakePrice = function (_a) {
1962
- var cakePriceUsd = _a.cakePriceUsd, _b = _a.color, color = _b === void 0 ? "textSubtle" : _b;
1962
+ var cakePriceUsd = _a.cakePriceUsd, _b = _a.color, color = _b === void 0 ? "#fff" : _b;
1963
1963
  return cakePriceUsd ? (React__default.createElement(PriceLink, { href: "https://pancakeswap.finance/swap?inputCurrency=0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c&outputCurrency=0x70D8d5B3416888fD05e806195312DD2D9597d50C", target: "_blank" },
1964
1964
  React__default.createElement(Icon$16, { width: "24px", mr: "8px" }),
1965
1965
  React__default.createElement(Text, { ml: "4px", color: color, bold: true }, "$" + cakePriceUsd.toFixed(6)))) : (React__default.createElement(Skeleton, { width: 80, height: 24 }));
@@ -2847,30 +2847,32 @@ var bunnyHeadMax = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%223
2847
2847
 
2848
2848
  var bunnyButt = "data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2232%22%20viewBox%3D%220%200%2015%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.58803%2020.8649C7.72935%2021.3629%208.02539%2024.0334%208.76388%2026.7895C9.50238%2029.5456%2010.5812%2032.0062%2012.4399%2031.5082C14.2986%2031.0102%2015.2334%2028.0099%2014.4949%2025.2538C13.7564%2022.4978%2011.4467%2020.3669%209.58803%2020.8649Z%22%20fill%3D%22%230098A1%22%2F%3E%3Cpath%20d%3D%22M1%2024.4516C1%2020.8885%203.88849%2018%207.45161%2018H15V28H4.54839C2.58867%2028%201%2026.4113%201%2024.4516Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3Cpath%20d%3D%22M6.11115%2017.2246C6.79693%2018.4124%205.77784%2019.3343%204.52793%2020.0559C3.27802%2020.7776%201.97011%2021.1992%201.28433%2020.0114C0.598546%2018.8236%201.1635%2017.1151%202.41341%2016.3935C3.66332%2015.6718%205.42537%2016.0368%206.11115%2017.2246Z%22%20fill%3D%22%2353DEE9%22%2F%3E%3Cpath%20d%3D%22M1.64665%2023.6601C0.285995%2025.0207%201.87759%2027.1854%203.89519%2029.203C5.91279%2031.2206%208.07743%2032.8122%209.43808%2031.4515C10.7987%2030.0909%2010.1082%2027.0252%208.09058%2025.0076C6.07298%2022.99%203.0073%2022.2994%201.64665%2023.6601Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3C%2Fsvg%3E";
2849
2849
 
2850
+ var rectangle = "data:image/svg+xml,%3Csvg%20width%3D%2231%22%20height%3D%2232%22%20viewBox%3D%220%200%2031%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.5033%202.01304L2.01172%2015.5046L15.5033%2028.9962L28.9949%2015.5046L15.5033%202.01304Z%22%20fill%3D%22%234AC7D5%22%2F%3E%3Cpath%20d%3D%22M15.3643%200.464783L0%2015.8291L15.3643%2031.1934L30.7286%2015.8291L15.3643%200.464783Z%22%20fill%3D%22%23238E9A%22%2F%3E%3Cpath%20d%3D%22M15.3702%200.470581L1.21094%2014.6299L15.3702%2028.7892L29.5295%2014.6299L15.3702%200.470581Z%22%20fill%3D%22%2362DEEC%22%2F%3E%3Cpath%20d%3D%22M15.3631%203.9345L4.50195%2014.7957L15.3631%2025.6568L26.2243%2014.7957L15.3631%203.9345Z%22%20fill%3D%22%234AC7D5%22%2F%3E%3C%2Fsvg%3E";
2851
+
2850
2852
  var getCursorStyle = function (_a) {
2851
2853
  var _b = _a.disabled, disabled = _b === void 0 ? false : _b;
2852
2854
  return disabled ? "not-allowed" : "cursor";
2853
2855
  };
2854
2856
  var getBaseThumbStyles = function (_a) {
2855
2857
  var isMax = _a.isMax, disabled = _a.disabled;
2856
- return "\n -webkit-appearance: none;\n background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 24px;\n height: 32px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1) translate(-2px, -2px)" : "scale(1.1) translate(-3px, -3px)") + ";\n }\n";
2858
+ return "\n -webkit-appearance: none;\n // background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-image: url(" + rectangle + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 31px;\n height: 31px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n // transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1)" : "scale(1.1)") + ";\n }\n";
2857
2859
  };
2858
2860
  var SliderLabelContainer = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"], ["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"])));
2859
2861
  var SliderLabel = styled(Text)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"], ["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"])), function (_a) {
2860
2862
  var progress = _a.progress;
2861
2863
  return progress;
2862
2864
  });
2863
- var BunnyButt = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"], ["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"])), bunnyButt, function (_a) {
2865
+ styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"], ["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"])), bunnyButt, function (_a) {
2864
2866
  var disabled = _a.disabled;
2865
2867
  return (disabled ? "grayscale(100%)" : "none");
2866
2868
  });
2867
- var BunnySlider = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n left: 14px;\n width: calc(100% - 14px);\n"], ["\n position: absolute;\n left: 14px;\n width: calc(100% - 14px);\n"])));
2869
+ var BunnySlider = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n /* left: 14px; */\n /* width: calc(100% - 14px); */\n"], ["\n position: absolute;\n width: 100%;\n /* left: 14px; */\n /* width: calc(100% - 14px); */\n"])));
2868
2870
  var StyledInput = styled.input(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n cursor: ", ";\n height: 32px;\n position: relative;\n\n ::-webkit-slider-thumb {\n ", "\n }\n\n ::-moz-range-thumb {\n ", "\n }\n\n ::-ms-thumb {\n ", "\n }\n"], ["\n cursor: ", ";\n height: 32px;\n position: relative;\n\n ::-webkit-slider-thumb {\n ", "\n }\n\n ::-moz-range-thumb {\n ", "\n }\n\n ::-ms-thumb {\n ", "\n }\n"])), getCursorStyle, getBaseThumbStyles, getBaseThumbStyles, getBaseThumbStyles);
2869
2871
  var BarBackground = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n background-color: ", ";\n height: 2px;\n position: absolute;\n top: 18px;\n width: 100%;\n"], ["\n background-color: ", ";\n height: 2px;\n position: absolute;\n top: 18px;\n width: 100%;\n"])), function (_a) {
2870
2872
  var theme = _a.theme, disabled = _a.disabled;
2871
2873
  return theme.colors[disabled ? "textDisabled" : "inputSecondary"];
2872
2874
  });
2873
- var BarProgress = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n background-color: ", ";\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 18px;\n"], ["\n background-color: ", ";\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 18px;\n"])), function (_a) {
2875
+ var BarProgress = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n /* background-color: ", "; */\n background-color: #4AC7D5;\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 14px;\n"], ["\n /* background-color: ", "; */\n background-color: #4AC7D5;\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 14px;\n"])), function (_a) {
2874
2876
  var theme = _a.theme;
2875
2877
  return theme.colors.primary;
2876
2878
  }, function (_a) {
@@ -2903,7 +2905,6 @@ var Slider = function (_a) {
2903
2905
  var labelProgress = isMax ? "calc(100% - 12px)" : progressPercentage + "%";
2904
2906
  var displayValueLabel = isMax ? "MAX" : valueLabel;
2905
2907
  return (React__default.createElement(Box, __assign({ position: "relative", height: "48px" }, props),
2906
- React__default.createElement(BunnyButt, { disabled: disabled }),
2907
2908
  React__default.createElement(BunnySlider, null,
2908
2909
  React__default.createElement(BarBackground, { disabled: disabled }),
2909
2910
  React__default.createElement(BarProgress, { style: { width: progressWidth }, disabled: disabled }),
@@ -4614,13 +4615,13 @@ var DropdownMenu = function (_a) {
4614
4615
  };
4615
4616
  }, [targetRef, tooltipRef, hideTimeout, isHoveringOverTooltip, setIsOpen, openMenuTimeout, isOpen, isBottomNav]);
4616
4617
  useEffect(function () {
4617
- if (setMenuOpenByIndex && index !== undefined) {
4618
+ if (setMenuOpenByIndex && index !== undefined && showItemsOnMobile) {
4618
4619
  setMenuOpenByIndex(function (prevValue) {
4619
4620
  var _a;
4620
4621
  return (__assign(__assign({}, prevValue), (_a = {}, _a[index] = isOpen, _a)));
4621
4622
  });
4622
4623
  }
4623
- }, [isOpen, setMenuOpenByIndex, index]);
4624
+ }, [isOpen, setMenuOpenByIndex, index, showItemsOnMobile]);
4624
4625
  return (React__default.createElement(Box, __assign({ style: { display: "flex", alignItems: "center" }, ref: isBottomNav ? null : setTargetRef }, props),
4625
4626
  React__default.createElement(Box, { ref: isBottomNav ? setTargetRef : null }, children),
4626
4627
  hasItems && (React__default.createElement(StyledDropdownMenu, __assign({ style: styles.popper, ref: setTooltipRef }, attributes.popper, { "$isBottomNav": isBottomNav, "$isOpen": isOpen && ((isBottomNav && showItemsOnMobile) || !isBottomNav) }), items
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mexi/uikit",
3
- "version": "0.0.9",
3
+ "version": "0.0.14",
4
4
  "description": "Set of UI components for pancake projects",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",