@helpscout/hsds-react/components/ScrollableContainer/ScrollableContainer.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.FooterUI = exports.SimpleBarUI = exports.BodyUI = exports.HeaderUI = exports.ContainerScrollUI = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

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

var _simplebarReact = _interopRequireDefault(require("simplebar-react"));

require("simplebar/dist/simplebar.min.css");

var ContainerScrollUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "ScrollableContainercss__ContainerScrollUI",
  componentId: "sc-1bs3fw4-0"
})(["display:flex;flex-direction:column;flex-grow:1;overflow:hidden;width:", ";height:", ";"], function (_ref) {
  var $width = _ref.$width;
  return $width;
}, function (_ref2) {
  var $height = _ref2.$height;
  return "calc(" + $height + ")";
});
exports.ContainerScrollUI = ContainerScrollUI;
var HeaderUI = (0, _styledComponents.default)(function (_ref3) {
  var component = _ref3.component,
      ref = _ref3.ref,
      props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["component", "ref"]);
  return /*#__PURE__*/_react.default.cloneElement(component, (0, _extends2.default)({
    ref: ref
  }, props));
}).withConfig({
  displayName: "ScrollableContainercss__HeaderUI",
  componentId: "sc-1bs3fw4-1"
})(["width:100%;transition:box-shadow 0.2s;z-index:3;flex-shrink:0;flex-grow:0;"]);
exports.HeaderUI = HeaderUI;
var BodyUI = (0, _styledComponents.default)(function (_ref4) {
  var component = _ref4.component,
      ref = _ref4.ref,
      props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["component", "ref"]);
  return /*#__PURE__*/_react.default.cloneElement(component, (0, _extends2.default)({
    ref: ref
  }, props));
}).withConfig({
  displayName: "ScrollableContainercss__BodyUI",
  componentId: "sc-1bs3fw4-2"
})(["width:100%;flex-grow:1;overflow:auto;"]);
exports.BodyUI = BodyUI;
var SimpleBarUI = (0, _styledComponents.default)(_simplebarReact.default).withConfig({
  displayName: "ScrollableContainercss__SimpleBarUI",
  componentId: "sc-1bs3fw4-3"
})(["height:", ";"], function (_ref5) {
  var $height = _ref5.$height;
  return $height;
});
exports.SimpleBarUI = SimpleBarUI;
var FooterUI = (0, _styledComponents.default)(function (_ref6) {
  var component = _ref6.component,
      ref = _ref6.ref,
      props = (0, _objectWithoutPropertiesLoose2.default)(_ref6, ["component", "ref"]);
  return /*#__PURE__*/_react.default.cloneElement(component, (0, _extends2.default)({
    ref: ref
  }, props));
}).withConfig({
  displayName: "ScrollableContainercss__FooterUI",
  componentId: "sc-1bs3fw4-4"
})(["width:100%;transition:box-shadow 0.2s;z-index:3;flex-shrink:0;flex-grow:0;"]);
exports.FooterUI = FooterUI;