import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { Fragment } from 'react';
import _pt from 'prop-types';
import { Heading } from '../Heading/Heading.esm.js';
import { Modal } from './Modal.esm.js';
import { ModalPanel } from './ModalPanel.esm.js';
import { StyledModalCloseButton } from './StyledModal.esm.js';
import { StickyObserver } from '../StickyObserver/StickyObserver.esm.js';

function StyledPanel(_ref) {
  var children = _ref.children;
  return jsx(Fragment, null, children);
}
StyledPanel.propTypes = {
  children: _pt.node.isRequired
};

var headerContainerCss = function headerContainerCss(theme) {
  return {
    backgroundColor: theme.colors.white,
    borderBottom: "1px solid ".concat(theme.colors.grey[20])
  };
};

var headerCss = function headerCss(theme) {
  return {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    paddingTop: theme.space[7],
    paddingRight: theme.space[7],
    paddingBottom: theme.space[7],
    paddingLeft: theme.space[7]
  };
};

function StyledPanelHeader(_ref2) {
  var children = _ref2.children,
      onCloseButtonClick = _ref2.onCloseButtonClick,
      _ref2$closeButtonLabe = _ref2.closeButtonLabel,
      closeButtonLabel = _ref2$closeButtonLabe === void 0 ? "Close panel" : _ref2$closeButtonLabe;
  return jsx(StickyObserver, {
    lipShadowPosition: "bottom",
    css: headerContainerCss
  }, jsx("div", {
    css: headerCss
  }, jsx(Heading, {
    variant: "PRIMARY"
  }, children), jsx(StyledPanelCloseButton, {
    onClick: onCloseButtonClick,
    "aria-label": closeButtonLabel
  })));
}
StyledPanelHeader.propTypes = {
  children: _pt.node.isRequired,
  onCloseButtonClick: _pt.func,
  closeButtonLabel: _pt.string
};
function StyledPanelCloseButton(props) {
  return jsx(StyledModalCloseButton, props);
}

var bodySectionCss = function bodySectionCss(theme) {
  return {
    backgroundColor: theme.colors.white,
    paddingTop: theme.space[5],
    paddingRight: theme.space[7],
    paddingBottom: theme.space[7],
    paddingLeft: theme.space[7]
  };
};

function StyledPanelBodySection(props) {
  return jsx("div", _extends({
    css: bodySectionCss
  }, props));
}

var actionsContainerCss = function actionsContainerCss(theme) {
  return {
    width: "100%",
    backgroundColor: theme.colors.white,
    borderTop: "1px solid ".concat(theme.colors.grey[20])
  };
};

var actionsCss = function actionsCss(theme) {
  return {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    paddingTop: theme.space[7],
    paddingRight: theme.space[7],
    paddingBottom: theme.space[7],
    paddingLeft: theme.space[7]
  };
};

function StyledPanelActions(_ref3) {
  var children = _ref3.children;
  return jsx(StickyObserver, {
    lipShadowPosition: "top",
    css: actionsContainerCss
  }, jsx("div", {
    css: actionsCss
  }, children));
}
StyledPanelActions.propTypes = {
  children: _pt.node.isRequired
};
function StyledPanelBoilerplate(_ref4) {
  var isOpen = _ref4.isOpen,
      ariaLabel = _ref4["aria-label"],
      onClose = _ref4.onClose,
      header = _ref4.header,
      children = _ref4.children,
      actions = _ref4.actions;
  return jsx(Modal, {
    "aria-label": ariaLabel,
    isOpen: isOpen,
    onDismiss: onClose,
    type: "neutral",
    css: {
      display: "flex",
      flexDirection: "column"
    }
  }, jsx(ModalPanel, null, jsx(StyledPanel, null, header ? jsx(StyledPanelHeader, {
    onCloseButtonClick: onClose
  }, header) : null, children, actions ? jsx(StyledPanelActions, null, actions) : null)));
}
StyledPanelBoilerplate.propTypes = {
  isOpen: _pt.bool,
  "aria-label": _pt.string.isRequired,
  onClose: _pt.func.isRequired,
  header: _pt.node,
  children: _pt.node,
  actions: _pt.node
};
StyledPanel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledPanel",
  "props": {
    "children": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Modal/StyledPanel.tsx"] = {
    name: "StyledPanel",
    docgenInfo: StyledPanel.__docgenInfo,
    path: "src/components/Modal/StyledPanel.tsx"
  };
}

StyledPanelHeader.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledPanelHeader",
  "props": {
    "closeButtonLabel": {
      "defaultValue": {
        "value": "`Close panel`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "children": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "onCloseButtonClick": {
      "required": false,
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "() => void",
        "signature": {
          "arguments": [],
          "return": {
            "name": "void"
          }
        }
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Modal/StyledPanel.tsx"] = {
    name: "StyledPanelHeader",
    docgenInfo: StyledPanelHeader.__docgenInfo,
    path: "src/components/Modal/StyledPanel.tsx"
  };
}

StyledPanelCloseButton.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledPanelCloseButton"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Modal/StyledPanel.tsx"] = {
    name: "StyledPanelCloseButton",
    docgenInfo: StyledPanelCloseButton.__docgenInfo,
    path: "src/components/Modal/StyledPanel.tsx"
  };
}

StyledPanelBodySection.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledPanelBodySection"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Modal/StyledPanel.tsx"] = {
    name: "StyledPanelBodySection",
    docgenInfo: StyledPanelBodySection.__docgenInfo,
    path: "src/components/Modal/StyledPanel.tsx"
  };
}

StyledPanelActions.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledPanelActions",
  "props": {
    "children": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Modal/StyledPanel.tsx"] = {
    name: "StyledPanelActions",
    docgenInfo: StyledPanelActions.__docgenInfo,
    path: "src/components/Modal/StyledPanel.tsx"
  };
}

StyledPanelBoilerplate.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledPanelBoilerplate",
  "props": {
    "isOpen": {
      "required": false,
      "tsType": {
        "name": "boolean"
      },
      "description": ""
    },
    "aria-label": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "onClose": {
      "required": true,
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "() => void",
        "signature": {
          "arguments": [],
          "return": {
            "name": "void"
          }
        }
      },
      "description": ""
    },
    "header": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "children": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "actions": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Modal/StyledPanel.tsx"] = {
    name: "StyledPanelBoilerplate",
    docgenInfo: StyledPanelBoilerplate.__docgenInfo,
    path: "src/components/Modal/StyledPanel.tsx"
  };
}

export { StyledPanel, StyledPanelActions, StyledPanelBodySection, StyledPanelBoilerplate, StyledPanelCloseButton, StyledPanelHeader };
//# sourceMappingURL=StyledPanel.esm.js.map
