@czi-sds/components 15.1.1 → 15.2.0

package/dist/src/core/Dialog/index.stories.js

@@ -0,0 +1,147 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestButtonPositionLeft = exports.TestNoTitleOnClose = exports.Test = exports.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Button_1 = __importDefault(require("../Button"));
+var DialogActions_1 = __importDefault(require("../DialogActions"));
+var DialogContent_1 = __importDefault(require("../DialogContent"));
+var DialogTitle_1 = __importDefault(require("../DialogTitle"));
+var index_1 = __importDefault(require("./index"));
+var LONG_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat turpis vitae odio posuere mattis. Duis tincidunt felis nibh, eget posuere diam sagittis ut. Mauris eleifend neque nec lacinia efficitur. Donec vitae diam ac massa tempus facilisis nec in mauris. Etiam id dignissim odio. Nam risus nibh, tempor ut sem quis, consequat condimentum diam. In risus leo, lacinia eget porttitor eget, viverra vel nulla. Vivamus et nibh sit amet tellus pharetra dictum ut nec ante. Nunc malesuada consequat quam, non fringilla nunc convallis et. Curabitur facilisis tristique est. Curabitur auctor pulvinar diam, ut pretium ante. Etiam a finibus elit. Cras in augue malesuada, cursus turpis posuere, volutpat ex. Sed sagittis suscipit congue. Aliquam et erat nec lacus vulputate mattis. Sed commodo purus ac dignissim sagittis. Donec nisi erat, gravida eget malesuada non, gravida quis nisl. In iaculis ipsum et varius finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar enim a eros condimentum, ac viverra magna volutpat. Proin sed cursus mauris. Curabitur condimentum lobortis placerat. Proin semper mauris id velit elementum, sed pellentesque arcu pulvinar. Curabitur hendrerit enim sit amet ante imperdiet porta. Ut semper neque et faucibus lacinia. Sed auctor ut ex ut ullamcorper. Integer nunc eros, efficitur vitae sapien at, imperdiet dictum magna. Mauris eget bibendum libero, in bibendum sem. Nulla convallis eu eros ac efficitur. Fusce porttitor, ante scelerisque dignissim sollicitudin, tortor lectus volutpat sapien, nec viverra lectus ipsum non libero. Donec aliquet quam sit amet turpis sodales condimentum. Nunc vehicula iaculis nulla. Etiam tempor dui non ullamcorper facilisis. Nam ut fermentum arcu. Etiam porttitor elementum leo a tempus. Sed posuere feugiat est sollicitudin lacinia. Vivamus vel lectus laoreet, rutrum sem sed, blandit libero. Sed pulvinar urna consectetur risus eleifend, in iaculis purus eleifend. Donec quis maximus dui. Suspendisse sit amet ultricies mi. Etiam malesuada odio eget felis posuere pulvinar. Aliquam nec pellentesque risus, in scelerisque sapien. Vivamus vel lobortis mi, id consequat diam. Quisque aliquam dignissim sem.";
+var Dialog = function (props) {
+    var buttonPosition = props.buttonPosition, _a = props.longContent, longContent = _a === void 0 ? false : _a, _b = props.isOpen, propsIsOpen = _b === void 0 ? false : _b, titleOnClose = props.titleOnClose, rest = __rest(props, ["buttonPosition", "longContent", "isOpen", "titleOnClose"]);
+    var _c = (0, react_1.useState)(propsIsOpen), isOpen = _c[0], setIsOpen = _c[1];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.default, { sdsStyle: "minimal", sdsType: "primary", onClick: handleClick, children: ["Open ", rest.sdsSize] }), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ onClose: handleClose, open: isOpen }, rest, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { title: "Title", subtitle: "Optional subtitle", onClose: titleOnClose ? handleClose : undefined, "data-testid": "dialog-title" }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { "data-testid": "dialog-content", children: longContent ? LONG_TEXT : "Content Module" }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { "data-testid": "dialog-actions", buttonPosition: buttonPosition, children: (0, jsx_runtime_1.jsx)(Buttons, {}) })] }))] }));
+    function Buttons() {
+        if (buttonPosition === "left") {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "square", sdsType: "primary", onClick: handleClose, children: "Primary Action" }), (0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "square", sdsType: "secondary", onClick: handleClose, children: "Secondary Action" })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "square", sdsType: "secondary", onClick: handleClose, children: "Secondary Action" }), (0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "square", sdsType: "primary", onClick: handleClose, children: "Primary Action" })] }));
+    }
+    function handleClick() {
+        setIsOpen(true);
+    }
+    function handleClose() {
+        setIsOpen(false);
+    }
+};
+exports.default = {
+    argTypes: {
+        buttonPosition: {
+            control: {
+                type: "radio",
+            },
+            options: ["left", "right"],
+        },
+        canClickOutsideClose: {
+            control: {
+                type: "boolean",
+            },
+        },
+        longContent: {
+            control: {
+                type: "boolean",
+            },
+        },
+        sdsSize: {
+            control: {
+                type: "radio",
+            },
+            options: ["xs", "s", "m", "l"],
+        },
+        titleOnClose: {
+            control: {
+                type: "boolean",
+            },
+        },
+    },
+    component: Dialog,
+    title: "Dialog",
+};
+// Default
+exports.Default = {
+    args: {
+        buttonPosition: "right",
+        longContent: true,
+        sdsSize: "m",
+        titleOnClose: false,
+    },
+};
+// LivePreview
+function LivePreviewDemo(props) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "xs" }, props)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "s" }, props)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "m" }, props)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "l" }, props))] }));
+}
+exports.LivePreview = {
+    args: {
+        titleOnClose: false,
+    },
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Test
+function TestDemo(props) {
+    var defaultProps = __assign(__assign({}, props), { isOpen: true, titleOnClose: true });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "xs" }, defaultProps)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "s" }, defaultProps)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "m" }, defaultProps)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "l" }, defaultProps))] }));
+}
+exports.Test = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
+};
+// Test No Title On Close
+function TestNoTitleOnCloseDemo(props) {
+    return (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "xs" }, props, { isOpen: true }));
+}
+exports.TestNoTitleOnClose = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestNoTitleOnCloseDemo, __assign({}, args)); },
+};
+// Test Button Position Left
+function TestButtonPositionLeftDemo(props) {
+    return (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "xs" }, props, { isOpen: true, buttonPosition: "left" }));
+}
+exports.TestButtonPositionLeft = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestButtonPositionLeftDemo, __assign({}, args)); },
+};

