@primer/components 0.0.0-20211030175556 → 0.0.0-20211030182910

package/lib/ProgressBar.jsx

@@ -1,39 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const styled_system_1 = require("styled-system");
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const Bar = styled_components_1.default.span `
-  width: ${props => (props.progress ? `${props.progress}%` : 0)};
-  ${constants_1.COMMON}
-`;
-const sizeMap = {
-    small: '5px',
-    large: '10px',
-    default: '8px'
-};
-const ProgressContainer = styled_components_1.default.span `
-  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
-  overflow: hidden;
-  background-color: ${constants_1.get('colors.border.default')};
-  border-radius: ${constants_1.get('radii.1')};
-  height: ${props => sizeMap[props.barSize || 'default']};
-  ${constants_1.COMMON}
-  ${styled_system_1.width}
-  ${sx_1.default};
-`;
-function ProgressBar({ progress, bg, theme, ...rest }) {
-    return (<ProgressContainer theme={theme} {...rest}>
-      <Bar progress={progress} bg={bg} theme={theme}/>
-    </ProgressContainer>);
-}
-ProgressBar.defaultProps = {
-    bg: 'success.emphasis',
-    barSize: 'default'
-};
-exports.default = ProgressBar;

package/lib/SelectMenu/SelectMenu.jsx

@@ -1,112 +0,0 @@
-"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 styled_components_1 = __importDefault(require("styled-components"));
-const sx_1 = __importDefault(require("../sx"));
-const useKeyboardNav_1 = __importDefault(require("./hooks/useKeyboardNav"));
-const SelectMenuContext_1 = require("./SelectMenuContext");
-const SelectMenuDivider_1 = __importDefault(require("./SelectMenuDivider"));
-const SelectMenuFilter_1 = __importDefault(require("./SelectMenuFilter"));
-const SelectMenuFooter_1 = __importDefault(require("./SelectMenuFooter"));
-const SelectMenuHeader_1 = __importDefault(require("./SelectMenuHeader"));
-const SelectMenuItem_1 = __importDefault(require("./SelectMenuItem"));
-const SelectMenuList_1 = __importDefault(require("./SelectMenuList"));
-const SelectMenuLoadingAnimation_1 = __importDefault(require("./SelectMenuLoadingAnimation"));
-const SelectMenuModal_1 = __importDefault(require("./SelectMenuModal"));
-const SelectMenuTab_1 = __importDefault(require("./SelectMenuTab"));
-const SelectMenuTabPanel_1 = __importDefault(require("./SelectMenuTabPanel"));
-const SelectMenuTabs_1 = __importDefault(require("./SelectMenuTabs"));
-const wrapperStyles = `
-  // Remove marker added by the display: list-item browser default
-  > summary {
-    list-style: none;
-  }
-  // Remove marker added by details polyfill
-  > summary::before {
-    display: none;
-  }
-  // Remove marker added by Chrome
-  > summary::-webkit-details-marker {
-    display: none;
-  }
-`;
-const StyledSelectMenu = styled_components_1.default.details `
-  ${wrapperStyles}
-  ${sx_1.default};
-`;
-// 'as' is spread out because we don't want users to be able to change the tag.
-const SelectMenu = react_1.default.forwardRef(({ children, initialTab = '', as: _ignoredAs, ...rest }, forwardedRef) => {
-    const backupRef = react_1.useRef(null);
-    const ref = forwardedRef ?? backupRef;
-    const [selectedTab, setSelectedTab] = react_1.useState(initialTab);
-    const [open, setOpen] = react_1.useState(false);
-    const menuProviderValues = {
-        selectedTab,
-        setSelectedTab,
-        setOpen,
-        open,
-        initialTab
-    };
-    const onClickOutside = react_1.useCallback(event => {
-        if ('current' in ref && ref.current && !ref.current.contains(event.target)) {
-            if (!event.defaultPrevented) {
-                setOpen(false);
-            }
-        }
-    }, [ref, setOpen]);
-    // handles the overlay behavior - closing the menu when clicking outside of it
-    react_1.useEffect(() => {
-        if (open) {
-            document.addEventListener('click', onClickOutside);
-            return () => {
-                document.removeEventListener('click', onClickOutside);
-            };
-        }
-    }, [open, onClickOutside]);
-    function toggle(event) {
-        setOpen(event.target.open);
-    }
-    useKeyboardNav_1.default(ref, open, setOpen);
-    return (<SelectMenuContext_1.MenuContext.Provider value={menuProviderValues}>
-        <StyledSelectMenu ref={ref} {...rest} open={open} onToggle={toggle}>
-          {children}
-        </StyledSelectMenu>
-      </SelectMenuContext_1.MenuContext.Provider>);
-});
-SelectMenu.displayName = 'SelectMenu';
-exports.default = Object.assign(SelectMenu, {
-    MenuContext: SelectMenuContext_1.MenuContext,
-    List: SelectMenuList_1.default,
-    Divider: SelectMenuDivider_1.default,
-    Filter: SelectMenuFilter_1.default,
-    Footer: SelectMenuFooter_1.default,
-    Item: SelectMenuItem_1.default,
-    Modal: SelectMenuModal_1.default,
-    Tabs: SelectMenuTabs_1.default,
-    Tab: SelectMenuTab_1.default,
-    TabPanel: SelectMenuTabPanel_1.default,
-    Header: SelectMenuHeader_1.default,
-    LoadingAnimation: SelectMenuLoadingAnimation_1.default
-});

