@mongodb-js/compass-components 0.5.0 → 0.9.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 = (0, css_1.css)({
+    padding: 0,
+    margin: 0,
+    fontWeight: 'bold',
+});
+const buttonStyles = (0, 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 = (0, css_1.css)({
+    marginTop: tokens_1.spacing[3],
+    display: 'flex',
+    alignItems: 'center',
+});
+const buttonIconStyles = (0, css_1.css)({
+    marginRight: tokens_1.spacing[1],
+});
+function Accordion(props) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const regionId = (0, utils_1.useId)('region-');
+    const labelId = (0, 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,IAAA,SAAG,EAAC;IACtB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,IAAA,SAAG,EAAC;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,IAAA,SAAG,EAAC;IAC1B,SAAS,EAAE,gBAAO,CAAC,CAAC,CAAC;IACrB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AACH,MAAM,gBAAgB,GAAG,IAAA,SAAG,EAAC;IAC3B,WAAW,EAAE,gBAAO,CAAC,CAAC,CAAC;CACxB,CAAC,CAAC;AAKH,SAAS,SAAS,CAChB,KAA8C;IAE9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,IAAA,aAAK,EAAC,SAAS,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,IAAA,aAAK,EAAC,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 = (0, css_1.css)({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '10px 0',
+});
+const progressTextStyle = (0, css_1.css)({
+    margin: '0 auto 30px',
+    textAlign: 'left',
+    fontSize: '24px',
+    color: '#807f7f',
+    fontWeight: 200,
+});
+const spinnerStyle = (0, 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 = (0, 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,IAAA,SAAG,EAAC;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,IAAA,SAAG,EAAC;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,IAAA,SAAG,EAAC;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,IAAA,SAAG,EAAC;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 } = (0, 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,IAAA,0CAAwB,EAAC,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,17 @@
+import React from 'react';
+export declare const ContentWithFallback: React.FunctionComponent<{
+    content(shouldRender: boolean, shouldAnimate: boolean): React.ReactElement | boolean | null;
+    fallback(shouldRender: boolean): React.ReactElement | boolean | null;
+    isContentReady: boolean;
+    contentAfterFallbackTimeout?: number;
+    fallbackTimeout?: number;
+}>;
+declare type FadeInPlaceholderProps = {
+    isContentReady: boolean;
+    content(): React.ReactElement | boolean | null;
+    fallback(): React.ReactElement | boolean | null;
+    contentContainerProps?: React.HTMLProps<HTMLDivElement>;
+    fallbackContainerProps?: React.HTMLProps<HTMLDivElement>;
+};
+export declare const FadeInPlaceholder: React.FunctionComponent<FadeInPlaceholderProps & Omit<React.HTMLProps<HTMLDivElement>, keyof FadeInPlaceholderProps>>;
+export {};

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

@@ -0,0 +1,119 @@
+"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.FadeInPlaceholder = exports.ContentWithFallback = void 0;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+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] = (0, react_1.useState)(isContentReady ? RenderStatus.Content : RenderStatus.Nothing);
+    (0, 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;
+const contentWithFallbackContainer = (0, emotion_1.css)({
+    position: 'relative',
+});
+const fadeInAnimation = (0, emotion_1.keyframes)({
+    from: {
+        opacity: 0,
+    },
+    to: {
+        opacity: 1,
+    },
+});
+const contentContainer = (0, emotion_1.css)({
+    position: 'relative',
+});
+const contentContainerFadeIn = (0, emotion_1.css)({
+    animation: `${fadeInAnimation} .16s ease-out`,
+});
+const fallbackContainer = (0, emotion_1.css)({
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    opacity: 0,
+    transition: 'opacity .16s ease-out',
+    pointerEvents: 'none',
+});
+const fallbackContainerVisible = (0, emotion_1.css)({
+    opacity: 1,
+    transitionTimingFunction: 'ease-in',
+});
+const FadeInPlaceholder = ({ content, fallback, isContentReady, contentContainerProps = {}, fallbackContainerProps = {}, className, ...props }) => {
+    return (react_1.default.createElement("div", { className: (0, emotion_1.cx)(contentWithFallbackContainer, className), ...props },
+        react_1.default.createElement(exports.ContentWithFallback, { isContentReady: isContentReady, content: (shouldRender, shouldAnimate) => {
+                return (shouldRender && (react_1.default.createElement("div", { ...contentContainerProps, className: (0, emotion_1.cx)(contentContainer, shouldAnimate && contentContainerFadeIn, contentContainerProps.className) }, content())));
+            }, fallback: (shouldRender) => {
+                return (react_1.default.createElement("div", { ...fallbackContainerProps, className: (0, emotion_1.cx)(fallbackContainer, shouldRender && fallbackContainerVisible, fallbackContainerProps.className) }, fallback()));
+            } })));
+};
+exports.FadeInPlaceholder = FadeInPlaceholder;
+//# 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":"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"}

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

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

package/lib/components/file-input.js

@@ -0,0 +1,121 @@
+"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 emotion_1 = require("@leafygreen-ui/emotion");
+const palette_1 = require("@leafygreen-ui/palette");
+const tokens_1 = require("@leafygreen-ui/tokens");
+const __1 = require("..");
+const { base: redBaseColor } = palette_1.uiColors.red;
+const formItemHorizontalStyles = (0, emotion_1.css)({
+    marginTop: tokens_1.spacing[2],
+    marginBottom: tokens_1.spacing[2],
+    marginRight: 'auto',
+    marginLeft: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+});
+const formItemVerticalStyles = (0, emotion_1.css) `
+  margin: 5px auto 20px;
+`;
+const formItemErrorStyles = (0, emotion_1.css) `
+  border: 1px solid ${redBaseColor};
+  border-radius: 5px;
+  &:focus {
+    border: 1px solid ${redBaseColor};
+  }
+`;
+const buttonStyles = (0, emotion_1.css) `
+  width: 100%;
+`;
+const errorMessageStyles = (0, emotion_1.css)({
+    color: `${redBaseColor} !important`,
+});
+const labelHorizontalStyles = (0, emotion_1.css)({
+    width: '70%',
+    display: 'grid',
+    gridTemplateAreas: `'label icon' 'description .'`,
+    gridTemplateColumns: '1fr auto',
+    alignItems: 'center',
+    columnGap: tokens_1.spacing[1],
+    paddingRight: tokens_1.spacing[3],
+});
+const labelIconStyles = (0, emotion_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, dataTestId, onChange, multi = false, error = false, errorMessage, variant = Variant.Horizontal, link, description, values, labelAlignment = 'left', }) {
+    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]);
+    const renderDescription = () => {
+        if (!link && !description) {
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        }
+        if (!link) {
+            return (react_1.default.createElement(__1.Description, { "data-testid": 'file-input-description', style: { gridArea: 'description' } }, description));
+        }
+        return (react_1.default.createElement(__1.Link, { "data-testid": 'file-input-link', href: link, className: (0, emotion_1.cx)({
+                [labelIconStyles]: !description,
+            }, (0, emotion_1.css)({
+                gridArea: description ? 'description' : 'icon',
+            })), hideExternalIcon: !description }, description !== null && description !== void 0 ? description : ''));
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: (0, emotion_1.cx)({ [formItemHorizontalStyles]: variant === Variant.Horizontal }, { [formItemVerticalStyles]: variant === Variant.Vertical }, { [formItemErrorStyles]: error }) },
+            react_1.default.createElement("label", { htmlFor: `${id}_file_input`, className: (0, emotion_1.cx)({ [labelHorizontalStyles]: variant === Variant.Horizontal }, (0, emotion_1.css)({
+                    textAlign: labelAlignment,
+                })) },
+                react_1.default.createElement("span", { style: { gridArea: 'label' } }, label),
+                renderDescription()),
+            react_1.default.createElement("input", { "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : 'file-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: (0, emotion_1.cx)({ [buttonStyles]: true }), 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)),
+        error && errorMessage && (react_1.default.createElement(__1.Label, { "data-testid": 'file-input-error', className: errorMessageStyles, htmlFor: '' }, errorMessage))));
+}
+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/inline-definition.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Tooltip } from './tooltip';
+declare const InlineDefinition: React.FunctionComponent<React.HTMLProps<HTMLSpanElement> & {
+    definition: React.ReactNode;
+    tooltipProps: Partial<Omit<React.ComponentProps<typeof Tooltip>, 'trigger' | 'children'>>;
+}>;
+export { InlineDefinition };

package/lib/components/inline-definition.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineDefinition = void 0;
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("@leafygreen-ui/typography");
+const emotion_1 = require("@leafygreen-ui/emotion");
+const tooltip_1 = require("./tooltip");
+const merge_props_1 = require("../utils/merge-props");
+const underline = (0, emotion_1.css)({
+    backgroundRepeat: 'repeat-x',
+    backgroundPosition: 'center bottom',
+    backgroundSize: '3px 2px',
+    backgroundImage: 'radial-gradient( circle closest-side, currentColor 75%, transparent 25%)',
+});
+const maxWidth = (0, emotion_1.css)({
+    maxWidth: '360px',
+});
+const InlineDefinition = ({ children, definition, tooltipProps, ...props }) => {
+    return (react_1.default.createElement(tooltip_1.Tooltip, { justify: "middle", spacing: 5, trigger: ({ children: tooltip, ...triggerProps }) => {
+            const merged = (0, merge_props_1.mergeProps)({ className: underline }, triggerProps, props);
+            return (react_1.default.createElement("span", { ...merged },
+                children,
+                tooltip));
+        }, ...tooltipProps },
+        react_1.default.createElement(typography_1.Body, { className: maxWidth }, definition)));
+};
+exports.InlineDefinition = InlineDefinition;
+//# sourceMappingURL=inline-definition.js.map

package/lib/components/inline-definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-definition.js","sourceRoot":"","sources":["../../src/components/inline-definition.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,0DAAiD;AACjD,oDAA6C;AAC7C,uCAAoC;AACpC,sDAAkD;AAElD,MAAM,SAAS,GAAG,IAAA,aAAG,EAAC;IACpB,gBAAgB,EAAE,UAAU;IAC5B,kBAAkB,EAAE,eAAe;IACnC,cAAc,EAAE,SAAS;IACzB,eAAe,EACb,0EAA0E;CAC7E,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,IAAA,aAAG,EAAC;IACnB,QAAQ,EAAE,OAAO;CAClB,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAOlB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,CACL,8BAAC,iBAAO,IACN,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,EAAE,EAAE;YAClD,MAAM,MAAM,GAAG,IAAA,wBAAU,EACvB,EAAE,SAAS,EAAE,SAAS,EAAE,EACxB,YAAY,EACZ,KAAK,CACN,CAAC;YACF,OAAO,CACL,2CAAU,MAAM;gBACb,QAAQ;gBACR,OAAO,CACH,CACR,CAAC;QACJ,CAAC,KACG,YAAY;QAEhB,8BAAC,iBAAI,IAAC,SAAS,EAAE,QAAQ,IAAG,UAAU,CAAQ,CACtC,CACX,CAAC;AACJ,CAAC,CAAC;AAEO,4CAAgB"}

package/lib/components/placeholder.d.ts

@@ -0,0 +1,8 @@
+import React, { CSSProperties } from 'react';
+export declare const Placeholder: React.FunctionComponent<Omit<React.HTMLProps<HTMLDivElement>, 'minChar' | 'maxChar' | 'width' | 'height'> & {
+    minChar?: number;
+    maxChar?: number;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    darkMode?: boolean;
+}>;

package/lib/components/placeholder.js

@@ -0,0 +1,68 @@
+"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.Placeholder = void 0;
+const react_1 = __importStar(require("react"));
+const __1 = require("../");
+const __2 = require("../");
+const scale = 4;
+const percent = (num) => (num * 100).toFixed(3) + '%';
+const move = (0, __1.keyframes)({
+    from: {
+        backgroundPosition: `${percent(scale)} 0`,
+    },
+    to: {
+        backgroundPosition: '0 0',
+    },
+});
+const placeholder = (0, __1.css)({
+    '--gradient-start': __2.uiColors.gray.light3,
+    '--gradient-end': 'rgba(235, 241, 239, 1)',
+    alignSelf: 'center',
+    borderRadius: 3,
+    maxWidth: '80%',
+    backgroundColor: 'var(--gradient-start)',
+    backgroundImage: `linear-gradient(
+        to right,
+        var(--gradient-start) 0%,
+        var(--gradient-end) ${percent(1 / scale / 2)},
+        var(--gradient-start) ${percent(1 / scale)},
+        var(--gradient-start) 100%
+    )`,
+    backgroundSize: `${percent(scale)} 100%`,
+    backgroundPosition: '0 0',
+    animation: `${move} ${scale}s infinite linear`,
+});
+const placeholderDarkMode = (0, __1.css)({
+    '--gradient-start': 'rgba(38, 55, 66, 1)',
+    '--gradient-end': 'rgba(47, 64, 74, 1)',
+});
+function getBoundRandom(min, max) {
+    return Math.random() * (max - min) + min;
+}
+const Placeholder = ({ className, minChar = 5, maxChar = 15, width: propsWidth, height: propsHeight = __2.spacing[3], darkMode, ...props }) => {
+    const width = (0, react_1.useMemo)(() => {
+        return propsWidth || `${Math.round(getBoundRandom(minChar, maxChar))}ch`;
+    }, [minChar, maxChar, propsWidth]);
+    return (react_1.default.createElement("div", { ...props, role: "presentation", "data-testid": "placeholder", className: (0, __1.cx)(placeholder, className, darkMode && placeholderDarkMode), style: { width, height: propsHeight } }));
+};
+exports.Placeholder = Placeholder;
+//# sourceMappingURL=placeholder.js.map

package/lib/components/placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder.js","sourceRoot":"","sources":["../../src/components/placeholder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAsD;AACtD,2BAAyC;AACzC,2BAAwC;AAGxC,MAAM,KAAK,GAAG,CAAC,CAAC;AAEhB,MAAM,OAAO,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAEtE,MAAM,IAAI,GAAG,IAAA,aAAS,EAAC;IACrB,IAAI,EAAE;QACJ,kBAAkB,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI;KAC1C;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,KAAK;KAC1B;CACF,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAA,OAAG,EAAC;IACtB,kBAAkB,EAAE,YAAQ,CAAC,IAAI,CAAC,MAAM;IACxC,gBAAgB,EAAE,wBAAwB;IAC1C,SAAS,EAAE,QAAQ;IACnB,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,KAAK;IACf,eAAe,EAAE,uBAAuB;IACxC,eAAe,EAAE;;;8BAGW,OAAO,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;gCACpB,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC;;MAE5C;IACJ,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO;IACxC,kBAAkB,EAAE,KAAK;IACzB,SAAS,EAAE,GAAG,IAAI,IAAI,KAAK,mBAAmB;CAC/C,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,IAAA,OAAG,EAAC;IAC9B,kBAAkB,EAAE,qBAAqB;IACzC,gBAAgB,EAAE,qBAAqB;CACxC,CAAC,CAAC;AAEH,SAAS,cAAc,CAAC,GAAW,EAAE,GAAW;IAC9C,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAC3C,CAAC;AAEM,MAAM,WAAW,GAWpB,CAAC,EACH,SAAS,EACT,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,WAAW,GAAG,WAAO,CAAC,CAAC,CAAC,EAChC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzB,OAAO,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;IAC3E,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,0CACM,KAAK,EACT,IAAI,EAAC,cAAc,iBACP,aAAa,EACzB,SAAS,EAAE,IAAA,MAAE,EAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,IAAI,mBAAmB,CAAC,EACtE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAChC,CACR,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,WAAW,eAiCtB"}