@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/lib/Popover.jsx

@@ -1,210 +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 classnames_1 = __importDefault(require("classnames"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Box_1 = __importDefault(require("./Box"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const Popover = styled_components_1.default.div.attrs(({ className, caret }) => {
-    return {
-        className: classnames_1.default(className, `caret-pos--${caret}`)
-    };
-}) `
-  position: ${props => (props.relative ? 'relative' : 'absolute')};
-  z-index: 100;
-  display: ${props => (props.open ? 'block' : 'none')};
-
-  ${constants_1.COMMON};
-  ${constants_1.LAYOUT};
-  ${constants_1.POSITION};
-  ${sx_1.default};
-`;
-const PopoverContent = styled_components_1.default(Box_1.default) `
-  border: 1px solid ${constants_1.get('colors.border.default')};
-  border-radius: ${constants_1.get('radii.2')};
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: ${constants_1.get('space.4')};
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-
-  ${constants_1.COMMON};
-  ${constants_1.LAYOUT};
-
-  // Carets
-  &::before,
-  &::after {
-    position: absolute;
-    left: 50%;
-    display: inline-block;
-    content: '';
-  }
-
-  &::before {
-    top: -${constants_1.get('space.3')};
-    margin-left: -9px;
-    border: ${constants_1.get('space.2')} solid transparent; // TODO: solid?
-    border-bottom-color: ${constants_1.get('colors.border.default')};
-  }
-
-  &::after {
-    top: -14px;
-    margin-left: -${constants_1.get('space.2')};
-    border: 7px solid transparent; // todo: solid
-    border-bottom-color: ${constants_1.get('colors.canvas.overlay')};
-  }
-
-  // Bottom-oriented carets
-  ${Popover}.caret-pos--bottom & ,
-  ${Popover}.caret-pos--bottom-right & ,
-  ${Popover}.caret-pos--bottom-left & {
-    &::before,
-    &::after {
-      top: auto;
-      border-bottom-color: transparent;
-    }
-
-    &::before {
-      bottom: -${constants_1.get('space.3')};
-      border-top-color: ${constants_1.get('colors.border.default')};
-    }
-
-    &::after {
-      bottom: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-top-color: ${constants_1.get('colors.canvas.overlay')};
-    }
-  }
-
-  // Top & Bottom: Right-oriented carets
-  ${Popover}.caret-pos--top-right & ,
-  ${Popover}.caret-pos--bottom-right & {
-    right: -9px;
-    margin-right: 0;
-
-    &::before,
-    &::after {
-      left: auto;
-      margin-left: 0;
-    }
-
-    &::before {
-      right: 20px;
-    }
-
-    &::after {
-      right: 21px;
-    }
-  }
-
-  // Top & Bottom: Left-oriented carets
-  ${Popover}.caret-pos--top-left & ,
-  ${Popover}.caret-pos--bottom-left & {
-    left: -9px;
-    margin-left: 0;
-
-    &::before,
-    &::after {
-      left: ${constants_1.get('space.4')};
-      margin-left: 0;
-    }
-
-    &::after {
-      left: calc(${constants_1.get('space.4')} + 1px);
-    }
-  }
-
-  // Right- & Left-oriented carets
-  ${Popover}.caret-pos--right & ,
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--right-bottom & ,
-  ${Popover}.caret-pos--left & ,
-  ${Popover}.caret-pos--left-top & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before,
-    &::after {
-      top: 50%;
-      left: auto;
-      margin-left: 0;
-      border-bottom-color: transparent;
-    }
-
-    &::before {
-      // stylelint-disable-next-line primer/spacing
-      margin-top: calc((${constants_1.get('space.2')} + 1px) * -1);
-    }
-
-    &::after {
-      margin-top: -${constants_1.get('space.2')};
-    }
-  }
-
-  // Right-oriented carets
-  ${Popover}.caret-pos--right & ,
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--right-bottom & {
-    &::before {
-      right: -${constants_1.get('space.3')};
-      border-left-color: ${constants_1.get('colors.border.default')};
-    }
-
-    &::after {
-      right: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-left-color: ${constants_1.get('colors.canvas.overlay')};
-    }
-  }
-
-  // Left-oriented carets
-  ${Popover}.caret-pos--left & ,
-  ${Popover}.caret-pos--left-top & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before {
-      left: -${constants_1.get('space.3')};
-      border-right-color: ${constants_1.get('colors.border.default')};
-    }
-
-    &::after {
-      left: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-right-color: ${constants_1.get('colors.canvas.overlay')};
-    }
-  }
-
-  // Right & Left: Top-oriented carets
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--left-top & {
-    &::before,
-    &::after {
-      top: ${constants_1.get('space.4')};
-    }
-  }
-
-  // Right & Left: Bottom-oriented carets
-  ${Popover}.caret-pos--right-bottom & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before,
-    &::after {
-      top: auto;
-    }
-
-    &::before {
-      bottom: ${constants_1.get('space.3')};
-    }
-
-    &::after {
-      bottom: calc(${constants_1.get('space.3')} + 1px);
-    }
-  }
-
-  ${sx_1.default};
-`;
-Popover.defaultProps = {
-    caret: 'top'
-};
-PopoverContent.displayName = 'Popover.Content';
-exports.default = Object.assign(Popover, { Content: PopoverContent });

package/lib/Portal/Portal.jsx

@@ -1,79 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Portal = exports.registerPortalRoot = void 0;
-const react_1 = __importDefault(require("react"));
-const react_dom_1 = require("react-dom");
-const useIsomorphicLayoutEffect_1 = __importDefault(require("../utils/useIsomorphicLayoutEffect"));
-const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
-const DEFAULT_PORTAL_CONTAINER_NAME = '__default__';
-const portalRootRegistry = {};
-/**
- * Register a container to serve as a portal root.
- * @param root The element that will be the root for portals created in this container
- * @param name The name of the container, to be used with the `containerName` prop on the Portal Component.
- * If name is not specified, registers the default portal root.
- */
-function registerPortalRoot(root, name = DEFAULT_PORTAL_CONTAINER_NAME) {
-    portalRootRegistry[name] = root;
-}
-exports.registerPortalRoot = registerPortalRoot;
-// Ensures that a default portal root exists and is registered. If a DOM element exists
-// with id __primerPortalRoot__, allow that element to serve as the default portal root.
-// Otherwise, create that element and attach it to the end of document.body.
-function ensureDefaultPortal() {
-    const existingDefaultPortalContainer = portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME];
-    if (!existingDefaultPortalContainer || !document.body.contains(existingDefaultPortalContainer)) {
-        let defaultPortalContainer = document.getElementById(PRIMER_PORTAL_ROOT_ID);
-        if (!(defaultPortalContainer instanceof Element)) {
-            defaultPortalContainer = document.createElement('div');
-            defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID);
-            defaultPortalContainer.style.position = 'absolute';
-            defaultPortalContainer.style.top = '0';
-            defaultPortalContainer.style.left = '0';
-            const suitablePortalRoot = document.querySelector('[data-portal-root]');
-            if (suitablePortalRoot) {
-                suitablePortalRoot.appendChild(defaultPortalContainer);
-            }
-            else {
-                document.body.appendChild(defaultPortalContainer);
-            }
-        }
-        registerPortalRoot(defaultPortalContainer);
-    }
-}
-/**
- * Creates a React Portal, placing all children in a separate physical DOM root node.
- * @see https://reactjs.org/docs/portals.html
- */
-const Portal = ({ children, onMount, containerName: _containerName }) => {
-    const hostElement = document.createElement('div');
-    // Portaled content should get their own stacking context so they don't interfere
-    // with each other in unexpected ways. One should never find themselves tempted
-    // to change the zIndex to a value other than "1".
-    hostElement.style.position = 'relative';
-    hostElement.style.zIndex = '1';
-    const elementRef = react_1.default.useRef(hostElement);
-    useIsomorphicLayoutEffect_1.default(() => {
-        let containerName = _containerName;
-        if (containerName === undefined) {
-            containerName = DEFAULT_PORTAL_CONTAINER_NAME;
-            ensureDefaultPortal();
-        }
-        const parentElement = portalRootRegistry[containerName];
-        if (!parentElement) {
-            throw new Error(`Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.`);
-        }
-        const element = elementRef.current;
-        parentElement.appendChild(element);
-        onMount?.();
-        return () => {
-            parentElement.removeChild(element);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [elementRef]);
-    return react_dom_1.createPortal(children, elementRef.current);
-};
-exports.Portal = Portal;

package/lib/Position.jsx

@@ -1,46 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sticky = exports.Relative = exports.Fixed = exports.Absolute = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Box_1 = __importDefault(require("./Box"));
-/**
- * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
- */
-const Position = styled_components_1.default(Box_1.default) ``;
-/**
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
- */
-exports.default = Position;
-/**
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
- */
-exports.Absolute = react_1.default.forwardRef((props, ref) => {
-    return <Position {...props} position="absolute" ref={ref}/>;
-});
-exports.Absolute.displayName = 'Absolute';
-/**
- * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
- */
-exports.Fixed = react_1.default.forwardRef((props, ref) => {
-    return <Position {...props} position="fixed" ref={ref}/>;
-});
-exports.Fixed.displayName = 'Fixed';
-/**
- * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
- */
-exports.Relative = react_1.default.forwardRef((props, ref) => {
-    return <Position {...props} position="relative" ref={ref}/>;
-});
-exports.Relative.displayName = 'Relative';
-/**
- * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
- */
-exports.Sticky = react_1.default.forwardRef((props, ref) => {
-    return <Position {...props} position="sticky" ref={ref}/>;
-});
-exports.Sticky.defaultProps = { top: 0, zIndex: 1 };
-exports.Sticky.displayName = 'Sticky';

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,114 +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 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}
-  ${constants_1.COMMON}
-  ${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,43 +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}
-  ${constants_1.COMMON}
-  ${sx_1.default};
-`;
-SelectMenuDivider.displayName = 'SelectMenu.Divider';
-exports.default = SelectMenuDivider;

package/lib/SelectMenu/SelectMenuFilter.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 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')};
-  ${constants_1.COMMON};
-
-  @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,46 +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}
-  ${constants_1.COMMON}
-  ${sx_1.default};
-`;
-SelectMenuFooter.displayName = 'SelectMenu.Footer';
-exports.default = SelectMenuFooter;