@primer/components 0.0.0-2021109221452 → 0.0.0-2021109223232

package/lib/FilteredActionList/FilteredActionList.jsx

@@ -1,100 +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.FilteredActionList = void 0;
-const react_1 = __importStar(require("react"));
-const ssr_1 = require("@react-aria/ssr");
-const TextInput_1 = __importDefault(require("../TextInput"));
-const Box_1 = __importDefault(require("../Box"));
-const ActionList_1 = require("../ActionList");
-const Spinner_1 = __importDefault(require("../Spinner"));
-const useFocusZone_1 = require("../hooks/useFocusZone");
-const useProvidedStateOrCreate_1 = require("../hooks/useProvidedStateOrCreate");
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const useProvidedRefOrCreate_1 = require("../hooks/useProvidedRefOrCreate");
-const useScrollFlash_1 = __importDefault(require("../hooks/useScrollFlash"));
-const scrollIntoViewingArea_1 = require("../behaviors/scrollIntoViewingArea");
-const StyledHeader = styled_components_1.default.div `
-  box-shadow: 0 1px 0 ${constants_1.get('colors.border.default')};
-  z-index: 1;
-`;
-function FilteredActionList({ loading = false, placeholderText, filterValue: externalFilterValue, onFilterChange, items, textInputProps, inputRef: providedInputRef, sx, ...listProps }) {
-    const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(externalFilterValue, undefined, '');
-    const onInputChange = react_1.useCallback((e) => {
-        const value = e.target.value;
-        onFilterChange(value, e);
-        setInternalFilterValue(value);
-    }, [onFilterChange, setInternalFilterValue]);
-    const scrollContainerRef = react_1.useRef(null);
-    const listContainerRef = react_1.useRef(null);
-    const inputRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(providedInputRef);
-    const activeDescendantRef = react_1.useRef();
-    const listId = ssr_1.useSSRSafeId();
-    const onInputKeyPress = react_1.useCallback(event => {
-        if (event.key === 'Enter' && activeDescendantRef.current) {
-            event.preventDefault();
-            event.nativeEvent.stopImmediatePropagation();
-            // Forward Enter key press to active descendant so that item gets activated
-            const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
-            activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
-        }
-    }, [activeDescendantRef]);
-    useFocusZone_1.useFocusZone({
-        containerRef: listContainerRef,
-        focusOutBehavior: 'wrap',
-        focusableElementFilter: element => {
-            return !(element instanceof HTMLInputElement);
-        },
-        activeDescendantFocus: inputRef,
-        onActiveDescendantChanged: (current, previous, directlyActivated) => {
-            activeDescendantRef.current = current;
-            if (current && scrollContainerRef.current && directlyActivated) {
-                scrollIntoViewingArea_1.scrollIntoViewingArea(current, scrollContainerRef.current);
-            }
-        }
-    }, [
-        // List ref isn't set while loading.  Need to re-bind focus zone when it changes
-        loading
-    ]);
-    react_1.useEffect(() => {
-        // if items changed, we want to instantly move active descendant into view
-        if (activeDescendantRef.current && scrollContainerRef.current) {
-            scrollIntoViewingArea_1.scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
-        }
-    }, [items]);
-    useScrollFlash_1.default(scrollContainerRef);
-    return (<Box_1.default display="flex" flexDirection="column" overflow="hidden" sx={sx}>
-      <StyledHeader>
-        <TextInput_1.default ref={inputRef} block width="auto" color="fg.default" value={filterValue} onChange={onInputChange} onKeyPress={onInputKeyPress} placeholder={placeholderText} aria-label={placeholderText} aria-controls={listId} {...textInputProps}/>
-      </StyledHeader>
-      <Box_1.default ref={scrollContainerRef} overflow="auto">
-        {loading ? (<Box_1.default width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
-            <Spinner_1.default />
-          </Box_1.default>) : (<ActionList_1.ActionList ref={listContainerRef} items={items} {...listProps} role="listbox" id={listId}/>)}
-      </Box_1.default>
-    </Box_1.default>);
-}
-exports.FilteredActionList = FilteredActionList;
-FilteredActionList.displayName = 'FilteredActionList';

package/lib/FilteredSearch.jsx

