@yosgo/swap-ui 1.0.131 → 1.0.133

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 +90 -93
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +78 -81
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.js CHANGED
@@ -182,46 +182,42 @@ var templateObject_1;
182
182
 
183
183
  var SWAPSpace = function (_a) {
184
184
  var size = _a.size;
185
- return (React__default.createElement("div", null,
186
- React__default.createElement(SWAPSpaceWrap, { size: size })));
187
- };
188
- var SWAPSpaceWrap = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: ", "px;\n"], ["\n height: ",
189
- "px;\n"])), function (_a) {
190
- var size = _a.size;
191
- if (size === "xxs") {
192
- return 4;
193
- }
194
- else if (size === "xs") {
195
- return 8;
196
- }
197
- else if (size === "s") {
198
- return 12;
199
- }
200
- else if (size === "m") {
201
- return 16;
202
- }
203
- else if (size === "l") {
204
- return 24;
205
- }
206
- else if (size === "xl") {
207
- return 32;
208
- }
209
- else if (size === "2xl") {
210
- return 40;
211
- }
212
- else if (size === "3xl") {
213
- return 48;
214
- }
215
- else if (size === "4xl") {
216
- return 56;
217
- }
218
- else if (typeof size === "number") {
219
- return size;
220
- }
221
- else
222
- return 16;
223
- });
224
- var templateObject_1$1;
185
+ var height = function () {
186
+ if (size === "xxs") {
187
+ return 4;
188
+ }
189
+ else if (size === "xs") {
190
+ return 8;
191
+ }
192
+ else if (size === "s") {
193
+ return 12;
194
+ }
195
+ else if (size === "m") {
196
+ return 16;
197
+ }
198
+ else if (size === "l") {
199
+ return 24;
200
+ }
201
+ else if (size === "xl") {
202
+ return 32;
203
+ }
204
+ else if (size === "2xl") {
205
+ return 40;
206
+ }
207
+ else if (size === "3xl") {
208
+ return 48;
209
+ }
210
+ else if (size === "4xl") {
211
+ return 56;
212
+ }
213
+ else if (typeof size === "number") {
214
+ return size;
215
+ }
216
+ else
217
+ return 16;
218
+ };
219
+ return React__default.createElement("div", { style: { height: height() + "px" } });
220
+ };
225
221
 
226
222
  var SWAPAppBar = function (_a) {
227
223
  var logo = _a.logo, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, navigations = _a.navigations;
@@ -277,8 +273,8 @@ var SWAPAppBar = function (_a) {
277
273
  primaryButton.title.length > 0 ? (React__default.createElement(core.MenuItem, { disabled: primaryButton.disabled, onClick: function () { return primaryButton.onClick(); } }, primaryButton.title)) : null))))),
278
274
  React__default.createElement(SWAPSpace, { size: "s" })))))));
279
275
  };
280
- var SWAPAppBarWrap = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n .mobile_hide {\n @media screen and (max-width: 960px) {\n display: none;\n }\n }\n .mobile_show {\n display: none;\n @media screen and (max-width: 960px) {\n display: block;\n }\n }\n"], ["\n .mobile_hide {\n @media screen and (max-width: 960px) {\n display: none;\n }\n }\n .mobile_show {\n display: none;\n @media screen and (max-width: 960px) {\n display: block;\n }\n }\n"])));
281
- var templateObject_1$2;
276
+ var SWAPAppBarWrap = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n .mobile_hide {\n @media screen and (max-width: 960px) {\n display: none;\n }\n }\n .mobile_show {\n display: none;\n @media screen and (max-width: 960px) {\n display: block;\n }\n }\n"], ["\n .mobile_hide {\n @media screen and (max-width: 960px) {\n display: none;\n }\n }\n .mobile_show {\n display: none;\n @media screen and (max-width: 960px) {\n display: block;\n }\n }\n"])));
277
+ var templateObject_1$1;
282
278
 
283
279
  var ElementId = function (title) { return "swap_banner_" + title; };
284
280
  var SWAPBanner = function (_a) {
@@ -320,8 +316,8 @@ var SWAPBanner = function (_a) {
320
316
  React__default.createElement(core.Button, { variant: "text", onClick: function () { return secondaryButton.onClick(); }, disabled: secondaryButton.disabled }, secondaryButton.title))) : null)) : null,
