newskit 4.2.0 → 5.1.0

package/esm/dialog/base-dialog-tests.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-dialog-tests.d.ts","sourceRoot":"","sources":["../../../src/dialog/base-dialog-tests.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,iBAAiB,WACpB,MAAM,EAAE,CAAC,eAAe,CAAC,UACzB,WAAW,QACb,WAAW,SA2GlB,CAAC"}
+{"version":3,"file":"base-dialog-tests.d.ts","sourceRoot":"","sources":["../../../src/dialog/base-dialog-tests.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,iBAAiB,WACpB,MAAM,EAAE,CAAC,eAAe,CAAC,UACzB,WAAW,QACb,WAAW,SA6JlB,CAAC"}

package/esm/dialog/base-dialog-tests.js

@@ -96,5 +96,40 @@ export var sharedDialogTests = function (Dialog, header, body) {
         fireEvent.click(dialogCloseIcon);
         expect(mockCallBack).toHaveBeenCalled();
     });
+    test('renders without close button', function () {
+        var fragment = renderToFragmentWithTheme(Dialog, {
+            open: true,
+            header: header,
+            children: body,
+            onDismiss: function () { },
+            closePosition: 'none',
+        });
+        expect(fragment).toMatchSnapshot();
+    });
+    test('renders without header and close', function () {
+        var fragment = renderToFragmentWithTheme(Dialog, {
+            open: true,
+            children: body,
+            onDismiss: function () { },
+            closePosition: 'none',
+        });
+        expect(fragment).toMatchSnapshot();
+    });
+    test('toggle aria-hidden to content outside dialog', function () {
+        var Component = function () {
+            var _a = React.useState(true), open = _a[0], setOpen = _a[1];
+            return (React.createElement(React.Fragment, null,
+                React.createElement("p", { "data-testid": "outside-content" }, "other content"),
+                React.createElement(Dialog, { open: open, onDismiss: function () { return setOpen(false); } }, "Dialog content")));
+        };
+        var _a = renderWithTheme(Component), getByTestId = _a.getByTestId, asFragment = _a.asFragment;
+        // outside content is hidden for screen readers when dialog is open
+        expect(getByTestId('outside-content')).toHaveAttribute('aria-hidden', 'true');
+        expect(asFragment()).toMatchSnapshot();
+        // outside content should be visible when dialog is closed
+        fireEvent.click(getByTestId('button'));
+        expect(getByTestId('outside-content')).not.toHaveAttribute('aria-hidden');
+        expect(asFragment()).toMatchSnapshot();
+    });
 };
 //# sourceMappingURL=base-dialog-tests.js.map

package/esm/dialog/base-dialog-tests.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-dialog-tests.js","sourceRoot":"","sources":["../../../src/dialog/base-dialog-tests.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,2BAA2B;AAC3B,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,yBAAyB,EAAE,eAAe,EAAC,MAAM,oBAAoB,CAAC;AAG9E,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAC/B,MAAiC,EACjC,MAAmB,EACnB,IAAiB;IAEjB,IAAI,CAAC,iBAAiB,EAAE;QACtB,IAAM,QAAQ,GAAG,yBAAyB,CAAC,MAAM,EAAE;YACjD,IAAI,EAAE,IAAI;YACV,MAAM,QAAA;YACN,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,cAAO,CAAC;SACpB,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,wBAAwB,EAAE;QAC7B,IAAM,QAAQ,GAAG,yBAAyB,CAAC,MAAM,EAAE;YACjD,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,cAAO,CAAC;YACnB,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,4CAA4C,EAAE;QACjD,IAAM,QAAQ,GAAG,yBAAyB,CAAC,MAAM,EAAE;YACjD,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,cAAO,CAAC;YACnB,cAAc,EAAE,aAAa;YAC7B,MAAM,EAAE,CACN;gBACE,6BAAK,EAAE,EAAC,aAAa,+BAA+B,CACnD,CACJ;YACD,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,yCAAyC,EAAE;QAC9C,IAAM,QAAQ,GAAG,yBAAyB,CAAC,MAAM,EAAE;YACjD,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,cAAO,CAAC;YACnB,eAAe,EAAE,qBAAqB;YACtC,QAAQ,EAAE,CACR;gBACE,6BAAK,EAAE,EAAC,aAAa,mCAAmC;gBACxD,6BAAK,EAAE,EAAC,SAAS,+BAA+B,CAC/C,CACJ;SACF,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,yBAAyB,EAAE;QAC9B,IAAM,QAAQ,GAAG,yBAAyB,CAAC,MAAM,EAAE;YACjD,IAAI,EAAE,IAAI;YACV,MAAM,QAAA;YACN,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,cAAO,CAAC;YACnB,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,4DAA4D,EAAE;QACjE,IAAM,QAAQ,GAAG,yBAAyB,CAAC,MAAM,EAAE;YACjD,IAAI,EAAE,IAAI;YACV,MAAM,QAAA;YACN,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,cAAO,CAAC;YACnB,gBAAgB,EAAE,IAAI;SACvB,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iDAAiD,EAAE;QACtD,IAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC/B,eAAe,CAAC,MAAM,EAAE;YACtB,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,YAAY;YACvB,MAAM,QAAA;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QAEH,SAAS,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAC,GAAG,EAAE,QAAQ,EAAC,CAAC,CAAC;QAE3C,MAAM,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,yDAAyD,EAAE;QAC9D,IAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC/B,IAAM,OAAO,GAAG,eAAe,CAAC,MAAM,EAAE;YACtC,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,YAAY;YACvB,MAAM,QAAA;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAE1B,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEzB,MAAM,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,8DAA8D,EAAE;QACnE,IAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC/B,IAAM,eAAe,GAAG,eAAe,CAAC,MAAM,EAAE;YAC9C,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,YAAY;YACvB,MAAM,QAAA;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAE3B,SAAS,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAEjC,MAAM,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}
+{"version":3,"file":"base-dialog-tests.js","sourceRoot":"","sources":["../../../src/dialog/base-dialog-tests.tsx"],"names":[],"mappings":"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"}

