@mongodb-js/compass-components 0.4.0 → 0.8.0

package/lib/compass-ui-colors.d.ts

@@ -0,0 +1,3 @@
+export declare const gray8 = "#f5f6f7";
+export declare const transparentGray = "rgba(180, 180, 180, 0.5)";
+export declare const transparentWhite = "rgba(255, 255, 255, 0.5)";

package/lib/compass-ui-colors.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transparentWhite = exports.transparentGray = exports.gray8 = void 0;
+exports.gray8 = '#f5f6f7';
+exports.transparentGray = 'rgba(180, 180, 180, 0.5)';
+exports.transparentWhite = 'rgba(255, 255, 255, 0.5)';
+//# sourceMappingURL=compass-ui-colors.js.map

package/lib/compass-ui-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compass-ui-colors.js","sourceRoot":"","sources":["../src/compass-ui-colors.tsx"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAAG,SAAS,CAAC;AAClB,QAAA,eAAe,GAAG,0BAA0B,CAAC;AAC7C,QAAA,gBAAgB,GAAG,0BAA0B,CAAC"}

package/lib/components/accordion.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AccordionProps {
+    dataTestId?: string;
+    text: string;
+}
+declare function Accordion(props: React.PropsWithChildren<AccordionProps>): React.ReactElement;
+export default Accordion;

package/lib/components/accordion.js

@@ -0,0 +1,71 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const tokens_1 = require("@leafygreen-ui/tokens");
+const css_1 = require("@emotion/css");
+const icon_1 = __importDefault(require("@leafygreen-ui/icon"));
+const palette_1 = require("@leafygreen-ui/palette");
+const utils_1 = require("@react-aria/utils");
+const labelStyles = css_1.css({
+    padding: 0,
+    margin: 0,
+    fontWeight: 'bold',
+});
+const buttonStyles = css_1.css({
+    display: 'flex',
+    alignItems: 'center',
+    border: 'none',
+    background: 'none',
+    borderRadius: '6px',
+    boxShadow: 'none',
+    transition: 'box-shadow 150ms ease-in-out',
+    '&:focus-visible': {
+        boxShadow: `0 0 0 3px ${palette_1.uiColors.focus}`,
+    },
+});
+const containerStyles = css_1.css({
+    marginTop: tokens_1.spacing[3],
+    display: 'flex',
+    alignItems: 'center',
+});
+const buttonIconStyles = css_1.css({
+    marginRight: tokens_1.spacing[1],
+});
+function Accordion(props) {
+    const [open, setOpen] = react_1.useState(false);
+    const regionId = utils_1.useId('region-');
+    const labelId = utils_1.useId('label-');
+    return (react_1.default.createElement("div", { "data-testid": props.dataTestId },
+        react_1.default.createElement("div", { className: containerStyles },
+            react_1.default.createElement("p", { className: labelStyles, id: labelId },
+                react_1.default.createElement("button", { className: buttonStyles, type: "button", "aria-expanded": open ? 'true' : 'false', "aria-controls": regionId, onClick: () => {
+                        setOpen((currentOpen) => !currentOpen);
+                    } },
+                    react_1.default.createElement(icon_1.default, { className: buttonIconStyles, glyph: open ? 'ChevronDown' : 'ChevronRight' }),
+                    props.text))),
+        open && (react_1.default.createElement("div", { role: "region", "aria-labelledby": labelId, id: regionId }, props.children))));
+}
+exports.default = Accordion;
+//# sourceMappingURL=accordion.js.map

package/lib/components/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,kDAAgD;AAChD,sCAAmC;AACnC,+DAAuC;AACvC,oDAAkD;AAClD,6CAA0C;AAE1C,MAAM,WAAW,GAAG,SAAG,CAAC;IACtB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,SAAG,CAAC;IACvB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,8BAA8B;IAC1C,iBAAiB,EAAE;QACjB,SAAS,EAAE,aAAa,kBAAQ,CAAC,KAAK,EAAE;KACzC;CACF,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,SAAG,CAAC;IAC1B,SAAS,EAAE,gBAAO,CAAC,CAAC,CAAC;IACrB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AACH,MAAM,gBAAgB,GAAG,SAAG,CAAC;IAC3B,WAAW,EAAE,gBAAO,CAAC,CAAC,CAAC;CACxB,CAAC,CAAC;AAKH,SAAS,SAAS,CAChB,KAA8C;IAE9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,aAAK,CAAC,SAAS,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,aAAK,CAAC,QAAQ,CAAC,CAAC;IAChC,OAAO,CACL,sDAAkB,KAAK,CAAC,UAAU;QAChC,uCAAK,SAAS,EAAE,eAAe;YAC7B,qCAAG,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,OAAO;gBACpC,0CACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBACvB,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;oBACzC,CAAC;oBAED,8BAAC,cAAI,IACH,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,GAC5C;oBACD,KAAK,CAAC,IAAI,CACJ,CACP,CACA;QAEL,IAAI,IAAI,CACP,uCAAK,IAAI,EAAC,QAAQ,qBAAkB,OAAO,EAAE,EAAE,EAAE,QAAQ,IACtD,KAAK,CAAC,QAAQ,CACX,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,SAAS,CAAC"}

package/lib/components/cancel-loader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare function CancelLoader({ dataTestId, progressText, cancelText, onCancel, }: {
+    dataTestId: string;
+    progressText: string;
+    cancelText: string;
+    onCancel: () => void;
+}): React.ReactElement;
+export default CancelLoader;

