@charcoal-ui/react 2.0.0-rc.0 → 2.0.0-rc.2

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as Switch, type SwitchProps } from './components/Switch';
 export { default as TextField, type TextFieldProps, type SingleLineTextFieldProps, type MultiLineTextFieldProps, } from './components/TextField';
 export { default as Icon, type IconProps } from './components/Icon';
 export { default as Modal, type ModalProps } from './components/Modal';
+export { ModalHeader, ModalAlign, ModalBody, ModalButtons, } from './components/Modal/ModalPlumbing';
 export { default as LoadingSpinner, LoadingSpinnerIcon, } from './components/LoadingSpinner';
 export { default as DropdownSelector, DropdownSelectorItem, } from './components/DropdownSelector';
 export { default as SegmentedControl, type SegmentedControlProps, } from './components/SegmentedControl';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,uBAAuB,EACvB,KAAK,SAAS,GACf,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,OAAO,IAAI,KAAK,EAChB,KAAK,UAAU,EACf,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,gBAAgB,EACrB,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACtE,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,kBAAkB,GACnB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,oBAAoB,GACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,uBAAuB,EACvB,KAAK,SAAS,GACf,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,OAAO,IAAI,KAAK,EAChB,KAAK,UAAU,EACf,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,gBAAgB,EACrB,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACtE,OAAO,EACL,WAAW,EACX,UAAU,EACV,SAAS,EACT,YAAY,GACb,MAAM,kCAAkC,CAAA;AACzC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,kBAAkB,GACnB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,oBAAoB,GACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/index.modern.js

@@ -91,10 +91,10 @@ function unreachable(value) {
 
 const theme$2 = createTheme(styled);
 
-let _$d = t => t,
-    _t$d,
-    _t2$b,
-    _t3$b;
+let _$e = t => t,
+    _t$e,
+    _t2$c,
+    _t3$c;
 
 const _excluded$d = ["onClick", "disabled"];
 const Clickable = React__default.forwardRef(function Clickable(props, ref) {
@@ -121,7 +121,7 @@ const Clickable = React__default.forwardRef(function Clickable(props, ref) {
     }));
   }
 });