package/esm/dialog/base-dialog-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-dialog-view.d.ts","sourceRoot":"","sources":["../../../src/dialog/base-dialog-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AA2B5C,eAAO,MAAM,cAAc,4FAyG1B,CAAC"}
+{"version":3,"file":"base-dialog-view.d.ts","sourceRoot":"","sources":["../../../src/dialog/base-dialog-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAmB5C,eAAO,MAAM,cAAc,4FAuG1B,CAAC"}

package/esm/dialog/base-dialog-view.js

@@ -20,40 +20,36 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useRef } from 'react';
-import { StyledDialogPanel, StyledDialogContent, StyledDialogHeader, StyledDialogHeaderContent, StyledFillSpaceCloseButton, StyledCloseButton, StyledMoveFocusInside, } from './styled';
-import { Stack } from '../stack';
+import React from 'react';
+import { StyledDialogPanel, StyledDialogContent, StyledDialogHeader, StyledDialogHeaderBG, StyledMoveFocusInside, StyledCloseButtonContainer, } from './styled';
 import { IconFilledClose } from '../icons';
 import { ButtonSize } from '../button';
-import { useResizeObserver } from '../utils/hooks/use-resize-observer';
 import { deepMerge } from '../utils/deep-merge';
 import { filterOutFalsyProperties } from '../utils/filter-object';
 import { mergeBreakpointObject } from '../utils/merge-breakpoint-object';
 import { useTheme } from '../theme';
 import { ScreenReaderOnly } from '../screen-reader-only';
 import { useReactKeys } from '../utils/hooks';