321
317
  React__default.createElement(SWAPSpace, { size: "l" })))))));
322
318
  };
323
- var SWAPBannerWrap = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n .swap_banner {\n position: relative;\n overflow: hidden;\n .banner_anchor {\n position: absolute;\n top: -36px;\n left: 0;\n width: 0;\n height: 0;\n }\n .bar {\n height: 12px;\n &.s_bar {\n background: #3f51b5;\n }\n &.w_bar {\n background: #ffb11b;\n }\n &.c_bar {\n background: rgb(220, 0, 78);\n }\n }\n }\n"], ["\n .swap_banner {\n position: relative;\n overflow: hidden;\n .banner_anchor {\n position: absolute;\n top: -36px;\n left: 0;\n width: 0;\n height: 0;\n }\n .bar {\n height: 12px;\n &.s_bar {\n background: #3f51b5;\n }\n &.w_bar {\n background: #ffb11b;\n }\n &.c_bar {\n background: rgb(220, 0, 78);\n }\n }\n }\n"])));
324
- var templateObject_1$3;
319
+ var SWAPBannerWrap = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n .swap_banner {\n position: relative;\n overflow: hidden;\n .banner_anchor {\n position: absolute;\n top: -36px;\n left: 0;\n width: 0;\n height: 0;\n }\n .bar {\n height: 12px;\n &.s_bar {\n background: #3f51b5;\n }\n &.w_bar {\n background: #ffb11b;\n }\n &.c_bar {\n background: rgb(220, 0, 78);\n }\n }\n }\n"], ["\n .swap_banner {\n position: relative;\n overflow: hidden;\n .banner_anchor {\n position: absolute;\n top: -36px;\n left: 0;\n width: 0;\n height: 0;\n }\n .bar {\n height: 12px;\n &.s_bar {\n background: #3f51b5;\n }\n &.w_bar {\n background: #ffb11b;\n }\n &.c_bar {\n background: rgb(220, 0, 78);\n }\n }\n }\n"])));
320
+ var templateObject_1$2;
325
321
 
326
322
  function unwrapExports (x) {
327
323
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -620,8 +616,8 @@ var SWAPCopyField = function (_a) {
620
616
  React__default.createElement("small", null, copyButtonText)))))),
621
617
  } }))));
622
618
  };
623
- var SWAPCopyFieldWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n .cpy_btn_element {\n width: auto;\n min-width: 72px;\n text-align: right;\n }\n"], ["\n .cpy_btn_element {\n width: auto;\n min-width: 72px;\n text-align: right;\n }\n"])));
624
- var templateObject_1$4;
619
+ var SWAPCopyFieldWrap = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n .cpy_btn_element {\n width: auto;\n min-width: 72px;\n text-align: right;\n }\n"], ["\n .cpy_btn_element {\n width: auto;\n min-width: 72px;\n text-align: right;\n }\n"])));
620
+ var templateObject_1$3;
625
621
 
626
622
  var SWAPDialog = function (_a) {
627
623
  var open = _a.open, title = _a.title, helpText = _a.helpText, children = _a.children, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, status = _a.status;
@@ -659,8 +655,8 @@ var SWAPDialog = function (_a) {
659
655
  React__default.createElement(core.Grid, { item: true }, primaryButton && primaryButton.title ? (React__default.createElement(core.Button, { size: "large", onClick: function () { return primaryButton.onClick(); }, disabled: primaryButton.disabled }, primaryButton.title)) : null)),
660
656
  React__default.createElement(SWAPSpace, { size: "s" }))))))))));
661
657
  };