@@ -1,29 +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 styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const FilteredSearch = styled_components_1.default.div `
-  ${constants_1.COMMON};
-  display: flex;
-  align-items: stretch;
-
-  summary {
-    border-radius: 0;
-    border-top-left-radius: ${constants_1.get('radii.2')};
-    border-bottom-left-radius: ${constants_1.get('radii.2')};
-    border-right: 0;
-  }
-  .TextInput-wrapper {
-    border-radius: 0;
-    border-top-right-radius: ${constants_1.get('radii.2')};
-    border-bottom-right-radius: ${constants_1.get('radii.2')};
-    z-index: 1; // Allows the focus outline to show on top of the dropdown.
-  }
-
-  ${sx_1.default}
-`;
-exports.default = FilteredSearch;

package/lib/Flash.jsx

@@ -1,70 +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 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 variants = styled_system_1.variant({
-    variants: {
-        default: {
-            color: 'fg.default',
-            backgroundColor: 'accent.subtle',
-            borderColor: 'accent.muted',
-            svg: {
-                color: 'accent.fg'
-            }
-        },
-        success: {
-            color: 'fg.default',
-            backgroundColor: 'success.subtle',
-            borderColor: 'success.muted',
-            svg: {
-                color: 'success.fg'
-            }
-        },
-        danger: {
-            color: 'fg.default',
-            backgroundColor: 'danger.subtle',
-            borderColor: 'danger.muted',
-            svg: {
-                color: 'danger.fg'
-            }
-        },
-        warning: {
-            color: 'fg.default',
-            backgroundColor: 'attention.subtle',
-            borderColor: 'attention.muted',
-            svg: {
-                color: 'attention.fg'
-            }
-        }
-    }
-});
-const Flash = styled_components_1.default.div `
-  position: relative;
-  color: ${constants_1.get('colors.fg.default')};
-  padding: ${constants_1.get('space.3')};
-  border-style: solid;
-  border-width: ${props => (props.full ? '1px 0px' : '1px')};
-  border-radius: ${props => (props.full ? '0' : constants_1.get('radii.2'))};
-  margin-top: ${props => (props.full ? '-1px' : '0')};
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  svg {
-    margin-right: ${constants_1.get('space.2')};
-  }
-
-  ${constants_1.COMMON};
-  ${variants};
-  ${sx_1.default};
-`;
-Flash.defaultProps = {
-    variant: 'default'
-};
-exports.default = Flash;

package/lib/Flex.jsx

@@ -1,15 +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 styled_components_1 = __importDefault(require("styled-components"));
-const Box_1 = __importDefault(require("./Box"));
-/**
- * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
- */
-const Flex = styled_components_1.default(Box_1.default) ``;
-Flex.defaultProps = {
-    display: 'flex'
-};
-exports.default = Flex;

package/lib/FormGroup.jsx

@@ -1,25 +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 styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const FormGroup = styled_components_1.default.div `
-  margin: ${constants_1.get('space.3')} 0;
-  font-weight: ${constants_1.get('fontWeights.normal')};
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-const FormGroupLabel = styled_components_1.default.label `
-  display: block;
-  margin: 0 0 ${constants_1.get('space.2')};
-  font-size: ${constants_1.get('fontSizes.1')};
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  ${constants_1.TYPOGRAPHY};
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-FormGroupLabel.displayName = 'FormGroup.Label';
-exports.default = Object.assign(FormGroup, { Label: FormGroupLabel });

package/lib/Grid.jsx

@@ -1,15 +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 styled_components_1 = __importDefault(require("styled-components"));
-const Box_1 = __importDefault(require("./Box"));
-/**
- * @deprecated Use the Box component instead (i.e. <Grid> → <Box display="grid">)
- */
-const Grid = styled_components_1.default(Box_1.default) ``;
-Grid.defaultProps = {
-    display: 'grid'
-};
-exports.default = Grid;

package/lib/Header.jsx

@@ -1,90 +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 Header = styled_components_1.default.div `
-  z-index: 32;
-  display: flex;
-  padding: ${constants_1.get('space.3')};
-  font-size: ${constants_1.get('fontSizes.1')};
-  line-height: ${constants_1.get('lineHeights.default')};
-  color: ${constants_1.get('colors.header.text')};
-  background-color: ${constants_1.get('colors.header.bg')};
-  align-items: center;
-  flex-wrap: nowrap;
-
-  ${constants_1.COMMON}
-  ${constants_1.BORDER}
-  ${sx_1.default};
-`;
-const HeaderItem = styled_components_1.default.div `
-  display: flex;
-  margin-right: ${constants_1.get('space.3')};
-  align-self: stretch;
-  align-items: center;
-  flex-wrap: nowrap;
-
-  ${({ full }) => full &&
-    styled_components_1.css `
-      flex: auto;
-    `};
-
-  ${constants_1.COMMON};
-  ${constants_1.BORDER};
-  ${sx_1.default};
-`;
-HeaderItem.displayName = 'Header.Item';
-const HeaderLink = styled_components_1.default.a.attrs(({ to }) => {
-    const isReactRouter = typeof to === 'string';
-    if (isReactRouter) {
-        // according to their docs, NavLink supports aria-current:
-        // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
-        return { 'aria-current': 'page' };
-    }
-    else {
-        return {};
-    }
-}) `
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  color: ${constants_1.get('colors.header.logo')};
-  white-space: nowrap;
-  cursor: pointer;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    color: ${constants_1.get('colors.header.text')};
-  }
-
-  ${constants_1.COMMON};
-  ${constants_1.BORDER};
-  ${constants_1.TYPOGRAPHY};
-  ${sx_1.default};
-`;
-HeaderLink.displayName = 'Header.Link';
-exports.default = Object.assign(Header, { Link: HeaderLink, Item: HeaderItem });

