@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.cjs
CHANGED
|
@@ -276,7 +276,7 @@ function unreachable(value) {
|
|
|
276
276
|
|
|
277
277
|
var theme$2 = styled.createTheme(styled__default["default"]);
|
|
278
278
|
|
|
279
|
-
var _templateObject$
|
|
279
|
+
var _templateObject$e, _templateObject2$c, _templateObject3$c;
|
|
280
280
|
|
|
281
281
|
var _excluded$d = ["onClick", "disabled"];
|
|
282
282
|
var Clickable = React__default["default"].forwardRef(function Clickable(props, ref) {
|
|
@@ -301,11 +301,11 @@ var Clickable = React__default["default"].forwardRef(function Clickable(props, r
|
|
|
301
301
|
}));
|
|
302
302
|
}
|
|
303
303
|
});
|
|
304
|
-
var clickableCss = styled$1.css(_templateObject$
|
|
305
|
-
var Button$1 = styled__default["default"].button(_templateObject2$
|
|
306
|
-
var A = styled__default["default"].span(_templateObject3$
|
|
304
|
+
var clickableCss = styled$1.css(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n /* Clickable style */\n cursor: pointer;\n\n ", " {\n cursor: default;\n }\n"])), utils.disabledSelector);
|
|
305
|
+
var Button$1 = styled__default["default"].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);
|
|
306
|
+
var A = styled__default["default"].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);
|
|
307
307
|
|
|
308
|
-
var _templateObject$
|
|
308
|
+
var _templateObject$d;
|
|
309
309
|
|
|
310
310
|
var _excluded$c = ["children", "variant", "size", "fixed", "disabled"];
|
|
311
311
|
var Button = React__default["default"].forwardRef(function Button(_ref, ref) {
|
|
@@ -333,7 +333,7 @@ var StyledButton = styled__default["default"](Clickable).withConfig({
|
|
|
333
333
|
// fixed は <button> 要素に渡ってはいけない
|
|
334
334
|
return prop !== 'fixed';
|
|
335
335
|
}
|
|
336
|
-
}).attrs(styledProps$1)(_templateObject$
|
|
336
|
+
}).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) {
|
|
337
337
|
return p.fixed ? 'stretch' : 'min-content';
|
|
338
338
|
}, function (p) {
|
|
339
339
|
return theme$2(function (o) {
|
|
@@ -400,7 +400,7 @@ function sizeToProps$1(size) {
|
|
|
400
400
|
}
|
|
401
401
|
}
|
|
402
402
|
|
|
403
|
-
var _templateObject$
|
|
403
|
+
var _templateObject$c;
|
|
404
404
|
|
|
405
405
|
var _excluded$b = ["variant", "size", "icon"];
|
|
406
406
|
var IconButton = React__default["default"].forwardRef(function IconButtonInner(_ref, ref) {
|
|
@@ -420,7 +420,7 @@ var IconButton = React__default["default"].forwardRef(function IconButtonInner(_
|
|
|
420
420
|
name: icon
|
|
421
421
|
}));
|
|
422
422
|
});
|
|
423
|
-
var StyledIconButton = styled__default["default"](Clickable).attrs(styledProps)(_templateObject$
|
|
423
|
+
var StyledIconButton = styled__default["default"](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) {
|
|
424
424
|
return p.width;
|
|
425
425
|
}, function (p) {
|
|
426
426
|
return p.height;
|
|
@@ -507,7 +507,7 @@ function validateIconSize(size, icon) {
|
|
|
507
507
|
}
|
|
508
508
|
}
|
|
509
509
|
|
|
510
|
-
var _templateObject$
|
|
510
|
+
var _templateObject$b, _templateObject2$b, _templateObject3$b, _templateObject4$9;
|
|
511
511
|
function Radio(_ref) {
|
|
512
512
|
var value = _ref.value,
|
|
513
513
|
_ref$forceChecked = _ref.forceChecked,
|
|
@@ -543,7 +543,7 @@ function Radio(_ref) {
|
|
|
543
543
|
disabled: isDisabled || isReadonly
|
|
544
544
|
}), children != null && /*#__PURE__*/React__default["default"].createElement(RadioLabel$1, null, children));
|
|
545
545
|
}
|
|
546
|
-
var RadioRoot = styled__default["default"].label(_templateObject$
|
|
546
|
+
var RadioRoot = styled__default["default"].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) {
|
|
547
547
|
var theme = _ref2.theme;
|
|
548
548
|
return utils.px(theme.spacing[4]);
|
|
549
549
|
}, theme$2(function (o) {
|
|
@@ -551,7 +551,7 @@ var RadioRoot = styled__default["default"].label(_templateObject$a || (_template
|
|
|
551
551
|
}));
|
|
552
552
|
var RadioInput = styled__default["default"].input.attrs({
|
|
553
553
|
type: 'radio'
|
|
554
|
-
})(_templateObject2$
|
|
554
|
+
})(_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) {
|
|
555
555
|
var _ref3$hasError = _ref3.hasError,
|
|
556
556
|
hasError = _ref3$hasError === void 0 ? false : _ref3$hasError;
|
|
557
557
|
return theme$2(function (o) {
|
|
@@ -567,11 +567,11 @@ var RadioInput = styled__default["default"].input.attrs({
|
|
|
567
567
|
}), theme$2(function (o) {
|
|
568
568
|
return o.outline["default"].focus;
|
|
569
569
|
}));
|
|
570
|
-
var RadioLabel$1 = styled__default["default"].div(_templateObject3$
|
|
570
|
+
var RadioLabel$1 = styled__default["default"].div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$2(function (o) {
|
|
571
571
|
return [o.typography(14)];
|
|
572
572
|
})); // TODO: use (or polyfill) flex gap
|
|
573
573
|
|
|
574
|
-
var StyledRadioGroup = styled__default["default"].div(_templateObject4$
|
|
574
|
+
var StyledRadioGroup = styled__default["default"].div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: ", ";\n"])), function (_ref5) {
|
|
575
575
|
var theme = _ref5.theme;
|
|
576
576
|
return utils.px(theme.spacing[8]);
|
|
577
577
|
});
|
|
@@ -627,7 +627,7 @@ var MultiSelectGroupContext = React.createContext({
|
|
|
627
627
|
}
|
|
628
628
|
});
|
|
629
629
|
|
|
630
|
-
var _templateObject$
|
|
630
|
+
var _templateObject$a, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$7;
|
|
631
631
|
function MultiSelect(_ref) {
|
|
632
632
|
var value = _ref.value,
|
|
633
633
|
_ref$forceChecked = _ref.forceChecked,
|
|
@@ -685,18 +685,18 @@ function MultiSelect(_ref) {
|
|
|
685
685
|
"unsafe-non-guideline-scale": 16 / 24
|
|
686
686
|
})), Boolean(children) && /*#__PURE__*/React__default["default"].createElement(MultiSelectLabel, null, children));
|
|
687
687
|
}
|
|
688
|
-
var MultiSelectRoot = styled__default["default"].label(_templateObject$
|
|
688
|
+
var MultiSelectRoot = styled__default["default"].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"])), utils.disabledSelector, function (_ref2) {
|
|
689
689
|
var theme = _ref2.theme;
|
|
690
690
|
return utils.px(theme.spacing[4]);
|
|
691
691
|
}, theme$2(function (o) {
|
|
692
692
|
return o.disabled;
|
|
693
693
|
}));
|
|
694
|
-
var MultiSelectLabel = styled__default["default"].div(_templateObject2$
|
|
694
|
+
var MultiSelectLabel = styled__default["default"].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n ", "\n"])), theme$2(function (o) {
|
|
695
695
|
return [o.typography(14), o.font.text1];
|
|
696
696
|
}));
|
|
697
697
|
var MultiSelectInput = styled__default["default"].input.attrs({
|
|
698
698
|
type: 'checkbox'
|
|
699
|
-
})(_templateObject3$
|
|
699
|
+
})(_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) {
|
|
700
700
|
return o.bg.brand.hover.press;
|
|
701
701
|
}), function (_ref3) {
|
|
702
702
|
var hasError = _ref3.hasError,
|
|
@@ -705,7 +705,7 @@ var MultiSelectInput = styled__default["default"].input.attrs({
|
|
|
705
705
|
return [o.bg.text3.hover.press, o.borderRadius('oval'), hasError && !overlay && o.outline.assertive, overlay && o.bg.surface4];
|
|
706
706
|
});
|
|
707
707
|
});
|
|
708
|
-
var MultiSelectInputOverlay = styled__default["default"].div(_templateObject4$
|
|
708
|
+
var MultiSelectInputOverlay = styled__default["default"].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) {
|
|
709
709
|
var hasError = _ref4.hasError,
|
|
710
710
|
overlay = _ref4.overlay;
|
|
711
711
|
return theme$2(function (o) {
|
|
@@ -713,7 +713,7 @@ var MultiSelectInputOverlay = styled__default["default"].div(_templateObject4$7
|
|
|
713
713
|
});
|
|
714
714
|
}, function (_ref5) {
|
|
715
715
|
var overlay = _ref5.overlay;
|
|
716
|
-
return overlay && styled$1.css(_templateObject5$
|
|
716
|
+
return overlay && styled$1.css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n border-width: 2px;\n border-style: solid;\n "])), function (_ref6) {
|
|
717
717
|
var theme = _ref6.theme;
|
|
718
718
|
return theme.color.text5;
|
|
719
719
|
});
|
|
@@ -760,7 +760,7 @@ function MultiSelectGroup(_ref7) {
|
|
|
760
760
|
}, children));
|
|
761
761
|
}
|
|
762
762
|
|
|
763
|
-
var _templateObject$
|
|
763
|
+
var _templateObject$9, _templateObject2$9, _templateObject3$9;
|
|
764
764
|
|
|
765
765
|
var _excluded$a = ["className", "type"];
|
|
766
766
|
function SwitchCheckbox(props) {
|
|
@@ -791,18 +791,18 @@ function SwitchCheckbox(props) {
|
|
|
791
791
|
// eslint-disable-next-line react/destructuring-assignment
|
|
792
792
|
React__default["default"].createElement(LabelInner, null, props.children) : undefined);
|
|
793
793
|
}
|
|
794
|
-
var Label$1 = styled__default["default"].label(_templateObject$
|
|
794
|
+
var Label$1 = styled__default["default"].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) {
|
|
795
795
|
var theme = _ref.theme;
|
|
796
796
|
return utils.px(theme.spacing[4]);
|
|
797
797
|
}, theme$2(function (o) {
|
|
798
798
|
return o.disabled;
|
|
799
799
|
}), utils.disabledSelector);
|
|
800
|
-
var LabelInner = styled__default["default"].div(_templateObject2$
|
|
800
|
+
var LabelInner = styled__default["default"].div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$2(function (o) {
|
|
801
801
|
return o.typography(14);
|
|
802
802
|
}));
|
|
803
803
|
var SwitchInput = styled__default["default"].input.attrs({
|
|
804
804
|
type: 'checkbox'
|
|
805
|
-
})(_templateObject3$
|
|
805
|
+
})(_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) {
|
|
806
806
|
return [o.borderRadius(16), o.height.px(16), o.bg.text4.hover.press, o.outline["default"].focus];
|
|
807
807
|
}), theme$2(function (o) {
|
|
808
808
|
return [o.bg.text5.hover.press, o.borderRadius('oval')];
|
|
@@ -810,7 +810,7 @@ var SwitchInput = styled__default["default"].input.attrs({
|
|
|
810
810
|
return o.bg.brand.hover.press;
|
|
811
811
|
}));
|
|
812
812
|
|
|
813
|
-
var _templateObject$
|
|
813
|
+
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$7;
|
|
814
814
|
|
|
815
815
|
var _excluded$9 = ["style", "className", "label", "required", "requiredText", "subLabel"];
|
|
816
816
|
var FieldLabel = React__default["default"].forwardRef(function FieldLabel(_ref, ref) {
|
|
@@ -831,22 +831,22 @@ var FieldLabel = React__default["default"].forwardRef(function FieldLabel(_ref,
|
|
|
831
831
|
}, labelProps), label), required && /*#__PURE__*/React__default["default"].createElement(RequiredText, null, requiredText), /*#__PURE__*/React__default["default"].createElement(SubLabelClickable, null, /*#__PURE__*/React__default["default"].createElement("span", null, subLabel)));
|
|
832
832
|
});
|
|
833
833
|
var theme$1 = styled.createTheme(styled__default["default"]);
|
|
834
|
-
var Label = styled__default["default"].label(_templateObject$
|
|
834
|
+
var Label = styled__default["default"].label(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$1(function (o) {
|
|
835
835
|
return [o.typography(14).bold, o.font.text1];
|
|
836
836
|
}));
|
|
837
|
-
var RequiredText = styled__default["default"].span(_templateObject2$
|
|
837
|
+
var RequiredText = styled__default["default"].span(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$1(function (o) {
|
|
838
838
|
return [o.typography(14), o.font.text3];
|
|
839
839
|
}));
|
|
840
|
-
var SubLabelClickable = styled__default["default"].div(_templateObject3$
|
|
840
|
+
var SubLabelClickable = styled__default["default"].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$1(function (o) {
|
|
841
841
|
return [o.typography(14), o.font.text3.hover.press, o.outline["default"].focus];
|
|
842
842
|
}));
|
|
843
|
-
var FieldLabelWrapper = styled__default["default"].div(_templateObject4$
|
|
843
|
+
var FieldLabelWrapper = styled__default["default"].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) {
|
|
844
844
|
return o.margin.left(4);
|
|
845
845
|
}), SubLabelClickable, theme$1(function (o) {
|
|
846
846
|
return o.margin.left('auto');
|
|
847
847
|
}));
|
|
848
848
|
|
|
849
|
-
var _templateObject$
|
|
849
|
+
var _templateObject$7, _templateObject2$7, _templateObject3$7, _templateObject4$6, _templateObject5$6, _templateObject6$3, _templateObject7$2, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
850
850
|
|
|
851
851
|
var _excluded$8 = ["onChange"],
|
|
852
852
|
_excluded2$1 = ["onChange"];
|
|
@@ -1109,17 +1109,17 @@ var MultiLineTextField = React__default["default"].forwardRef(function MultiLine
|
|
|
1109
1109
|
invalid: invalid
|
|
1110
1110
|
}, invalid ? errorMessageProps : descriptionProps), assistiveText));
|
|
1111
1111
|
});
|
|
1112
|
-
var TextFieldRoot = styled__default["default"].div(_templateObject$
|
|
1112
|
+
var TextFieldRoot = styled__default["default"].div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (p) {
|
|
1113
1113
|
return p.isDisabled && {
|
|
1114
1114
|
opacity: p.theme.elementEffect.disabled.opacity
|
|
1115
1115
|
};
|
|
1116
1116
|
});
|
|
1117
|
-
var TextFieldLabel = styled__default["default"](FieldLabel)(_templateObject2$
|
|
1117
|
+
var TextFieldLabel = styled__default["default"](FieldLabel)(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme(function (o) {
|
|
1118
1118
|
return o.margin.bottom(8);
|
|
1119
1119
|
}));
|
|
1120
|
-
var StyledInputContainer = styled__default["default"].div(_templateObject3$
|
|
1121
|
-
var PrefixContainer = styled__default["default"].span(_templateObject4$
|
|
1122
|
-
var SuffixContainer = styled__default["default"].span(_templateObject5$
|
|
1120
|
+
var StyledInputContainer = styled__default["default"].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: grid;\n position: relative;\n"])));
|
|
1121
|
+
var PrefixContainer = styled__default["default"].span(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 50%;\n left: 8px;\n transform: translateY(-50%);\n"])));
|
|
1122
|
+
var SuffixContainer = styled__default["default"].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"])));
|
|
1123
1123
|
var Affix = styled__default["default"].span(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n"])), theme(function (o) {
|
|
1124
1124
|
return [o.typography(14).preserveHalfLeading, o.font.text2];
|
|
1125
1125
|
}));
|
|
@@ -19404,7 +19404,7 @@ var host = createHost(primitives, {
|
|
|
19404
19404
|
});
|
|
19405
19405
|
var animated = host.animated;
|
|
19406
19406
|
|
|
19407
|
-
var _templateObject$
|
|
19407
|
+
var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$2, _templateObject7$1;
|
|
19408
19408
|
|
|
19409
19409
|
var _excluded$5 = ["children", "zIndex", "portalContainer"];
|
|
19410
19410
|
var DEFAULT_Z_INDEX = 10;
|
|
@@ -19508,13 +19508,13 @@ var ModalContext = React__default["default"].createContext({
|
|
|
19508
19508
|
close: undefined,
|
|
19509
19509
|
showDismiss: true
|
|
19510
19510
|
});
|
|
19511
|
-
var ModalBackground = animated(styled__default["default"].div(_templateObject$
|
|
19511
|
+
var ModalBackground = animated(styled__default["default"].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) {
|
|
19512
19512
|
var zIndex = _ref3.zIndex;
|
|
19513
19513
|
return zIndex;
|
|
19514
19514
|
}, theme$2(function (o) {
|
|
19515
19515
|
return [o.bg.surface4];
|
|
19516
19516
|
})));
|
|
19517
|
-
var ModalDialog = animated(styled__default["default"].div(_templateObject2$
|
|
19517
|
+
var ModalDialog = animated(styled__default["default"].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) {
|
|
19518
19518
|
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
|
|
19519
19519
|
p.size === 'L' ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size);
|
|
19520
19520
|
}, theme$2(function (o) {
|
|
@@ -19523,12 +19523,47 @@ var ModalDialog = animated(styled__default["default"].div(_templateObject2$5 ||
|
|
|
19523
19523
|
var theme = _ref4.theme;
|
|
19524
19524
|
return utils.maxWidth(theme.breakpoint.screen1);
|
|
19525
19525
|
}, function (p) {
|
|
19526
|
-
return p.bottomSheet === 'full' ? styled$1.css(_templateObject3$
|
|
19526
|
+
return p.bottomSheet === 'full' ? styled$1.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 ? styled$1.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 "]))) : styled$1.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n width: calc(100% - 48px);\n "])));
|
|
19527
19527
|
}));
|
|
19528
19528
|
var ModalCrossButton = styled__default["default"](IconButton)(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 8px;\n right: 8px;\n\n ", "\n"])), theme$2(function (o) {
|
|
19529
19529
|
return [o.font.text3.hover.press];
|
|
19530
19530
|
}));
|
|
19531
|
-
|
|
19531
|
+
function ModalTitle(props) {
|
|
19532
|
+
var _useContext = React.useContext(ModalContext),
|
|
19533
|
+
titleProps = _useContext.titleProps,
|
|
19534
|
+
title = _useContext.title;
|
|
19535
|
+
|
|
19536
|
+
return /*#__PURE__*/React__default["default"].createElement(ModalHeading, _extends$3({}, titleProps, props), title);
|
|
19537
|
+
}
|
|
19538
|
+
var ModalHeading = styled__default["default"].h3(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n margin: 0;\n font-weight: inherit;\n font-size: inherit;\n"])));
|
|
19539
|
+
|
|
19540
|
+
var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4;
|
|
19541
|
+
function ModalHeader() {
|
|
19542
|
+
return /*#__PURE__*/React__default["default"].createElement(ModalHeaderRoot, null, /*#__PURE__*/React__default["default"].createElement(StyledModalTitle, null));
|
|
19543
|
+
}
|
|
19544
|
+
var ModalHeaderRoot = styled__default["default"].div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n height: 64px;\n display: grid;\n align-content: center;\n justify-content: center;\n"])));
|
|
19545
|
+
var StyledModalTitle = styled__default["default"](ModalTitle)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$2(function (o) {
|
|
19546
|
+
return [o.font.text1, o.typography(16).bold];
|
|
19547
|
+
}));
|
|
19548
|
+
var ModalAlign = styled__default["default"].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }\n"])), theme$2(function (o) {
|
|
19549
|
+
return [o.padding.horizontal(24)];
|
|
19550
|
+
}), function (_ref) {
|
|
19551
|
+
var theme = _ref.theme;
|
|
19552
|
+
return utils.maxWidth(theme.breakpoint.screen1);
|
|
19553
|
+
}, theme$2(function (o) {
|
|
19554
|
+
return [o.padding.horizontal(16)];
|
|
19555
|
+
}));
|
|
19556
|
+
var ModalBody = styled__default["default"].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n ", "\n"])), theme$2(function (o) {
|
|
19557
|
+
return [o.padding.bottom(40)];
|
|
19558
|
+
}));
|
|
19559
|
+
var ModalButtons = styled__default["default"].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) {
|
|
19560
|
+
return [o.padding.horizontal(24).top(16)];
|
|
19561
|
+
}), function (_ref2) {
|
|
19562
|
+
var theme = _ref2.theme;
|
|
19563
|
+
return utils.maxWidth(theme.breakpoint.screen1);
|
|
19564
|
+
}, theme$2(function (o) {
|
|
19565
|
+
return [o.padding.horizontal(16)];
|
|
19566
|
+
}));
|
|
19532
19567
|
|
|
19533
19568
|
var _templateObject$4, _templateObject2$4, _templateObject3$4;
|
|
19534
19569
|
function LoadingSpinner(_ref) {
|
|
@@ -22676,6 +22711,10 @@ exports.IconButton = IconButton;
|
|
|
22676
22711
|
exports.LoadingSpinner = LoadingSpinner;
|
|
22677
22712
|
exports.LoadingSpinnerIcon = LoadingSpinnerIcon;
|
|
22678
22713
|
exports.Modal = Modal;
|
|
22714
|
+
exports.ModalAlign = ModalAlign;
|
|
22715
|
+
exports.ModalBody = ModalBody;
|
|
22716
|
+
exports.ModalButtons = ModalButtons;
|
|
22717
|
+
exports.ModalHeader = ModalHeader;
|
|
22679
22718
|
exports.MultiSelect = MultiSelect;
|
|
22680
22719
|
exports.MultiSelectGroup = MultiSelectGroup;
|
|
22681
22720
|
exports.Radio = Radio;
|