@yosgo/swap-ui 1.0.133 → 1.0.134

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 (6) hide show
  1. package/build/Typography/Typography.d.ts +2 -2
  2. package/build/index.esm.js +40 -41
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +28 -29
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.js CHANGED
@@ -180,7 +180,7 @@ var SWAPLogoWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemp
180
180
  });
181
181
  var templateObject_1;
182
182
 
183
- var SWAPSpace = function (_a) {
183
+ var SWAPSpace = React__default.memo(function (_a) {
184
184
  var size = _a.size;
185
185
  var height = function () {
186
186
  if (size === "xxs") {
@@ -217,7 +217,7 @@ var SWAPSpace = function (_a) {
217
217
  return 16;
218
218
  };
219
219
  return React__default.createElement("div", { style: { height: height() + "px" } });
220
- };
220
+ });
221
221
 
222
222
  var SWAPAppBar = function (_a) {
223
223
  var logo = _a.logo, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, navigations = _a.navigations;
@@ -2164,7 +2164,7 @@ var Styles = function (_a) {
2164
2164
  var StylesWrap = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""])));
2165
2165
  var templateObject_1$8;
2166
2166
 
2167
- var Typography = function (_a) {
2167
+ var Typography = React__default.memo(function (_a) {
2168
2168
  var variant = _a.variant, children = _a.children, mode = _a.mode, color = _a.color, style = _a.style;
2169
2169
  var theme = core.useTheme();
2170
2170
  var useStyles = core.makeStyles({
@@ -2525,8 +2525,7 @@ var Typography = function (_a) {
2525
2525
  });
2526
2526
  var classes = useStyles();
2527
2527
  return (React__default.createElement(MaterialTypography, { className: classes.root, style: style }, children));
2528
- };
2529
- var Typography$1 = React__default.memo(Typography);
2528
+ });
2530
2529
 
2531
2530
  var Container = function (_a) {
2532
2531
  var children = _a.children, style = _a.style, maxWidth = _a.maxWidth, padding = _a.padding;
@@ -7663,8 +7662,8 @@ var Modal = React__default.forwardRef(function (props, ref) {
7663
7662
  checked ? React__default.createElement(CheckCircleIcon, { className: classes.icon }) : null,
7664
7663
  failed ? React__default.createElement(WarningIcon, { className: classes.icon }) : null,
7665
7664
  React__default.createElement("div", null,
7666
- React__default.createElement(Typography$1, { variant: !mobile ? "h6" : "title" }, title),
7667
- React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800", style: { marginTop: helpText ? 4 : 0 } }, helpText)))),
7665
+ React__default.createElement(Typography, { variant: !mobile ? "h6" : "title" }, title),
7666
+ React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: { marginTop: helpText ? 4 : 0 } }, helpText)))),
7668
7667
  disCloseIcon ? null : (React__default.createElement(core.IconButton, { className: classes.closeIconButton, TouchRippleProps: {
7669
7668
  classes: { child: classes.closeIconRippleRoot },
7670
7669
  }, onClick: function () {
@@ -7808,7 +7807,7 @@ var Banner = function (props) {
7808
7807
  React__default.createElement("path", { d: "M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z", fill: "#00932A" }))) : variant === "warning" ? (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
7809
7808
  React__default.createElement("path", { d: "M13 14H11V9H13V14ZM13 18H11V16H13V18ZM1 21H23L12 2L1 21Z", fill: "#E5640C" }))) : (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
7810
7809
  React__default.createElement("path", { d: "M13 9H11V7H13V9ZM13 17H11V11H13V17ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z", fill: theme.primary.primary400 })))),
7811
- React__default.createElement(Typography$1, { variant: "caption2" }, children)));
7810
+ React__default.createElement(Typography, { variant: "caption2" }, children)));
7812
7811
  };
7813
7812
 
7814
7813
  var useStyles$c = core.makeStyles(function () { return ({
@@ -12146,7 +12145,7 @@ var Progress = function (props) {
12146
12145
  : "transparent",
12147
12146
  width: "calc((100% - 24px)/2)",
12148
12147
  } })),
12149
- React__default.createElement(Typography$1, { variant: "caption1", color: i + 1 === step ? "black1000" : "black700", style: { marginTop: 8 } }, label ? label[i] : null)));
12148
+ React__default.createElement(Typography, { variant: "caption1", color: i + 1 === step ? "black1000" : "black700", style: { marginTop: 8 } }, label ? label[i] : null)));
12150
12149
  })));
