@charcoal-ui/react 2.0.0-rc.0 → 2.0.0-rc.2
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.
- package/dist/index.cjs +78 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.modern.js +133 -83
- package/dist/index.modern.js.map +1 -1
- package/dist/index.module.js +75 -40
- package/dist/index.module.js.map +1 -1
- package/package.json +7 -7
- package/src/index.ts +6 -0
package/dist/index.module.js
CHANGED
|
@@ -253,7 +253,7 @@ function unreachable(value) {
|
|
|
253
253
|
|
|
254
254
|
var theme$2 = createTheme(styled);
|
|
255
255
|
|
|
256
|
-
var _templateObject$
|
|
256
|
+
var _templateObject$e, _templateObject2$c, _templateObject3$c;
|
|
257
257
|
|
|
258
258
|
var _excluded$d = ["onClick", "disabled"];
|
|
259
259
|
var Clickable = React__default.forwardRef(function Clickable(props, ref) {
|
|
@@ -278,11 +278,11 @@ var Clickable = React__default.forwardRef(function Clickable(props, ref) {
|
|
|
278
278
|
}));
|
|
279
279
|
}
|
|
280
280
|
});
|
|
281
|
-
var clickableCss = css(_templateObject$
|
|
282
|
-
var Button$1 = styled.button(_templateObject2$
|
|
283
|
-
var A = styled.span(_templateObject3$
|
|
281
|
+
var clickableCss = css(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n /* Clickable style */\n cursor: pointer;\n\n ", " {\n cursor: default;\n }\n"])), disabledSelector);
|
|
282
|
+
var Button$1 = styled.button(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n /* Reset button appearance */\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n color: inherit;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n\n &:focus {\n outline: none;\n }\n\n /* Change the font styles in all browsers. */\n font: inherit;\n\n /* Remove the margin in Firefox and Safari. */\n margin: 0;\n\n /* Show the overflow in Edge. */\n overflow: visible;\n\n /* Remove the inheritance of text transform in Firefox. */\n text-transform: none;\n\n /* Remove the inner border and padding in Firefox. */\n &::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n\n ", "\n"])), clickableCss);
|
|
283
|
+
var A = styled.span(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n /* Reset a-tag appearance */\n color: inherit;\n\n &:focus {\n outline: none;\n }\n\n .text {\n top: calc(1em + 2em);\n }\n\n ", "\n"])), clickableCss);
|
|
284
284
|
|
|
285
|
-
var _templateObject$
|
|
285
|
+
var _templateObject$d;
|
|
286
286
|
|
|
287
287
|
var _excluded$c = ["children", "variant", "size", "fixed", "disabled"];
|
|
288
288
|
var Button = React__default.forwardRef(function Button(_ref, ref) {
|
|
@@ -310,7 +310,7 @@ var StyledButton = styled(Clickable).withConfig({
|
|
|
310
310
|
// fixed は <button> 要素に渡ってはいけない
|
|
311
311
|
return prop !== 'fixed';
|
|
312
312
|
}
|
|
313
|
-
}).attrs(styledProps$1)(_templateObject$
|
|
313
|
+
}).attrs(styledProps$1)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n width: ", ";\n display: inline-grid;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n\n ", "\n\n /* \u3088\u304F\u8003\u3048\u305F\u3089height=32\u3063\u3066\u5B9A\u7FA9\u304C\u5B58\u5728\u3057\u306A\u3044\u306A... */\n height: ", "px;\n"])), function (p) {
|
|
314
314
|
return p.fixed ? 'stretch' : 'min-content';
|
|
315
315
|
}, function (p) {
|
|
316
316
|
return theme$2(function (o) {
|
|
@@ -377,7 +377,7 @@ function sizeToProps$1(size) {
|
|
|
377
377
|
}
|
|
378
378
|
}
|
|
379
379
|
|
|
380
|
-
var _templateObject$
|
|
380
|
+
var _templateObject$c;
|
|
381
381
|
|
|
382
382
|
var _excluded$b = ["variant", "size", "icon"];
|
|
383
383
|
var IconButton = React__default.forwardRef(function IconButtonInner(_ref, ref) {
|
|
@@ -397,7 +397,7 @@ var IconButton = React__default.forwardRef(function IconButtonInner(_ref, ref) {
|
|
|
397
397
|
name: icon
|
|
398
398
|
}));
|
|
399
399
|
});
|
|
400
|
-
var StyledIconButton = styled(Clickable).attrs(styledProps)(_templateObject$
|
|
400
|
+
var StyledIconButton = styled(Clickable).attrs(styledProps)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n width: ", "px;\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (p) {
|
|
401
401
|
return p.width;
|
|
402
402
|
}, function (p) {
|
|
403
403
|
return p.height;
|
|
@@ -484,7 +484,7 @@ function validateIconSize(size, icon) {
|
|
|
484
484
|
}
|
|
485
485
|
}
|
|
486
486
|
|
|
487
|
-
var _templateObject$
|
|
487
|
+
var _templateObject$b, _templateObject2$b, _templateObject3$b, _templateObject4$9;
|
|
488
488
|
function Radio(_ref) {
|
|
489
489
|
var value = _ref.value,
|
|
490
490
|
_ref$forceChecked = _ref.forceChecked,
|
|
@@ -520,7 +520,7 @@ function Radio(_ref) {
|
|
|
520
520
|
disabled: isDisabled || isReadonly
|
|
521
521
|
}), children != null && /*#__PURE__*/React__default.createElement(RadioLabel$1, null, children));
|
|
522
522
|
}
|
|
523
|
-
var RadioRoot = styled.label(_templateObject$
|
|
523
|
+
var RadioRoot = styled.label(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: ", ";\n align-items: center;\n cursor: pointer;\n\n ", "\n"])), function (_ref2) {
|
|
524
524
|
var theme = _ref2.theme;
|
|
525
525
|
return px(theme.spacing[4]);
|
|
526
526
|
}, theme$2(function (o) {
|
|
@@ -528,7 +528,7 @@ var RadioRoot = styled.label(_templateObject$a || (_templateObject$a = _taggedTe
|
|
|
528
528
|
}));
|
|
529
529
|
var RadioInput = styled.input.attrs({
|
|
530
530
|
type: 'radio'
|
|
531
|
-
})(_templateObject2$
|
|
531
|
+
})(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n /** Make prior to browser default style */\n &[type='radio'] {\n appearance: none;\n display: block;\n box-sizing: border-box;\n\n padding: 6px;\n\n width: 20px;\n height: 20px;\n\n ", ";\n\n &:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n }\n\n &:checked {\n ", "\n\n &::after {\n content: '';\n display: block;\n width: 8px;\n height: 8px;\n pointer-events: none;\n\n ", "\n }\n }\n\n ", "\n }\n"])), function (_ref3) {
|
|
532
532
|
var _ref3$hasError = _ref3.hasError,
|
|
533
533
|
hasError = _ref3$hasError === void 0 ? false : _ref3$hasError;
|
|
534
534
|
return theme$2(function (o) {
|
|
@@ -544,11 +544,11 @@ var RadioInput = styled.input.attrs({
|
|
|
544
544
|
}), theme$2(function (o) {
|
|
545
545
|
return o.outline["default"].focus;
|
|
546
546
|
}));
|
|
547
|
-
var RadioLabel$1 = styled.div(_templateObject3$
|
|
547
|
+
var RadioLabel$1 = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$2(function (o) {
|
|
548
548
|
return [o.typography(14)];
|
|
549
549
|
})); // TODO: use (or polyfill) flex gap
|
|
550
550
|
|
|
551
|
-
var StyledRadioGroup = styled.div(_templateObject4$
|
|
551
|
+
var StyledRadioGroup = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: ", ";\n"])), function (_ref5) {
|
|
552
552
|
var theme = _ref5.theme;
|
|
553
553
|
return px(theme.spacing[8]);
|
|
554
554
|
});
|
|
@@ -604,7 +604,7 @@ var MultiSelectGroupContext = createContext({
|
|
|
604
604
|
}
|
|
605
605
|
});
|
|
606
606
|
|
|
607
|
-
var _templateObject$
|
|
607
|
+
var _templateObject$a, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$7;
|
|
608
608
|
function MultiSelect(_ref) {
|
|
609
609
|
var value = _ref.value,
|
|
610
610
|
_ref$forceChecked = _ref.forceChecked,
|
|
@@ -662,18 +662,18 @@ function MultiSelect(_ref) {
|
|
|
662
662
|
"unsafe-non-guideline-scale": 16 / 24
|
|
663
663
|
})), Boolean(children) && /*#__PURE__*/React__default.createElement(MultiSelectLabel, null, children));
|
|
664
664
|
}
|
|
665
|
-
var MultiSelectRoot = styled.label(_templateObject$
|
|
665
|
+
var MultiSelectRoot = styled.label(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: relative;\n cursor: pointer;\n ", " {\n cursor: default;\n }\n gap: ", ";\n ", "\n"])), disabledSelector, function (_ref2) {
|
|
666
666
|
var theme = _ref2.theme;
|
|
667
667
|
return px(theme.spacing[4]);
|
|
668
668
|
}, theme$2(function (o) {
|
|
669
669
|
return o.disabled;
|
|
670
670
|
}));
|
|
671
|
-
var MultiSelectLabel = styled.div(_templateObject2$
|
|
671
|
+
var MultiSelectLabel = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n ", "\n"])), theme$2(function (o) {
|
|
672
672
|
return [o.typography(14), o.font.text1];
|
|
673
673
|
}));
|
|
674
674
|
var MultiSelectInput = styled.input.attrs({
|
|
675
675
|
type: 'checkbox'
|
|
676
|
-
})(_templateObject3$
|
|
676
|
+
})(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n &[type='checkbox'] {\n appearance: none;\n display: block;\n width: 20px;\n height: 20px;\n margin: 0;\n\n &:checked {\n ", "\n }\n\n ", ";\n }\n"])), theme$2(function (o) {
|
|
677
677
|
return o.bg.brand.hover.press;
|
|
678
678
|
}), function (_ref3) {
|
|
679
679
|
var hasError = _ref3.hasError,
|
|
@@ -682,7 +682,7 @@ var MultiSelectInput = styled.input.attrs({
|
|
|
682
682
|
return [o.bg.text3.hover.press, o.borderRadius('oval'), hasError && !overlay && o.outline.assertive, overlay && o.bg.surface4];
|
|
683
683
|
});
|
|
684
684
|
});
|
|
685
|
-
var MultiSelectInputOverlay = styled.div(_templateObject4$
|
|
685
|
+
var MultiSelectInputOverlay = styled.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -2px;\n left: -2px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n\n ", "\n\n ", "\n"])), function (_ref4) {
|
|
686
686
|
var hasError = _ref4.hasError,
|
|
687
687
|
overlay = _ref4.overlay;
|
|
688
688
|
return theme$2(function (o) {
|
|
@@ -690,7 +690,7 @@ var MultiSelectInputOverlay = styled.div(_templateObject4$7 || (_templateObject4
|
|
|
690
690
|
});
|
|
691
691
|
}, function (_ref5) {
|
|
692
692
|
var overlay = _ref5.overlay;
|
|
693
|
-
return overlay && css(_templateObject5$
|
|
693
|
+
return overlay && css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n border-width: 2px;\n border-style: solid;\n "])), function (_ref6) {
|
|
694
694
|
var theme = _ref6.theme;
|
|
695
695
|
return theme.color.text5;
|
|
696
696
|
});
|
|
@@ -737,7 +737,7 @@ function MultiSelectGroup(_ref7) {
|
|
|
737
737
|
}, children));
|
|
738
738
|
}
|
|
739
739
|
|
|
740
|
-
var _templateObject$
|
|
740
|
+
var _templateObject$9, _templateObject2$9, _templateObject3$9;
|
|
741
741
|
|
|
742
742
|
var _excluded$a = ["className", "type"];
|
|
743
743
|
function SwitchCheckbox(props) {
|
|
@@ -768,18 +768,18 @@ function SwitchCheckbox(props) {
|
|
|
768
768
|
// eslint-disable-next-line react/destructuring-assignment
|
|
769
769
|
React__default.createElement(LabelInner, null, props.children) : undefined);
|
|
770
770
|
}
|
|
771
|
-
var Label$1 = styled.label(_templateObject$
|
|
771
|
+
var Label$1 = styled.label(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n display: inline-grid;\n grid-template-columns: auto 1fr;\n gap: ", ";\n cursor: pointer;\n outline: 0;\n\n ", "\n\n ", " {\n cursor: default;\n }\n"])), function (_ref) {
|
|
772
772
|
var theme = _ref.theme;
|
|
773
773
|
return px(theme.spacing[4]);
|
|
774
774
|
}, theme$2(function (o) {
|
|
775
775
|
return o.disabled;
|
|
776
776
|
}), disabledSelector);
|
|
777
|
-
var LabelInner = styled.div(_templateObject2$
|
|
777
|
+
var LabelInner = styled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$2(function (o) {
|
|
778
778
|
return o.typography(14);
|
|
779
779
|
}));
|
|
780
780
|
var SwitchInput = styled.input.attrs({
|
|
781
781
|
type: 'checkbox'
|
|
782
|
-
})(_templateObject3$
|
|
782
|
+
})(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n &[type='checkbox'] {\n appearance: none;\n display: inline-flex;\n position: relative;\n box-sizing: border-box;\n width: 28px;\n border: 2px solid transparent;\n transition: box-shadow 0.2s, background-color 0.2s;\n cursor: inherit;\n ", "\n\n &::after {\n content: '';\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n width: 12px;\n height: 12px;\n transform: translateX(0);\n transition: transform 0.2s;\n ", "\n }\n\n &:checked {\n ", "\n\n &::after {\n transform: translateX(12px);\n }\n }\n }\n"])), theme$2(function (o) {
|
|
783
783
|
return [o.borderRadius(16), o.height.px(16), o.bg.text4.hover.press, o.outline["default"].focus];
|
|
784
784
|
}), theme$2(function (o) {
|
|
785
785
|
return [o.bg.text5.hover.press, o.borderRadius('oval')];
|
|
@@ -787,7 +787,7 @@ var SwitchInput = styled.input.attrs({
|
|
|
787
787
|
return o.bg.brand.hover.press;
|
|
788
788
|
}));
|
|
789
789
|
|
|
790
|
-
var _templateObject$
|
|
790
|
+
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$7;
|
|
791
791
|
|
|
792
792
|
var _excluded$9 = ["style", "className", "label", "required", "requiredText", "subLabel"];
|
|
793
793
|
var FieldLabel = React__default.forwardRef(function FieldLabel(_ref, ref) {
|
|
@@ -808,22 +808,22 @@ var FieldLabel = React__default.forwardRef(function FieldLabel(_ref, ref) {
|
|
|
808
808
|
}, labelProps), label), required && /*#__PURE__*/React__default.createElement(RequiredText, null, requiredText), /*#__PURE__*/React__default.createElement(SubLabelClickable, null, /*#__PURE__*/React__default.createElement("span", null, subLabel)));
|
|
809
809
|
});
|
|
810
810
|
var theme$1 = createTheme(styled);
|
|
811
|
-
var Label = styled.label(_templateObject$
|
|
811
|
+
var Label = styled.label(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$1(function (o) {
|
|
812
812
|
return [o.typography(14).bold, o.font.text1];
|
|
813
813
|
}));
|
|
814
|
-
var RequiredText = styled.span(_templateObject2$
|
|
814
|
+
var RequiredText = styled.span(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$1(function (o) {
|
|
815
815
|
return [o.typography(14), o.font.text3];
|
|
816
816
|
}));
|
|
817
|
-
var SubLabelClickable = styled.div(_templateObject3$
|
|
817
|
+
var SubLabelClickable = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$1(function (o) {
|
|
818
818
|
return [o.typography(14), o.font.text3.hover.press, o.outline["default"].focus];
|
|
819
819
|
}));
|
|
820
|
-
var FieldLabelWrapper = styled.div(_templateObject4$
|
|
820
|
+
var FieldLabelWrapper = styled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n\n > ", " {\n ", "\n }\n\n > ", " {\n ", "\n }\n"])), RequiredText, theme$1(function (o) {
|
|
821
821
|
return o.margin.left(4);
|
|
822
822
|
}), SubLabelClickable, theme$1(function (o) {
|
|
823
823
|
return o.margin.left('auto');
|
|
824
824
|
}));
|
|
825
825
|
|
|
826
|
-
var _templateObject$
|
|
826
|
+
var _templateObject$7, _templateObject2$7, _templateObject3$7, _templateObject4$6, _templateObject5$6, _templateObject6$3, _templateObject7$2, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
827
827
|
|
|
828
828
|
var _excluded$8 = ["onChange"],
|
|
829
829
|
_excluded2$1 = ["onChange"];
|
|
@@ -1086,17 +1086,17 @@ var MultiLineTextField = React__default.forwardRef(function MultiLineTextFieldIn
|
|
|
1086
1086
|
invalid: invalid
|
|
1087
1087
|
}, invalid ? errorMessageProps : descriptionProps), assistiveText));
|
|
1088
1088
|
});
|
|
1089
|
-
var TextFieldRoot = styled.div(_templateObject$
|
|
1089
|
+
var TextFieldRoot = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (p) {
|
|
1090
1090
|
return p.isDisabled && {
|
|
1091
1091
|
opacity: p.theme.elementEffect.disabled.opacity
|
|
1092
1092
|
};
|
|
1093
1093
|
});
|
|
1094
|
-
var TextFieldLabel = styled(FieldLabel)(_templateObject2$
|
|
1094
|
+
var TextFieldLabel = styled(FieldLabel)(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme(function (o) {
|
|
1095
1095
|
return o.margin.bottom(8);
|
|
1096
1096
|
}));
|
|
1097
|
-
var StyledInputContainer = styled.div(_templateObject3$
|
|
1098
|
-
var PrefixContainer = styled.span(_templateObject4$
|
|
1099
|
-
var SuffixContainer = styled.span(_templateObject5$
|
|
1097
|
+
var StyledInputContainer = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: grid;\n position: relative;\n"])));
|
|
1098
|
+
var PrefixContainer = styled.span(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 50%;\n left: 8px;\n transform: translateY(-50%);\n"])));
|
|
1099
|
+
var SuffixContainer = styled.span(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 50%;\n right: 8px;\n transform: translateY(-50%);\n\n display: flex;\n gap: 8px;\n"])));
|
|
1100
1100
|
var Affix = styled.span(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n"])), theme(function (o) {
|
|
1101
1101
|
return [o.typography(14).preserveHalfLeading, o.font.text2];
|
|
1102
1102
|
}));
|
|
@@ -19381,7 +19381,7 @@ var host = createHost(primitives, {
|
|
|
19381
19381
|
});
|
|
19382
19382
|
var animated = host.animated;
|
|
19383
19383
|
|
|
19384
|
-
var _templateObject$
|
|
19384
|
+
var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$2, _templateObject7$1;
|
|
19385
19385
|
|
|
19386
19386
|
var _excluded$5 = ["children", "zIndex", "portalContainer"];
|
|
19387
19387
|
var DEFAULT_Z_INDEX = 10;
|
|
@@ -19485,13 +19485,13 @@ var ModalContext = React__default.createContext({
|
|
|
19485
19485
|
close: undefined,
|
|
19486
19486
|
showDismiss: true
|
|
19487
19487
|
});
|
|
19488
|
-
var ModalBackground = animated(styled.div(_templateObject$
|
|
19488
|
+
var ModalBackground = animated(styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n z-index: ", ";\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n ", "\n"])), function (_ref3) {
|
|
19489
19489
|
var zIndex = _ref3.zIndex;
|
|
19490
19490
|
return zIndex;
|
|
19491
19491
|
}, theme$2(function (o) {
|
|
19492
19492
|
return [o.bg.surface4];
|
|
19493
19493
|
})));
|
|
19494
|
-
var ModalDialog = animated(styled.div(_templateObject2$
|
|
19494
|
+
var ModalDialog = animated(styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: ", "px;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (p) {
|
|
19495
19495
|
return p.size === 'S' ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === 'M' ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
19496
19496
|
p.size === 'L' ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size);
|
|
19497
19497
|
}, theme$2(function (o) {
|
|
@@ -19500,12 +19500,47 @@ var ModalDialog = animated(styled.div(_templateObject2$5 || (_templateObject2$5
|
|
|
19500
19500
|
var theme = _ref4.theme;
|
|
19501
19501
|
return maxWidth(theme.breakpoint.screen1);
|
|
19502
19502
|
}, function (p) {
|
|
19503
|
-
return p.bottomSheet === 'full' ? css(_templateObject3$
|
|
19503
|
+
return p.bottomSheet === 'full' ? css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n top: auto;\n bottom: 0;\n left: 0;\n transform: none;\n border-radius: 0;\n width: 100%;\n height: 100%;\n "]))) : p.bottomSheet ? css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n top: auto;\n bottom: 0;\n left: 0;\n transform: none;\n border-radius: 0;\n width: 100%;\n "]))) : css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n width: calc(100% - 48px);\n "])));
|
|
19504
19504
|
}));
|
|
19505
19505
|
var ModalCrossButton = styled(IconButton)(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 8px;\n right: 8px;\n\n ", "\n"])), theme$2(function (o) {
|
|
19506
19506
|
return [o.font.text3.hover.press];
|
|
19507
19507
|
}));
|
|
19508
|
-
|
|
19508
|
+
function ModalTitle(props) {
|
|
19509
|
+
var _useContext = useContext(ModalContext),
|
|
19510
|
+
titleProps = _useContext.titleProps,
|
|
19511
|
+
title = _useContext.title;
|
|
19512
|
+
|
|
19513
|
+
return /*#__PURE__*/React__default.createElement(ModalHeading, _extends$3({}, titleProps, props), title);
|
|
19514
|
+
}
|
|
19515
|
+
var ModalHeading = styled.h3(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n margin: 0;\n font-weight: inherit;\n font-size: inherit;\n"])));
|
|
19516
|
+
|
|
19517
|
+
var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4;
|
|
19518
|
+
function ModalHeader() {
|
|
19519
|
+
return /*#__PURE__*/React__default.createElement(ModalHeaderRoot, null, /*#__PURE__*/React__default.createElement(StyledModalTitle, null));
|
|
19520
|
+
}
|
|
19521
|
+
var ModalHeaderRoot = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n height: 64px;\n display: grid;\n align-content: center;\n justify-content: center;\n"])));
|
|
19522
|
+
var StyledModalTitle = styled(ModalTitle)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$2(function (o) {
|
|
19523
|
+
return [o.font.text1, o.typography(16).bold];
|
|
19524
|
+
}));
|
|
19525
|
+
var ModalAlign = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }\n"])), theme$2(function (o) {
|
|
19526
|
+
return [o.padding.horizontal(24)];
|
|
19527
|
+
}), function (_ref) {
|
|
19528
|
+
var theme = _ref.theme;
|
|
19529
|
+
return maxWidth(theme.breakpoint.screen1);
|
|
19530
|
+
}, theme$2(function (o) {
|
|
19531
|
+
return [o.padding.horizontal(16)];
|
|
19532
|
+
}));
|
|
19533
|
+
var ModalBody = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$2(function (o) {
|
|
19534
|
+
return [o.padding.bottom(40)];
|
|
19535
|
+
}));
|
|
19536
|
+
var ModalButtons = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-auto-flow: row;\n grid-row-gap: 8px;\n ", "\n\n @media ", " {\n ", "\n }\n"])), theme$2(function (o) {
|
|
19537
|
+
return [o.padding.horizontal(24).top(16)];
|
|
19538
|
+
}), function (_ref2) {
|
|
19539
|
+
var theme = _ref2.theme;
|
|
19540
|
+
return maxWidth(theme.breakpoint.screen1);
|
|
19541
|
+
}, theme$2(function (o) {
|
|
19542
|
+
return [o.padding.horizontal(16)];
|
|
19543
|
+
}));
|
|
19509
19544
|
|
|
19510
19545
|
var _templateObject$4, _templateObject2$4, _templateObject3$4;
|
|
19511
19546
|
function LoadingSpinner(_ref) {
|
|
@@ -22638,5 +22673,5 @@ var InputLabel = styled.div(_templateObject5 || (_templateObject5 = _taggedTempl
|
|
|
22638
22673
|
return [o.typography(14)];
|
|
22639
22674
|
}));
|
|
22640
22675
|
|
|
22641
|
-
export { Button, index as Checkbox, Clickable, ComponentAbstraction, DropdownSelector, DropdownSelectorItem, Icon$1 as Icon, IconButton, LoadingSpinner, LoadingSpinnerIcon, Modal, MultiSelect, MultiSelectGroup, Radio, RadioGroup, index$1 as SegmentedControl, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
|
|
22676
|
+
export { Button, index as Checkbox, Clickable, ComponentAbstraction, DropdownSelector, DropdownSelectorItem, Icon$1 as Icon, IconButton, LoadingSpinner, LoadingSpinnerIcon, Modal, ModalAlign, ModalBody, ModalButtons, ModalHeader, MultiSelect, MultiSelectGroup, Radio, RadioGroup, index$1 as SegmentedControl, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
|
|
22642
22677
|
//# sourceMappingURL=index.module.js.map
|