-/* istanbul ignore next */
-var centerCloseButton = function (top) { return ({
-    top: top / 2,
-    transform: top !== 0 ? "translateY(-50%)" : undefined,
-}); };
+import { IconButton } from '../icon-button';
 export var BaseDialogView = React.forwardRef(function (_a, panelRef) {
     var handleCloseButtonClick = _a.handleCloseButtonClick, className = _a.className, path = _a.path, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, closePosition = _a.closePosition, header = _a.header, ariaDescribedby = _a.ariaDescribedby, ariaLabelledby = _a.ariaLabelledby, children = _a.children, open = _a.open, disableFocusTrap = _a.disableFocusTrap, _c = _a.inline, inline = _c === void 0 ? false : _c, props = __rest(_a, ["handleCloseButtonClick", "className", "path", "overrides", "closePosition", "header", "ariaDescribedby", "ariaLabelledby", "children", "open", "disableFocusTrap", "inline"]);
-    var headerRef = useRef(null);
-    var _d = useResizeObserver(headerRef), headerHeight = _d[1];
     var listDialogItemNotification = useReactKeys(1)[0];
     var theme = useTheme();
-    var closeButtonOverrides = __assign({}, deepMerge(mergeBreakpointObject(Object.keys(theme.breakpoints)), theme.componentDefaults.drawer.closeButton, filterOutFalsyProperties(overrides.closeButton)));
-    var MoveFocusInsideWhenFocusTrapDisabled = disableFocusTrap && open ? StyledMoveFocusInside : React.Fragment;
-    return (React.createElement(StyledDialogPanel, __assign({ ref: panelRef, className: className, role: "dialog", "aria-modal": disableFocusTrap ? 'false' : 'true', "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, overrides: overrides, path: path, inline: inline, "$open": open }, props),
+    var closeButtonOverrides = __assign({}, deepMerge(mergeBreakpointObject(Object.keys(theme.breakpoints)), theme.componentDefaults[path].closeButton, filterOutFalsyProperties(overrides.closeButton)));
+    var MoveFocusInsideWhenFocusTrapDisabled = disableFocusTrap && open
+        ? function (_a) {
+            var focusChildren = _a.children;
+            return (React.createElement(StyledMoveFocusInside, { closePosition: closePosition }, focusChildren));
+        }
+        : React.Fragment;
+    return (React.createElement(StyledDialogPanel, __assign({ ref: panelRef, className: className, role: "dialog", "aria-modal": disableFocusTrap ? 'false' : 'true', "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, overrides: overrides, path: path, inline: inline, "$open": open, closePosition: closePosition }, props),
         React.createElement(MoveFocusInsideWhenFocusTrapDisabled, null,
-            React.createElement(StyledDialogHeader, { overrides: overrides, ref: headerRef, path: path },
-                React.createElement(Stack, { flow: "horizontal-center", flowReverse: closePosition === 'left' },
-                    header && (React.createElement(StyledDialogHeaderContent, { path: path }, header)),
-                    React.createElement(StyledFillSpaceCloseButton, { path: path, overrides: overrides, closePosition: closePosition }))),
+            header === undefined && closePosition === 'none' ? null : (React.createElement(StyledDialogHeaderBG, { overrides: overrides, path: path })),
+            header !== undefined && (React.createElement(StyledDialogHeader, { overrides: overrides, path: path }, header)),
             React.createElement(StyledDialogContent, { "data-testid": "dialog-content", path: path, overrides: overrides }, children),
-            React.createElement(StyledCloseButton, { path: path, closePosition: closePosition, style: __assign({}, centerCloseButton(headerHeight)), "aria-label": "close", "aria-describedby": disableFocusTrap ? listDialogItemNotification : undefined, onClick: handleCloseButtonClick, overrides: closeButtonOverrides, size: ButtonSize.Medium },
-                React.createElement(IconFilledClose, null)),
+            closePosition !== 'none' && (React.createElement(StyledCloseButtonContainer, { path: path, overrides: overrides, closePosition: closePosition },
+                React.createElement(IconButton, { "aria-label": "close", "aria-describedby": disableFocusTrap ? listDialogItemNotification : undefined, onClick: handleCloseButtonClick, overrides: closeButtonOverrides, size: ButtonSize.Medium },
+                    React.createElement(IconFilledClose, null)))),
             disableFocusTrap && (React.createElement(ScreenReaderOnly, { id: listDialogItemNotification }, "With the next tab you will be leaving the dialog window.")))));
 });
 //# sourceMappingURL=base-dialog-view.js.map

package/esm/dialog/base-dialog-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-dialog-view.js","sourceRoot":"","sources":["../../../src/dialog/base-dialog-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-dialog-view.js","sourceRoot":"","sources":["../../../src/dialog/base-dialog-view.tsx"],"names":[],"mappings":"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"}

package/esm/dialog/styled.d.ts

@@ -4,41 +4,36 @@ import { BaseDialogViewProps } from './types';
 export declare const StyledDialogPanel: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Pick<BaseDialogViewProps, "path" | "inline" | "overrides"> & {
+} & Pick<BaseDialogViewProps, "inline" | "path" | "overrides" | "closePosition"> & {
     $open?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledMoveFocusInside: import("@emotion/styled").StyledComponent<import("react-focus-lock/interfaces").AutoFocusProps & {
     theme?: import("@emotion/react").Theme | undefined;
-}, {}, {
+} & Pick<BaseDialogViewProps, "closePosition">, {}, {
     ref?: import("react").Ref<MoveFocusInside> | undefined;
 }>;
-export declare const StyledDialogHeader: import("@emotion/styled").StyledComponent<{
+export declare const StyledDialogHeaderBG: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Pick<BaseDialogViewProps, "path" | "inline" | "overrides"> & {
+} & Pick<BaseDialogViewProps, "inline" | "path" | "overrides" | "closePosition"> & {
     $open?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledDialogHeaderContent: import("@emotion/styled").StyledComponent<{
+export declare const StyledDialogHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Pick<BaseDialogViewProps, "path" | "inline" | "overrides"> & {
+} & Pick<BaseDialogViewProps, "inline" | "path" | "overrides" | "closePosition"> & {
     $open?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledDialogContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Pick<BaseDialogViewProps, "path" | "inline" | "overrides"> & {
+} & Pick<BaseDialogViewProps, "inline" | "path" | "overrides" | "closePosition"> & {
     $open?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledFillSpaceCloseButton: import("@emotion/styled").StyledComponent<{
+export declare const StyledCloseButtonContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Pick<BaseDialogViewProps, "path" | "inline" | "overrides"> & {
+} & Pick<BaseDialogViewProps, "inline" | "path" | "overrides" | "closePosition"> & {
     $open?: boolean | undefined;
 } & Pick<BaseDialogViewProps, "closePosition">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledCloseButton: import("@emotion/styled").StyledComponent<(import("react").PropsWithChildren<import("..").IconButtonProps> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}) & Pick<BaseDialogViewProps, "path" | "inline" | "overrides"> & {
-    $open?: boolean | undefined;
-} & Pick<BaseDialogViewProps, "closePosition">, {}, {}>;
 //# sourceMappingURL=styled.d.ts.map

package/esm/dialog/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/dialog/styled.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,kBAAkB,CAAC;AASjD,OAAO,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAO5C,eAAO,MAAM,iBAAiB;;;;;yGAa7B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;EAKjC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;yGAK9B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;yGAMrC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;yGAM/B,CAAC;AAGF,eAAO,MAAM,0BAA0B;;;;;sJAiBtC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;uDAe7B,CAAC"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/dialog/styled.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,kBAAkB,CAAC;AAQjD,OAAO,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AA4B5C,eAAO,MAAM,iBAAiB;;;;;yGAY7B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;EAWjC,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;yGAQ9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;yGAM/B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;sJAiBtC,CAAC"}

package/esm/dialog/styled.js

@@ -3,9 +3,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { MoveFocusInside } from 'react-focus-lock';
-import { IconButton } from '../icon-button';
-import { styled, getStylePreset, getResponsiveSpace, getResponsiveSize, getSizingCssFromTheme, } from '../utils/style';
-export var StyledDialogPanel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", "\n  ", "\n  ", "\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n"], ["\n  box-sizing: border-box;\n  ", "\n  ", "\n  ", "\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n"])), function (_a) {
+import { styled, getStylePreset, getResponsiveSpace, getSizingCssFromTheme, css, } from '../utils/style';
+var createCssGrid = function (_a) {
+    var closePosition = _a.closePosition;
+    return closePosition === 'left'
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: grid;\n        grid-template-areas:\n          'close header'\n          'content content';\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n      "], ["\n        display: grid;\n        grid-template-areas:\n          'close header'\n          'content content';\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n      "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        display: grid;\n        grid-template-areas:\n          'header close'\n          'content content';\n        grid-template-columns: 1fr auto;\n        grid-template-rows: auto 1fr;\n      "], ["\n        display: grid;\n        grid-template-areas:\n          'header close'\n          'content content';\n        grid-template-columns: 1fr auto;\n        grid-template-rows: auto 1fr;\n      "])));
+};
+export var StyledDialogPanel = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", "\n  ", "\n  ", "\n  ", "  \n  overflow: hidden;\n"], ["\n  box-sizing: border-box;\n  ", "\n  ", "\n  ", "\n  ", "  \n  overflow: hidden;\n"])), function (_a) {
     var inline = _a.inline;
     return ({
         position: inline ? 'absolute' : 'fixed',
@@ -17,35 +21,34 @@ export var StyledDialogPanel = styled.div(templateObject_1 || (templateObject_1
     });
 }, function (_a) {
     var path = _a.path;
-    return getResponsiveSpace('zIndex', path + ".panel", 'panel', 'zIndex');
+    return getResponsiveSpace('zIndex', "".concat(path, ".panel"), 'panel', 'zIndex');
+}, function (_a) {
+    var closePosition = _a.closePosition;
+    return createCssGrid({ closePosition: closePosition });
 });
-export var StyledMoveFocusInside = styled(MoveFocusInside)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden auto;\n"])));
-export var StyledDialogHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", "\n  ", "\n  flex-shrink: 0; //fix min-height issues\n"], ["\n  box-sizing: border-box;\n  ", "\n  ", "\n  flex-shrink: 0; //fix min-height issues\n"])), function (_a) {
-    var path = _a.path;
-    return getStylePreset(path + ".header", 'header');
-}, getSizingCssFromTheme('minHeight', 'sizing080'));
-export var StyledDialogHeaderContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (_a) {
+export var StyledMoveFocusInside = styled(MoveFocusInside)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden auto;\n  ", ";\n  // it makes this container to take full space form it parent grid\n  grid-row-start: 1;\n  grid-row-end: 3;\n  grid-column-start: 1;\n  grid-column-end: 3;\n"], ["\n  height: 100%;\n  overflow: hidden auto;\n  ", ";\n  // it makes this container to take full space form it parent grid\n  grid-row-start: 1;\n  grid-row-end: 3;\n  grid-column-start: 1;\n  grid-column-end: 3;\n"])), function (_a) {
+    var closePosition = _a.closePosition;
+    return createCssGrid({ closePosition: closePosition });
+});
+// This is empty div that sits behind header content and close button so that style-preset can be applied to it.
+export var StyledDialogHeaderBG = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  // takes the space of header and close grid area\n  grid-row-start: 1;\n  grid-column-start: 1;\n  grid-column-end: 3;\n"], ["\n  ", ";\n  // takes the space of header and close grid area\n  grid-row-start: 1;\n  grid-column-start: 1;\n  grid-column-end: 3;\n"])), function (_a) {
     var path = _a.path;
-    return getResponsiveSpace('padding', path + ".header", 'header', 'spaceInset');
+    return getStylePreset("".concat(path, ".header"), 'header');
 });
-export var StyledDialogContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  flex-grow: 1;\n  overflow: hidden auto;\n  ", "\n"], ["\n  box-sizing: border-box;\n  flex-grow: 1;\n  overflow: hidden auto;\n  ", "\n"])), function (_a) {
+export var StyledDialogHeader = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", "\n  display: flex;\n  grid-area: header;\n  align-items: center;\n  ", "\n"], ["\n  box-sizing: border-box;\n  ", "\n  display: flex;\n  grid-area: header;\n  align-items: center;\n  ", "\n"])), getSizingCssFromTheme('minHeight', 'sizing080'), function (_a) {
     var path = _a.path;
-    return getResponsiveSpace('padding', path + ".content", 'content', 'spaceInset');
+    return getResponsiveSpace('padding', "".concat(path, ".header"), 'header', 'spaceInset');
 });
