@servicetitan/design-system 10.8.0 → 11.2.0

package/dist/components/Mask/index.js

@@ -1,14 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Mask"), exports);
+export * from './Mask';
 //# sourceMappingURL=index.js.map

package/dist/components/Mask/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Mask/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,yCAAuB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Mask/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/Modal/Modal.css

@@ -14,8 +14,11 @@
   background: #ffffff;
   border-radius: 6px;
 }
-.Backdrop .Modal {
-  cursor: auto;
+.Modal:focus {
+  outline: none;
+}
+.Modal:focus-visible {
+  outline: none;
 }
 
 .Modal--XS {

package/dist/components/Modal/Modal.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Modal/Modal.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAYA;ACdC;EACA,OCiBa;ADfb;EACA;EDaA;EACA;EACA;EACA;EACA;EACA,YAhBc;EAiBd,YENa;EFOb,eEhBiB;;AFkBjB;EAAc;;;AAGf;EAAa,WApBQ;;;AAqBrB;EAAY,WApBQ;;;AAqBpB;EAAY,WApBQ;;;AAqBpB;EAAY,WApBQ;;;AAsBpB;AAAA;AAAA;EAGC,YEpBa;EFqBb,SAjCe;;;AAoChB;EACC,wBElCiB;EFmCjB,yBEnCiB;;;AFsClB;EACC,4BEvCiB;EFwCjB,2BExCiB;;;AF2ClB;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA8B;;;AAE9B;EACC;EACA,wBE3DiB;EF4DjB,yBE5DiB;;;AF+DlB;EACC;EACA,2BEjEiB;EFkEjB,4BElEiB;;;AFqElB;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA,SEuBkB;;AFrBlB;EACC;;;AAIF;EAAyB;;;AACzB;EAAuB;;;AACvB;EAAwB;;;AACxB;EAAgC","file":"Modal.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Modal/Modal.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAWA;ACbC;EACA,OCiBa;ADfb;EACA;EDYA;EACA;EACA;EACA;EACA;EACA,YAfc;EAgBd,YELa;EFMb,eEfiB;;AFkBjB;EAAU;;AAGV;EAAkB;;;AAGnB;EAAa,WAxBQ;;;AAyBrB;EAAY,WAxBQ;;;AAyBpB;EAAY,WAxBQ;;;AAyBpB;EAAY,WAxBQ;;;AA0BpB;AAAA;AAAA;EAGC,YEvBa;EFwBb,SApCe;;;AAuChB;EACC,wBErCiB;EFsCjB,yBEtCiB;;;AFyClB;EACC,4BE1CiB;EF2CjB,2BE3CiB;;;AF8ClB;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA8B;;;AAE9B;EACC;EACA,wBE9DiB;EF+DjB,yBE/DiB;;;AFkElB;EACC;EACA,2BEpEiB;EFqEjB,4BErEiB;;;AFwElB;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA,SEqBkB;;AFnBlB;EACC;;;AAIF;EAAyB;;;AACzB;EAAuB;;;AACvB;EAAwB;;;AACxB;EAAgC","file":"Modal.css"}

package/dist/components/Modal/Modal.d.ts

@@ -1,21 +1,23 @@
 import React, { FC } from 'react';
-import { FocusScopeOptions } from '../../hooks/useFocusScope';
-import { ModalWindow, ModalHeader, ModalHeaderProps, ModalFooter, ModalFooterProps, ModalContent, ModalSizes } from './components';
-export interface ModalProps extends ModalHeaderProps {
+import { ModalWindow, ModalWindowProps, ModalHeader, ModalHeaderProps, ModalFooter, ModalFooterProps, ModalContent, ModalSizes } from './components';
+import { FocusTrapProps } from '../../utilities/FocusTrap';
+export interface ModalProps extends ModalHeaderProps, ModalWindowProps {
     /** Adds one or more classnames for an element */
     className?: string;
     /** Modal Footer Content */
     footer?: React.ReactElement;
     /** Footer Alignment */
     footerAlign?: ModalFooterProps['align'];
-    /** Whether the Modal is open or not */
-    open: boolean;
+    /** Set visibility of the Modal */
+    open?: boolean;
+    /** Render in a React Portal */
+    portal?: boolean;
     /** Allows the Modal to fit within the browser window */
     scrollable?: boolean;
     /** Controls the width of the Modal */
     size?: ModalSizes;
-    /** Options passed into useFocusScope hook */
-    focusScopeOptions?: FocusScopeOptions;
+    /** Options passed into FocusTrap */
+    focusTrapOptions?: FocusTrapProps;
 }
 export interface Modal extends FC<ModalProps> {
     /** Subcomponents */

package/dist/components/Modal/Modal.js

@@ -1,15 +1,3 @@
-"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)
@@ -21,24 +9,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
-var react_1 = __importDefault(require("react"));
-var components_1 = require("./components");
-var Modal = function (_a) {
-    var children = _a.children, closable = _a.closable, footer = _a.footer, footerAlign = _a.footerAlign, onClose = _a.onClose, open = _a.open, _b = _a.scrollable, scrollable = _b === void 0 ? true : _b, size = _a.size, title = _a.title, focusScopeOptions = _a.focusScopeOptions, rest = __rest(_a, ["children", "closable", "footer", "footerAlign", "onClose", "open", "scrollable", "size", "title", "focusScopeOptions"]);
-    return open && (react_1.default.createElement(components_1.ModalWindow, __assign({ closable: closable, onClose: closable && onClose, size: size, focusScopeOptions: focusScopeOptions }, rest),
-        react_1.default.createElement(components_1.ModalHeader, { closable: closable, title: title, onClose: onClose }),
-        react_1.default.createElement(components_1.ModalContent, { className: "fs-3", scrollable: scrollable }, children),
-        footer && react_1.default.createElement(components_1.ModalFooter, { align: footerAlign }, footer)));
+import React from 'react';
+import { ModalWindow, ModalHeader, ModalFooter, ModalContent, ModalSizes, } from './components';
+export const Modal = (_a) => {
+    var { children, footer, footerAlign, onClose, open, portal = true, scrollable = true, size, title, focusTrapOptions } = _a, rest = __rest(_a, ["children", "footer", "footerAlign", "onClose", "open", "portal", "scrollable", "size", "title", "focusTrapOptions"]);
+    return (React.createElement(ModalWindow, Object.assign({ onClose: onClose, size: size, focusTrapOptions: focusTrapOptions, open: open, portal: portal }, rest),
+        React.createElement(ModalHeader, { title: title, onClose: onClose }),
+        React.createElement(ModalContent, { className: "fs-3", scrollable: scrollable }, children),
+        footer && React.createElement(ModalFooter, { align: footerAlign }, footer)));
 };
-exports.Modal = Modal;
-exports.Modal.Window = components_1.ModalWindow;
-exports.Modal.Header = components_1.ModalHeader;
-exports.Modal.Content = components_1.ModalContent;
-exports.Modal.Footer = components_1.ModalFooter;
-exports.Modal.Sizes = components_1.ModalSizes;
+Modal.Window = ModalWindow;
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Footer = ModalFooter;
+Modal.Sizes = ModalSizes;
 //# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAkC;AAGlC,2CAQsB;AAkCf,IAAM,KAAK,GAAU,UAAC,EAY5B;IAXA,IAAA,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,iBAAiB,uBAAA,EACd,IAAI,cAXqB,wHAY5B,CADO;IAEP,OAAA,IAAI,IAAI,CACP,8BAAC,wBAAW,aACX,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,IAAI,OAAO,EAC5B,IAAI,EAAE,IAAI,EACV,iBAAiB,EAAE,iBAAiB,IAChC,IAAI;QAER,8BAAC,wBAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;QACnE,8BAAC,yBAAY,IAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAE,UAAU,IACnD,QAAQ,CACK;QACd,MAAM,IAAI,8BAAC,wBAAW,IAAC,KAAK,EAAE,WAAW,IAAG,MAAM,CAAe,CACrD,CACd,CAAA;CAAA,CAAC;AA3BU,QAAA,KAAK,SA2Bf;AAEH,aAAK,CAAC,MAAM,GAAG,wBAAW,CAAC;AAC3B,aAAK,CAAC,MAAM,GAAG,wBAAW,CAAC;AAC3B,aAAK,CAAC,OAAO,GAAG,yBAAY,CAAC;AAC7B,aAAK,CAAC,MAAM,GAAG,wBAAW,CAAC;AAC3B,aAAK,CAAC,KAAK,GAAG,uBAAU,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,EACN,WAAW,EAEX,WAAW,EAEX,WAAW,EAEX,YAAY,EACZ,UAAU,GACV,MAAM,cAAc,CAAC;AAqCtB,MAAM,CAAC,MAAM,KAAK,GAAU,CAAC,EAY5B,EAAE,EAAE;QAZwB,EAC5B,QAAQ,EACR,MAAM,EACN,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,IAAI,EACjB,IAAI,EACJ,KAAK,EACL,gBAAgB,OAEhB,EADG,IAAI,cAXqB,qHAY5B,CADO;IACF,OAAA,CACL,oBAAC,WAAW,kBACX,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,IACV,IAAI;QAER,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;QAC/C,oBAAC,YAAY,IAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAE,UAAU,IACnD,QAAQ,CACK;QACd,MAAM,IAAI,oBAAC,WAAW,IAAC,KAAK,EAAE,WAAW,IAAG,MAAM,CAAe,CACrD,CACd,CAAA;CAAA,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAC7B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC"}

package/dist/components/Modal/components.d.ts

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
+import { OverlayProps } from '../../internal/Overlay';
 import { JustifyProps } from '../../utilities/justify-props';
-import { BackdropProps } from '../Backdrop';
-import { FocusScopeOptions } from '../../hooks/useFocusScope';
+import { FocusTrapProps } from '../../utilities/FocusTrap';
 export interface ModalContentProps {
     /** Adds one or more classnames for an element */
     className?: string;
@@ -16,7 +16,6 @@ export declare const ModalFooter: FC<ModalFooterProps>;
 export interface ModalHeaderProps {
     /** Add class attribute */
     className?: string;
-    closable?: boolean;
     onClose?: (e: React.SyntheticEvent<HTMLElement>) => void;
     title?: React.ReactNode;
 }
@@ -33,11 +32,11 @@ export declare enum ModalSizes {
 /**
  * Modal Window Properties
  */
-export interface ModalWindowProps extends BackdropProps {
+export interface ModalWindowProps extends OverlayProps {
     /** Add class attribute */
     className?: string;
-    onClose?: (e: React.SyntheticEvent<HTMLElement>) => void;
     size?: ModalSizes;
-    focusScopeOptions?: FocusScopeOptions;
+    /** Options passed into FocusTrap */
+    focusTrapOptions?: FocusTrapProps;
 }
 export declare const ModalWindow: FC<ModalWindowProps>;

package/dist/components/Modal/components.js

@@ -1,34 +1,3 @@
-"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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;
-};
 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)
@@ -40,73 +9,84 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalWindow = exports.ModalSizes = exports.ModalHeader = exports.ModalFooter = exports.ModalContent = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var OverlayContext_1 = require("../../utilities/OverlayContext");
-var Backdrop_1 = require("../Backdrop");
-var Headline_1 = require("../Headline");
-var Button_1 = require("../Button");
-var useFocusScope_1 = require("../../hooks/useFocusScope");
-var ModalContent = function (_a) {
-    var children = _a.children, className = _a.className, _b = _a.scrollable, scrollable = _b === void 0 ? true : _b;
-    var ModalContentClassNames = (0, classnames_1.default)('Modal__content', className, {
+import React, { useRef } from 'react';
+import classnames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
+import tokens from '@servicetitan/tokens';
+import { Overlay } from '../../internal/Overlay';
+import { FocusTrap } from '../../utilities/FocusTrap';
+import { Headline } from '../Headline';
+import { Button } from '../Button';
+export const ModalContent = ({ children, className, scrollable = true, }) => {
+    const ModalContentClassNames = classnames('Modal__content', className, {
         'Modal__content--scrollable': scrollable,
     });
-    return react_1.default.createElement("div", { className: ModalContentClassNames }, children);
+    return React.createElement("div", { className: ModalContentClassNames }, children);
 };
-exports.ModalContent = ModalContent;
-exports.ModalContent.displayName = 'ModalContent';
-var ModalFooter = function (_a) {
-    var _b = _a.align, align = _b === void 0 ? 'right' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["align", "children", "className"]);
-    var ModalFooterClassNames = (0, classnames_1.default)('Modal__footer', className, {
+ModalContent.displayName = 'ModalContent';
+export const ModalFooter = (_a) => {
+    var { align = 'right', children, className } = _a, props = __rest(_a, ["align", "children", "className"]);
+    const ModalFooterClassNames = classnames('Modal__footer', className, {
         'Modal__footer--left': align === 'left',
         'Modal__footer--center': align === 'center',
         'Modal__footer--right': align === 'right',
         'Modal__footer--space-between': align === 'space-between',
     });
-    return (react_1.default.createElement("div", __assign({ className: ModalFooterClassNames }, props), children));
+    return (React.createElement("div", Object.assign({ className: ModalFooterClassNames }, props), children));
 };
-exports.ModalFooter = ModalFooter;
-exports.ModalFooter.displayName = 'ModalFooter';
-var ModalHeader = function (_a) {
-    var className = _a.className, closable = _a.closable, title = _a.title, onClose = _a.onClose, props = __rest(_a, ["className", "closable", "title", "onClose"]);
-    if (!closable && title == null) {
+ModalFooter.displayName = 'ModalFooter';
+export const ModalHeader = (_a) => {
+    var { className, title, onClose } = _a, props = __rest(_a, ["className", "title", "onClose"]);
+    if (!onClose && title == null) {
         return null;
     }
-    var Close = function () { return (react_1.default.createElement(Button_1.Button, { fill: "subtle", className: "Modal__header-close", iconName: "clear", size: "xsmall", onClick: onClose })); };
-    var ModalHeaderClassNames = (0, classnames_1.default)('Modal__header', className);
-    return (react_1.default.createElement("div", __assign({ className: ModalHeaderClassNames }, props),
-        react_1.default.createElement(Headline_1.Headline, { className: "Modal__header-title" }, title),
-        closable && react_1.default.createElement(Close, null)));
+    const ModalHeaderClassNames = classnames('Modal__header', className);
+    return (React.createElement("div", Object.assign({ className: ModalHeaderClassNames }, props),
+        React.createElement(Headline, { className: "Modal__header-title" }, title),
+        onClose && (React.createElement(Button, { fill: "subtle", className: "Modal__header-close", iconName: "clear", size: "xsmall", onClick: onClose }))));
 };
-exports.ModalHeader = ModalHeader;
-exports.ModalHeader.displayName = 'ModalHeader';
+ModalHeader.displayName = 'ModalHeader';
 /**
  * Modal Sizes
  */
-var ModalSizes;
+export var ModalSizes;
 (function (ModalSizes) {
     ModalSizes["XS"] = "XS";
     ModalSizes["S"] = "S";
     ModalSizes["M"] = "M";
     ModalSizes["L"] = "L";
-})(ModalSizes = exports.ModalSizes || (exports.ModalSizes = {}));
+})(ModalSizes || (ModalSizes = {}));
 function sizeClass(size) {
-    return "Modal--" + size;
+    return `Modal--${size}`;
 }
-var ModalWindow = function (_a) {
-    var children = _a.children, className = _a.className, closable = _a.closable, onClose = _a.onClose, _b = _a.size, size = _b === void 0 ? ModalSizes.M : _b, focusScopeOptions = _a.focusScopeOptions, props = __rest(_a, ["children", "className", "closable", "onClose", "size", "focusScopeOptions"]);
-    var ModalWindowClassNames = (0, classnames_1.default)('Modal', sizeClass(size), className);
-    var overlayContext = (0, react_1.useContext)(OverlayContext_1.OverlayContext);
-    var backdropRef = (0, react_1.useRef)(null);
-    var handleTab = (0, useFocusScope_1.useFocusScope)(backdropRef, focusScopeOptions).handleTab;
-    return (react_1.default.createElement(Backdrop_1.Backdrop, __assign({ className: ModalWindowClassNames, closeOnClick: !!(closable || onClose), onClick: onClose, ref: backdropRef, onKeyDown: handleTab }, props),
-        react_1.default.createElement(OverlayContext_1.OverlayContext.Provider, { value: overlayContext.concat('modal') }, children)));
+export const ModalWindow = (_a) => {
+    var { animate = true, children, className, focusTrapOptions, onClose, open, portal = true, size = ModalSizes.M } = _a, props = __rest(_a, ["animate", "children", "className", "focusTrapOptions", "onClose", "open", "portal", "size"]);
+    const ModalWindowClassNames = classnames('Modal', sizeClass(size), className);
+    const containerRef = useRef(null);
+    const [focusWrapper, setFocusWrapper] = React.useState(1);
+    const duration = parseInt(tokens.durationStandard, 10) / 1000; // '200ms' -> 0.2
+    const framerAnimation = {
+        initial: { opacity: 0, y: 50 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 50 },
+        transition: { type: 'easeInOut', duration },
+    };
+    const Animate = animate ? AnimatePresence : React.Fragment;
+    const ModalEl = animate ? motion.div : 'div';
+    const ModalProps = Object.assign(Object.assign(Object.assign({ className: ModalWindowClassNames }, (animate && framerAnimation)), props), { ref: containerRef, tabIndex: focusWrapper });
+    React.useEffect(() => {
+        // Removes wrapper to be focusable element after initial tab
+        function eventHandler(event) {
+            event.key === 'Tab' && setFocusWrapper(-1);
+        }
+        document.addEventListener('keydown', eventHandler);
+        return () => document.removeEventListener('keydown', eventHandler);
+    }, []);
+    React.useEffect(() => {
+        setFocusWrapper(1);
+    }, [open]);
+    return (React.createElement(Overlay, { animate: animate, backdrop: true, onClose: onClose, open: open, portal: portal },
+        React.createElement(Animate, null, open && (React.createElement(FocusTrap, Object.assign({}, focusTrapOptions),
+            React.createElement(ModalEl, Object.assign({}, ModalProps), children))))));
 };
-exports.ModalWindow = ModalWindow;
 //# sourceMappingURL=components.js.map

package/dist/components/Modal/components.js.map

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

package/dist/components/Modal/index.css

@@ -14,8 +14,11 @@
   background: #ffffff;
   border-radius: 6px;
 }
-.Backdrop .Modal {
-  cursor: auto;
+.Modal:focus {
+  outline: none;
+}
+.Modal:focus-visible {
+  outline: none;
 }
 
 .Modal--XS {

package/dist/components/Modal/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Modal/Modal.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAYA;ACdC;EACA,OCiBa;ADfb;EACA;EDaA;EACA;EACA;EACA;EACA;EACA,YAhBc;EAiBd,YENa;EFOb,eEhBiB;;AFkBjB;EAAc;;;AAGf;EAAa,WApBQ;;;AAqBrB;EAAY,WApBQ;;;AAqBpB;EAAY,WApBQ;;;AAqBpB;EAAY,WApBQ;;;AAsBpB;AAAA;AAAA;EAGC,YEpBa;EFqBb,SAjCe;;;AAoChB;EACC,wBElCiB;EFmCjB,yBEnCiB;;;AFsClB;EACC,4BEvCiB;EFwCjB,2BExCiB;;;AF2ClB;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA8B;;;AAE9B;EACC;EACA,wBE3DiB;EF4DjB,yBE5DiB;;;AF+DlB;EACC;EACA,2BEjEiB;EFkEjB,4BElEiB;;;AFqElB;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA,SEuBkB;;AFrBlB;EACC;;;AAIF;EAAyB;;;AACzB;EAAuB;;;AACvB;EAAwB;;;AACxB;EAAgC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Modal/Modal.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAWA;ACbC;EACA,OCiBa;ADfb;EACA;EDYA;EACA;EACA;EACA;EACA;EACA,YAfc;EAgBd,YELa;EFMb,eEfiB;;AFkBjB;EAAU;;AAGV;EAAkB;;;AAGnB;EAAa,WAxBQ;;;AAyBrB;EAAY,WAxBQ;;;AAyBpB;EAAY,WAxBQ;;;AAyBpB;EAAY,WAxBQ;;;AA0BpB;AAAA;AAAA;EAGC,YEvBa;EFwBb,SApCe;;;AAuChB;EACC,wBErCiB;EFsCjB,yBEtCiB;;;AFyClB;EACC,4BE1CiB;EF2CjB,2BE3CiB;;;AF8ClB;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA8B;;;AAE9B;EACC;EACA,wBE9DiB;EF+DjB,yBE/DiB;;;AFkElB;EACC;EACA,2BEpEiB;EFqEjB,4BErEiB;;;AFwElB;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA,SEqBkB;;AFnBlB;EACC;;;AAIF;EAAyB;;;AACzB;EAAuB;;;AACvB;EAAwB;;;AACxB;EAAgC","file":"index.css"}

package/dist/components/Modal/index.js

@@ -1,14 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Modal"), exports);
+export * from './Modal';
 //# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/MoreDetails/MoreDetails.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAEA;EACC;EACA,kBCoCkB;EDnClB;EACA,OCsCkB;EDrClB,aC0Hc;EDzHd,aCoIkB;EDnIlB,aCkIkB;EDjIlB,WC2Ha;;ADzHb;EACC,WCyHY;;ADtHb;EACC,WCoHY;;ADjHb;EACC,WC+GY;;AD5Gb;EACC,WC0GY","file":"MoreDetails.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAEA;EACC;EACA,kBCoCkB;EDnClB;EACA,OCsCkB;EDrClB,aC2Hc;ED1Hd,aCqIkB;EDpIlB,aCmIkB;EDlIlB,WC4Ha;;AD1Hb;EACC,WC0HY;;ADvHb;EACC,WCqHY;;ADlHb;EACC,WCgHY;;AD7Gb;EACC,WC2GY","file":"MoreDetails.css"}

package/dist/components/MoreDetails/MoreDetails.js

@@ -1,15 +1,3 @@
-"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)
@@ -21,28 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoreDetails = void 0;
-var react_1 = __importDefault(require("react"));
-var BodyText_1 = require("../BodyText");
-var Tooltip_1 = require("../Tooltip");
-var Icon_1 = require("../Icon");
-var Stack_1 = require("../Stack");
-var classnames_1 = __importDefault(require("classnames"));
-exports.MoreDetails = react_1.default.forwardRef(function (_a, ref) {
-    var _b;
-    var full = _a.full, short = _a.short, _c = _a.direction, direction = _c === void 0 ? 't' : _c, className = _a.className, labelClassName = _a.labelClassName, iconClassName = _a.iconClassName, tooltipProps = _a.tooltipProps, size = _a.size, props = __rest(_a, ["full", "short", "direction", "className", "labelClassName", "iconClassName", "tooltipProps", "size"]);
-    var MoreDetailsIconClassNames = (0, classnames_1.default)('MoreDetailsIcon', iconClassName, (_b = {},
-        _b["MoreDetailsIcon--" + size] = size,
-        _b));
-    var MoreDetailsClassNames = (0, classnames_1.default)('d-if', className);
-    return (react_1.default.createElement(Stack_1.Stack, __assign({ alignItems: "center", className: MoreDetailsClassNames }, props, { ref: ref }),
-        react_1.default.createElement(BodyText_1.BodyText, { size: size, className: labelClassName }, short),
-        short !== full && (react_1.default.createElement(Tooltip_1.Tooltip, __assign({ text: full, className: "lh-1", portal: true, direction: direction }, tooltipProps),
-            react_1.default.createElement("div", { className: MoreDetailsIconClassNames },
-                react_1.default.createElement(Icon_1.Icon, { name: "more_horiz" }))))));
+import React from 'react';
+import { BodyText } from '../BodyText';
+import { Tooltip } from '../Tooltip';
+import { Icon } from '../Icon';
+import { Stack } from '../Stack';
+import classNames from 'classnames';
+export const MoreDetails = React.forwardRef((_a, ref) => {
+    var { full, short, direction = 't', className, labelClassName, iconClassName, tooltipProps, size } = _a, props = __rest(_a, ["full", "short", "direction", "className", "labelClassName", "iconClassName", "tooltipProps", "size"]);
+    const MoreDetailsIconClassNames = classNames('MoreDetailsIcon', iconClassName, {
+        [`MoreDetailsIcon--${size}`]: size,
+    });
+    const MoreDetailsClassNames = classNames('d-if', className);
+    return (React.createElement(Stack, Object.assign({ alignItems: "center", className: MoreDetailsClassNames }, props, { ref: ref }),
+        React.createElement(BodyText, { size: size, className: labelClassName }, short),
+        short !== full && (React.createElement(Tooltip, Object.assign({ text: full, className: "lh-1", portal: true, direction: direction }, tooltipProps),
+            React.createElement("div", { className: MoreDetailsIconClassNames },
+                React.createElement(Icon, { name: "more_horiz" }))))));
 });
 //# sourceMappingURL=MoreDetails.js.map

package/dist/components/MoreDetails/MoreDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreDetails.js","sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAuC;AACvC,wCAAuC;AACvC,sCAAmD;AACnD,gCAA+B;AAC/B,kCAAiC;AACjC,0DAAoC;AAgCvB,QAAA,WAAW,GAAyB,eAAK,CAAC,UAAU,CAChE,UACC,EAUC,EACD,GAAa;;IAVZ,IAAA,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,iBAAe,EAAf,SAAS,mBAAG,GAAG,KAAA,EACf,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,YAAY,kBAAA,EACZ,IAAI,UAAA,EACD,KAAK,cATT,sGAUC,CADQ;IAIT,IAAM,yBAAyB,GAAG,IAAA,oBAAU,EAC3C,iBAAiB,EACjB,aAAa;QAEZ,GAAC,sBAAoB,IAAM,IAAG,IAAI;YAEnC,CAAC;IAEF,IAAM,qBAAqB,GAAG,IAAA,oBAAU,EAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE5D,OAAO,CACN,8BAAC,aAAK,aACL,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,qBAAqB,IAC5B,KAAK,IACT,GAAG,EAAE,GAAG;QAER,8BAAC,mBAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,IAC7C,KAAK,CACI;QACV,KAAK,KAAK,IAAI,IAAI,CAClB,8BAAC,iBAAO,aACP,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,MAAM,EAChB,MAAM,QACN,SAAS,EAAE,SAAS,IAChB,YAAY;YAEhB,uCAAK,SAAS,EAAE,yBAAyB;gBACxC,8BAAC,WAAI,IAAC,IAAI,EAAC,YAAY,GAAG,CACrB,CACG,CACV,CACM,CACR,CAAC;AACH,CAAC,CACD,CAAC"}
+{"version":3,"file":"MoreDetails.js","sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAgB,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,UAAU,MAAM,YAAY,CAAC;AAgCpC,MAAM,CAAC,MAAM,WAAW,GAAyB,KAAK,CAAC,UAAU,CAChE,CACC,EAUC,EACD,GAAa,EACZ,EAAE;QAZH,EACC,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,GAAG,EACf,SAAS,EACT,cAAc,EACd,aAAa,EACb,YAAY,EACZ,IAAI,OAEJ,EADG,KAAK,cATT,sGAUC,CADQ;IAIT,MAAM,yBAAyB,GAAG,UAAU,CAC3C,iBAAiB,EACjB,aAAa,EACb;QACC,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE,IAAI;KAClC,CACD,CAAC;IAEF,MAAM,qBAAqB,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE5D,OAAO,CACN,oBAAC,KAAK,kBACL,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,qBAAqB,IAC5B,KAAK,IACT,GAAG,EAAE,GAAG;QAER,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,IAC7C,KAAK,CACI;QACV,KAAK,KAAK,IAAI,IAAI,CAClB,oBAAC,OAAO,kBACP,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,MAAM,EAChB,MAAM,QACN,SAAS,EAAE,SAAS,IAChB,YAAY;YAEhB,6BAAK,SAAS,EAAE,yBAAyB;gBACxC,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,CACrB,CACG,CACV,CACM,CACR,CAAC;AACH,CAAC,CACD,CAAC"}

package/dist/components/MoreDetails/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAEA;EACC;EACA,kBCoCkB;EDnClB;EACA,OCsCkB;EDrClB,aC0Hc;EDzHd,aCoIkB;EDnIlB,aCkIkB;EDjIlB,WC2Ha;;ADzHb;EACC,WCyHY;;ADtHb;EACC,WCoHY;;ADjHb;EACC,WC+GY;;AD5Gb;EACC,WC0GY","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/MoreDetails/MoreDetails.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAEA;EACC;EACA,kBCoCkB;EDnClB;EACA,OCsCkB;EDrClB,aC2Hc;ED1Hd,aCqIkB;EDpIlB,aCmIkB;EDlIlB,WC4Ha;;AD1Hb;EACC,WC0HY;;ADvHb;EACC,WCqHY;;ADlHb;EACC,WCgHY;;AD7Gb;EACC,WC2GY","file":"index.css"}

package/dist/components/MoreDetails/index.js

@@ -1,14 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./MoreDetails"), exports);
+export * from './MoreDetails';
 //# sourceMappingURL=index.js.map

package/dist/components/MoreDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MoreDetails/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MoreDetails/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}