662
- var SWAPDialogWrap = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n .bar {\n position: absolute;\n height: 12px;\n top: 0;\n left: 0;\n width: 100%;\n &.s_bar {\n background: #3f51b5;\n }\n &.w_bar {\n background: #ffb11b;\n }\n &.c_bar {\n background: rgb(220, 0, 78);\n }\n }\n .dialog_inner {\n margin-top: 12px;\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n .bar {\n position: absolute;\n height: 12px;\n top: 0;\n left: 0;\n width: 100%;\n &.s_bar {\n background: #3f51b5;\n }\n &.w_bar {\n background: #ffb11b;\n }\n &.c_bar {\n background: rgb(220, 0, 78);\n }\n }\n .dialog_inner {\n margin-top: 12px;\n }\n"])));
663
- var templateObject_1$5;
658
+ var SWAPDialogWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n .bar {\n position: absolute;\n height: 12px;\n top: 0;\n left: 0;\n width: 100%;\n &.s_bar {\n background: #3f51b5;\n }\n &.w_bar {\n background: #ffb11b;\n }\n &.c_bar {\n background: rgb(220, 0, 78);\n }\n }\n .dialog_inner {\n margin-top: 12px;\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n .bar {\n position: absolute;\n height: 12px;\n top: 0;\n left: 0;\n width: 100%;\n &.s_bar {\n background: #3f51b5;\n }\n &.w_bar {\n background: #ffb11b;\n }\n &.c_bar {\n background: rgb(220, 0, 78);\n }\n }\n .dialog_inner {\n margin-top: 12px;\n }\n"])));
659
+ var templateObject_1$4;
664
660
 
665
661
  var ModalOpenEffect = function (props) {
666
662
  return (React__default.createElement(React__default.Fragment, null, props.sm ? (React__default.createElement(core.Slide, { in: props.in, direction: "up", mountOnEnter: true, unmountOnExit: true, timeout: { enter: 300, exit: 300 } },
@@ -785,8 +781,8 @@ var SWAPModal = function (_a) {
785
781
  React__default.createElement(core.Button, { variant: "text", size: sm ? "medium" : "large", onClick: function () { return handleStepButton("next"); } }, steps[stepIndex].nextStepText || "下一步"))))),
786
782
  React__default.createElement(SWAPSpace, { size: "m" })))))))));
787
783
  };
788
- var SWAPModalWrap = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n outline: 0px;\n position: absolute;\n height: 100vh;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n .modal_inner {\n border-radius: 9px;\n overflow: hidden;\n position: relative;\n width: 48vw;\n z-index: 2;\n .modal_inner_header {\n position: absolute;\n width: 100%;\n left: 0;\n top: 0;\n background: white;\n z-index: 1;\n }\n .modal_inner_body {\n position: relative;\n overflow-y: auto;\n z-index: 1;\n }\n .modal_inner_bottom {\n position: absolute;\n width: 100%;\n left: 0;\n bottom: 0;\n background: white;\n z-index: 1;\n }\n }\n @media screen and (max-width: 960px) {\n align-items: flex-end;\n .modal_inner {\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n width: 100vw;\n }\n }\n"], ["\n outline: 0px;\n position: absolute;\n height: 100vh;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n .modal_inner {\n border-radius: 9px;\n overflow: hidden;\n position: relative;\n width: 48vw;\n z-index: 2;\n .modal_inner_header {\n position: absolute;\n width: 100%;\n left: 0;\n top: 0;\n background: white;\n z-index: 1;\n }\n .modal_inner_body {\n position: relative;\n overflow-y: auto;\n z-index: 1;\n }\n .modal_inner_bottom {\n position: absolute;\n width: 100%;\n left: 0;\n bottom: 0;\n background: white;\n z-index: 1;\n }\n }\n @media screen and (max-width: 960px) {\n align-items: flex-end;\n .modal_inner {\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n width: 100vw;\n }\n }\n"])));
789
- var templateObject_1$6;
784
+ var SWAPModalWrap = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n outline: 0px;\n position: absolute;\n height: 100vh;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n .modal_inner {\n border-radius: 9px;\n overflow: hidden;\n position: relative;\n width: 48vw;\n z-index: 2;\n .modal_inner_header {\n position: absolute;\n width: 100%;\n left: 0;\n top: 0;\n background: white;\n z-index: 1;\n }\n .modal_inner_body {\n position: relative;\n overflow-y: auto;\n z-index: 1;\n }\n .modal_inner_bottom {\n position: absolute;\n width: 100%;\n left: 0;\n bottom: 0;\n background: white;\n z-index: 1;\n }\n }\n @media screen and (max-width: 960px) {\n align-items: flex-end;\n .modal_inner {\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n width: 100vw;\n }\n }\n"], ["\n outline: 0px;\n position: absolute;\n height: 100vh;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n .modal_inner {\n border-radius: 9px;\n overflow: hidden;\n position: relative;\n width: 48vw;\n z-index: 2;\n .modal_inner_header {\n position: absolute;\n width: 100%;\n left: 0;\n top: 0;\n background: white;\n z-index: 1;\n }\n .modal_inner_body {\n position: relative;\n overflow-y: auto;\n z-index: 1;\n }\n .modal_inner_bottom {\n position: absolute;\n width: 100%;\n left: 0;\n bottom: 0;\n background: white;\n z-index: 1;\n }\n }\n @media screen and (max-width: 960px) {\n align-items: flex-end;\n .modal_inner {\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n width: 100vw;\n }\n }\n"])));
785
+ var templateObject_1$5;
790
786
 