package/lib/components/cancel-loader.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_1 = require("@emotion/css");
+const react_1 = __importDefault(require("react"));
+const cancelLoaderStyle = css_1.css({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '10px 0',
+});
+const progressTextStyle = css_1.css({
+    margin: '0 auto 30px',
+    textAlign: 'left',
+    fontSize: '24px',
+    color: '#807f7f',
+    fontWeight: 200,
+});
+const spinnerStyle = css_1.css({
+    animation: 'fa-spin 2s infinite linear',
+    width: '40px',
+    textAlign: 'center',
+    display: 'inline-block',
+    textRendering: 'auto',
+    font: 'normal normal normal 20px/1 FontAwesome',
+    '&::before': {
+        boxSizing: 'border-box',
+        content: '"\\f1ce"',
+    },
+});
+const buttonStyle = css_1.css({
+    padding: '0 10px 0 10px',
+    height: '28px',
+    fontWeight: 'bold',
+    fontSize: '13px',
+    lineHeight: '26px',
+    textTransform: 'uppercase',
+    backgroundColor: 'transparent',
+    border: '1px solid #13AA52',
+    borderRadius: '3px',
+    boxShadow: 'none',
+    color: '#13AA52',
+    fontFamily: 'Akzidenz',
+    '-webkit-appearance': 'button',
+    cursor: 'pointer',
+    overflow: 'visible',
+    margin: 0,
+    boxSizing: 'border-box',
+    outline: 'none',
+});
+function CancelLoader({ dataTestId, progressText, cancelText, onCancel, }) {
+    return (react_1.default.createElement("div", { "data-testid": dataTestId, className: cancelLoaderStyle },
+        react_1.default.createElement("div", { className: progressTextStyle },
+            react_1.default.createElement("i", { className: spinnerStyle }),
+            progressText),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("button", { className: buttonStyle, onClick: onCancel }, cancelText))));
+}
+exports.default = CancelLoader;
+//# sourceMappingURL=cancel-loader.js.map

package/lib/components/cancel-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cancel-loader.js","sourceRoot":"","sources":["../../src/components/cancel-loader.tsx"],"names":[],"mappings":";;;;;AAAA,sCAAmC;AACnC,kDAA0B;AAE1B,MAAM,iBAAiB,GAAG,SAAG,CAAC;IAC5B,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,QAAQ;CAClB,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,SAAG,CAAC;IAC5B,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,GAAG;CAChB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,SAAG,CAAC;IACvB,SAAS,EAAE,4BAA4B;IACvC,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,cAAc;IACvB,aAAa,EAAE,MAAM;IACrB,IAAI,EAAE,yCAAyC;IAC/C,WAAW,EAAE;QACX,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,SAAG,CAAC;IACtB,OAAO,EAAE,eAAe;IACxB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,WAAW;IAC1B,eAAe,EAAE,aAAa;IAC9B,MAAM,EAAE,mBAAmB;IAC3B,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,UAAU;IACtB,oBAAoB,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,CAAC;IACT,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,SAAS,YAAY,CAAC,EACpB,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,GAMT;IACC,OAAO,CACL,sDAAkB,UAAU,EAAE,SAAS,EAAE,iBAAiB;QACxD,uCAAK,SAAS,EAAE,iBAAiB;YAC/B,qCAAG,SAAS,EAAE,YAAY,GAAI;YAC7B,YAAY,CACT;QACN;YACE,0CAAQ,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,IAC9C,UAAU,CACJ,CACL,CACF,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,YAAY,CAAC"}

package/lib/components/confirmation-modal.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import LeafyGreenConfirmationModal from '@leafygreen-ui/confirmation-modal';
-declare function ConfirmationModal(props: React.ComponentProps<typeof LeafyGreenConfirmationModal>): React.ReactElement;
+declare function ConfirmationModal(props: React.ComponentProps<typeof LeafyGreenConfirmationModal> & {
+    trackingId?: string;
+}): React.ReactElement;
 export default ConfirmationModal;

package/lib/components/confirmation-modal.js

@@ -5,7 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const confirmation_modal_1 = __importDefault(require("@leafygreen-ui/confirmation-modal"));
+const compass_logging_1 = require("@mongodb-js/compass-logging");
+const { track } = compass_logging_1.createLoggerAndTelemetry('COMPASS-UI');
 function ConfirmationModal(props) {
+    if (props.open && props.trackingId) {
+        track('Screen', { name: props.trackingId });
+    }
     return react_1.default.createElement(confirmation_modal_1.default, { ...props });
 }
 exports.default = ConfirmationModal;