-const clickableCss = css(_t$d || (_t$d = _$d`
+const clickableCss = css(_t$e || (_t$e = _$e`
   /* Clickable style */
   cursor: pointer;
 
@@ -129,7 +129,7 @@ const clickableCss = css(_t$d || (_t$d = _$d`
     cursor: default;
   }
 `), disabledSelector);
-const Button$1 = styled.button(_t2$b || (_t2$b = _$d`
+const Button$1 = styled.button(_t2$c || (_t2$c = _$e`
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -165,7 +165,7 @@ const Button$1 = styled.button(_t2$b || (_t2$b = _$d`
 
   ${0}
 `), clickableCss);
-const A = styled.span(_t3$b || (_t3$b = _$d`
+const A = styled.span(_t3$c || (_t3$c = _$e`
   /* Reset a-tag appearance */
   color: inherit;
 
@@ -180,8 +180,8 @@ const A = styled.span(_t3$b || (_t3$b = _$d`
   ${0}
 `), clickableCss);
 
-let _$c = t => t,
-    _t$c;
+let _$d = t => t,
+    _t$d;
 
 const _excluded$c = ["children", "variant", "size", "fixed", "disabled"];
 const Button = React__default.forwardRef(function Button(_ref, ref) {
@@ -208,7 +208,7 @@ const StyledButton = styled(Clickable).withConfig({
     return prop !== 'fixed';
   }
 
-}).attrs(styledProps$1)(_t$c || (_t$c = _$c`
+}).attrs(styledProps$1)(_t$d || (_t$d = _$d`
   width: ${0};
   display: inline-grid;
   align-items: center;
@@ -280,8 +280,8 @@ function sizeToProps$1(size) {
   }
 }
 
-let _$b = t => t,
-    _t$b;
+let _$c = t => t,
+    _t$c;
 
 const _excluded$b = ["variant", "size", "icon"];
 const IconButton = React__default.forwardRef(function IconButtonInner(_ref, ref) {
@@ -301,7 +301,7 @@ const IconButton = React__default.forwardRef(function IconButtonInner(_ref, ref)
     name: icon
   }));
 });
-const StyledIconButton = styled(Clickable).attrs(styledProps)(_t$b || (_t$b = _$b`
+const StyledIconButton = styled(Clickable).attrs(styledProps)(_t$c || (_t$c = _$c`
   user-select: none;
 
   width: ${0}px;
@@ -391,11 +391,11 @@ function validateIconSize(size, icon) {
   }
 }
 
-let _$a = t => t,
-    _t$a,
-    _t2$a,
-    _t3$a,
-    _t4$8;
+let _$b = t => t,
+    _t$b,
+    _t2$b,
+    _t3$b,
+    _t4$9;
 function Radio({
   value,
   forceChecked = false,
@@ -429,7 +429,7 @@ function Radio({
     disabled: isDisabled || isReadonly
   }), children != null && /*#__PURE__*/React__default.createElement(RadioLabel$1, null, children));
 }
-const RadioRoot = styled.label(_t$a || (_t$a = _$a`
+const RadioRoot = styled.label(_t$b || (_t$b = _$b`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${0};
@@ -442,7 +442,7 @@ const RadioRoot = styled.label(_t$a || (_t$a = _$a`
 }) => px(theme.spacing[4]), theme$2(o => [o.disabled]));
 const RadioInput = styled.input.attrs({
   type: 'radio'
-})(_t2$a || (_t2$a = _$a`
+})(_t2$b || (_t2$b = _$b`
   /** Make prior to browser default style */
   &[type='radio'] {
     appearance: none;
@@ -483,11 +483,11 @@ const RadioInput = styled.input.attrs({
 }) => theme$2(o => [o.borderRadius('oval'), o.bg.text5.hover.press, _hasError && o.outline.assertive]), ({
   theme
 }) => theme.color.text4, theme$2(o => o.bg.brand.hover.press), theme$2(o => [o.bg.text5.hover.press, o.borderRadius('oval')]), theme$2(o => o.outline.default.focus));
-const RadioLabel$1 = styled.div(_t3$a || (_t3$a = _$a`
+const RadioLabel$1 = styled.div(_t3$b || (_t3$b = _$b`
   ${0}
 `), theme$2(o => [o.typography(14)])); // TODO: use (or polyfill) flex gap
 
-const StyledRadioGroup = styled.div(_t4$8 || (_t4$8 = _$a`
+const StyledRadioGroup = styled.div(_t4$9 || (_t4$9 = _$b`
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: ${0};
@@ -551,12 +551,12 @@ const MultiSelectGroupContext = createContext({
 
 });
 
-let _$9 = t => t,
-    _t$9,
-    _t2$9,
-    _t3$9,
-    _t4$7,
-    _t5$6;
+let _$a = t => t,
+    _t$a,
+    _t2$a,
+    _t3$a,
+    _t4$8,
+    _t5$7;
 function MultiSelect({
   value,
   forceChecked = false,
@@ -611,7 +611,7 @@ function MultiSelect({
     "unsafe-non-guideline-scale": 16 / 24
   })), Boolean(children) && /*#__PURE__*/React__default.createElement(MultiSelectLabel, null, children));
 }
-const MultiSelectRoot = styled.label(_t$9 || (_t$9 = _$9`
+const MultiSelectRoot = styled.label(_t$a || (_t$a = _$a`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -625,14 +625,14 @@ const MultiSelectRoot = styled.label(_t$9 || (_t$9 = _$9`
 `), disabledSelector, ({
   theme
 }) => px(theme.spacing[4]), theme$2(o => o.disabled));
-const MultiSelectLabel = styled.div(_t2$9 || (_t2$9 = _$9`
+const MultiSelectLabel = styled.div(_t2$a || (_t2$a = _$a`
   display: flex;
   align-items: center;
   ${0}
 `), theme$2(o => [o.typography(14), o.font.text1]));
 const MultiSelectInput = styled.input.attrs({
   type: 'checkbox'
-})(_t3$9 || (_t3$9 = _$9`
+})(_t3$a || (_t3$a = _$a`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -650,7 +650,7 @@ const MultiSelectInput = styled.input.attrs({
   hasError,
   overlay
 }) => theme$2(o => [o.bg.text3.hover.press, o.borderRadius('oval'), hasError && !overlay && o.outline.assertive, overlay && o.bg.surface4]));
-const MultiSelectInputOverlay = styled.div(_t4$7 || (_t4$7 = _$9`
+const MultiSelectInputOverlay = styled.div(_t4$8 || (_t4$8 = _$a`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -667,7 +667,7 @@ const MultiSelectInputOverlay = styled.div(_t4$7 || (_t4$7 = _$9`
   overlay
 }) => theme$2(o => [o.width.px(24), o.height.px(24), o.borderRadius('oval'), o.font.text5, hasError && overlay && o.outline.assertive]), ({
   overlay
-}) => overlay && css(_t5$6 || (_t5$6 = _$9`
+}) => overlay && css(_t5$7 || (_t5$7 = _$a`
       border-color: ${0};
       border-width: 2px;
       border-style: solid;
@@ -714,10 +714,10 @@ function MultiSelectGroup({
   }, children));
 }
 
-let _$8 = t => t,
-    _t$8,
-    _t2$8,
-    _t3$8;
+let _$9 = t => t,
+    _t$9,
+    _t2$9,
+    _t3$9;
 
 const _excluded$a = ["className", "type"];
 function SwitchCheckbox(props) {
@@ -747,7 +747,7 @@ function SwitchCheckbox(props) {
   // eslint-disable-next-line react/destructuring-assignment
   React__default.createElement(LabelInner, null, props.children) : undefined);
 }
-const Label$1 = styled.label(_t$8 || (_t$8 = _$8`
+const Label$1 = styled.label(_t$9 || (_t$9 = _$9`
   display: inline-grid;
   grid-template-columns: auto 1fr;
   gap: ${0};
@@ -762,12 +762,12 @@ const Label$1 = styled.label(_t$8 || (_t$8 = _$8`
 `), ({
   theme
 }) => px(theme.spacing[4]), theme$2(o => o.disabled), disabledSelector);
-const LabelInner = styled.div(_t2$8 || (_t2$8 = _$8`
+const LabelInner = styled.div(_t2$9 || (_t2$9 = _$9`
   ${0}
 `), theme$2(o => o.typography(14)));
 const SwitchInput = styled.input.attrs({
   type: 'checkbox'
-})(_t3$8 || (_t3$8 = _$8`
+})(_t3$9 || (_t3$9 = _$9`
   &[type='checkbox'] {
     appearance: none;
     display: inline-flex;
@@ -802,11 +802,11 @@ const SwitchInput = styled.input.attrs({
   }
 `), theme$2(o => [o.borderRadius(16), o.height.px(16), o.bg.text4.hover.press, o.outline.default.focus]), theme$2(o => [o.bg.text5.hover.press, o.borderRadius('oval')]), theme$2(o => o.bg.brand.hover.press));
 
-let _$7 = t => t,
-    _t$7,
-    _t2$7,
-    _t3$7,
-    _t4$6;
+let _$8 = t => t,
+    _t$8,
+    _t2$8,
+    _t3$8,
+    _t4$7;
 
 const _excluded$9 = ["style", "className", "label", "required", "requiredText", "subLabel"];
 const FieldLabel = React__default.forwardRef(function FieldLabel(_ref, ref) {
@@ -828,16 +828,16 @@ const FieldLabel = React__default.forwardRef(function FieldLabel(_ref, ref) {
   }, labelProps), label), required && /*#__PURE__*/React__default.createElement(RequiredText, null, requiredText), /*#__PURE__*/React__default.createElement(SubLabelClickable, null, /*#__PURE__*/React__default.createElement("span", null, subLabel)));
 });
 const theme$1 = createTheme(styled);
-const Label = styled.label(_t$7 || (_t$7 = _$7`
+const Label = styled.label(_t$8 || (_t$8 = _$8`
   ${0}
 `), theme$1(o => [o.typography(14).bold, o.font.text1]));
-const RequiredText = styled.span(_t2$7 || (_t2$7 = _$7`
+const RequiredText = styled.span(_t2$8 || (_t2$8 = _$8`
   ${0}
 `), theme$1(o => [o.typography(14), o.font.text3]));
-const SubLabelClickable = styled.div(_t3$7 || (_t3$7 = _$7`
+const SubLabelClickable = styled.div(_t3$8 || (_t3$8 = _$8`
   ${0}
 `), theme$1(o => [o.typography(14), o.font.text3.hover.press, o.outline.default.focus]));
-const FieldLabelWrapper = styled.div(_t4$6 || (_t4$6 = _$7`
+const FieldLabelWrapper = styled.div(_t4$7 || (_t4$7 = _$8`
   display: inline-flex;
   align-items: center;
 
@@ -850,12 +850,12 @@ const FieldLabelWrapper = styled.div(_t4$6 || (_t4$6 = _$7`
   }
 `), RequiredText, theme$1(o => o.margin.left(4)), SubLabelClickable, theme$1(o => o.margin.left('auto')));
 
-let _$6 = t => t,
-    _t$6,
-    _t2$6,
-    _t3$6,
-    _t4$5,
-    _t5$5,
+let _$7 = t => t,
+    _t$7,
+    _t2$7,
+    _t3$7,
+    _t4$6,
+    _t5$6,
     _t6$3,
     _t7$2,
     _t8,
@@ -1099,7 +1099,7 @@ const MultiLineTextField = React__default.forwardRef(function MultiLineTextField
     invalid: invalid
   }, invalid ? errorMessageProps : descriptionProps), assistiveText));
 });
-const TextFieldRoot = styled.div(_t$6 || (_t$6 = _$6`
+const TextFieldRoot = styled.div(_t$7 || (_t$7 = _$7`
   display: flex;
   flex-direction: column;
 
@@ -1107,21 +1107,21 @@ const TextFieldRoot = styled.div(_t$6 || (_t$6 = _$6`
 `), p => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-const TextFieldLabel = styled(FieldLabel)(_t2$6 || (_t2$6 = _$6`
+const TextFieldLabel = styled(FieldLabel)(_t2$7 || (_t2$7 = _$7`
   ${0}
 `), theme(o => o.margin.bottom(8)));
-const StyledInputContainer = styled.div(_t3$6 || (_t3$6 = _$6`
+const StyledInputContainer = styled.div(_t3$7 || (_t3$7 = _$7`
   height: 40px;
   display: grid;
   position: relative;
 `));
-const PrefixContainer = styled.span(_t4$5 || (_t4$5 = _$6`
+const PrefixContainer = styled.span(_t4$6 || (_t4$6 = _$7`
   position: absolute;
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
 `));
-const SuffixContainer = styled.span(_t5$5 || (_t5$5 = _$6`
+const SuffixContainer = styled.span(_t5$6 || (_t5$6 = _$7`
   position: absolute;
   top: 50%;
   right: 8px;
@@ -1130,12 +1130,12 @@ const SuffixContainer = styled.span(_t5$5 || (_t5$5 = _$6`
   display: flex;
   gap: 8px;
 `));
-const Affix = styled.span(_t6$3 || (_t6$3 = _$6`
+const Affix = styled.span(_t6$3 || (_t6$3 = _$7`
   user-select: none;
 
   ${0}
 `), theme(o => [o.typography(14).preserveHalfLeading, o.font.text2]));
-const StyledInput = styled.input(_t7$2 || (_t7$2 = _$6`
+const StyledInput = styled.input(_t7$2 || (_t7$2 = _$7`
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -1161,7 +1161,7 @@ const StyledInput = styled.input(_t7$2 || (_t7$2 = _$6`
     ${0}
   }
 `), p => p.extraLeftPadding, p => p.extraRightPadding, p => theme(o => [o.bg.surface3.hover, o.outline.default.focus, p.invalid && o.outline.assertive, o.font.text2]), theme(o => o.font.text3));
-const StyledTextareaContainer = styled.div(_t8 || (_t8 = _$6`
+const StyledTextareaContainer = styled.div(_t8 || (_t8 = _$7`
   position: relative;
   overflow: hidden;
   padding: 0 8px;
@@ -1175,10 +1175,10 @@ const StyledTextareaContainer = styled.div(_t8 || (_t8 = _$6`
   ${0};
 `), p => theme(o => [o.bg.surface3.hover, p.invalid && o.outline.assertive, o.font.text2, o.borderRadius(4)]), p => theme(o => p.invalid ? o.outline.assertive : o.outline.default), ({
   rows
-}) => css(_t9 || (_t9 = _$6`
+}) => css(_t9 || (_t9 = _$7`
     height: calc(22px * ${0} + 18px);
   `), rows));
-const StyledTextarea = styled.textarea(_t10 || (_t10 = _$6`
+const StyledTextarea = styled.textarea(_t10 || (_t10 = _$7`
   border: none;
   outline: none;
   resize: none;
@@ -1213,20 +1213,20 @@ const StyledTextarea = styled.textarea(_t10 || (_t10 = _$6`
   scrollbar-width: none; /* Firefox */
 `), p => p.noBottomPadding ? 0 : '', ({
   rows: _rows = 1
-}) => css(_t11 || (_t11 = _$6`
+}) => css(_t11 || (_t11 = _$7`
     height: calc(22px / 0.875 * ${0});
   `), _rows), theme(o => o.font.text3));
-const SingleLineCounter = styled.span(_t12 || (_t12 = _$6`
+const SingleLineCounter = styled.span(_t12 || (_t12 = _$7`
   ${0}
 `), theme(o => [o.typography(14).preserveHalfLeading, o.font.text3]));
-const MultiLineCounter = styled.span(_t13 || (_t13 = _$6`
+const MultiLineCounter = styled.span(_t13 || (_t13 = _$7`
   position: absolute;
   bottom: 9px;
   right: 8px;
 
   ${0}
 `), theme(o => [o.typography(14).preserveHalfLeading, o.font.text3]));
-const AssistiveText = styled.p(_t14 || (_t14 = _$6`
+const AssistiveText = styled.p(_t14 || (_t14 = _$7`
   ${0}
 `), p => theme(o => [o.typography(14), o.margin.top(8), o.margin.bottom(0), o.font[p.invalid ? 'assertive' : 'text1']]));
 
@@ -18557,12 +18557,12 @@ const host = createHost(primitives, {
 });
 const animated = host.animated;
 
-let _$5 = t => t,
-    _t$5,
-    _t2$5,
-    _t3$5,
-    _t4$4,
-    _t5$4,
+let _$6 = t => t,
+    _t$6,
+    _t2$6,
+    _t3$6,
+    _t4$5,
+    _t5$5,
     _t6$2,
     _t7$1;
 
@@ -18665,7 +18665,7 @@ const ModalContext = React__default.createContext({
   close: undefined,
   showDismiss: true
 });
-const ModalBackground = animated(styled.div(_t$5 || (_t$5 = _$5`
+const ModalBackground = animated(styled.div(_t$6 || (_t$6 = _$6`
   z-index: ${0};
   position: fixed;
   top: 0;
@@ -18677,7 +18677,7 @@ const ModalBackground = animated(styled.div(_t$5 || (_t$5 = _$5`
 `), ({
   zIndex
 }) => zIndex, theme$2(o => [o.bg.surface4])));
-const ModalDialog = animated(styled.div(_t2$5 || (_t2$5 = _$5`
+const ModalDialog = animated(styled.div(_t2$6 || (_t2$6 = _$6`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -18692,7 +18692,7 @@ const ModalDialog = animated(styled.div(_t2$5 || (_t2$5 = _$5`
 `), p => 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
 p.size === 'L' ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size), theme$2(o => [o.bg.background1, o.borderRadius(24)]), ({
   theme
-}) => maxWidth(theme.breakpoint.screen1), p => p.bottomSheet === 'full' ? css(_t3$5 || (_t3$5 = _$5`
+}) => maxWidth(theme.breakpoint.screen1), p => p.bottomSheet === 'full' ? css(_t3$6 || (_t3$6 = _$6`
             top: auto;
             bottom: 0;
             left: 0;
@@ -18700,29 +18700,79 @@ p.size === 'L' ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : u
             border-radius: 0;
             width: 100%;
             height: 100%;
-          `)) : p.bottomSheet ? css(_t4$4 || (_t4$4 = _$5`
+          `)) : p.bottomSheet ? css(_t4$5 || (_t4$5 = _$6`
             top: auto;
             bottom: 0;
             left: 0;
             transform: none;
             border-radius: 0;
             width: 100%;
-          `)) : css(_t5$4 || (_t5$4 = _$5`
+          `)) : css(_t5$5 || (_t5$5 = _$6`
             width: calc(100% - 48px);
           `))));
-const ModalCrossButton = styled(IconButton)(_t6$2 || (_t6$2 = _$5`
+const ModalCrossButton = styled(IconButton)(_t6$2 || (_t6$2 = _$6`
   position: absolute;
   top: 8px;
   right: 8px;
 
   ${0}
 `), theme$2(o => [o.font.text3.hover.press]));
-styled.h3(_t7$1 || (_t7$1 = _$5`
+function ModalTitle(props) {
+  const {
+    titleProps,
+    title
+  } = useContext(ModalContext);
+  return /*#__PURE__*/React__default.createElement(ModalHeading, _extends$3({}, titleProps, props), title);
+}
+const ModalHeading = styled.h3(_t7$1 || (_t7$1 = _$6`
   margin: 0;
   font-weight: inherit;
   font-size: inherit;
 `));
 
+let _$5 = t => t,
+    _t$5,
+    _t2$5,
+    _t3$5,
+    _t4$4,
+    _t5$4;
+function ModalHeader() {
+  return /*#__PURE__*/React__default.createElement(ModalHeaderRoot, null, /*#__PURE__*/React__default.createElement(StyledModalTitle, null));
+}
+const ModalHeaderRoot = styled.div(_t$5 || (_t$5 = _$5`
+  height: 64px;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+`));
+const StyledModalTitle = styled(ModalTitle)(_t2$5 || (_t2$5 = _$5`
+  ${0}
+`), theme$2(o => [o.font.text1, o.typography(16).bold]));
+const ModalAlign = styled.div(_t3$5 || (_t3$5 = _$5`
+  ${0}
+
+  @media ${0} {
+    ${0}
+  }
+`), theme$2(o => [o.padding.horizontal(24)]), ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), theme$2(o => [o.padding.horizontal(16)]));
+const ModalBody = styled.div(_t4$4 || (_t4$4 = _$5`
+  ${0}
+`), theme$2(o => [o.padding.bottom(40)]));
+const ModalButtons = styled.div(_t5$4 || (_t5$4 = _$5`
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: 8px;
+  ${0}
+
+  @media ${0} {
+    ${0}
+  }
+`), theme$2(o => [o.padding.horizontal(24).top(16)]), ({
+  theme
+}) => maxWidth(theme.breakpoint.screen1), theme$2(o => [o.padding.horizontal(16)]));
+
 let _$4 = t => t,
     _t$4,
     _t2$4,
@@ -21910,5 +21960,5 @@ const InputLabel = styled.div(_t5 || (_t5 = _`
   ${0}
 `), theme$2(o => [o.typography(14)]));
 
-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 };
+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 };
 //# sourceMappingURL=index.modern.js.map