package/dist/src/core/Dialog/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/core/Dialog/index.test.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var story_utils_1 = require("@chanzuckerberg/story-utils");
+var react_1 = require("@storybook/react");
+var react_2 = require("@testing-library/react");
+var snapshotTestStoryFile = __importStar(require("./index.stories"));
+var index_stories_1 = __importStar(require("./index.stories"));
+var DIALOG_TITLE_TEST_ID = "dialog-title";
+var DIALOG_CONTENT_TEST_ID = "dialog-content";
+var DIALOG_ACTIONS_TEST_ID = "dialog-actions";
+// Returns a component that already contain all decorators from story level, meta level and global level.
+var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
+var TestButtonPositionLeft = (0, react_1.composeStory)(index_stories_1.TestButtonPositionLeft, index_stories_1.default);
+var TestNoTitleOnClose = (0, react_1.composeStory)(index_stories_1.TestNoTitleOnClose, index_stories_1.default);
+describe("<Dialog />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    test("Dialog all sizes match the snapshots", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var titles = react_2.screen.getAllByTestId(DIALOG_TITLE_TEST_ID);
+        var contents = react_2.screen.getAllByTestId(DIALOG_CONTENT_TEST_ID);
+        var actions = react_2.screen.getAllByTestId(DIALOG_ACTIONS_TEST_ID);
+        Array.from(Array(titles.length), function (_, index) { return index; }).forEach(function (index) {
+            expect(titles[index]).toMatchSnapshot();
+            expect(contents[index]).toMatchSnapshot();
+            expect(actions[index]).toMatchSnapshot();
+        });
+    });
+    it("renders Dialog without title X button", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(TestNoTitleOnClose, {}));
+        var title = react_2.screen.getByTestId(DIALOG_TITLE_TEST_ID);
+        expect(title).toMatchSnapshot();
+    });
+    it("renders Dialog left positioned buttons", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(TestButtonPositionLeft, {}));
+        var actions = react_2.screen.getByTestId(DIALOG_ACTIONS_TEST_ID);
+        expect(actions).toMatchSnapshot();
+    });
+});

package/dist/src/core/DialogActions/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DialogActionsProps as RawDialogActionsProps } from "@mui/material";
+import { DialogActionsExtraProps } from "./style";
+export type DialogActionsProps = DialogActionsExtraProps & Omit<RawDialogActionsProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">;
+/**
+ * @see https://mui.com/material-ui/react-dialog/
+ */
+declare const DialogActions: import("react").ForwardRefExoticComponent<Pick<DialogActionsProps, "className" | "style" | "classes" | "onChange" | "children" | "sx" | "color" | "translate" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disableSpacing" | keyof DialogActionsExtraProps> & import("react").RefAttributes<HTMLDivElement>>;
+export default DialogActions;

package/dist/src/core/DialogActions/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-dialog/
+ */
+var DialogActions = (0, react_1.forwardRef)(function DialogActions(props, ref) {
+    return (0, jsx_runtime_1.jsx)(style_1.StyledDialogActions, __assign({ ref: ref }, props));
+});
+exports.default = DialogActions;