package/lib/SelectMenu/SelectMenuContext.jsx

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuContext = void 0;
-const react_1 = require("react");
-exports.MenuContext = react_1.createContext({});

package/lib/SelectMenu/SelectMenuDivider.jsx

@@ -1,42 +0,0 @@
-"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 styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const dividerStyles = styled_components_1.css `
-  padding: ${constants_1.get('space.1')} ${constants_1.get('space.3')};
-  margin: 0;
-  font-size: ${constants_1.get('fontSizes.0')};
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  color: ${constants_1.get('colors.fg.muted')};
-  background-color: ${constants_1.get('colors.canvas.subtle')};
-  border-bottom: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
-`;
-const SelectMenuDivider = styled_components_1.default.div `
-  ${dividerStyles}
-  ${sx_1.default};
-`;
-SelectMenuDivider.displayName = 'SelectMenu.Divider';
-exports.default = SelectMenuDivider;

package/lib/SelectMenu/SelectMenuFilter.jsx

@@ -1,58 +0,0 @@
-"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 styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const TextInput_1 = __importDefault(require("../TextInput"));
-const SelectMenuContext_1 = require("./SelectMenuContext");
-const StyledForm = styled_components_1.default.form `
-  padding: ${constants_1.get('space.3')};
-  margin: 0;
-  border-bottom: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    padding: ${constants_1.get('space.2')};
-  }
-
-  ${sx_1.default};
-`;
-const SelectMenuFilter = react_1.forwardRef(({ theme, value, sx: sxProp, ...rest }, forwardedRef) => {
-    const inputRef = react_1.useRef(null);
-    const ref = forwardedRef ?? inputRef;
-    const { open } = react_1.useContext(SelectMenuContext_1.MenuContext);
-    // puts focus on the filter input when the menu is opened
-    react_1.useEffect(() => {
-        if (open) {
-            inputRef.current?.focus();
-        }
-    }, [open]);
-    return (<StyledForm theme={theme} sx={sxProp}>
-        <TextInput_1.default theme={theme} ref={ref} width="100%" block value={value} contrast {...rest}/>
-      </StyledForm>);
-});
-SelectMenuFilter.displayName = 'SelectMenu.Filter';
-exports.default = SelectMenuFilter;

package/lib/SelectMenu/SelectMenuFooter.jsx

@@ -1,45 +0,0 @@
-"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 styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const footerStyles = styled_components_1.css `
-  margin-top: -1px;
-  padding: ${constants_1.get('space.2')} ${constants_1.get('space.3')};
-  font-size: ${constants_1.get('fontSizes.0')};
-  color: ${constants_1.get('colors.fg.muted')};
-  text-align: center;
-  border-top: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    padding: ${constants_1.get('space.1')} ${constants_1.get('space.2')};
-  }
-`;
-const SelectMenuFooter = styled_components_1.default.footer `
-  ${footerStyles}
-  ${sx_1.default};
-`;
-SelectMenuFooter.displayName = 'SelectMenu.Footer';
-exports.default = SelectMenuFooter;

package/lib/SelectMenu/SelectMenuHeader.jsx

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-// SelectMenu.Header is intentionally not exported, it's an internal component used in
-// SelectMenu.Modal
-const SelectMenuTitle = styled_components_1.default.h3 `
-  color: ${constants_1.get('colors.fg.default')};
-  flex: auto;
-  font-size: ${constants_1.get('fontSizes.1')};
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  margin: 0;
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    font-size: inherit;
-  }
-`;
-const StyledHeader = styled_components_1.default.header `
-  display: flex;
-  flex: none; // fixes header from getting squeezed in Safari iOS
-  padding: ${constants_1.get('space.3')};
-  border-bottom: ${constants_1.get('borderWidths')} solid ${constants_1.get('colors.border.muted')};
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    padding-top: ${constants_1.get('space.2')};
-    padding-bottom: ${constants_1.get('space.2')};
-  }
-
-  ${sx_1.default};
-`;
-const SelectMenuHeader = ({ children, theme, ...rest }) => {
-    return (<StyledHeader theme={theme} {...rest}>
-      <SelectMenuTitle theme={theme}>{children}</SelectMenuTitle>
-    </StyledHeader>);
-};
-SelectMenuHeader.displayName = 'SelectMenu.Header';
-exports.default = SelectMenuHeader;

package/lib/SelectMenu/SelectMenuItem.jsx

@@ -1,142 +0,0 @@
-"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.listItemStyles = void 0;
-const octicons_react_1 = require("@primer/octicons-react");
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const StyledOcticon_1 = __importDefault(require("../StyledOcticon"));
-const sx_1 = __importDefault(require("../sx"));
-const SelectMenuContext_1 = require("./SelectMenuContext");
-exports.listItemStyles = styled_components_1.css `
-  display: flex;
-  align-items: center;
-  padding: ${constants_1.get('space.3')};
-  overflow: hidden;
-  text-align: left;
-  cursor: pointer;
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-  border: 0;
-  border-bottom: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
-  color: ${constants_1.get('colors.fg.muted')};
-  text-decoration: none;
-  font-size: ${constants_1.get('fontSizes.0')};
-  font-family: inherit; // needed if user uses a "button" tag
-  width: 100%;
-
-  &:hover {
-    text-decoration: none;
-  }
-  &:focus {
-    outline: none;
-  }
-
-  &[hidden] {
-    display: none !important;
-  }
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    padding-top: ${constants_1.get('space.2')};
-    padding-bottom: ${constants_1.get('space.2')};
-  }
-
-  .SelectMenu-icon {
-    width: ${constants_1.get('space.3')};
-    margin-right: ${constants_1.get('space.2')};
-    flex-shrink: 0;
-  }
-
-  .SelectMenu-selected-icon {
-    visibility: hidden;
-    transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
-    transform: scale(0);
-  }
-
-  // selected items
-  &[aria-checked='true'] {
-    font-weight: 500;
-    color: ${constants_1.get('colors.fg.default')};
-
-    .SelectMenu-selected-icon {
-      visibility: visible;
-      transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
-      transform: scale(1);
-    }
-  }
-
-  // can hover states
-  @media (hover: hover) {
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: ${constants_1.get('colors.neutral.subtle')};
-    }
-  }
-
-  // Can not hover states
-  //
-  // For touch input
-
-  @media (hover: none) {
-    // Android
-    &:focus,
-    &:active {
-      background-color: ${constants_1.get('colors.canvas.subtle')};
-    }
-
-    // iOS Safari
-    // :active would work if ontouchstart is added to the button
-    // Instead this tweaks the "native" highlight color
-    -webkit-tap-highlight-color: ${constants_1.get('colors.selectMenu.tapHighlight')};
-  }
-`;
-const StyledItem = styled_components_1.default.a.attrs(() => ({
-    role: 'menuitemcheckbox'
-})) `
-  ${exports.listItemStyles}
-  ${sx_1.default};
-`;
-const SelectMenuItem = react_1.forwardRef(({ children, selected, theme, onClick, ...rest }, forwardedRef) => {
-    const menuContext = react_1.useContext(SelectMenuContext_1.MenuContext);
-    const backupRef = react_1.useRef(null);
-    const itemRef = forwardedRef ?? backupRef;
-    // close the menu when an item is clicked
-    // this can be overriden if the user provides a `onClick` prop and prevents default in it
-    const handleClick = (e) => {
-        onClick && onClick(e);
-        if (!e.defaultPrevented) {
-            menuContext.setOpen?.(false);
-        }
-    };
-    return (<StyledItem ref={itemRef} {...rest} theme={theme} onClick={handleClick} aria-checked={selected}>
-        <StyledOcticon_1.default theme={theme} className="SelectMenu-icon SelectMenu-selected-icon" icon={octicons_react_1.CheckIcon}/>
-        {children}
-      </StyledItem>);
-});
-SelectMenuItem.defaultProps = {
-    selected: false
-};
-SelectMenuItem.displayName = 'SelectMenu.Item';
-exports.default = SelectMenuItem;

package/lib/SelectMenu/SelectMenuList.jsx

@@ -1,59 +0,0 @@
-"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 styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const listStyles = styled_components_1.css `
-  position: relative;
-  padding: 0;
-  margin: 0;
-  flex: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-  -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
-
-  @media (hover: hover) {
-    .SelectMenuTab:focus {
-      background-color: ${constants_1.get('colors.selectMenu.tapFocusBg')};
-    }
-
-    .SelectMenuTab:not([aria-checked='true']):hover {
-      color: ${constants_1.get('colors.fg.default')};
-      background-color: ${constants_1.get('colors.canvas.subtle')};
-    }
-
-    .SelectMenuTab:not([aria-checked='true']):active {
-      color: ${constants_1.get('colors.fg.default')};
-      background-color: ${constants_1.get('colors.canvas.subtle')};
-    }
-  }
-`;
-const SelectMenuList = styled_components_1.default.div `
-  ${listStyles}
-  ${sx_1.default};
-`;
-SelectMenuList.displayName = 'SelectMenu.List';
-exports.default = SelectMenuList;

package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const Spinner_1 = __importDefault(require("../Spinner"));
-const sx_1 = __importDefault(require("../sx"));
-const Animation = styled_components_1.default.div `
-  padding: ${constants_1.get('space.6')} ${constants_1.get('space.4')};
-  text-align: center;
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-  ${sx_1.default}
-`;
-const SelectMenuLoadingAnimation = (props) => {
-    return (<Animation {...props}>
-      <Spinner_1.default />
-    </Animation>);
-};
-exports.default = SelectMenuLoadingAnimation;