package/lib/components/confirmation-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation-modal.js","sourceRoot":"","sources":["../../src/components/confirmation-modal.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,2FAA4E;AAE5E,SAAS,iBAAiB,CACxB,KAA+D;IAE/D,OAAO,8BAAC,4BAA2B,OAAK,KAAK,GAAI,CAAC;AACpD,CAAC;AAED,kBAAe,iBAAiB,CAAC"}
+{"version":3,"file":"confirmation-modal.js","sourceRoot":"","sources":["../../src/components/confirmation-modal.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,2FAA4E;AAC5E,iEAAuE;AACvE,MAAM,EAAE,KAAK,EAAE,GAAG,0CAAwB,CAAC,YAAY,CAAC,CAAC;AAEzD,SAAS,iBAAiB,CACxB,KAEC;IAED,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAClC,KAAK,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;KAC7C;IACD,OAAO,8BAAC,4BAA2B,OAAK,KAAK,GAAI,CAAC;AACpD,CAAC;AAED,kBAAe,iBAAiB,CAAC"}

package/lib/components/content-with-fallback.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const ContentWithFallback: React.FunctionComponent<{
+    content(shouldRender: boolean, shouldAnimate: boolean): React.ReactElement | boolean;
+    fallback(shouldRender: boolean): React.ReactElement | boolean;
+    isContentReady: boolean;
+    contentAfterFallbackTimeout?: number;
+    fallbackTimeout?: number;
+}>;

package/lib/components/content-with-fallback.js

@@ -0,0 +1,78 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWithFallback = void 0;
+const react_1 = __importStar(require("react"));
+var RenderStatus;
+(function (RenderStatus) {
+    RenderStatus["Nothing"] = "Nothing";
+    RenderStatus["Fallback"] = "Fallback";
+    RenderStatus["Content"] = "Content";
+    RenderStatus["ContentAnimated"] = "ContentAnimated";
+})(RenderStatus || (RenderStatus = {}));
+function isContent(status) {
+    return [RenderStatus.ContentAnimated, RenderStatus.Content].includes(status);
+}
+function useRenderWithFallback(isContentReady, { contentAfterFallbackTimeout = 200, fallbackTimeout = 30 } = {}) {
+    const [renderStatus, setRenderStatus] = react_1.useState(isContentReady ? RenderStatus.Content : RenderStatus.Nothing);
+    react_1.useEffect(() => {
+        if (isContent(renderStatus)) {
+            return;
+        }
+        if (isContentReady && renderStatus === RenderStatus.Nothing) {
+            setRenderStatus(RenderStatus.Content);
+            return;
+        }
+        if (isContentReady && renderStatus === RenderStatus.Fallback) {
+            const timeout = setTimeout(() => {
+                setRenderStatus(RenderStatus.ContentAnimated);
+            }, contentAfterFallbackTimeout);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+        if (!isContentReady && renderStatus === RenderStatus.Nothing) {
+            const timeout = setTimeout(() => {
+                setRenderStatus(RenderStatus.Fallback);
+            }, fallbackTimeout);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [
+        renderStatus,
+        isContentReady,
+        contentAfterFallbackTimeout,
+        fallbackTimeout,
+    ]);
+    return renderStatus;
+}
+const ContentWithFallback = ({ content, fallback, isContentReady, contentAfterFallbackTimeout, fallbackTimeout, }) => {
+    const renderStatus = useRenderWithFallback(isContentReady, {
+        contentAfterFallbackTimeout,
+        fallbackTimeout,
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        content(isContent(renderStatus), renderStatus === RenderStatus.ContentAnimated),
+        fallback(renderStatus === RenderStatus.Fallback)));
+};
+exports.ContentWithFallback = ContentWithFallback;
+//# sourceMappingURL=content-with-fallback.js.map

package/lib/components/content-with-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-with-fallback.js","sourceRoot":"","sources":["../../src/components/content-with-fallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAmD;AAEnD,IAAK,YAOJ;AAPD,WAAK,YAAY;IACf,mCAAmB,CAAA;IACnB,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IAGnB,mDAAmC,CAAA;AACrC,CAAC,EAPI,YAAY,KAAZ,YAAY,QAOhB;AACD,SAAS,SAAS,CAAC,MAAoB;IACrC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC/E,CAAC;AACD,SAAS,qBAAqB,CAC5B,cAAuB,EACvB,EAAE,2BAA2B,GAAG,GAAG,EAAE,eAAe,GAAG,EAAE,EAAE,GAAG,EAAE;IAEhE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,gBAAQ,CAC9C,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAC7D,CAAC;IAEF,iBAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE;YAC3B,OAAO;SACR;QACD,IAAI,cAAc,IAAI,YAAY,KAAK,YAAY,CAAC,OAAO,EAAE;YAC3D,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YACtC,OAAO;SACR;QACD,IAAI,cAAc,IAAI,YAAY,KAAK,YAAY,CAAC,QAAQ,EAAE;YAC5D,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC9B,eAAe,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;YAChD,CAAC,EAAE,2BAA2B,CAAC,CAAC;YAChC,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC;SACH;QACD,IAAI,CAAC,cAAc,IAAI,YAAY,KAAK,YAAY,CAAC,OAAO,EAAE;YAC5D,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC9B,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzC,CAAC,EAAE,eAAe,CAAC,CAAC;YACpB,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC;SACH;IACH,CAAC,EAAE;QACD,YAAY;QACZ,cAAc;QACd,2BAA2B;QAC3B,eAAe;KAChB,CAAC,CAAC;IAEH,OAAO,YAAY,CAAC;AACtB,CAAC;AACM,MAAM,mBAAmB,GAS3B,CAAC,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,2BAA2B,EAC3B,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,qBAAqB,CAAC,cAAc,EAAE;QACzD,2BAA2B;QAC3B,eAAe;KAChB,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,CACN,SAAS,CAAC,YAAY,CAAC,EACvB,YAAY,KAAK,YAAY,CAAC,eAAe,CAC9C;QACA,QAAQ,CAAC,YAAY,KAAK,YAAY,CAAC,QAAQ,CAAC,CAChD,CACJ,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,mBAAmB,uBA8B9B"}

package/lib/components/file-input.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare enum Variant {
+    Horizontal = "HORIZONTAL",
+    Vertical = "VERTICAL"
+}
+declare function FileInput({ id, label, onChange, multi, error, variant, link, values, }: {
+    id: string;
+    label: string;
+    onChange: (files: string[]) => void;
+    multi?: boolean;
+    error?: boolean;
+    variant?: Variant;
+    link?: string;
+    values?: string[];
+}): React.ReactElement;
+export default FileInput;

package/lib/components/file-input.js

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variant = void 0;
+const react_1 = __importDefault(require("react"));
+const path_1 = __importDefault(require("path"));
+const css_1 = require("@emotion/css");
+const __1 = require("..");
+const formItemHorizontalStyles = css_1.css `
+  margin: 15px auto 15px;
+  display: flex;
+  justify-content: flex-end;
+`;
+const formItemVerticalStyles = css_1.css `
+  margin: 5px auto 20px;
+`;
+const formItemErrorStyles = css_1.css `
+  border: 1px solid red;
+
+  &:focus {
+    border: 1px solid red;
+  }
+`;
+const buttonStyles = css_1.css `
+  width: 100%;
+`;
+const buttonErrorStyles = css_1.css `
+  border: 1px solid red;
+`;
+const labelHorizontalStyles = css_1.css `
+  width: 70%;
+  text-align: right;
+  vertical-align: middle;
+  padding-right: 15px;
+  margin: auto;
+  margin-bottom: 0;
+`;
+const labelErrorStyles = css_1.css `
+  color: red;
+`;
+const labelIconStyles = css_1.css `
+  display: inline-block;
+  vertical-align: middle;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  margin: 0 0 0 5px;
+  cursor: pointer;
+  color: #bfbfbe;
+
+  &:link,
+  &:active {
+    color: #bfbfbe;
+  }
+
+  &:link,
+  &:active,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: #fbb129;
+  }
+`;
+var Variant;
+(function (Variant) {
+    Variant["Horizontal"] = "HORIZONTAL";
+    Variant["Vertical"] = "VERTICAL";
+})(Variant = exports.Variant || (exports.Variant = {}));
+function FileInput({ id, label, onChange, multi = false, error = false, variant = Variant.Horizontal, link, values, }) {
+    const inputRef = react_1.default.useRef(null);
+    const buttonText = react_1.default.useMemo(() => {
+        if (Array.isArray(values) && values.length > 0) {
+            return values.map((file) => path_1.default.basename(file)).join(', ');
+        }
+        return multi ? 'Select files...' : 'Select a file...';
+    }, [values, multi]);
+    const onFilesChanged = react_1.default.useCallback((evt) => {
+        const fileList = Array.from(evt.currentTarget.files);
+        const files = fileList.map((file) => {
+            return file.path;
+        });
+        onChange(files);
+    }, [onChange]);
+    return (react_1.default.createElement("div", { className: css_1.cx({ [formItemHorizontalStyles]: variant === Variant.Horizontal }, { [formItemVerticalStyles]: variant === Variant.Vertical }, { [formItemErrorStyles]: error }) },
+        react_1.default.createElement("label", { htmlFor: id, className: css_1.cx({ [labelHorizontalStyles]: variant === Variant.Horizontal }, { [labelErrorStyles]: error }) },
+            react_1.default.createElement("span", null, label),
+            link && (react_1.default.createElement("a", { href: link, target: "_blank", rel: "noreferrer", className: labelIconStyles, "data-testid": "file-input-link" }, "\uF05A"))),
+        react_1.default.createElement("input", { ref: inputRef, id: `${id}_file_input`, name: id, type: "file", multiple: multi, onChange: onFilesChanged, style: { display: 'none' } }),
+        react_1.default.createElement(__1.Button, { id: id, "data-testid": "file-input-button", className: css_1.cx({ [buttonStyles]: true }, { [buttonErrorStyles]: error }), onClick: () => {
+                if (inputRef.current) {
+                    inputRef.current.click();
+                }
+            }, title: "Select a file", leftGlyph: react_1.default.createElement(__1.Icon, { glyph: "AddFile", title: null, fill: "currentColor" }) }, buttonText)));
+}
+exports.default = FileInput;
+//# sourceMappingURL=file-input.js.map

package/lib/components/file-input.js.map

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

package/lib/components/resize-handle.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+declare enum ResizeDirection {
+    TOP = "TOP",
+    RIGHT = "RIGHT"
+}
+declare function ResizeHandle({ direction, step, value, minValue, maxValue, onChange, title, }: {
+    direction: ResizeDirection;
+    step?: number;
+    value: number;
+    minValue: number;
+    maxValue: number;
+    onChange: (newValue: number) => void;
+    title: string;
+}): React.ReactElement;
+export { ResizeHandle, ResizeDirection };

package/lib/components/resize-handle.js

@@ -0,0 +1,117 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizeDirection = exports.ResizeHandle = void 0;
+const css_1 = require("@emotion/css");
+const react_1 = __importStar(require("react"));
+var ResizeDirection;
+(function (ResizeDirection) {
+    ResizeDirection["TOP"] = "TOP";
+    ResizeDirection["RIGHT"] = "RIGHT";
+})(ResizeDirection || (ResizeDirection = {}));
+exports.ResizeDirection = ResizeDirection;
+const baseResizerStyles = css_1.css({
+    position: 'absolute',
+    background: 'transparent',
+    padding: 0,
+    transition: 'opacity 250ms ease',
+    transitionDelay: '0ms',
+    backgroundColor: '#019EE2',
+    opacity: '0',
+    outline: 'none',
+    zIndex: 100,
+    ':focus': {
+        opacity: 1,
+    },
+    ':hover': {
+        transitionDelay: '250ms',
+        opacity: 1,
+    },
+    WebkitAppearance: 'none',
+    '::-webkit-slider-thumb': {
+        WebkitAppearance: 'none',
+    },
+    '::-ms-track': {
+        background: 'none',
+        borderColor: 'none',
+        color: 'none',
+    },
+});
+const verticalResizerStyle = css_1.css({
+    width: '4px !important',
+    right: '-2px',
+    bottom: 0,
+    top: 0,
+    ':hover': {
+        cursor: 'ew-resize',
+    },
+});
+const horizontalResizerStyle = css_1.css({
+    height: '4px !important',
+    top: '-2px',
+    right: 0,
+    left: 0,
+    ':hover': {
+        cursor: 'ns-resize',
+    },
+});
+function ResizeHandle({ direction, step = 10, value, minValue, maxValue, onChange, title, }) {
+    const isDragging = react_1.useRef(false);
+    function boundSize(attemptedSize) {
+        return Math.min(maxValue, Math.max(minValue, attemptedSize));
+    }
+    let directionTitle = 'vertical';
+    let dimensionTitle = 'Width';
+    let resizerStyle = verticalResizerStyle;
+    if (direction === ResizeDirection.TOP) {
+        directionTitle = 'horizontal';
+        dimensionTitle = 'Height';
+        resizerStyle = horizontalResizerStyle;
+    }
+    return (react_1.default.createElement("input", { type: "range", "aria-roledescription": `${directionTitle} splitter`, "aria-label": `${dimensionTitle} of the ${title}, resize using arrow keys`, className: css_1.cx(baseResizerStyles, resizerStyle), min: minValue, max: maxValue, value: value, step: step, onChange: (event) => {
+            if (isDragging.current) {
+                return;
+            }
+            onChange(boundSize(Number(event.target.value)));
+        }, onMouseDown: () => {
+            isDragging.current = true;
+        }, onMouseMove: (event) => {
+            if (isDragging.current) {
+                if (direction === ResizeDirection.RIGHT) {
+                    onChange(boundSize(value + event.movementX));
+                }
+                else if (direction === ResizeDirection.TOP) {
+                    onChange(boundSize(value - event.movementY));
+                }
+            }
+        }, onMouseUp: (event) => {
+            event.currentTarget.blur();
+            isDragging.current = false;
+            if (direction === ResizeDirection.RIGHT) {
+                onChange(boundSize(value + event.movementX));
+            }
+            else if (direction === ResizeDirection.TOP) {
+                onChange(boundSize(value - event.movementY));
+            }
+        } }));
+}
+exports.ResizeHandle = ResizeHandle;
+//# sourceMappingURL=resize-handle.js.map

package/lib/components/resize-handle.js.map

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

package/lib/components/spin-loader.d.ts

@@ -0,0 +1,12 @@
+import { Component } from 'react';
+interface SpinLoaderProps {
+    className: string;
+    size?: string;
+}
+export default class SpinLoader extends Component<SpinLoaderProps> {
+    static defaultProps: {
+        size: string;
+    };
+    render(): JSX.Element;
+}
+export {};

package/lib/components/spin-loader.js

@@ -0,0 +1,53 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const css_1 = require("@emotion/css");
+const palette_1 = require("@leafygreen-ui/palette");
+const shellLoaderSpin = css_1.keyframes `
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+const spinLoaderStyle = css_1.css `
+  border: 2px solid transparent;
+  border-top: 2px solid ${palette_1.uiColors.gray.dark3};
+  border-radius: 50%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  display: inline-block;
+
+  animation: ${shellLoaderSpin} 700ms ease infinite;
+`;
+class SpinLoader extends react_1.Component {
+    render() {
+        const { size } = this.props;
+        return (react_1.default.createElement("div", { className: spinLoaderStyle, style: {
+                width: size,
+                height: size,
+            } }));
+    }
+}
+exports.default = SpinLoader;
+SpinLoader.defaultProps = {
+    size: '12px',
+};
+//# sourceMappingURL=spin-loader.js.map

package/lib/components/spin-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spin-loader.js","sourceRoot":"","sources":["../../src/components/spin-loader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyC;AACzC,sCAA8C;AAC9C,oDAAkD;AAOlD,MAAM,eAAe,GAAG,eAAS,CAAA;;;CAGhC,CAAC;AAEF,MAAM,eAAe,GAAG,SAAG,CAAA;;0BAED,kBAAQ,CAAC,IAAI,CAAC,KAAK;;;;;;;eAO9B,eAAe;CAC7B,CAAC;AAEF,MAAqB,UAAW,SAAQ,iBAA0B;IAKhE,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5B,OAAO,CACL,uCACE,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,IAAI;aACb,GACD,CACH,CAAC;IACJ,CAAC;;AAjBH,6BAkBC;AAjBQ,uBAAY,GAAG;IACpB,IAAI,EAAE,MAAM;CACb,CAAC"}

package/lib/hooks/use-focus-hover.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare enum FocusState {
+    NoFocus = "NoFocus",
+    FocusVisible = "FocusVisible",
+    Focus = "Focus",
+    FocusWithinVisible = "FocusWithinVisible",
+    FocusWithin = "FocusWithin"
+}
+export declare function useFocusState(): [
+    React.HTMLAttributes<HTMLElement>,
+    FocusState
+];
+export declare function useHoverState(): [React.HTMLAttributes<HTMLElement>, boolean];

package/lib/hooks/use-focus-hover.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHoverState = exports.useFocusState = exports.FocusState = void 0;
+const interactions_1 = require("@react-aria/interactions");
+const react_1 = require("react");
+var FocusState;
+(function (FocusState) {
+    FocusState["NoFocus"] = "NoFocus";
+    FocusState["FocusVisible"] = "FocusVisible";
+    FocusState["Focus"] = "Focus";
+    FocusState["FocusWithinVisible"] = "FocusWithinVisible";
+    FocusState["FocusWithin"] = "FocusWithin";
+})(FocusState = exports.FocusState || (exports.FocusState = {}));
+function useFocusState() {
+    const [isFocused, setIsFocused] = react_1.useState(false);
+    const [isFocusWithin, setIsFocusWithin] = react_1.useState(false);
+    const { isFocusVisible } = interactions_1.useFocusVisible();
+    const { focusWithinProps } = interactions_1.useFocusWithin({
+        onFocusWithinChange: setIsFocusWithin,
+    });
+    const { focusProps } = interactions_1.useFocus({
+        onFocusChange: setIsFocused,
+    });
+    const mergedProps = {
+        onFocus(evt) {
+            var _a, _b;
+            (_a = focusProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(focusProps, evt);
+            (_b = focusWithinProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(focusWithinProps, evt);
+        },
+        onBlur(evt) {
+            var _a, _b;
+            (_a = focusProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(focusProps, evt);
+            (_b = focusWithinProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(focusWithinProps, evt);
+        },
+    };
+    return [
+        mergedProps,
+        isFocused && isFocusVisible
+            ? FocusState.FocusVisible
+            : isFocused
+                ? FocusState.Focus
+                : isFocusWithin && isFocusVisible
+                    ? FocusState.FocusWithinVisible
+                    : isFocusWithin
+                        ? FocusState.FocusWithin
+                        : FocusState.NoFocus,
+    ];
+}
+exports.useFocusState = useFocusState;
+function useHoverState() {
+    const [isHovered, setIsHovered] = react_1.useState(false);
+    const hoverProps = {
+        onMouseEnter() {
+            setIsHovered(true);
+        },
+        onMouseLeave() {
+            setIsHovered(false);
+        },
+    };
+    return [hoverProps, isHovered];
+}
+exports.useHoverState = useHoverState;
+//# sourceMappingURL=use-focus-hover.js.map

package/lib/hooks/use-focus-hover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-hover.js","sourceRoot":"","sources":["../../src/hooks/use-focus-hover.ts"],"names":[],"mappings":";;;AAAA,2DAIkC;AAClC,iCAAwC;AAExC,IAAY,UAMX;AAND,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,2CAA6B,CAAA;IAC7B,6BAAe,CAAA;IACf,uDAAyC,CAAA;IACzC,yCAA2B,CAAA;AAC7B,CAAC,EANW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAMrB;AAED,SAAgB,aAAa;IAI3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,cAAc,EAAE,GAAG,8BAAe,EAAE,CAAC;IAC7C,MAAM,EAAE,gBAAgB,EAAE,GAAG,6BAAc,CAAC;QAC1C,mBAAmB,EAAE,gBAAgB;KACtC,CAAC,CAAC;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,uBAAQ,CAAC;QAC9B,aAAa,EAAE,YAAY;KAC5B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG;QAClB,OAAO,CAAC,GAAkC;;YACxC,MAAA,UAAU,CAAC,OAAO,+CAAlB,UAAU,EAAW,GAAG,CAAC,CAAC;YAC1B,MAAA,gBAAgB,CAAC,OAAO,+CAAxB,gBAAgB,EAAW,GAAG,CAAC,CAAC;QAClC,CAAC;QACD,MAAM,CAAC,GAAkC;;YACvC,MAAA,UAAU,CAAC,MAAM,+CAAjB,UAAU,EAAU,GAAG,CAAC,CAAC;YACzB,MAAA,gBAAgB,CAAC,MAAM,+CAAvB,gBAAgB,EAAU,GAAG,CAAC,CAAC;QACjC,CAAC;KACF,CAAC;IACF,OAAO;QACL,WAAW;QACX,SAAS,IAAI,cAAc;YACzB,CAAC,CAAC,UAAU,CAAC,YAAY;YACzB,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,UAAU,CAAC,KAAK;gBAClB,CAAC,CAAC,aAAa,IAAI,cAAc;oBACjC,CAAC,CAAC,UAAU,CAAC,kBAAkB;oBAC/B,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,UAAU,CAAC,WAAW;wBACxB,CAAC,CAAC,UAAU,CAAC,OAAO;KACvB,CAAC;AACJ,CAAC;AAnCD,sCAmCC;AAED,SAAgB,aAAa;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG;QACjB,YAAY;YACV,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;QACD,YAAY;YACV,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;KACF,CAAC;IACF,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AACjC,CAAC;AAXD,sCAWC"}

package/lib/index.d.ts

@@ -1,2 +1,33 @@
+import CancelLoader from './components/cancel-loader';
 import ConfirmationModal from './components/confirmation-modal';
-export { ConfirmationModal };
+import FileInput from './components/file-input';
+import SpinLoader from './components/spin-loader';
+import { ResizeHandle, ResizeDirection } from './components/resize-handle';
+import Accordion from './components/accordion';
+export { default as Badge, Variant as BadgeVariant, } from '@leafygreen-ui/badge';
+export { default as Banner, Variant as BannerVariant, } from '@leafygreen-ui/banner';
+export { default as Button, Size as ButtonSize, Variant as ButtonVariant, } from '@leafygreen-ui/button';
+export { default as Card } from '@leafygreen-ui/card';
+export { default as Checkbox } from '@leafygreen-ui/checkbox';
+export { default as Icon } from '@leafygreen-ui/icon';
+export { default as IconButton } from '@leafygreen-ui/icon-button';
+export { default as LeafyGreenProvider } from '@leafygreen-ui/leafygreen-provider';
+export { AtlasLogoMark, MongoDBLogoMark, MongoDBLogo, } from '@leafygreen-ui/logo';
+export { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu';
+export { default as Modal } from '@leafygreen-ui/modal';
+export { uiColors } from '@leafygreen-ui/palette';
+export * as compassUIColors from './compass-ui-colors';
+export { default as Portal } from '@leafygreen-ui/portal';
+export { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
+export { Select, Option, Size as SelectSize } from '@leafygreen-ui/select';
+export { Tabs, Tab } from '@leafygreen-ui/tabs';
+export { default as TextArea } from '@leafygreen-ui/text-area';
+export { default as TextInput } from '@leafygreen-ui/text-input';
+export { default as Toast, Variant as ToastVariant, } from '@leafygreen-ui/toast';
+export { default as Toggle } from '@leafygreen-ui/toggle';
+export { breakpoints, spacing } from '@leafygreen-ui/tokens';
+export { default as Tooltip } from '@leafygreen-ui/tooltip';
+export { H2, H3, Link, Subtitle, Label, Description, } from '@leafygreen-ui/typography';
+export { Accordion, CancelLoader, ConfirmationModal, FileInput, SpinLoader, ResizeHandle, ResizeDirection, };
+export { useFocusState, useHoverState, FocusState, } from './hooks/use-focus-hover';
+export { ContentWithFallback } from './components/content-with-fallback';

package/lib/index.js

@@ -1,9 +1,112 @@
 "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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfirmationModal = void 0;
+exports.ResizeDirection = exports.ResizeHandle = exports.SpinLoader = exports.FileInput = exports.ConfirmationModal = exports.CancelLoader = exports.Accordion = exports.Description = exports.Label = exports.Subtitle = exports.Link = exports.H3 = exports.H2 = exports.Tooltip = exports.spacing = exports.breakpoints = exports.Toggle = exports.ToastVariant = exports.Toast = exports.TextInput = exports.TextArea = exports.Tab = exports.Tabs = exports.SelectSize = exports.Option = exports.Select = exports.RadioBoxGroup = exports.RadioBox = exports.Portal = exports.compassUIColors = exports.uiColors = exports.Modal = exports.MenuItem = exports.MenuSeparator = exports.Menu = exports.MongoDBLogo = exports.MongoDBLogoMark = exports.AtlasLogoMark = exports.LeafyGreenProvider = exports.IconButton = exports.Icon = exports.Checkbox = exports.Card = exports.ButtonVariant = exports.ButtonSize = exports.Button = exports.BannerVariant = exports.Banner = exports.BadgeVariant = exports.Badge = void 0;
+exports.ContentWithFallback = exports.FocusState = exports.useHoverState = exports.useFocusState = void 0;
+const cancel_loader_1 = __importDefault(require("./components/cancel-loader"));
+exports.CancelLoader = cancel_loader_1.default;
 const confirmation_modal_1 = __importDefault(require("./components/confirmation-modal"));
 exports.ConfirmationModal = confirmation_modal_1.default;
+const file_input_1 = __importDefault(require("./components/file-input"));
+exports.FileInput = file_input_1.default;
+const spin_loader_1 = __importDefault(require("./components/spin-loader"));
+exports.SpinLoader = spin_loader_1.default;
+const resize_handle_1 = require("./components/resize-handle");
+Object.defineProperty(exports, "ResizeHandle", { enumerable: true, get: function () { return resize_handle_1.ResizeHandle; } });
+Object.defineProperty(exports, "ResizeDirection", { enumerable: true, get: function () { return resize_handle_1.ResizeDirection; } });
+const accordion_1 = __importDefault(require("./components/accordion"));
+exports.Accordion = accordion_1.default;
+var badge_1 = require("@leafygreen-ui/badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
+Object.defineProperty(exports, "BadgeVariant", { enumerable: true, get: function () { return badge_1.Variant; } });
+var banner_1 = require("@leafygreen-ui/banner");
+Object.defineProperty(exports, "Banner", { enumerable: true, get: function () { return __importDefault(banner_1).default; } });
+Object.defineProperty(exports, "BannerVariant", { enumerable: true, get: function () { return banner_1.Variant; } });
+var button_1 = require("@leafygreen-ui/button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+Object.defineProperty(exports, "ButtonSize", { enumerable: true, get: function () { return button_1.Size; } });
+Object.defineProperty(exports, "ButtonVariant", { enumerable: true, get: function () { return button_1.Variant; } });
+var card_1 = require("@leafygreen-ui/card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(card_1).default; } });
+var checkbox_1 = require("@leafygreen-ui/checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });
+var icon_1 = require("@leafygreen-ui/icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
+var icon_button_1 = require("@leafygreen-ui/icon-button");
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return __importDefault(icon_button_1).default; } });
+var leafygreen_provider_1 = require("@leafygreen-ui/leafygreen-provider");
+Object.defineProperty(exports, "LeafyGreenProvider", { enumerable: true, get: function () { return __importDefault(leafygreen_provider_1).default; } });
+var logo_1 = require("@leafygreen-ui/logo");
+Object.defineProperty(exports, "AtlasLogoMark", { enumerable: true, get: function () { return logo_1.AtlasLogoMark; } });
+Object.defineProperty(exports, "MongoDBLogoMark", { enumerable: true, get: function () { return logo_1.MongoDBLogoMark; } });
+Object.defineProperty(exports, "MongoDBLogo", { enumerable: true, get: function () { return logo_1.MongoDBLogo; } });
+var menu_1 = require("@leafygreen-ui/menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return menu_1.Menu; } });
+Object.defineProperty(exports, "MenuSeparator", { enumerable: true, get: function () { return menu_1.MenuSeparator; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return menu_1.MenuItem; } });
+var modal_1 = require("@leafygreen-ui/modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(modal_1).default; } });
+var palette_1 = require("@leafygreen-ui/palette");
+Object.defineProperty(exports, "uiColors", { enumerable: true, get: function () { return palette_1.uiColors; } });
+exports.compassUIColors = __importStar(require("./compass-ui-colors"));
+var portal_1 = require("@leafygreen-ui/portal");
+Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return __importDefault(portal_1).default; } });
+var radio_box_group_1 = require("@leafygreen-ui/radio-box-group");
+Object.defineProperty(exports, "RadioBox", { enumerable: true, get: function () { return radio_box_group_1.RadioBox; } });
+Object.defineProperty(exports, "RadioBoxGroup", { enumerable: true, get: function () { return radio_box_group_1.RadioBoxGroup; } });
+var select_1 = require("@leafygreen-ui/select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return select_1.Select; } });
+Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return select_1.Option; } });
+Object.defineProperty(exports, "SelectSize", { enumerable: true, get: function () { return select_1.Size; } });
+var tabs_1 = require("@leafygreen-ui/tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return tabs_1.Tabs; } });
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return tabs_1.Tab; } });
+var text_area_1 = require("@leafygreen-ui/text-area");
+Object.defineProperty(exports, "TextArea", { enumerable: true, get: function () { return __importDefault(text_area_1).default; } });
+var text_input_1 = require("@leafygreen-ui/text-input");
+Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return __importDefault(text_input_1).default; } });
+var toast_1 = require("@leafygreen-ui/toast");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return __importDefault(toast_1).default; } });
+Object.defineProperty(exports, "ToastVariant", { enumerable: true, get: function () { return toast_1.Variant; } });
+var toggle_1 = require("@leafygreen-ui/toggle");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return __importDefault(toggle_1).default; } });
+var tokens_1 = require("@leafygreen-ui/tokens");
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return tokens_1.breakpoints; } });
+Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
+var tooltip_1 = require("@leafygreen-ui/tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(tooltip_1).default; } });
+var typography_1 = require("@leafygreen-ui/typography");
+Object.defineProperty(exports, "H2", { enumerable: true, get: function () { return typography_1.H2; } });
+Object.defineProperty(exports, "H3", { enumerable: true, get: function () { return typography_1.H3; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return typography_1.Link; } });
+Object.defineProperty(exports, "Subtitle", { enumerable: true, get: function () { return typography_1.Subtitle; } });
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return typography_1.Label; } });
+Object.defineProperty(exports, "Description", { enumerable: true, get: function () { return typography_1.Description; } });
+var use_focus_hover_1 = require("./hooks/use-focus-hover");
+Object.defineProperty(exports, "useFocusState", { enumerable: true, get: function () { return use_focus_hover_1.useFocusState; } });
+Object.defineProperty(exports, "useHoverState", { enumerable: true, get: function () { return use_focus_hover_1.useHoverState; } });
+Object.defineProperty(exports, "FocusState", { enumerable: true, get: function () { return use_focus_hover_1.FocusState; } });
+var content_with_fallback_1 = require("./components/content-with-fallback");
+Object.defineProperty(exports, "ContentWithFallback", { enumerable: true, get: function () { return content_with_fallback_1.ContentWithFallback; } });
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,yFAAgE;AAEvD,4BAFF,4BAAiB,CAEE"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+EAAsD;AAwDpD,uBAxDK,uBAAY,CAwDL;AAvDd,yFAAgE;AAwD9D,4BAxDK,4BAAiB,CAwDL;AAvDnB,yEAAgD;AAwD9C,oBAxDK,oBAAS,CAwDL;AAvDX,2EAAkD;AAwDhD,qBAxDK,qBAAU,CAwDL;AAvDZ,8DAA2E;AAwDzE,6FAxDO,4BAAY,OAwDP;AACZ,gGAzDqB,+BAAe,OAyDrB;AAxDjB,uEAA+C;AAkD7C,oBAlDK,mBAAS,CAkDL;AAjDX,8CAG8B;AAF5B,+GAAA,OAAO,OAAS;AAChB,qGAAA,OAAO,OAAgB;AAEzB,gDAG+B;AAF7B,iHAAA,OAAO,OAAU;AACjB,uGAAA,OAAO,OAAiB;AAE1B,gDAI+B;AAH7B,iHAAA,OAAO,OAAU;AACjB,oGAAA,IAAI,OAAc;AAClB,uGAAA,OAAO,OAAiB;AAE1B,4CAAsD;AAA7C,6GAAA,OAAO,OAAQ;AACxB,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,4CAAsD;AAA7C,6GAAA,OAAO,OAAQ;AACxB,0DAAmE;AAA1D,0HAAA,OAAO,OAAc;AAC9B,0EAAmF;AAA1E,0IAAA,OAAO,OAAsB;AACtC,4CAI6B;AAH3B,qGAAA,aAAa,OAAA;AACb,uGAAA,eAAe,OAAA;AACf,mGAAA,WAAW,OAAA;AAEb,4CAAoE;AAA3D,4FAAA,IAAI,OAAA;AAAE,qGAAA,aAAa,OAAA;AAAE,gGAAA,QAAQ,OAAA;AACtC,8CAAwD;AAA/C,+GAAA,OAAO,OAAS;AACzB,kDAAkD;AAAzC,mGAAA,QAAQ,OAAA;AACjB,uEAAuD;AACvD,gDAA0D;AAAjD,iHAAA,OAAO,OAAU;AAC1B,kEAAyE;AAAhE,2GAAA,QAAQ,OAAA;AAAE,gHAAA,aAAa,OAAA;AAChC,gDAA2E;AAAlE,gGAAA,MAAM,OAAA;AAAE,gGAAA,MAAM,OAAA;AAAE,oGAAA,IAAI,OAAc;AAC3C,4CAAgD;AAAvC,4FAAA,IAAI,OAAA;AAAE,2FAAA,GAAG,OAAA;AAClB,sDAA+D;AAAtD,sHAAA,OAAO,OAAY;AAC5B,wDAAiE;AAAxD,wHAAA,OAAO,OAAa;AAC7B,8CAG8B;AAF5B,+GAAA,OAAO,OAAS;AAChB,qGAAA,OAAO,OAAgB;AAEzB,gDAA0D;AAAjD,iHAAA,OAAO,OAAU;AAC1B,gDAA6D;AAApD,qGAAA,WAAW,OAAA;AAAE,iGAAA,OAAO,OAAA;AAC7B,kDAA4D;AAAnD,mHAAA,OAAO,OAAW;AAC3B,wDAOmC;AANjC,gGAAA,EAAE,OAAA;AACF,gGAAA,EAAE,OAAA;AACF,kGAAA,IAAI,OAAA;AACJ,sGAAA,QAAQ,OAAA;AACR,mGAAA,KAAK,OAAA;AACL,yGAAA,WAAW,OAAA;AAWb,2DAIiC;AAH/B,gHAAA,aAAa,OAAA;AACb,gHAAA,aAAa,OAAA;AACb,6GAAA,UAAU,OAAA;AAEZ,4EAAyE;AAAhE,4HAAA,mBAAmB,OAAA"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@mongodb-js/compass-components",
-  "version": "0.4.0",
+  "version": "0.8.0",
   "description": "React Components used in Compass",
   "license": "SSPL",
   "main": "lib/index.js",
   "exports": {
+    "webpack": "./src/index.ts",
     "require": "./lib/index.js",
     "import": "./lib/.esm-wrapper.mjs"
   },
@@ -19,7 +20,7 @@
     "prepublishOnly": "npm run compile",
     "clean": "rimraf lib",
     "precompile": "npm run clean",
-    "compile": "tsc -p tsconfig.json && gen-esm-wrapper . ./lib/.esm-wrapper.mjs",
+    "compile": "tsc -p tsconfig.json",
     "eslint": "eslint",
     "prettier": "prettier",
     "lint": "npm run eslint . && npm run prettier -- --check .",
@@ -33,18 +34,47 @@
     "reformat": "npm run prettier -- --write ."
   },
   "dependencies": {
-    "@leafygreen-ui/confirmation-modal": "^2.2.1"
+    "@leafygreen-ui/badge": "^4.0.4",
+    "@leafygreen-ui/banner": "^3.0.8",
+    "@leafygreen-ui/button": "^12.0.5",
+    "@leafygreen-ui/card": "^5.1.3",
+    "@leafygreen-ui/checkbox": "^6.0.5",
+    "@leafygreen-ui/confirmation-modal": "^2.2.1",
+    "@leafygreen-ui/icon": "^11.4.0",
+    "@leafygreen-ui/icon-button": "^9.1.6",
+    "@leafygreen-ui/leafygreen-provider": "^2.1.2",
+    "@leafygreen-ui/logo": "^6.1.0",
+    "@leafygreen-ui/menu": "^11.0.1",
+    "@leafygreen-ui/modal": "^7.0.0",
+    "@leafygreen-ui/palette": "^3.2.2",
+    "@leafygreen-ui/portal": "^3.1.3",
+    "@leafygreen-ui/radio-box-group": "^6.1.4",
+    "@leafygreen-ui/select": "^3.0.4",
+    "@leafygreen-ui/tabs": "^5.1.3",
+    "@leafygreen-ui/text-area": "^4.0.3",
+    "@leafygreen-ui/text-input": "^6.0.3",
+    "@leafygreen-ui/toast": "^0.4.10",
+    "@leafygreen-ui/toggle": "^7.0.4",
+    "@leafygreen-ui/tokens": "^0.5.3",
+    "@leafygreen-ui/tooltip": "^6.2.2",
+    "@leafygreen-ui/typography": "^8.0.2",
+    "@mongodb-js/compass-logging": "^0.5.0",
+    "@react-aria/interactions": "^3.6.0",
+    "@react-aria/utils": "^3.9.0"
   },
   "peerDependencies": {
-    "@leafygreen-ui/confirmation-modal": "^2.2.1",
+    "@emotion/css": "^11.5.0",
     "react": "^16.14.0"
   },
   "devDependencies": {
-    "@mongodb-js/eslint-config-compass": "^0.2.0",
-    "@mongodb-js/mocha-config-compass": "^0.3.0",
-    "@mongodb-js/prettier-config-compass": "^0.2.0",
-    "@mongodb-js/tsconfig-compass": "^0.2.0",
+    "@emotion/css": "^11.5.0",
+    "@mongodb-js/eslint-config-compass": "^0.5.0",
+    "@mongodb-js/mocha-config-compass": "^0.6.0",
+    "@mongodb-js/prettier-config-compass": "^0.4.0",
+    "@mongodb-js/tsconfig-compass": "^0.4.0",
+    "@testing-library/dom": "^8.11.1",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.5.0",
     "@types/chai": "^4.2.21",
     "@types/chai-dom": "^0.0.10",
     "@types/mocha": "^9.0.0",
@@ -58,6 +88,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
+    "sinon": "^9.0.0",
     "ts-node": "^10.1.0",
     "typescript": "^4.3.5"
   },
@@ -69,5 +100,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "438e727ab9b4b0c7cac31af9c81ebb2ff753a113"
+  "gitHead": "77166e3754e36e95c7ff7efb5a0ce5e0990b0ff7"
 }

package/lib/.esm-wrapper.mjs

@@ -1,4 +0,0 @@
-import mod from "./index.js";
-
-export default mod;
-export const ConfirmationModal = mod.ConfirmationModal;