@mexi/uikit 0.0.9 → 0.0.14

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.
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",