"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Drawer = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _styledSystem = require("styled-system");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const variants = (0, _styledSystem.variant)({
  variants: {
    filter: {
      bg: 'blueFilter',
      width: '400px',
      color: 'white',
      '& > *': {
        width: '400px'
      }
    }
  }
});
/**
 * Drawer component renders a huge side area where {@link BaseActionComponent} renders
 * all actions where {@link Action.showInDrawer} is set to true.
 *
 * You probably don't want to use it directly in your actions, but if you decide to set
 * `showInDrawer` to true you will probably want to use `DrawerContent` or `DrawerFooter`
 * components.
 *
 * All these components: Drawer, DrawerContent and Drawer Footer extends {@link SpaceProps}.
 *
 * Usage
 * ```javascript
 * import { Drawer, DrawerProps, DrawerContent, DrawerFooter } from 'admin-bro
 * ```
 *
 * @component
 * @subcategory Molecules
 * @example
 * return (
 * <Box height="500px">
 *   <Drawer>
 *     <DrawerContent>
 *       <Header.H3>
 *         <Button size="icon" rounded mr="lg">
 *           <Icon icon="ChevronRight" />
 *         </Button>
 *         Edit
 *       </Header.H3>
 *       <Box my="x3" p={0}>
 *         <Button size="sm">
 *           <Icon icon="Information" />
 *           Info
 *         </Button>
 *         <Button size="sm" ml="lg">
 *           <Icon icon="Delete" />
 *           Delete
 *         </Button>
 *       </Box>
 *
 *     </DrawerContent>
 *     <DrawerFooter>
 *       <Button variant="primary">
 *         Save
 *       </Button>
 *     </DrawerFooter>
 *   </Drawer>
 * </Box>
 * )
 */

const Drawer = _styledComponents.default.section.withConfig({
  displayName: "drawer__Drawer",
  componentId: "cg2yfu-0"
})(["width:500px;& > *{width:500px;}z-index:100;position:fixed;display:flex;flex-direction:column;top:0;right:0;box-shadow:0 3px 6px ", ";height:100%;overflow-y:auto;overflow-x:hidden;transition:all 500ms;background:", ";box-sizing:border-box;", ";", ";", ";"], ({
  theme
}) => theme.colors.greyLight, ({
  theme
}) => theme.colors.white, _styledSystem.space, variants, ({
  isHidden
}) => isHidden ? 'width: 0px;' : '');

exports.Drawer = Drawer;
var _default = Drawer;
exports.default = _default;