-// This elements is needed to fill the space behind close button which is positioned absolute
-export var StyledFillSpaceCloseButton = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", "\n  ", "  \n  ", "\n  ", "\n  flex-shrink: 0;\n"], ["\n  box-sizing: border-box;\n  ", "\n  ", "  \n  ", "\n  ", "\n  flex-shrink: 0;\n"])), function (_a) {
+export var StyledDialogContent = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  grid-area: content;\n  overflow: hidden auto;\n  ", "\n"], ["\n  box-sizing: border-box;\n  grid-area: content;\n  overflow: hidden auto;\n  ", "\n"])), function (_a) {
     var path = _a.path;
-    return getResponsiveSpace('margin', path + ".closeButton", 'closeButton', 'spaceInset');
-}, getResponsiveSize('width', 'iconButton.medium', '', 'width'), getResponsiveSize('height', 'iconButton.medium', '', 'height'), function (_a) {
-    var closePosition = _a.closePosition;
-    return closePosition === 'left' ? "margin-right: auto;" : "margin-left: auto;";
+    return getResponsiveSpace('padding', "".concat(path, ".content"), 'content', 'spaceInset');
 });
-export var StyledCloseButton = styled(IconButton)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  ", "\n  ", "\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  ", "\n  ", "\n"])), function (_a) {
-    var closePosition = _a.closePosition;
-    return (closePosition === 'left' ? "left: 0;" : "right: 0;");
-}, function (_a) {
+export var StyledCloseButtonContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  grid-area: close;\n  box-sizing: border-box;\n  align-self: center;\n\n  ", ";\n  ", "\n"], ["\n  grid-area: close;\n  box-sizing: border-box;\n  align-self: center;\n\n  ", ";\n  ", "\n"])), function (_a) {
     var path = _a.path;
-    return getResponsiveSpace(function (margin) { return ({ margin: "0 " + margin }); }, path + ".closeButton", '', 'spaceInset');
+    return getResponsiveSpace('padding', "".concat(path, ".closeButton"), 'closeButton', 'spaceInset');
+}, function (_a) {
+    var closePosition = _a.closePosition;
+    return closePosition === 'left' ? "padding-right: 0;" : "padding-left: 0;";
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 //# sourceMappingURL=styled.js.map

package/esm/dialog/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/dialog/styled.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/dialog/styled.tsx"],"names":[],"mappings":"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"}

package/esm/dialog/types.d.ts

@@ -1,15 +1,16 @@
 import React, { HTMLAttributes } from 'react';
+import { TransitionToken } from '../theme';
 import { MQ } from '../utils/style';
 export interface BaseDialogOverridesProps {
     overlay?: {
         zIndex?: number;
         stylePreset?: MQ<string>;
-        transitionPreset?: string | string[];
+        transitionPreset?: TransitionToken | TransitionToken[];
     };
     panel?: {
         zIndex?: number;
         stylePreset?: MQ<string>;
-        transitionPreset?: string | string[];
+        transitionPreset?: TransitionToken | TransitionToken[];
     };
     header?: {
         stylePreset?: MQ<string>;
@@ -26,7 +27,7 @@ export interface BaseDialogOverridesProps {
 export interface BaseDialogViewProps extends HTMLAttributes<HTMLDivElement> {
     path: string;
     handleCloseButtonClick: () => void;
-    closePosition?: 'left' | 'right';
+    closePosition?: 'left' | 'right' | 'none';
     header?: React.ReactNode;
     children: Exclude<React.ReactNode, 'undefined'>;
     ariaDescribedby?: string;

package/esm/dialog/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KACtC,CAAC;IACF,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KACtC,CAAC;IACF,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KACzB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KACzB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KACzB,CAAC;CACH;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB,EAAE,MAAM,IAAI,CAAC;IAEnC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,wBAAwB,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,sBAAsB,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAClE,aAAa,EAAE,CAAC,kBAAkB,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,mBAAmB,EACnB,WAAW,GAAG,MAAM,GAAG,wBAAwB,GAAG,MAAM,CACzD,EACD,IAAI,CAAC,uBAAuB,EAAE,UAAU,GAAG,eAAe,CAAC,EAC3D,KAAK,CAAC,cAAc;CAAG"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AACzC,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;KACxD,CAAC;IACF,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;KACxD,CAAC;IACF,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KACzB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KACzB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KACzB,CAAC;CACH;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB,EAAE,MAAM,IAAI,CAAC;IAEnC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,wBAAwB,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,sBAAsB,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAClE,aAAa,EAAE,CAAC,kBAAkB,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,mBAAmB,EACnB,WAAW,GAAG,MAAM,GAAG,wBAAwB,GAAG,MAAM,CACzD,EACD,IAAI,CAAC,uBAAuB,EAAE,UAAU,GAAG,eAAe,CAAC,EAC3D,KAAK,CAAC,cAAc;CAAG"}

package/esm/divider/defaults.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    divider: {
+        stylePreset: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=defaults.d.ts.map

package/esm/divider/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/divider/defaults.ts"],"names":[],"mappings":";;;;;AAAA,wBAIE"}

package/esm/divider/defaults.js

@@ -0,0 +1,6 @@
+export default {
+    divider: {
+        stylePreset: 'divider',
+    },
+};
+//# sourceMappingURL=defaults.js.map

package/esm/divider/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/divider/defaults.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,OAAO,EAAE;QACP,WAAW,EAAE,SAAS;KACvB;CACF,CAAC"}

package/esm/divider/divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+C,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAEhF,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;CAC1B;AACD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC;IACvB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAqBD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAE1C,CAAC"}
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+C,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAKhF,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;CAC1B;AACD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC;IACvB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAyBD,eAAO,MAAM,OAAO,wBAA2D,CAAC"}

package/esm/divider/divider.js

@@ -15,6 +15,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import { styled, getStylePreset, handleResponsiveProp } from '../utils/style';
+import defaults from './defaults';
+import stylePresets from './style-presets';
+import { withOwnTheme } from '../utils/with-own-theme';
 var StyledDivider = styled.hr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  border-width: 0px;\n  margin: 0;\n  ", "\n"], ["\n  ", ";\n  border-width: 0px;\n  margin: 0;\n  ", "\n"])), getStylePreset('divider.stylePreset', 'stylePreset'), handleResponsiveProp({ vertical: false }, function (_a, props) {
     var vertical = _a.vertical;
     var borderWidth = getStylePreset('divider')(props).borderWidth;
@@ -29,6 +32,7 @@ var StyledDivider = styled.hr(templateObject_1 || (templateObject_1 = __makeTemp
             width: '100%',
         };
 }));
-export var Divider = function (props) { return (React.createElement(StyledDivider, __assign({ "data-testid": "divider", "aria-hidden": true }, props))); };
+var ThemelessDivider = function (props) { return (React.createElement(StyledDivider, __assign({ "data-testid": "divider", "aria-hidden": true }, props))); };
+export var Divider = withOwnTheme(ThemelessDivider)({ defaults: defaults, stylePresets: stylePresets });
 var templateObject_1;
 //# sourceMappingURL=divider.js.map

package/esm/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAE,cAAc,EAAE,oBAAoB,EAAK,MAAM,gBAAgB,CAAC;AAUhF,IAAM,aAAa,GAAG,MAAM,CAAC,EAAE,4HAAc,MACzC,EAAoD,2CAGpD,EAYA,IACH,KAhBG,cAAc,CAAC,qBAAqB,EAAE,aAAa,CAAC,EAGpD,oBAAoB,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAC,EAAE,UAAC,EAAU,EAAE,KAAK;QAAhB,QAAQ,cAAA;IAC3C,IAAA,WAAW,GAAI,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,YAApC,CAAqC;IACvD,OAAO,QAAQ;QACb,CAAC,CAAC;YACE,eAAe,EAAE,WAAW;YAC5B,OAAO,EAAE,cAAc;YACvB,MAAM,EAAE,MAAM;SACf;QACH,CAAC,CAAC;YACE,cAAc,EAAE,WAAW;YAC3B,KAAK,EAAE,MAAM;SACd,CAAC;AACR,CAAC,CAAC,CACH,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAA2B,UAAA,KAAK,IAAI,OAAA,CACtD,oBAAC,aAAa,4BAAa,SAAS,yBAAiB,KAAK,EAAI,CAC/D,EAFuD,CAEvD,CAAC"}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAE,cAAc,EAAE,oBAAoB,EAAK,MAAM,gBAAgB,CAAC;AAChF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAC,YAAY,EAAC,MAAM,yBAAyB,CAAC;AAUrD,IAAM,aAAa,GAAG,MAAM,CAAC,EAAE,4HAAc,MACzC,EAAoD,2CAGpD,EAYA,IACH,KAhBG,cAAc,CAAC,qBAAqB,EAAE,aAAa,CAAC,EAGpD,oBAAoB,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAC,EAAE,UAAC,EAAU,EAAE,KAAK;QAAhB,QAAQ,cAAA;IAC3C,IAAA,WAAW,GAAI,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,YAApC,CAAqC;IACvD,OAAO,QAAQ;QACb,CAAC,CAAC;YACE,eAAe,EAAE,WAAW;YAC5B,OAAO,EAAE,cAAc;YACvB,MAAM,EAAE,MAAM;SACf;QACH,CAAC,CAAC;YACE,cAAc,EAAE,WAAW;YAC3B,KAAK,EAAE,MAAM;SACd,CAAC;AACR,CAAC,CAAC,CACH,CAAC;AAEF,IAAM,gBAAgB,GAA2B,UAAA,KAAK,IAAI,OAAA,CACxD,oBAAC,aAAa,4BAAa,SAAS,yBAAiB,KAAK,EAAI,CAC/D,EAFyD,CAEzD,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC,EAAC,QAAQ,UAAA,EAAE,YAAY,cAAA,EAAC,CAAC,CAAC"}

package/esm/divider/style-presets.d.ts

@@ -0,0 +1,4 @@
+import { StylePreset } from '../theme/types';
+declare const _default: Record<string, StylePreset>;
+export default _default;
+//# sourceMappingURL=style-presets.d.ts.map

package/esm/divider/style-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-presets.d.ts","sourceRoot":"","sources":["../../../src/divider/style-presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;;AAE3C,wBAeiC"}

package/esm/divider/style-presets.js

@@ -0,0 +1,17 @@
+export default {
+    divider: {
+        base: {
+            borderStyle: 'solid',
+            borderColor: '{{colors.interface040}}',
+            borderWidth: '{{borders.borderWidthDefault}}',
+        },
+    },
+    dividerInverse: {
+        base: {
+            borderStyle: 'solid',
+            borderColor: '{{colors.whiteTint050}}',
+            borderWidth: '{{borders.borderWidthDefault}}',
+        },
+    },
+};
+//# sourceMappingURL=style-presets.js.map

package/esm/divider/style-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-presets.js","sourceRoot":"","sources":["../../../src/divider/style-presets.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,yBAAyB;YACtC,WAAW,EAAE,gCAAgC;SAC9C;KACF;IACD,cAAc,EAAE;QACd,IAAI,EAAE;YACJ,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,yBAAyB;YACtC,WAAW,EAAE,gCAAgC;SAC9C;KACF;CAC6B,CAAC"}

package/esm/drawer/defaults.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    drawer: {
+        overlay: {
+            zIndex: number;
+            transitionPreset: string;
+        };
+        panel: {
+            zIndex: number;
+            stylePreset: string;
+            maxSize: string;
+            minSize: string;
+            size: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            left: {
+                transitionPreset: string[];
+            };
+            right: {
+                transitionPreset: string[];
+            };
+            top: {
+                transitionPreset: string[];
+            };
+            bottom: {
+                transitionPreset: string[];
+            };
+        };
+        header: {
+            spaceInset: string;
+        };
+        content: {
+            spaceInset: string;
+        };
+        closeButton: {
+            stylePreset: string;
+            spaceInset: string;
+        };
+    };
+    inlineDrawer: {
+        __extends: string;
+        panel: {
+            __extends: string;
+            maxSize: string;
+        };
+    };
+};
+export default _default;
+//# sourceMappingURL=defaults.d.ts.map

package/esm/drawer/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/drawer/defaults.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAiDE"}

package/esm/drawer/defaults.js

@@ -0,0 +1,51 @@
+export default {
+    drawer: {
+        overlay: {
+            zIndex: 70,
+            transitionPreset: 'fade',
+        },
+        panel: {
+            zIndex: 80,
+            stylePreset: 'drawerPanel',
+            maxSize: '100%',
+            minSize: '20px',
+            size: {
+                xs: '305px',
+                sm: '309px',
+                md: '310px',
+                lg: '333px',
+                xl: '354px',
+            },
+            left: {
+                transitionPreset: ['fade', 'slideLeft'],
+            },
+            right: {
+                transitionPreset: ['fade', 'slideRight'],
+            },
+            top: {
+                transitionPreset: ['fade', 'slideTop'],
+            },
+            bottom: {
+                transitionPreset: ['fade', 'slideBottom'],
+            },
+        },
+        header: {
+            spaceInset: 'spaceInsetSquish040',
+        },
+        content: {
+            spaceInset: 'spaceInset050',
+        },
+        closeButton: {
+            stylePreset: 'iconButtonMinimalSecondary',
+            spaceInset: 'spaceInset020',
+        },
+    },
+    inlineDrawer: {
+        __extends: '{{componentDefaults.drawer}}',
+        panel: {
+            __extends: '{{componentDefaults.drawer.panel}}',
+            maxSize: 'auto',
+        },
+    },
+};
+//# sourceMappingURL=defaults.js.map

package/esm/drawer/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/drawer/defaults.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,MAAM,EAAE;QACN,OAAO,EAAE;YACP,MAAM,EAAE,EAAE;YACV,gBAAgB,EAAE,MAAM;SACzB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,aAAa;YAC1B,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,MAAM;YACf,IAAI,EAAE;gBACJ,EAAE,EAAE,OAAO;gBACX,EAAE,EAAE,OAAO;gBACX,EAAE,EAAE,OAAO;gBACX,EAAE,EAAE,OAAO;gBACX,EAAE,EAAE,OAAO;aACZ;YACD,IAAI,EAAE;gBACJ,gBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;aACxC;YACD,KAAK,EAAE;gBACL,gBAAgB,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC;aACzC;YACD,GAAG,EAAE;gBACH,gBAAgB,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;aACvC;YACD,MAAM,EAAE;gBACN,gBAAgB,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;aAC1C;SACF;QACD,MAAM,EAAE;YACN,UAAU,EAAE,qBAAqB;SAClC;QACD,OAAO,EAAE;YACP,UAAU,EAAE,eAAe;SAC5B;QACD,WAAW,EAAE;YACX,WAAW,EAAE,4BAA4B;YACzC,UAAU,EAAE,eAAe;SAC5B;KACF;IACD,YAAY,EAAE;QACZ,SAAS,EAAE,8BAA8B;QACzC,KAAK,EAAE;YACL,SAAS,EAAE,oCAAoC;YAC/C,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC"}

package/esm/drawer/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAWpC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2ExC,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AA2FpC,eAAO,MAAM,MAAM,uBAGjB,CAAC"}

package/esm/drawer/drawer.js

@@ -31,7 +31,10 @@ import { filterOutFalsyProperties } from '../utils/filter-object';
 import { mergeBreakpointObject } from '../utils/merge-breakpoint-object';
 import { setDrawerElementFocusability } from './utils';
 import { getTransitionDuration } from '../utils/get-transition-duration';
-export var Drawer = function (_a) {
+import defaults from './defaults';
+import stylePresets from './style-presets';
+import { withOwnTheme } from '../utils/with-own-theme';
+var ThemelessDrawer = function (_a) {
     var children = _a.children, 
     /* istanbul ignore next */
     _b = _a.open, 
@@ -44,7 +47,11 @@ export var Drawer = function (_a) {
     useEffect(function () {
         setDrawerElementFocusability(open, drawerRef);
     }, [open, drawerRef]);
-    return (React.createElement(BaseDialogFunction, { open: open, restoreFocusTo: restoreFocusTo, onDismiss: onDismiss, hideOverlay: hideOverlay, disableFocusTrap: disableFocusTrap, renderOverlay: function (handleOverlayClick) { return (React.createElement(Overlay, { open: open, onClick: handleOverlayClick, overrides: overlayOverrides })); } }, function (handleCloseButtonClick) { return (React.createElement(CSSTransition, { in: open, timeout: getTransitionDuration(drawerPath + ".panel." + placement, '')({ theme: theme, overrides: overrides }), classNames: "nk-drawer", appear: true },
+    return (React.createElement(BaseDialogFunction, { open: open, restoreFocusTo: restoreFocusTo, onDismiss: onDismiss, hideOverlay: hideOverlay, disableFocusTrap: disableFocusTrap, renderOverlay: function (handleOverlayClick) { return (React.createElement(Overlay, { open: open, onClick: handleOverlayClick, overrides: overlayOverrides })); } }, function (handleCloseButtonClick) { return (React.createElement(CSSTransition, { in: open, timeout: getTransitionDuration("".concat(drawerPath, ".panel.").concat(placement), '')({ theme: theme, overrides: overrides }), classNames: "nk-drawer", appear: true },
         React.createElement(StyledDrawer, __assign({ "aria-hidden": !open, open: open, disableFocusTrap: disableFocusTrap, handleCloseButtonClick: handleCloseButtonClick, path: drawerPath, "data-testid": drawerPath, placement: placement, closePosition: closePosition, overrides: overrides, ref: drawerRef, inline: inline }, props), children))); }));
 };
+export var Drawer = withOwnTheme(ThemelessDrawer)({
+    defaults: defaults,
+    stylePresets: stylePresets,
+});
 //# sourceMappingURL=drawer.js.map