@procore/core-react 10.22.2-rc.3 → 10.23.0-rc.4

package/dist/esm/components/Tearsheet/Tearsheet.constants.d.ts

@@ -0,0 +1,9 @@
+import { AnimationPhase } from './Tearsheet.types';
+export declare const animationSpeed: {
+    readonly disabled: 0;
+    readonly tearsheet: number;
+    readonly scrim: number;
+    readonly closeButton: number;
+};
+export declare const openingPhasesInOrder: AnimationPhase[];
+export declare const closingPhasesInOrder: AnimationPhase[];

package/dist/esm/components/Tearsheet/Tearsheet.constants.js

@@ -0,0 +1,24 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { animationSpeed as baseAnimationSpeed } from './Tearsheet.styles';
+var toMilliseconds = function (v) { return v * 1000; };
+export var animationSpeed = {
+    disabled: 0,
+    tearsheet: toMilliseconds(baseAnimationSpeed.tearsheet),
+    scrim: toMilliseconds(baseAnimationSpeed.scrim),
+    closeButton: toMilliseconds(baseAnimationSpeed.closeButton),
+};
+export var openingPhasesInOrder = [
+    'scrim',
+    'tearsheet',
+    'closeButton',
+];
+export var closingPhasesInOrder = __spreadArray([], openingPhasesInOrder, true).reverse();
+//# sourceMappingURL=Tearsheet.constants.js.map

package/dist/esm/components/Tearsheet/Tearsheet.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tearsheet.constants.js","sourceRoot":"","sources":["../../../../src/components/Tearsheet/Tearsheet.constants.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAGzE,IAAM,cAAc,GAAG,UAAC,CAAS,IAAK,OAAA,CAAC,GAAG,IAAI,EAAR,CAAQ,CAAA;AAE9C,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,SAAS,CAAC;IACvD,KAAK,EAAE,cAAc,CAAC,kBAAkB,CAAC,KAAK,CAAC;IAC/C,WAAW,EAAE,cAAc,CAAC,kBAAkB,CAAC,WAAW,CAAC;CACnD,CAAA;AAEV,MAAM,CAAC,IAAM,oBAAoB,GAAqB;IACpD,OAAO;IACP,WAAW;IACX,aAAa;CACd,CAAA;AACD,MAAM,CAAC,IAAM,oBAAoB,GAAG,kBAAI,oBAAoB,QAAE,OAAO,EAAE,CAAA"}

package/dist/esm/components/Tearsheet/Tearsheet.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TearsheetProps } from './Tearsheet.types';
+/**
+
+ The Tearsheet is a container for complex content placed over another layout,
+ such as the Detail Page layout. They slide out from one direction on the screen.
+ They allow users complete complex and detail rich tasks without leaving the page they were on.
+
+ @since 10.22.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-tearsheet--demo)
+
+ */
+export declare const Tearsheet: React.ForwardRefExoticComponent<TearsheetProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Tearsheet/Tearsheet.js