package/lib/Heading.jsx

@@ -1,21 +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 styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const theme_1 = __importDefault(require("./theme"));
-const Heading = styled_components_1.default.h2 `
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  font-size: ${constants_1.get('fontSizes.5')};
-  margin: 0;
-  ${constants_1.TYPOGRAPHY};
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-Heading.defaultProps = {
-    theme: theme_1.default
-};
-exports.default = Heading;

package/lib/Label.jsx

@@ -1,84 +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 styled_system_1 = require("styled-system");
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const outlineStyles = styled_components_1.css `
-  margin-top: -1px; // offsets the 1px border
-  margin-bottom: -1px; // offsets the 1px border
-  color: ${constants_1.get('colors.fg.muted')};
-  border: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.default')};
-  box-shadow: none;
-  ${styled_system_1.borderColor};
-  ${constants_1.COMMON};
-  background-color: transparent;
-`;
-const sizeVariant = styled_system_1.variant({
-    variants: {
-        small: {
-            fontSize: 0,
-            lineHeight: '16px',
-            padding: '0px 8px'
-        },
-        medium: {
-            fontSize: 0,
-            lineHeight: '20px',
-            padding: '0 8px'
-        },
-        large: {
-            fontSize: 0,
-            lineHeight: '24px',
-            padding: '0 12px'
-        },
-        // corresponds to StateLabel fontSize/lineHeight/padding
-        xl: {
-            fontSize: 1,
-            lineHeight: '16px',
-            padding: '8px 12px'
-        }
-    }
-});
-const Label = styled_components_1.default.span `
-  display: inline-block;
-  font-weight: ${constants_1.get('fontWeights.semibold')};
-  color: ${constants_1.get('colors.fg.onEmphasis')};
-  border-radius: ${constants_1.get('radii.3')};
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  ${sizeVariant}
-  ${constants_1.COMMON}
-  ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}
-  ${props => (props.outline ? outlineStyles : '')} // must be last to override other values
-  ${sx_1.default}
-`;
-Label.defaultProps = {
-    bg: 'neutral.emphasis',
-    variant: 'medium'
-};
-exports.default = Label;

package/lib/LabelGroup.jsx

@@ -1,19 +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 styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const LabelGroup = styled_components_1.default.span `
-  ${constants_1.COMMON}
-  & * {
-    margin-right: ${constants_1.get('space.1')};
-  }
-  & *:last-child {
-    margin-right: 0;
-  }
-  ${sx_1.default};
-`;
-exports.default = LabelGroup;

package/lib/Link.jsx

@@ -1,38 +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 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 hoverColor = styled_system_1.system({
-    hoverColor: {
-        property: 'color',
-        scale: 'colors'
-    }
-});
-const Link = styled_components_1.default.a `
-  color: ${props => (props.muted ? constants_1.get('colors.fg.muted')(props) : constants_1.get('colors.accent.fg')(props))};
-  text-decoration: ${props => (props.underline ? 'underline' : 'none')};
-  &:hover {
-    text-decoration: ${props => (props.muted ? 'none' : 'underline')};
-    ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${constants_1.get('colors.accent.fg')(props)}` : '')};
-  }
-  &:is(button) {
-    display: inline-block;
-    padding: 0;
-    font-size: inherit;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    background-color: transparent;
-    border: 0;
-    appearance: none;
-  }
-  ${constants_1.TYPOGRAPHY};
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-exports.default = Link;

package/lib/Overlay.jsx

@@ -1,155 +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 = __importDefault(require("styled-components"));
-const react_1 = __importStar(require("react"));
-const constants_1 = require("./constants");
-const hooks_1 = require("./hooks");
-const Portal_1 = __importDefault(require("./Portal"));
-const sx_1 = __importDefault(require("./sx"));
-const useCombinedRefs_1 = require("./hooks/useCombinedRefs");
-const ThemeProvider_1 = require("./ThemeProvider");
-const heightMap = {
-    xsmall: '192px',
-    small: '256px',
-    medium: '320px',
-    large: '432px',
-    xlarge: '600px',
-    auto: 'auto',
-    initial: 'auto' // Passing 'initial' initially applies 'auto'
-};
-const widthMap = {
-    small: '256px',
-    medium: '320px',
-    large: '480px',
-    xlarge: '640px',
-    xxlarge: '960px',
-    auto: 'auto'
-};
-const animationDuration = 200;
-function getSlideAnimationStartingVector(anchorSide) {
-    if (anchorSide?.endsWith('bottom')) {
-        return { x: 0, y: -1 };
-    }
-    else if (anchorSide?.endsWith('top')) {
-        return { x: 0, y: 1 };
-    }
-    else if (anchorSide?.endsWith('right')) {
-        return { x: -1, y: 0 };
-    }
-    else if (anchorSide?.endsWith('left')) {
-        return { x: 1, y: 0 };
-    }
-    return { x: 0, y: 0 };
-}
-const StyledOverlay = styled_components_1.default.div `
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-  box-shadow: ${constants_1.get('shadows.overlay.shadow')};
-  position: absolute;
-  min-width: 192px;
-  max-width: 640px;
-  height: ${props => heightMap[props.height || 'auto']};
-  max-height: ${props => props.maxHeight && heightMap[props.maxHeight]};
-  width: ${props => widthMap[props.width || 'auto']};
-  border-radius: 12px;
-  overflow: hidden;
-  animation: overlay-appear ${animationDuration}ms ${constants_1.get('animation.easeOutCubic')};
-
-  @keyframes overlay-appear {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  visibility: var(--styled-overlay-visibility);
-  :focus {
-    outline: none;
-  }
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-/**
- * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
- * selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay`
- * component handles all behaviors needed by overlay UIs as well as the common styles that all overlays * should have.
- * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
- * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
- * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
- * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.
- * @param onEscape Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.
- * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
- * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
- * @param maxHeight Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
- * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
- * @param top Optional. Vertical position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
- * @param left Optional. Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
- * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
- */
-const Overlay = react_1.default.forwardRef(({ onClickOutside, role = 'none', initialFocusRef, returnFocusRef, ignoreClickRefs, onEscape, visibility = 'visible', height, top, left, anchorSide, portalContainerName, preventFocusOnOpen, ...rest }, forwardedRef) => {
-    const overlayRef = react_1.useRef(null);
-    const combinedRef = useCombinedRefs_1.useCombinedRefs(overlayRef, forwardedRef);
-    const { theme } = ThemeProvider_1.useTheme();
-    const slideAnimationDistance = parseInt(constants_1.get('space.2')(theme).replace('px', ''));
-    const slideAnimationEasing = constants_1.get('animation.easeOutCubic')(theme);
-    hooks_1.useOverlay({
-        overlayRef,
-        returnFocusRef,
-        onEscape,
-        ignoreClickRefs,
-        onClickOutside,
-        initialFocusRef,
-        preventFocusOnOpen
-    });
-    react_1.useEffect(() => {
-        if (height === 'initial' && combinedRef.current?.clientHeight) {
-            combinedRef.current.style.height = `${combinedRef.current.clientHeight}px`;
-        }
-    }, [height, combinedRef]);
-    react_1.useLayoutEffect(() => {
-        const { x, y } = getSlideAnimationStartingVector(anchorSide);
-        if ((!x && !y) || !overlayRef.current?.animate || visibility === 'hidden') {
-            return;
-        }
-        // JS animation is required because Safari does not allow css animations to start paused and then run
-        overlayRef.current.animate({ transform: [`translate(${slideAnimationDistance * x}px, ${slideAnimationDistance * y}px)`, `translate(0, 0)`] }, {
-            duration: animationDuration,
-            easing: slideAnimationEasing
-        });
-    }, [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility]);
-    return (<Portal_1.default containerName={portalContainerName}>
-        <StyledOverlay height={height} role={role} {...rest} ref={combinedRef} style={{
-            top: `${top || 0}px`,
-            left: `${left || 0}px`,
-            ...rest.style,
-            '--styled-overlay-visibility': visibility
-        }}/>
-      </Portal_1.default>);
-});
-Overlay.defaultProps = {
-    height: 'auto',
-    width: 'auto'
-};
-exports.default = Overlay;