12151
12150
  };
12152
12151
 
@@ -12298,7 +12297,7 @@ var AutoComplete = function (props) {
12298
12297
  return (React__default.createElement("div", null,
12299
12298
  React__default.createElement(core.Popper, { id: id, open: open, anchorEl: anchorEl, placement: "bottom-start", className: classes.popper },
12300
12299
  React__default.createElement("div", { className: classes.header },
12301
- React__default.createElement(Typography$1, { variant: "caption1", color: "black800" }, title)),
12300
+ React__default.createElement(Typography, { variant: "caption1", color: "black800" }, title)),
12302
12301
  React__default.createElement(MaterialAutocomplete, __assign({}, other, { classes: {
12303
12302
  paper: classes.paper,
12304
12303
  option: classes.option,
@@ -12829,7 +12828,7 @@ var RadioList = function (props) {
12829
12828
  alignItems: "center",
12830
12829
  marginLeft: 4,
12831
12830
  } },
12832
- React__default.createElement(Typography$1, { variant: "title", style: {
12831
+ React__default.createElement(Typography, { variant: "title", style: {
12833
12832
  maxWidth: 56,
12834
12833
  minWidth: 56,
12835
12834
  textAlign: "center",
@@ -12842,13 +12841,13 @@ var RadioList = function (props) {
12842
12841
  backgroundColor: "#909090",
12843
12842
  } }),
12844
12843
  React__default.createElement("div", { ref: ref },
12845
- React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800", style: {
12844
+ React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: {
12846
12845
  width: "100%",
12847
12846
  wordBreak: "break-word",
12848
12847
  } }, subtitle)))) : (React__default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
12849
- React__default.createElement(Typography$1, { variant: "title" }, title),
12850
- multiline ? (React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
12851
- !multiline && !line ? (React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
12848
+ React__default.createElement(Typography, { variant: "title" }, title),
12849
+ multiline ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
12850
+ !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
12852
12851
  };
12853
12852
 
12854
12853
  var useStyles$j = core.makeStyles(function (theme) { return ({
@@ -12922,7 +12921,7 @@ var CheckBoxList = function (props) {
12922
12921
  alignItems: "center",
12923
12922
  marginLeft: 4,
12924
12923
  } },
12925
- React__default.createElement(Typography$1, { variant: "title", style: {
12924
+ React__default.createElement(Typography, { variant: "title", style: {
12926
12925
  minWidth: 56,
12927
12926
  maxWidth: 56,
12928
12927
  textAlign: "center",
@@ -12935,13 +12934,13 @@ var CheckBoxList = function (props) {
12935
12934
  backgroundColor: "#909090",
12936
12935
  } }),
12937
12936
  React__default.createElement("div", { ref: ref },
12938
- React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800", style: {
12937
+ React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: {
12939
12938
  width: "100%",
12940
12939
  wordBreak: "break-word",
12941
12940
  } }, subtitle)))) : (React__default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
12942
- React__default.createElement(Typography$1, { variant: "title" }, title),
12943
- multiline ? (React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
12944
- !multiline && !line ? (React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
12941
+ React__default.createElement(Typography, { variant: "title" }, title),
12942
+ multiline ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
12943
+ !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
12945
12944
  };
12946
12945
 
12947
12946
  var useStyles$k = core.makeStyles(function (theme) { return ({
@@ -13418,7 +13417,7 @@ var DatePicker = function (props) {
13418
13417
  setYear(year - 1);
13419
13418
  setIsClicked(true);
13420
13419
  } }, icon_arrowleft),
13421
- React__default.createElement(Typography$1, { variant: "subtitle", style: { textAlign: "center" } },
13420
+ React__default.createElement(Typography, { variant: "subtitle", style: { textAlign: "center" } },
13422
13421
  year,
13423
13422
  "\u5E74"),
13424
13423
  React__default.createElement(IconButton, { hoverColor: "black400", onClick: function () {
@@ -13432,13 +13431,13 @@ var DatePicker = function (props) {
13432
13431
  gap: 8,
13433
13432
  gridTemplateColumns: "1fr 1fr 1fr",
13434
13433
  gridTemplateRows: "36px 36px",
13435
- } }, Array.from(Array(6).keys()).map(function (_i, i) { return (React__default.createElement(MonthButton, { key: i, index: i, month: month, setMonth: setMonth, setIsOpenMonthSelector: setIsOpenMonthSelector, setIsClicked: setIsClicked })); }))))) : null)) : (React__default.createElement(Modal, __assign({ bodyPadding: mobile ? 16 : undefined, fullWidth: mobile, open: open, onClose: onClose, size: mobile ? undefined : "medium", label: !mobile ? (React__default.createElement(Typography$1, { variant: "h6" },
13434
+ } }, Array.from(Array(6).keys()).map(function (_i, i) { return (React__default.createElement(MonthButton, { key: i, index: i, month: month, setMonth: setMonth, setIsOpenMonthSelector: setIsOpenMonthSelector, setIsClicked: setIsClicked })); }))))) : null)) : (React__default.createElement(Modal, __assign({ bodyPadding: mobile ? 16 : undefined, fullWidth: mobile, open: open, onClose: onClose, size: mobile ? undefined : "medium", label: !mobile ? (React__default.createElement(Typography, { variant: "h6" },
13436
13435
  React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A"),
13437
13436
  date &&
13438
13437
  date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5")) : (React__default.createElement(React__default.Fragment, null,
13439
- React__default.createElement(Typography$1, { variant: "caption2" },
13438
+ React__default.createElement(Typography, { variant: "caption2" },
13440
13439
  React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A")),
13441
- React__default.createElement(Typography$1, { variant: "subtitle" }, date &&
13440
+ React__default.createElement(Typography, { variant: "subtitle" }, date &&
13442
13441
  date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5"))), primaryButton: {
13443
13442
  title: "確認",
13444
13443
  onClick: function () {
@@ -13632,9 +13631,9 @@ var Breadcrumb = function (props) {
13632
13631
  fontWeight: 400,
13633
13632
  } },
13634
13633
  children[0],
13635
- React__default.createElement(Typography$1, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"),
13634
+ React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"),
13636
13635
  React__default.createElement("div", { onClick: handleThreeDotsClick, onMouseEnter: function () { return setIsHoverThreeDots(true); }, onMouseLeave: function () { return setIsHoverThreeDots(false); }, style: { cursor: "pointer" } }, isHoverThreeDots ? icon_threedots_hover : icon_threedots),
13637
- React__default.createElement(Typography$1, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/")),
13636
+ React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/")),
13638
13637
  children
13639
13638
  .slice((children === null || children === void 0 ? void 0 : children.length) - maxItems + 1)
13640
13639
  .map(function (i, index) {
@@ -13645,7 +13644,7 @@ var Breadcrumb = function (props) {
13645
13644
  fontWeight: index + 1 === (children === null || children === void 0 ? void 0 : children.length) ? 700 : 400,
13646
13645
  } },
13647
13646
  i,
13648
- index + 1 !== maxItems - 1 && (React__default.createElement(Typography$1, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
13647
+ index + 1 !== maxItems - 1 && (React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
13649
13648
  }))) : (children === null || children === void 0 ? void 0 : children.map(function (i, index) {
13650
13649
  return (React__default.createElement("div", { key: Math.random().toString(36).substr(2), style: {
13651
13650
  display: "flex",
@@ -13654,7 +13653,7 @@ var Breadcrumb = function (props) {
13654
13653
  fontWeight: index + 1 === (children === null || children === void 0 ? void 0 : children.length) ? 700 : 400,
13655
13654
  } },
13656
13655
  i,
13657
- index + 1 !== (children === null || children === void 0 ? void 0 : children.length) && (React__default.createElement(Typography$1, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
13656
+ index + 1 !== (children === null || children === void 0 ? void 0 : children.length) && (React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
13658
13657
  })),
13659
13658
  React__default.createElement(Menu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleThreeDotsClose, anchorOrigin: { vertical: "bottom", horizontal: -16 }, getContentAnchorEl: null }, children === null || children === void 0 ? void 0 : children.slice(1, (children === null || children === void 0 ? void 0 : children.length) - maxItems + 1).map(function (i) {
13660
13659
  var content = i.props.children;
@@ -13802,6 +13801,6 @@ exports.Tabs = Tabs;
13802
13801
  exports.TaxTextField = TaxTextField;
13803
13802
  exports.TextField = TextField;
13804
13803
  exports.Tooltip = Tooltip;
13805
- exports.Typography = Typography$1;
13804
+ exports.Typography = Typography;
13806
13805
  exports.useBreakpoints = useBreakpoints;
13807
13806
  //# sourceMappingURL=index.js.map