@@ -0,0 +1,183 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { Portal } from '../Portal';
+import { StyledModal, StyledModalScrim } from '../Modal/Modal.styles';
+import Button from '../Button';
+import { StyledTearsheetBody, StyledTearsheetContent, StyledCard, } from './Tearsheet.styles';
+import { Clear } from '@procore/core-icons/dist';
+import { getAnimationState, getScrimClassName, wait } from './Tearsheet.util';
+import { animationSpeed, closingPhasesInOrder, openingPhasesInOrder, } from './Tearsheet.constants';
+import { useHotkey } from '../../effects/Hotkey';
+/**
+
+ The Tearsheet is a container for complex content placed over another layout,
+ such as the Detail Page layout. They slide out from one direction on the screen.
+ They allow users complete complex and detail rich tasks without leaving the page they were on.
+
+ @since 10.22.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-tearsheet--demo)
+
+ */
+export var Tearsheet = React.forwardRef(function Tearsheet(_a, ref) {
+    var _this = this;
+    var children = _a.children, open = _a.open, onClose = _a.onClose, afterShow = _a.afterShow, afterHide = _a.afterHide, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, qa = _a.qa;
+    var _c = React.useState('closed'), status = _c[0], setStatus = _c[1];
+    var _d = React.useState('disabled'), phase = _d[0], setPhase = _d[1];
+    var _e = React.useState(open), isVisible = _e[0], setIsVisible = _e[1];
+    var closeBtnRef = React.useRef(null);
+    var preventAnimationRef = React.useRef(!open);
+    React.useEffect(function () {
+        ;
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, wait(50)];
+                    case 1:
+                        _a.sent();
+                        preventAnimationRef.current = false;
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, []);
+    /**
+     * This prevents "closing" animation from being performed on mount.
+     *
+     * When `open` is **initially** set to `true`, "closing" animation will run because it is required
+     *   to open tearsheet.
+     * When `open` is **initially** set to `false`, "closing" animation will run needlessly in background,
+     *   causing UI issues if a user opens up the tearsheet up immediately.
+     */
+    React.useEffect(function () {
+        if (!open && preventAnimationRef.current) {
+            return;
+        }
+        setStatus(open ? 'opening' : 'closing');
+    }, [open]);
+    function handleClose() {
+        if (status === 'open') {
+            onClose();
+        }
+    }
+    useHotkey({
+        key: ['Escape', 'Esc'],
+        handler: handleClose,
+    });
+    React.useEffect(function () {
+        ;
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            var _i, openingPhasesInOrder_1, openingPhase, _a, closingPhasesInOrder_1, closingPhase;
+            var _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!(status === 'opening')) return [3 /*break*/, 6];
+                        setIsVisible(true);
+                        _i = 0, openingPhasesInOrder_1 = openingPhasesInOrder;
+                        _c.label = 1;
+                    case 1:
+                        if (!(_i < openingPhasesInOrder_1.length)) return [3 /*break*/, 4];
+                        openingPhase = openingPhasesInOrder_1[_i];
+                        setPhase(openingPhase);
+                        return [4 /*yield*/, wait(animationSpeed[openingPhase])];
+                    case 2:
+                        _c.sent();
+                        _c.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        setStatus('open');
+                        setPhase('disabled');
+                        (_b = closeBtnRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                        return [4 /*yield*/, wait(0)];
+                    case 5:
+                        _c.sent();
+                        afterShow === null || afterShow === void 0 ? void 0 : afterShow();
+                        return [2 /*return*/];
+                    case 6:
+                        if (!(status === 'closing')) return [3 /*break*/, 11];
+                        _a = 0, closingPhasesInOrder_1 = closingPhasesInOrder;
+                        _c.label = 7;
+                    case 7:
+                        if (!(_a < closingPhasesInOrder_1.length)) return [3 /*break*/, 10];
+                        closingPhase = closingPhasesInOrder_1[_a];
+                        setPhase(closingPhase);
+                        return [4 /*yield*/, wait(animationSpeed[closingPhase])];
+                    case 8:
+                        _c.sent();
+                        _c.label = 9;
+                    case 9:
+                        _a++;
+                        return [3 /*break*/, 7];
+                    case 10:
+                        setStatus('closed');
+                        setPhase('disabled');
+                        setIsVisible(false);
+                        afterHide === null || afterHide === void 0 ? void 0 : afterHide();
+                        _c.label = 11;
+                    case 11: return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [status]);
+    if (!isVisible) {
+        return null;
+    }
+    return (React.createElement(Portal, null,
+        React.createElement(StyledModal, { ref: ref, className: getScrimClassName(status, phase) },
+            React.createElement(StyledModalScrim, null),
+            React.createElement(StyledTearsheetContent, __assign({ ref: ref, "$placement": placement }, getAnimationState('tearsheet', phase, status)),
+                React.createElement("div", { onClick: handleClose, "data-qa": qa === null || qa === void 0 ? void 0 : qa.scrim },
+                    React.createElement(StyledCard, __assign({}, getAnimationState('closeButton', phase, status)),
+                        React.createElement(Button, { ref: closeBtnRef, onClick: onClose, size: "lg", variant: "tertiary", icon: React.createElement(Clear, null), "data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton }))),
+                React.createElement(StyledTearsheetBody, { "$placement": placement }, children)))));
+});
+//# sourceMappingURL=Tearsheet.js.map

package/dist/esm/components/Tearsheet/Tearsheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tearsheet.js","sourceRoot":"","sources":["../../../../src/components/Tearsheet/Tearsheet.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,UAAU,GACX,MAAM,oBAAoB,CAAA;AAM3B,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAC7E,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAEhD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,IAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,SAAS,SAAS,CAChB,EAA0E,EAC1E,GAAG;IAFL,iBA8GC;QA7GG,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,iBAAmB,EAAnB,SAAS,mBAAG,OAAO,KAAA,EAAE,EAAE,QAAA;IAGlE,IAAA,KAAsB,KAAK,CAAC,QAAQ,CAAkB,QAAQ,CAAC,EAA9D,MAAM,QAAA,EAAE,SAAS,QAA6C,CAAA;IAC/D,IAAA,KAAoB,KAAK,CAAC,QAAQ,CAAiB,UAAU,CAAC,EAA7D,KAAK,QAAA,EAAE,QAAQ,QAA8C,CAAA;IAC9D,IAAA,KAA4B,KAAK,CAAC,QAAQ,CAAU,IAAI,CAAC,EAAxD,SAAS,QAAA,EAAE,YAAY,QAAiC,CAAA;IAC/D,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAA;IAEzD,IAAM,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAA;IAE/C,KAAK,CAAC,SAAS,CAAC;QACd,CAAC;QAAA,CAAC;;;4BACA,qBAAM,IAAI,CAAC,EAAE,CAAC,EAAA;;wBAAd,SAAc,CAAA;wBACd,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAA;;;;aACpC,CAAC,EAAE,CAAA;IACN,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN;;;;;;;OAOG;IACH,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,CAAC,IAAI,IAAI,mBAAmB,CAAC,OAAO,EAAE;YACxC,OAAM;SACP;QAED,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,SAAS,WAAW;QAClB,IAAI,MAAM,KAAK,MAAM,EAAE;YACrB,OAAO,EAAE,CAAA;SACV;IACH,CAAC;IAED,SAAS,CAAC;QACR,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;QACtB,OAAO,EAAE,WAAW;KACrB,CAAC,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC;QACd,CAAC;QAAA,CAAC;;;;;;6BACI,CAAA,MAAM,KAAK,SAAS,CAAA,EAApB,wBAAoB;wBACtB,YAAY,CAAC,IAAI,CAAC,CAAA;8BAE6B,EAApB,6CAAoB;;;6BAApB,CAAA,kCAAoB,CAAA;wBAApC,YAAY;wBACrB,QAAQ,CAAC,YAAY,CAAC,CAAA;wBACtB,qBAAM,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,EAAA;;wBAAxC,SAAwC,CAAA;;;wBAFf,IAAoB,CAAA;;;wBAK/C,SAAS,CAAC,MAAM,CAAC,CAAA;wBACjB,QAAQ,CAAC,UAAU,CAAC,CAAA;wBACpB,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;wBAC5B,qBAAM,IAAI,CAAC,CAAC,CAAC,EAAA;;wBAAb,SAAa,CAAA;wBACb,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAA;wBAEb,sBAAM;;6BAGJ,CAAA,MAAM,KAAK,SAAS,CAAA,EAApB,yBAAoB;8BACyB,EAApB,6CAAoB;;;6BAApB,CAAA,kCAAoB,CAAA;wBAApC,YAAY;wBACrB,QAAQ,CAAC,YAAY,CAAC,CAAA;wBACtB,qBAAM,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,EAAA;;wBAAxC,SAAwC,CAAA;;;wBAFf,IAAoB,CAAA;;;wBAK/C,SAAS,CAAC,QAAQ,CAAC,CAAA;wBACnB,QAAQ,CAAC,UAAU,CAAC,CAAA;wBACpB,YAAY,CAAC,KAAK,CAAC,CAAA;wBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAA;;;;;aAEhB,CAAC,EAAE,CAAA;IACN,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,MAAM;QACL,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,iBAAiB,CAAC,MAAM,EAAE,KAAK,CAAC;YAChE,oBAAC,gBAAgB,OAAG;YACpB,oBAAC,sBAAsB,aACrB,GAAG,EAAE,GAAG,gBACI,SAAS,IACjB,iBAAiB,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC;gBAEjD,6BAAK,OAAO,EAAE,WAAW,aAAW,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,KAAK;oBAC3C,oBAAC,UAAU,eAAK,iBAAiB,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,CAAC;wBAC7D,oBAAC,MAAM,IACL,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,UAAU,EAClB,IAAI,EAAE,oBAAC,KAAK,OAAG,aACN,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,WAAW,GACxB,CACS,CACT;gBACN,oBAAC,mBAAmB,kBAAa,SAAS,IACvC,QAAQ,CACW,CACC,CACb,CACP,CACV,CAAA;AACH,CAAC,CACF,CAAA"}

package/dist/esm/components/Tearsheet/Tearsheet.styles.d.ts

@@ -0,0 +1,20 @@
+import { Placement } from './Tearsheet.types';
+export declare const animationSpeed: {
+    tearsheet: number;
+    scrim: number;
+    closeButton: number;
+};
+export declare const StyledTearsheetContent: import("styled-components").StyledComponent<"div", any, {
+    $placement: Placement;
+    $open: boolean;
+    $opening?: boolean | undefined;
+    $closing?: boolean | undefined;
+}, never>;
+export declare const StyledTearsheetBody: import("styled-components").StyledComponent<"div", any, {
+    $placement: Placement;
+}, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../utils/types").DivAttributes & import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement>>, any, {
+    $open: boolean;
+    $opening?: boolean | undefined;
+    $closing?: boolean | undefined;
+}, never>;

package/dist/esm/components/Tearsheet/Tearsheet.styles.js

@@ -0,0 +1,72 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { spacing } from '../../styles/spacing';
+import Card from '../Card';
+import { getShadow } from '../../styles/shadows';
+import { colors } from '../../styles/colors';
+export var animationSpeed = {
+    tearsheet: 0.8,
+    scrim: 0.3,
+    closeButton: 0.15,
+};
+var slideDistance = '100%';
+var positioningProps = {
+    right: {
+        open: "translateX(0);",
+        closed: "translateX(".concat(slideDistance, ");"),
+        placement: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      justify-content: flex-end;\n    "], ["\n      flex-direction: row;\n      justify-content: flex-end;\n    "]))),
+        shadow: getShadow(4, 'left'),
+    },
+    top: {
+        open: "translateY(0);",
+        closed: "translateY(-".concat(slideDistance, ");"),
+        placement: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      flex-direction: column-reverse;\n      justify-content: flex-end;\n    "], ["\n      flex-direction: column-reverse;\n      justify-content: flex-end;\n    "]))),
+        shadow: getShadow(4, 'bottom'),
+    },
+    bottom: {
+        open: "translateY(0);",
+        closed: "translateY(".concat(slideDistance, ");"),
+        placement: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex-direction: column;\n      justify-content: flex-end;\n    "], ["\n      flex-direction: column;\n      justify-content: flex-end;\n    "]))),
+        shadow: getShadow(4, 'top'),
+    },
+    left: {
+        open: "translateX(0);",
+        closed: "translateX(-".concat(slideDistance, ");"),
+        placement: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      flex-direction: row-reverse;\n      justify-content: flex-end;\n    "], ["\n      flex-direction: row-reverse;\n      justify-content: flex-end;\n    "]))),
+        shadow: getShadow(4, 'right'),
+    },
+};
+export var StyledTearsheetContent = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  z-index: 2;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  z-index: 2;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $open = _a.$open, $placement = _a.$placement;
+    return $open
+        ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          transform: ", ";\n        "], ["\n          transform: ", ";\n        "])), positioningProps[$placement].open) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          transform: ", ";\n        "], ["\n          transform: ", ";\n        "])), positioningProps[$placement].closed);
+}, function (_a) {
+    var $placement = _a.$placement;
+    return positioningProps[$placement].placement;
+}, function (_a) {
+    var $placement = _a.$placement;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    @keyframes slideIn {\n      from {\n        transform: ", ";\n      }\n      to {\n        transform: ", ";\n      }\n    }\n\n    @keyframes slideOut {\n      from {\n        transform: ", ";\n      }\n      to {\n        transform: ", ";\n      }\n    }\n  "], ["\n    @keyframes slideIn {\n      from {\n        transform: ", ";\n      }\n      to {\n        transform: ", ";\n      }\n    }\n\n    @keyframes slideOut {\n      from {\n        transform: ", ";\n      }\n      to {\n        transform: ", ";\n      }\n    }\n  "])), positioningProps[$placement].closed, positioningProps[$placement].open, positioningProps[$placement].open, positioningProps[$placement].closed);
+}, function (_a) {
+    var $opening = _a.$opening, $placement = _a.$placement;
+    return $opening && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      animation: slideIn ", "s ease-out;\n      transform: ", ";\n    "], ["\n      animation: slideIn ", "s ease-out;\n      transform: ", ";\n    "])), animationSpeed.tearsheet, positioningProps[$placement].open);
+}, function (_a) {
+    var $closing = _a.$closing, $placement = _a.$placement;
+    return $closing && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      animation: slideOut ", "s ease-out;\n      transform: ", ";\n    "], ["\n      animation: slideOut ", "s ease-out;\n      transform: ", ";\n    "])), animationSpeed.tearsheet, positioningProps[$placement].closed);
+});
+export var StyledTearsheetBody = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  overflow-y: auto;\n  flex-direction: column;\n  background-color: ", ";\n"], ["\n  display: flex;\n  overflow-y: auto;\n  flex-direction: column;\n  background-color: ", ";\n"])), colors.white);
+export var StyledCard = styled(Card)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: inline-flex;\n  margin: ", "px;\n\n  ", "\n\n  @keyframes zoomIn {\n    from {\n      transform: scale(0);\n    }\n    to {\n      transform: scale(1);\n    }\n  }\n\n  @keyframes zoomOut {\n    from {\n      transform: scale(1);\n    }\n    to {\n      transform: scale(0);\n    }\n  }\n\n  ", "\n\n  ", "\n"], ["\n  display: inline-flex;\n  margin: ", "px;\n\n  ", "\n\n  @keyframes zoomIn {\n    from {\n      transform: scale(0);\n    }\n    to {\n      transform: scale(1);\n    }\n  }\n\n  @keyframes zoomOut {\n    from {\n      transform: scale(1);\n    }\n    to {\n      transform: scale(0);\n    }\n  }\n\n  ", "\n\n  ", "\n"])), spacing.xl, function (_a) {
+    var $open = _a.$open;
+    return $open
+        ? css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          transform: scale(1);\n        "], ["\n          transform: scale(1);\n        "]))) : css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          transform: scale(0);\n        "], ["\n          transform: scale(0);\n        "])));
+}, function (_a) {
+    var $opening = _a.$opening;
+    return $opening && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      animation: zoomIn ", "s;\n      transform: scale(1);\n    "], ["\n      animation: zoomIn ", "s;\n      transform: scale(1);\n    "])), animationSpeed.closeButton);
+}, function (_a) {
+    var $closing = _a.$closing;
+    return $closing && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      animation: zoomOut ", "s;\n      transform: scale(0);\n    "], ["\n      animation: zoomOut ", "s;\n      transform: scale(0);\n    "])), animationSpeed.closeButton);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+//# sourceMappingURL=Tearsheet.styles.js.map

package/dist/esm/components/Tearsheet/Tearsheet.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tearsheet.styles.js","sourceRoot":"","sources":["../../../../src/components/Tearsheet/Tearsheet.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAA8B,MAAM,mBAAmB,CAAA;AAE3E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAE5C,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,SAAS,EAAE,GAAG;IACd,KAAK,EAAE,GAAG;IACV,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,IAAM,aAAa,GAAG,MAAM,CAAA;AAE5B,IAAM,gBAAgB,GAMlB;IACF,KAAK,EAAE;QACL,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,qBAAc,aAAa,OAAI;QACvC,SAAS,EAAE,GAAG,yIAAA,sEAGb,IAAA;QACD,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC;KAC7B;IACD,GAAG,EAAE;QACH,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,sBAAe,aAAa,OAAI;QACxC,SAAS,EAAE,GAAG,oJAAA,iFAGb,IAAA;QACD,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC;KAC/B;IACD,MAAM,EAAE;QACN,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,qBAAc,aAAa,OAAI;QACvC,SAAS,EAAE,GAAG,4IAAA,yEAGb,IAAA;QACD,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;KAC5B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,sBAAe,aAAa,OAAI;QACxC,SAAS,EAAE,GAAG,iJAAA,8EAGb,IAAA;QACD,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC;KAC9B;CACF,CAAA;AAED,MAAM,CAAC,IAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,4KAK9C,yDAKE,EAOK,QAEL,EAA0D,QAE1D,EAkBD,QAEC,EAKC,QAED,EAKC,IACJ,KA5CG,UAAC,EAAqB;QAAnB,KAAK,WAAA,EAAE,UAAU,gBAAA;IACpB,OAAA,KAAK;QACH,CAAC,CAAC,GAAG,2GAAA,yBACY,EAAiC,aAC/C,KADc,gBAAgB,CAAC,UAAU,CAAC,CAAC,IAAI,EAElD,CAAC,CAAC,GAAG,2GAAA,yBACY,EAAmC,aACjD,KADc,gBAAgB,CAAC,UAAU,CAAC,CAAC,MAAM,CACjD;AANL,CAMK,EAEL,UAAC,EAAc;QAAZ,UAAU,gBAAA;IAAO,OAAA,gBAAgB,CAAC,UAAU,CAAC,CAAC,SAAS;AAAtC,CAAsC,EAE1D,UAAC,EAAc;QAAZ,UAAU,gBAAA;IAAO,OAAA,GAAG,8UAAA,+DAGN,EAAmC,6CAGnC,EAAiC,mFAMjC,EAAiC,6CAGjC,EAAmC,uBAGrD,KAfkB,gBAAgB,CAAC,UAAU,CAAC,CAAC,MAAM,EAGnC,gBAAgB,CAAC,UAAU,CAAC,CAAC,IAAI,EAMjC,gBAAgB,CAAC,UAAU,CAAC,CAAC,IAAI,EAGjC,gBAAgB,CAAC,UAAU,CAAC,CAAC,MAAM;AAfhC,CAkBrB,EAEC,UAAC,EAAwB;QAAtB,QAAQ,cAAA,EAAE,UAAU,gBAAA;IACvB,OAAA,QAAQ,IACR,GAAG,6IAAA,6BACoB,EAAwB,gCAChC,EAAiC,SAC/C,KAFsB,cAAc,CAAC,SAAS,EAChC,gBAAgB,CAAC,UAAU,CAAC,CAAC,IAAI,CAC/C;AAJD,CAIC,EAED,UAAC,EAAwB;QAAtB,QAAQ,cAAA,EAAE,UAAU,gBAAA;IACvB,OAAA,QAAQ,IACR,GAAG,8IAAA,8BACqB,EAAwB,gCACjC,EAAmC,SACjD,KAFuB,cAAc,CAAC,SAAS,EACjC,gBAAgB,CAAC,UAAU,CAAC,CAAC,MAAM,CACjD;AAJD,CAIC,CACJ,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,sKAE3C,0FAIoB,EAAY,KACjC,KADqB,MAAM,CAAC,KAAK,CACjC,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,wYAIpC,uCAEU,EAAU,WAElB,EAOK,6PAoBL,EAKC,QAED,EAKC,IACJ,KA1CW,OAAO,CAAC,EAAE,EAElB,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,KAAK;QACH,CAAC,CAAC,GAAG,iHAAA,4CAEF,KACH,CAAC,CAAC,GAAG,iHAAA,4CAEF,IAAA;AANL,CAMK,EAoBL,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ,IACR,GAAG,yIAAA,4BACmB,EAA0B,sCAE/C,KAFqB,cAAc,CAAC,WAAW,CAE/C;AAJD,CAIC,EAED,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ,IACR,GAAG,0IAAA,6BACoB,EAA0B,sCAEhD,KAFsB,cAAc,CAAC,WAAW,CAEhD;AAJD,CAIC,CACJ,CAAA"}

package/dist/esm/components/Tearsheet/Tearsheet.types.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export declare type AnimationStatus = 'opening' | 'closing' | 'open' | 'closed';
+export declare type AnimationPhase = 'tearsheet' | 'closeButton' | 'scrim' | 'disabled';
+interface QaTags {
+    closeButton?: string;
+    scrim?: string;
+}
+export interface TearsheetProps {
+    children?: React.ReactNode;
+    /**
+     * A controlled prop defining open/close state of the tearsheet.
+     * @since 10.22.0
+     */
+    open: boolean;
+    /**
+     * A required callback to be called when "close" button is clicked. Should set "open" flag to "false".
+     * @since 10.22.0
+     */
+    onClose: () => void;
+    /**
+     * A callback to be called when "open" animation is finished.
+     * @since 10.22.0
+     */
+    afterShow?: () => void;
+    /**
+     * A callback to be called when "close" animation is finished.
+     * @since 10.22.0
+     */
+    afterHide?: () => void;
+    /**
+     * Tearsheet placement
+     * @since 10.22.0
+     */
+    placement?: Placement;
+    /**
+     * QA tags
+     * @since 10.22.0
+     */
+    qa?: QaTags;
+}
+export declare type Placement = 'right' | 'left' | 'top' | 'bottom';
+export {};

package/dist/esm/components/Tearsheet/Tearsheet.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tearsheet.types.js.map

package/dist/esm/components/Tearsheet/Tearsheet.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tearsheet.types.js","sourceRoot":"","sources":["../../../../src/components/Tearsheet/Tearsheet.types.ts"],"names":[],"mappings":""}

package/dist/esm/components/Tearsheet/Tearsheet.util.d.ts

@@ -0,0 +1,8 @@
+import { AnimationPhase, AnimationStatus } from './Tearsheet.types';
+export declare const wait: (ms: number) => Promise<unknown>;
+export declare function getScrimClassName(status: AnimationStatus, phase: AnimationPhase): "fade-in" | "fade-out" | undefined;
+export declare function getAnimationState(targetPhase: AnimationPhase, currentPhase: AnimationPhase, status: AnimationStatus): {
+    $open: boolean;
+    $opening?: boolean;
+    $closing?: boolean;
+};

package/dist/esm/components/Tearsheet/Tearsheet.util.js

@@ -0,0 +1,58 @@
+import { fadeInClassName, fadeOutClassName } from '../Modal/Modal.styles';
+import { closingPhasesInOrder, openingPhasesInOrder, } from './Tearsheet.constants';
+export var wait = function (ms) { return new Promise(function (res) { return setTimeout(res, ms); }); };
+function getIsPhaseInProgressOrComplete(targetPhase, currentPhase, status) {
+    if (currentPhase === 'disabled') {
+        return false;
+    }
+    if (status === 'opening') {
+        return (openingPhasesInOrder.indexOf(targetPhase) <=
+            openingPhasesInOrder.indexOf(currentPhase));
+    }
+    if (status === 'closing') {
+        return (closingPhasesInOrder.indexOf(targetPhase) <=
+            closingPhasesInOrder.indexOf(currentPhase));
+    }
+    return false;
+}
+export function getScrimClassName(status, phase) {
+    if (status === 'open') {
+        return fadeInClassName;
+    }
+    if (status === 'closed') {
+        return fadeOutClassName;
+    }
+    if (status === 'closing') {
+        return getIsPhaseInProgressOrComplete('scrim', phase, status)
+            ? fadeOutClassName
+            : fadeInClassName;
+    }
+    if (status === 'opening') {
+        return getIsPhaseInProgressOrComplete('scrim', phase, status)
+            ? fadeInClassName
+            : fadeOutClassName;
+    }
+}
+export function getAnimationState(targetPhase, currentPhase, status) {
+    if (status === 'open') {
+        return { $open: true };
+    }
+    if (status === 'closed') {
+        return { $open: false };
+    }
+    var inProgressOrComplete = getIsPhaseInProgressOrComplete(targetPhase, currentPhase, status);
+    if (status === 'closing') {
+        return {
+            $open: !inProgressOrComplete,
+            $closing: targetPhase === currentPhase,
+        };
+    }
+    if (status === 'opening') {
+        return {
+            $open: inProgressOrComplete,
+            $opening: targetPhase === currentPhase,
+        };
+    }
+    return { $open: false };
+}
+//# sourceMappingURL=Tearsheet.util.js.map

package/dist/esm/components/Tearsheet/Tearsheet.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tearsheet.util.js","sourceRoot":"","sources":["../../../../src/components/Tearsheet/Tearsheet.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACzE,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,uBAAuB,CAAA;AAG9B,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAAU,IAAK,OAAA,IAAI,OAAO,CAAC,UAAC,GAAG,IAAK,OAAA,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,EAAnB,CAAmB,CAAC,EAAzC,CAAyC,CAAA;AAE7E,SAAS,8BAA8B,CACrC,WAA2B,EAC3B,YAA4B,EAC5B,MAAuB;IAEvB,IAAI,YAAY,KAAK,UAAU,EAAE;QAC/B,OAAO,KAAK,CAAA;KACb;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO,CACL,oBAAoB,CAAC,OAAO,CAAC,WAAW,CAAC;YACzC,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC,CAC3C,CAAA;KACF;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO,CACL,oBAAoB,CAAC,OAAO,CAAC,WAAW,CAAC;YACzC,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC,CAC3C,CAAA;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,MAAuB,EACvB,KAAqB;IAErB,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,eAAe,CAAA;KACvB;IAED,IAAI,MAAM,KAAK,QAAQ,EAAE;QACvB,OAAO,gBAAgB,CAAA;KACxB;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO,8BAA8B,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC;YAC3D,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,eAAe,CAAA;KACpB;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO,8BAA8B,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC;YAC3D,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,gBAAgB,CAAA;KACrB;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,WAA2B,EAC3B,YAA4B,EAC5B,MAAuB;IAEvB,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;KACvB;IAED,IAAI,MAAM,KAAK,QAAQ,EAAE;QACvB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;KACxB;IAED,IAAM,oBAAoB,GAAG,8BAA8B,CACzD,WAAW,EACX,YAAY,EACZ,MAAM,CACP,CAAA;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO;YACL,KAAK,EAAE,CAAC,oBAAoB;YAC5B,QAAQ,EAAE,WAAW,KAAK,YAAY;SACvC,CAAA;KACF;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO;YACL,KAAK,EAAE,oBAAoB;YAC3B,QAAQ,EAAE,WAAW,KAAK,YAAY;SACvC,CAAA;KACF;IAED,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;AACzB,CAAC"}

package/dist/esm/components/Tearsheet/index.d.ts

@@ -0,0 +1 @@
+export { Tearsheet } from './Tearsheet';

package/dist/esm/components/Tearsheet/index.js

@@ -0,0 +1,2 @@
+export { Tearsheet } from './Tearsheet';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Tearsheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tearsheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/esm/components/Tearsheet/storybook/PageLayoutDemo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PageLayoutDemo: React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Tearsheet/storybook/PageLayoutDemo.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Button } from '../../Button';
+import Modal from '../../Modal';
+import { Page } from '../../../layouts/PageLayout';
+import Breadcrumbs from '../../Breadcrumbs';
+import { H1 } from '../../Semantic';
+import Tabs from '../../Tabs';
+import Card from '../../Card';
+import { exampleText } from '../../_storyHelpers_/constants';
+import { Flex } from '../../../layouts/Flex';
+import { FlexList } from '../../../layouts/FlexList';
+import { Box } from '../../../layouts/Box';
+import { Tab } from '../../Tabs/Tabs';
+import Panel from '../../Panel';
+import Input from '../../Input';
+var longText = exampleText.longest_ipsum;
+var shortText = exampleText.short_sentence;
+var panelContent = (React.createElement(Flex, { direction: "column", alignItems: "center", paddingBottom: "lg", style: { width: '100%' } }, Array.from({ length: 10 }).map(function (_, i) { return (React.createElement("div", { key: "".concat(i, "-content-item"), style: {
+        width: '80%',
+        height: '100px',
+        marginTop: '16px',
+        backgroundColor: 'white',
+        border: '1px solid lightgray',
+        borderRadius: '8px',
+    } })); })));
+function PanelSample(_a) {
+    var onClose = _a.onClose, footer = _a.hasFooter;
+    return (React.createElement(Panel, null,
+        React.createElement(Panel.Header, { onClose: onClose },
+            React.createElement(Panel.Title, null, "Sample heading")),
+        React.createElement(Panel.Body, null, panelContent),
+        footer && (React.createElement(Panel.Footer, null,
+            React.createElement(Button, null, "Action 3"),
+            React.createElement(FlexList, { space: "sm", marginLeft: "auto" },
+                React.createElement(Button, { variant: "primary" }, "Action 4"),
+                React.createElement(Button, { onClick: onClose, variant: "secondary" }, "Close"))))));
+}
+export var PageLayoutDemo = React.forwardRef(function PageLayoutDemo(props, ref) {
+    var _a = React.useState(false), isAsideVisible = _a[0], setIsAsideVisible = _a[1];
+    var _b = React.useState(false), isModalVisible = _b[0], setIsModalVisible = _b[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Modal, { open: isModalVisible },
+            React.createElement(Modal.Header, { onClose: function () { return setIsModalVisible(false); } }, shortText),
+            React.createElement(Modal.Body, null, longText)),
+        React.createElement(Page, null,
+            React.createElement(Page.Main, null,
+                React.createElement(Page.Header, null,
+                    React.createElement(Page.Breadcrumbs, null,
+                        React.createElement(Breadcrumbs, null,
+                            React.createElement(Breadcrumbs.Crumb, { active: true }, "Tool Name"),
+                            React.createElement(Breadcrumbs.Crumb, null, "Item"))),
+                    React.createElement(Page.Title, null,
+                        React.createElement(H1, null, "Page Title")),
+                    React.createElement(Page.Tabs, null,
+                        React.createElement(Tabs, null,
+                            React.createElement(Tab, { active: true },
+                                React.createElement(Tabs.Link, null, "Active")),
+                            React.createElement(Tab, null,
+                                React.createElement(Tabs.Link, null, "Second")),
+                            React.createElement(Tab, null,
+                                React.createElement(Tabs.Link, null, "Third")),
+                            React.createElement(Tab, null,
+                                React.createElement(Tabs.Link, null, "Fourth"))))),
+                React.createElement(Page.Body, null,
+                    React.createElement(FlexList, { direction: "column" },
+                        React.createElement(Card, null,
+                            React.createElement(Box, { padding: "md" },
+                                React.createElement(Input, { placeholder: "Hello", ref: ref }))),
+                        React.createElement(Card, null,
+                            React.createElement(Box, { padding: "md" }, longText)),
+                        React.createElement(Card, null,
+                            React.createElement(Box, { padding: "md" }, longText)),
+                        React.createElement(Card, null,
+                            React.createElement(Box, { padding: "md" }, longText)),
+                        React.createElement(Card, null,
+                            React.createElement(Box, { padding: "md" }, longText)))),
+                React.createElement(Page.Footer, null,
+                    React.createElement(Box, { padding: "16px", display: "flex" },
+                        React.createElement(Button, { variant: "secondary", onClick: function () { return setIsModalVisible(true); } }, "Open Modal"),
+                        React.createElement(Button, { variant: "secondary", onClick: function () { return setIsAsideVisible(true); }, style: { marginLeft: 'auto' } }, "Open Panel")))),
+            React.createElement(Page.Aside, { open: isAsideVisible },
+                React.createElement(PanelSample, { hasFooter: true, onClose: function () { return setIsAsideVisible(false); } })))));
+});
+//# sourceMappingURL=PageLayoutDemo.js.map

package/dist/esm/components/Tearsheet/storybook/PageLayoutDemo.js.map

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

package/dist/esm/index.d.ts

@@ -54,6 +54,7 @@ export { TableShelf } from './components/TableShelf';
 export { default as Tabs } from './components/Tabs';
 export { default as TextArea } from './components/TextArea';
 export { default as TextEditor, TextEditorProvider, } from './components/TextEditor';
+export { Tearsheet } from './components/Tearsheet';
 export { default as Thumbnail } from './components/Thumbnail';
 export { default as TieredDropdown } from './components/TieredDropdown';
 export { default as TieredSelect } from './components/TieredSelect';

package/dist/esm/index.js

@@ -55,6 +55,7 @@ export { TableShelf } from './components/TableShelf';
 export { default as Tabs } from './components/Tabs';
 export { default as TextArea } from './components/TextArea';
 export { default as TextEditor, TextEditorProvider, } from './components/TextEditor';
+export { Tearsheet } from './components/Tearsheet';
 export { default as Thumbnail } from './components/Thumbnail';
 export { default as TieredDropdown } from './components/TieredDropdown';
 export { default as TieredSelect } from './components/TieredSelect';