package/dist/src/core/DialogActions/style.d.ts

@@ -0,0 +1,5 @@
+import { CommonThemeProps } from "../styles";
+export interface DialogActionsExtraProps extends CommonThemeProps {
+    buttonPosition?: "left" | "right";
+}
+export declare const StyledDialogActions: import("@emotion/styled").StyledComponent<import("@mui/material").DialogActionsProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & DialogActionsExtraProps, {}, {}>;

package/dist/src/core/DialogActions/style.js

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledDialogActions = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
+var doNotForwardProps = ["buttonPosition"];
+exports.StyledDialogActions = (0, styles_1.styled)(material_1.DialogActions, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n\n  ", "\n"], ["\n  padding: 0;\n\n  ", "\n"])), function (props) {
+    var spaces = (0, styles_2.getSpaces)(props);
+    var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
+    return "\n      justify-content: ".concat(buttonPosition === "right" ? "flex-end" : "flex-start", ";;\n\n      margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n\n      &.MuiDialogActions-spacing > :not(:first-of-type) {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n  ");
+});
+var templateObject_1;

package/dist/src/core/DialogContent/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DialogContentProps as RawDialogContentProps } from "@mui/material";
+export type DialogContentProps = Omit<RawDialogContentProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<DialogContentProps, "className" | "style" | "classes" | "onChange" | "children" | "sx" | "color" | "translate" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dividers"> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/src/core/DialogContent/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var style_1 = require("./style");
+exports.default = (0, react_1.forwardRef)(
+/**
+ * @see https://mui.com/material-ui/react-dialog/
+ */
+function DialogContent(props, ref) {
+    return (0, jsx_runtime_1.jsx)(style_1.StyledDialogContent, __assign({ ref: ref }, props));
+});

package/dist/src/core/DialogContent/style.d.ts

@@ -0,0 +1 @@
+export declare const StyledDialogContent: import("@emotion/styled").StyledComponent<import("@mui/material").DialogContentProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/src/core/DialogContent/style.js

@@ -0,0 +1,11 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledDialogContent = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+exports.StyledDialogContent = (0, styles_1.styled)(material_1.DialogContent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
+var templateObject_1;

package/dist/src/core/DialogPaper/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PaperProps } from "@mui/material";
+export type DialogPaperProps = Omit<PaperProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">;
+/**
+ * @see https://mui.com/material-ui/react-paper/
+ */
+declare const DialogPaper: import("react").ForwardRefExoticComponent<Pick<DialogPaperProps, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "elevation" | "square" | "sx" | "variant" | "color" | "translate" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
+export default DialogPaper;

package/dist/src/core/DialogPaper/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var common_1 = require("../Dialog/components/common");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-paper/
+ */
+var DialogPaper = (0, react_1.forwardRef)(function DialogPaper(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(common_1.DialogContext.Consumer, { children: function (_a) {
+            var sdsSize = _a.sdsSize;
+            return ((0, jsx_runtime_1.jsx)(style_1.StyledPaper, __assign({ sdsSize: sdsSize, ref: ref }, props)));
+        } }));
+});
+exports.default = DialogPaper;

package/dist/src/core/DialogPaper/style.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PaperProps } from "@mui/material";
+import { CommonThemeProps } from "src/core/styles";
+export interface StyledPaperProps extends CommonThemeProps, PaperProps {
+    sdsSize: "xs" | "s" | "m" | "l";
+}
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"elevation" | "outlined", import("@mui/material").PaperPropsVariantOverrides> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "elevation" | "square" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledPaperProps, {}, {}>;

package/dist/src/core/DialogPaper/style.js

@@ -0,0 +1,44 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPaper = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("src/core/styles");
+var boxShadows_1 = require("../styles/common/constants/boxShadows");
+// (thuang): Please keep this in sync with the props used in `ExtraProps`
+var doNotForwardProps = ["sdsSize"];
+exports.StyledPaper = (0, styles_1.styled)(material_1.Paper, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    box-shadow: ", ";\n\n    ", "\n\n    ", "\n  }\n"], ["\n  & {\n    box-shadow: ", ";\n\n    ", "\n\n    ", "\n  }\n"])), boxShadows_1.BoxShadows.L, paperDimensions, function (props) {
+    var spaces = (0, styles_2.getSpaces)(props);
+    var corners = (0, styles_2.getCorners)(props);
+    return "\n        max-height: calc(100vh - ".concat(2 * ((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0), "px);\n        border-radius: ").concat((corners === null || corners === void 0 ? void 0 : corners.m) || 0, "px;\n        padding: ").concat((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0, "px;\n      ");
+});
+function paperDimensions(props) {
+    var sdsSize = props.sdsSize;
+    var sizeToDimensions = {
+        l: {
+            minHeight: "600px",
+            width: "1200px",
+        },
+        m: {
+            minHeight: "480px",
+            width: "900px",
+        },
+        s: {
+            minHeight: "400px",
+            width: "600px",
+        },
+        xs: {
+            minHeight: "160px",
+            width: "400px",
+        },
+    };
+    var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
+    return "\n    width: ".concat(width, ";\n    min-height: ").concat(minHeight, ";\n    max-width: revert;\n  ");
+}
+var templateObject_1;