791
787
  function objectToGetParams(object) {
792
788
  var params = Object.entries(object)
@@ -1371,8 +1367,8 @@ var SWAPShare = function (_a) {
1371
1367
  },
1372
1368
  ].map(function (item, index) { return (React__default.createElement("div", { key: "share_btn_" + index }, item.el)); })));
1373
1369
  };
1374
- var SWAPShareWrap = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n height: 40px;\n position: relative;\n .swap_share_icon {\n cursor: pointer;\n }\n"], ["\n height: 40px;\n position: relative;\n .swap_share_icon {\n cursor: pointer;\n }\n"])));
1375
- var templateObject_1$7;
1370
+ var SWAPShareWrap = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n height: 40px;\n position: relative;\n .swap_share_icon {\n cursor: pointer;\n }\n"], ["\n height: 40px;\n position: relative;\n .swap_share_icon {\n cursor: pointer;\n }\n"])));
1371
+ var templateObject_1$6;
1376
1372
 
1377
1373
  var SWAPTaxField = function (_a) {
1378
1374
  var onChange = _a.onChange, taxDescription = _a.taxDescription;
@@ -1538,7 +1534,7 @@ var SWAPTaxField = function (_a) {
1538
1534
  }
1539
1535
  })()))) })) }))))));
1540
1536
  };
1541
- var SWAPTaxFieldWrap = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n .option_item::-webkit-scrollbar {\n width: 0 !important;\n height: 0 !important;\n }\n"], ["\n .option_item::-webkit-scrollbar {\n width: 0 !important;\n height: 0 !important;\n }\n"])));
1537
+ var SWAPTaxFieldWrap = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n .option_item::-webkit-scrollbar {\n width: 0 !important;\n height: 0 !important;\n }\n"], ["\n .option_item::-webkit-scrollbar {\n width: 0 !important;\n height: 0 !important;\n }\n"])));
1542
1538
  var typeOptions = [
1543
1539
  ["文字", "1"],
1544
1540
  ["設計", "2"],
@@ -1828,7 +1824,7 @@ var SWAPTaxDescription = function (incomeCode, expenseCode) {
1828
1824
  return "";
1829
1825
  }
1830
1826
  };