package/dist/src/core/DialogTitle/components/CloseButton/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ButtonIconSizeToTypes } from "src/core/ButtonIcon";
+import { IconNameToSizes } from "src/core/Icon";
+declare const CloseButton: import("react").ForwardRefExoticComponent<Pick<import("../../../ButtonIcon/style").ButtonIconExtraProps<keyof ButtonIconSizeToTypes> & Omit<import("@mui/material").IconButtonProps, "content" | "autoFocus" | "nonce" | "rel" | "rev"> & import("src/core/ButtonIcon").ButtonIconInternalProps<keyof IconNameToSizes>, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "sx" | "color" | "translate" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "name" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "edge" | keyof import("../../../ButtonIcon/style").ButtonIconExtraProps<keyof ButtonIconSizeToTypes> | keyof import("src/core/ButtonIcon").ButtonIconInternalProps<keyof IconNameToSizes>> & import("react").RefAttributes<HTMLButtonElement | null>>;
+export default CloseButton;

package/dist/src/core/DialogTitle/components/CloseButton/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var common_1 = require("src/core/Dialog/components/common");
+var style_1 = require("./style");
+var CloseButton = (0, react_1.forwardRef)(function CloseButton(props, ref) {
+    var SDS_SIZE_TO_COMPONENT_SIZE = {
+        l: "large",
+        m: "large",
+        s: "medium",
+        xs: "small",
+    };
+    return ((0, jsx_runtime_1.jsx)(common_1.DialogContext.Consumer, { children: function (_a) {
+            var sdsSize = _a.sdsSize;
+            var size = SDS_SIZE_TO_COMPONENT_SIZE[sdsSize];
+            return ((0, jsx_runtime_1.jsx)(style_1.StyledButtonIcon, __assign({ "aria-label": "Close", ref: ref, sdsType: "tertiary", sdsSize: size }, props, { sdsIcon: "xMark" })));
+        } }));
+});
+exports.default = CloseButton;

package/dist/src/core/DialogTitle/components/CloseButton/style.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledButtonIcon: import("@emotion/styled").StyledComponent<Pick<import("../../../ButtonIcon/style").ButtonIconExtraProps<keyof import("src/core/ButtonIcon").ButtonIconSizeToTypes> & Omit<import("@mui/material").IconButtonProps, "content" | "autoFocus" | "nonce" | "rel" | "rev"> & import("src/core/ButtonIcon").ButtonIconInternalProps<keyof import("../../../Icon").IconNameToSizes>, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "sx" | "color" | "translate" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "name" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "edge" | keyof import("../../../ButtonIcon/style").ButtonIconExtraProps<keyof import("src/core/ButtonIcon").ButtonIconSizeToTypes> | keyof import("src/core/ButtonIcon").ButtonIconInternalProps<keyof import("../../../Icon").IconNameToSizes>> & import("react").RefAttributes<HTMLButtonElement | null> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/dist/src/core/DialogTitle/components/CloseButton/style.js

@@ -0,0 +1,18 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledButtonIcon = void 0;
+var styles_1 = require("@mui/material/styles");
+var ButtonIcon_1 = __importDefault(require("src/core/ButtonIcon"));
+var styles_2 = require("src/core/styles");
+exports.StyledButtonIcon = (0, styles_1.styled)(ButtonIcon_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n"], ["\n  position: absolute;\n\n  ", "\n"])), function (props) {
+    var spaces = (0, styles_2.getSpaces)(props);
+    return "\n      top: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n      right: ").concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n    ");
+});
+var templateObject_1;

package/dist/src/core/DialogTitle/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { DialogTitleProps as RawDialogTitleProps } from "@mui/material";
+import { DialogTitleExtraProps, Subtitle, Title } from "./style";
+export { Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle };
+export interface DialogTitleProps extends DialogTitleExtraProps, Omit<RawDialogTitleProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> {
+    title?: string;
+    subtitle?: string;
+    onClose?: () => void;
+}
+/**
+ * @see https://mui.com/material-ui/react-dialog/
+ */
+declare const DialogTitle: import("react").ForwardRefExoticComponent<Pick<DialogTitleProps, "className" | "style" | "classes" | "onChange" | "children" | "sx" | "variant" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "component" | "onClose" | "align" | "subtitle" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export default DialogTitle;