1831
- var templateObject_1$8;
1827
+ var templateObject_1$7;
1832
1828
  /**
1833
1829
  * 邏輯設定
1834
1830
  * 1. 所得類別為 9A, 9B 時，費用類別為必填
@@ -2165,8 +2161,8 @@ var Styles = function (_a) {
2165
2161
  " ",
2166
2162
  copySuccess ? "已複製！" : null))));
2167
2163
  };
2168
- var StylesWrap = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
2169
- var templateObject_1$9;
2164
+ var StylesWrap = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""])));
2165
+ var templateObject_1$8;
2170
2166
 
2171
2167
  var Typography = function (_a) {
2172
2168
  var variant = _a.variant, children = _a.children, mode = _a.mode, color = _a.color, style = _a.style;
@@ -2529,7 +2525,8 @@ var Typography = function (_a) {
2529
2525
  });
2530
2526
  var classes = useStyles();
2531
2527
  return (React__default.createElement(MaterialTypography, { className: classes.root, style: style }, children));
2532
- };
2528
+ };
2529
+ var Typography$1 = React__default.memo(Typography);
2533
2530
 
2534
2531
  var Container = function (_a) {
2535
2532
  var children = _a.children, style = _a.style, maxWidth = _a.maxWidth, padding = _a.padding;
@@ -7666,8 +7663,8 @@ var Modal = React__default.forwardRef(function (props, ref) {
7666
7663
  checked ? React__default.createElement(CheckCircleIcon, { className: classes.icon }) : null,
7667
7664
  failed ? React__default.createElement(WarningIcon, { className: classes.icon }) : null,
7668
7665
  React__default.createElement("div", null,
7669
- React__default.createElement(Typography, { variant: !mobile ? "h6" : "title" }, title),
7670
- React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: { marginTop: helpText ? 4 : 0 } }, helpText)))),
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)))),
7671
7668
  disCloseIcon ? null : (React__default.createElement(core.IconButton, { className: classes.closeIconButton, TouchRippleProps: {
7672
7669
  classes: { child: classes.closeIconRippleRoot },
7673
7670
  }, onClick: function () {
@@ -7811,7 +7808,7 @@ var Banner = function (props) {
7811
7808
  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" },
7812
7809
  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" },
7813
7810
  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 })))),
7814
- React__default.createElement(Typography, { variant: "caption2" }, children)));
7811
+ React__default.createElement(Typography$1, { variant: "caption2" }, children)));
7815
7812
  };
7816
7813
 
7817
7814
  var useStyles$c = core.makeStyles(function () { return ({
@@ -12149,7 +12146,7 @@ var Progress = function (props) {
12149
12146
  : "transparent",
12150
12147
  width: "calc((100% - 24px)/2)",
12151
12148
  } })),
12152
- React__default.createElement(Typography, { variant: "caption1", color: i + 1 === step ? "black1000" : "black700", style: { marginTop: 8 } }, label ? label[i] : null)));
12149
+ React__default.createElement(Typography$1, { variant: "caption1", color: i + 1 === step ? "black1000" : "black700", style: { marginTop: 8 } }, label ? label[i] : null)));
12153
12150
  })));
12154
12151
  };
12155
12152
 
@@ -12301,7 +12298,7 @@ var AutoComplete = function (props) {
12301
12298
  return (React__default.createElement("div", null,
12302
12299
  React__default.createElement(core.Popper, { id: id, open: open, anchorEl: anchorEl, placement: "bottom-start", className: classes.popper },
12303
12300
  React__default.createElement("div", { className: classes.header },
12304
- React__default.createElement(Typography, { variant: "caption1", color: "black800" }, title)),
12301
+ React__default.createElement(Typography$1, { variant: "caption1", color: "black800" }, title)),
12305
12302
  React__default.createElement(MaterialAutocomplete, __assign({}, other, { classes: {
12306
12303
  paper: classes.paper,
12307
12304
  option: classes.option,
@@ -12832,7 +12829,7 @@ var RadioList = function (props) {
12832
12829
  alignItems: "center",
12833
12830
  marginLeft: 4,
12834
12831
  } },
12835
- React__default.createElement(Typography, { variant: "title", style: {
12832
+ React__default.createElement(Typography$1, { variant: "title", style: {
12836
12833
  maxWidth: 56,
12837
12834
  minWidth: 56,
12838
12835
  textAlign: "center",
@@ -12845,13 +12842,13 @@ var RadioList = function (props) {
12845
12842
  backgroundColor: "#909090",
12846
12843
  } }),
12847
12844
  React__default.createElement("div", { ref: ref },
12848
- React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: {
12845
+ React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800", style: {
12849
12846
  width: "100%",
12850
12847
  wordBreak: "break-word",
12851
12848
  } }, subtitle)))) : (React__default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
12852
- React__default.createElement(Typography, { variant: "title" }, title),
12853
- multiline ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
12854
- !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
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));
12855
12852
  };
12856
12853
 
12857
12854
  var useStyles$j = core.makeStyles(function (theme) { return ({
@@ -12925,7 +12922,7 @@ var CheckBoxList = function (props) {
12925
12922
  alignItems: "center",
12926
12923
  marginLeft: 4,
12927
12924
  } },
12928
- React__default.createElement(Typography, { variant: "title", style: {
12925
+ React__default.createElement(Typography$1, { variant: "title", style: {
12929
12926
  minWidth: 56,
12930
12927
  maxWidth: 56,
12931
12928
  textAlign: "center",
@@ -12938,13 +12935,13 @@ var CheckBoxList = function (props) {
12938
12935
  backgroundColor: "#909090",
12939
12936
  } }),
12940
12937
  React__default.createElement("div", { ref: ref },
12941
- React__default.createElement(Typography, { variant: "body2_loose", color: "black800", style: {
12938
+ React__default.createElement(Typography$1, { variant: "body2_loose", color: "black800", style: {
12942
12939
  width: "100%",
12943
12940
  wordBreak: "break-word",
12944
12941
  } }, subtitle)))) : (React__default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
12945
- React__default.createElement(Typography, { variant: "title" }, title),
12946
- multiline ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null))),
12947
- !multiline && !line ? (React__default.createElement(Typography, { variant: "body2_loose", color: "black800" }, subtitle)) : null));
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));
12948
12945
  };
12949
12946
 
12950
12947
  var useStyles$k = core.makeStyles(function (theme) { return ({
@@ -13421,7 +13418,7 @@ var DatePicker = function (props) {
13421
13418
  setYear(year - 1);
13422
13419
  setIsClicked(true);
13423
13420
  } }, icon_arrowleft),
13424
- React__default.createElement(Typography, { variant: "subtitle", style: { textAlign: "center" } },
13421
+ React__default.createElement(Typography$1, { variant: "subtitle", style: { textAlign: "center" } },
13425
13422
  year,
13426
13423
  "\u5E74"),
13427
13424
  React__default.createElement(IconButton, { hoverColor: "black400", onClick: function () {
@@ -13435,13 +13432,13 @@ var DatePicker = function (props) {
13435
13432
  gap: 8,
13436
13433
  gridTemplateColumns: "1fr 1fr 1fr",
13437
13434
  gridTemplateRows: "36px 36px",
13438
- } }, 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" },
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" },
13439
13436
  React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A"),
13440
13437
  date &&
13441
13438
  date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5")) : (React__default.createElement(React__default.Fragment, null,
13442
- React__default.createElement(Typography, { variant: "caption2" },
13439
+ React__default.createElement(Typography$1, { variant: "caption2" },
13443
13440
  React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A")),
13444
- React__default.createElement(Typography, { variant: "subtitle" }, date &&
13441
+ React__default.createElement(Typography$1, { variant: "subtitle" }, date &&
13445
13442
  date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5"))), primaryButton: {
13446
13443
  title: "確認",
13447
13444
  onClick: function () {
@@ -13635,9 +13632,9 @@ var Breadcrumb = function (props) {
13635
13632
  fontWeight: 400,
13636
13633
  } },
13637
13634
  children[0],
13638
- React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"),
13635
+ React__default.createElement(Typography$1, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"),
13639
13636
  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),
13640
- React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/")),
13637
+ React__default.createElement(Typography$1, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/")),
13641
13638
  children
13642
13639
  .slice((children === null || children === void 0 ? void 0 : children.length) - maxItems + 1)
13643
13640
  .map(function (i, index) {
@@ -13648,7 +13645,7 @@ var Breadcrumb = function (props) {
13648
13645
  fontWeight: index + 1 === (children === null || children === void 0 ? void 0 : children.length) ? 700 : 400,
13649
13646
  } },
13650
13647
  i,
13651
- index + 1 !== maxItems - 1 && (React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
13648
+ index + 1 !== maxItems - 1 && (React__default.createElement(Typography$1, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
13652
13649
  }))) : (children === null || children === void 0 ? void 0 : children.map(function (i, index) {
13653
13650
  return (React__default.createElement("div", { key: Math.random().toString(36).substr(2), style: {
13654
13651
  display: "flex",
@@ -13657,7 +13654,7 @@ var Breadcrumb = function (props) {
13657
13654
  fontWeight: index + 1 === (children === null || children === void 0 ? void 0 : children.length) ? 700 : 400,
13658
13655
  } },
13659
13656
  i,
13660
- index + 1 !== (children === null || children === void 0 ? void 0 : children.length) && (React__default.createElement(Typography, { variant: "body2", style: { margin: "0 8px" } }, separator ? separator : "/"))));
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 : "/"))));
13661
13658
  })),
13662
13659
  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) {
13663
13660
  var content = i.props.children;
@@ -13805,6 +13802,6 @@ exports.Tabs = Tabs;
13805
13802
  exports.TaxTextField = TaxTextField;
13806
13803
  exports.TextField = TextField;
13807
13804
  exports.Tooltip = Tooltip;
13808
- exports.Typography = Typography;
13805
+ exports.Typography = Typography$1;
13809
13806
  exports.useBreakpoints = useBreakpoints;
13810
13807
  //# sourceMappingURL=index.js.map