@elliemae/ds-banner 2.3.1-rc.2 → 3.0.0-alpha.2

package/package.json

@@ -1,43 +1,46 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "2.3.1-rc.2",
+  "version": "3.0.0-alpha.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./utils/styleHelpers": {
-      "import": "./esm/utils/styleHelpers.js",
-      "require": "./cjs/utils/styleHelpers.js"
+      "import": "./dist/esm/utils/styleHelpers.js",
+      "require": "./dist/cjs/utils/styleHelpers.js"
     },
     "./utils/icons": {
-      "import": "./esm/utils/icons.js",
-      "require": "./cjs/utils/icons.js"
+      "import": "./dist/esm/utils/icons.js",
+      "require": "./dist/cjs/utils/icons.js"
     },
     "./utils/bannerTypes": {
-      "import": "./esm/utils/bannerTypes.js",
-      "require": "./cjs/utils/bannerTypes.js"
+      "import": "./dist/esm/utils/bannerTypes.js",
+      "require": "./dist/cjs/utils/bannerTypes.js"
     },
     "./styles": {
-      "import": "./esm/styles.js",
-      "require": "./cjs/styles.js"
+      "import": "./dist/esm/styles.js",
+      "require": "./dist/cjs/styles.js"
     },
     "./propTypes": {
-      "import": "./esm/propTypes.js",
-      "require": "./cjs/propTypes.js"
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
     },
     "./DSBanner": {
-      "import": "./esm/DSBanner.js",
-      "require": "./cjs/DSBanner.js"
+      "import": "./dist/esm/DSBanner.js",
+      "require": "./dist/cjs/DSBanner.js"
     },
     "./defaultProps": {
-      "import": "./esm/defaultProps.js",
-      "require": "./cjs/defaultProps.js"
+      "import": "./dist/esm/defaultProps.js",
+      "require": "./dist/cjs/defaultProps.js"
     }
   },
   "sideEffects": [
@@ -49,24 +52,24 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.1-rc.2",
-    "@elliemae/ds-icons": "2.3.1-rc.2",
-    "@elliemae/ds-system": "2.3.1-rc.2",
+    "@elliemae/ds-button": "3.0.0-alpha.2",
+    "@elliemae/ds-icons": "3.0.0-alpha.2",
+    "@elliemae/ds-system": "3.0.0-alpha.2",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3"
@@ -79,7 +82,13 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/DSBanner.js

@@ -1,132 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var reactDesc = require('react-desc');
-var icons = require('./utils/icons.js');
-var propTypes = require('./propTypes.js');
-var defaultProps = require('./defaultProps.js');
-var styles = require('./styles.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var _CloseX, _span;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const DSBanner = _ref => {
-  let {
-    type,
-    isOpen,
-    onClose,
-    label,
-    body,
-    actionLink,
-    showCloseButton,
-    containerProps,
-    actionRef
-  } = _ref;
-  const innerContainerRef = React.useRef(null);
-  const linkRef = React.useRef(null);
-  const [current, setCurrent] = React.useState(isOpen);
-  const [isAnimating, setIsAnimating] = React.useState(false);
-  const [alertTabIndex, setAlertTabIndex] = React.useState(undefined);
-  const ownerState = {
-    type
-  };
-  React__default["default"].useEffect(() => {
-    if (actionRef && actionRef.current) {
-      actionRef.current.focusOnWrapper = () => {
-        if (innerContainerRef.current) {
-          setAlertTabIndex(0);
-          setTimeout(() => {
-            innerContainerRef.current.focus();
-          }, 100);
-        }
-      };
-
-      actionRef.current.focusOnLink = () => {
-        if (linkRef.current) {
-          linkRef.current.focus();
-        }
-      };
-    }
-  }, [actionRef]);
-  React.useLayoutEffect(() => {
-    if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
-  }, [isOpen, current]);
-  const handleBlur = React.useCallback(() => {
-    setAlertTabIndex(undefined);
-  }, []);
-  const handleOnKeyDown = React.useCallback(e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      if (linkRef.current) linkRef.current.click();
-    }
-  }, []);
-  if (!isAnimating && !isOpen) return null;
-  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledBannerContainer, _objectSpread(_objectSpread({
-    type: type,
-    isOpen: isOpen,
-    isAnimating: isAnimating,
-    onAnimationEnd: () => setCurrent(isOpen),
-    "data-testid": "ds-banner-container"
-  }, containerProps), {}, {
-    ownerState: ownerState,
-    children: /*#__PURE__*/jsxRuntime.jsxs(styles.StyledInnerContainer, {
-      type: type,
-      isOpen: isOpen,
-      ref: innerContainerRef,
-      isAnimating: isAnimating,
-      "data-testid": "ds-banner",
-      role: "alert",
-      tabIndex: alertTabIndex,
-      onBlur: handleBlur,
-      children: [/*#__PURE__*/_jsx__default["default"](styles.StyledIconContainer, {
-        "data-testid": "ds-banner-icon"
-      }, void 0, icons.icons[type]), /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, body), actionLink && /*#__PURE__*/jsxRuntime.jsx(styles.StyledActionLink, {
-        "data-testid": "ds-banner-action-link",
-        onClick: actionLink.onClick,
-        href: actionLink.href,
-        ref: linkRef,
-        onKeyDown: handleOnKeyDown,
-        tabIndex: 0,
-        isBodyEmpty: body,
-        children: actionLink.label
-      })), showCloseButton ? /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
-        "data-testid": "ds-banner-close-button",
-        buttonType: "secondary",
-        onClick: onClose,
-        "aria-label": "Close icon",
-        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseX, {
-          width: "12px",
-          height: "12px"
-        }))
-      }) : _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}))]
-    })
-  }));
-};
-
-DSBanner.defaultProps = defaultProps.defaultProps;
-const DSBannerWithSchema = reactDesc.describe(DSBanner);
-DSBannerWithSchema.propTypes = propTypes.propTypes;
-
-exports.DSBannerWithSchema = DSBannerWithSchema;
-exports["default"] = DSBanner;

package/cjs/defaultProps.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var bannerTypes = require('./utils/bannerTypes.js');
-
-const defaultProps = {
-  containerProps: {},
-  label: '',
-  body: '',
-  type: bannerTypes.BANNER_TYPES.INFO,
-  isOpen: true,
-  onClose: () => null,
-  showCloseButton: true,
-  actionLink: {
-    label: '',
-    onClick: () => null,
-    href: ''
-  }
-};
-
-exports.defaultProps = defaultProps;

package/cjs/index.d.js

@@ -1,2 +0,0 @@
-'use strict';
-

package/cjs/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSBanner = require('./DSBanner.js');
-var bannerTypes = require('./utils/bannerTypes.js');
-
-
-
-exports.DSBannerWithSchema = DSBanner.DSBannerWithSchema;
-exports["default"] = DSBanner["default"];
-exports.BANNER_TYPES = bannerTypes.BANNER_TYPES;

package/cjs/propTypes.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-var bannerTypes = require('./utils/bannerTypes.js');
-
-const propTypes = {
-  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),
-  label: reactDesc.PropTypes.string.description('banner s label').defaultValue(''),
-  body: reactDesc.PropTypes.string.description('banner s body content').defaultValue(''),
-  type: reactDesc.PropTypes.oneOf(Object.values(bannerTypes.BANNER_TYPES)).description('banner s type').defaultValue(bannerTypes.BANNER_TYPES.INFO),
-  onClose: reactDesc.PropTypes.func.description('function executed when the banner closes'),
-  isOpen: reactDesc.PropTypes.bool.description('whether the banner is open or closed').defaultValue(true),
-  showCloseButton: reactDesc.PropTypes.bool.description('whether to show close button or not').defaultValue(true),
-  actionLink: reactDesc.PropTypes.shape({
-    label: reactDesc.PropTypes.string,
-    onClick: reactDesc.PropTypes.func,
-    href: reactDesc.PropTypes.string
-  }).description('Properties of the ActionLink component').defaultValue({}),
-  actionRef: reactDesc.PropTypes.object.description("\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    ").defaultValue({})
-};
-
-exports.propTypes = propTypes;

package/cjs/styles.js

@@ -1,146 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var dsSystem = require('@elliemae/ds-system');
-var DSButton = require('@elliemae/ds-button');
-var styleHelpers = require('./utils/styleHelpers.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const StyledBannerContainer = dsSystem.styled('div', {
-  name: 'DS-Banner',
-  slot: 'root'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  overflow: hidden;\n  height: ", ";\n  ", ";\n"])), _ref => {
-  let {
-    isOpen
-  } = _ref;
-  return isOpen ? 'auto' : '0px';
-}, _ref2 => {
-  let {
-    isAnimating,
-    isOpen,
-    height
-  } = _ref2;
-  return styleHelpers.handleAnimation(isAnimating, isOpen, height);
-});
-const StyledInnerContainer = dsSystem.styled('div', {
-  name: 'DS-Banner',
-  slot: 'innerContainer'
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  padding-right: 6px;\n  display: grid;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ", ";\n  border-bottom: 5px solid ", ";\n  ", ";\n  &:focus {\n    position: relative;\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      border-radius: 2px;\n      width: calc(100%);\n      border: 2px solid #1e79c2;\n      height: calc(100% + 4px);\n    }\n  }\n  grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n"])), _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral['000'];
-}, _ref4 => {
-  let {
-    type,
-    theme
-  } = _ref4;
-  return styleHelpers.handleBorderColor(type, theme);
-}, _ref5 => {
-  let {
-    isAnimating,
-    isOpen
-  } = _ref5;
-  return styleHelpers.handleAnimation(isAnimating, isOpen);
-});
-const StyledIconContainer = dsSystem.styled('div', {
-  name: 'DS-Banner',
-  slot: 'iconContainer'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  margin-right: ", ";\n  margin-left: ", ";\n"])), _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.space.xxs;
-}, _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.space.xs;
-});
-const StyledTitle = dsSystem.styled('div', {
-  name: 'DS-Banner',
-  slot: 'title'
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.neutral[700];
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.fontSizes.label[400];
-}, _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.fontWeights.semibold;
-});
-const StyledSubTitle = dsSystem.styled('div', {
-  name: 'DS-Banner',
-  slot: 'subtitle'
-})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  width: 100%;\n  margin-left: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.space.xs;
-}, _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.fontSizes.subTitle[400];
-}, _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.fontWeights.regular;
-});
-const StyledActionLink = dsSystem.styled('a', {
-  name: 'DS-Banner',
-  slot: 'action'
-})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  margin-left: ", ";\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), _ref14 => {
-  let {
-    theme,
-    isBodyEmpty
-  } = _ref14;
-  return isBodyEmpty ? theme.space.xs : 0;
-}, _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.fontSizes.hyperlink[400];
-}, _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.fontWeights.regular;
-}, _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.brand[600];
-});
-const StyledCloseButton = dsSystem.styled(DSButton__default["default"], {
-  name: 'DS-Banner',
-  slot: 'closeButton'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  margin-left: ", ";\n  &:not(focus) {\n    border: transparent;\n  }\n"])), _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.space.xxs;
-});
-
-exports.StyledActionLink = StyledActionLink;
-exports.StyledBannerContainer = StyledBannerContainer;
-exports.StyledCloseButton = StyledCloseButton;
-exports.StyledIconContainer = StyledIconContainer;
-exports.StyledInnerContainer = StyledInnerContainer;
-exports.StyledSubTitle = StyledSubTitle;
-exports.StyledTitle = StyledTitle;

package/cjs/utils/bannerTypes.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const BANNER_TYPES = {
-  INFO: 'info',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  DANGER: 'danger'
-};
-
-exports.BANNER_TYPES = BANNER_TYPES;

package/cjs/utils/icons.js

@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsIcons = require('@elliemae/ds-icons');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-const icons = {
-  success: /*#__PURE__*/_jsx__default["default"](dsIcons.SuccessFill, {
-    fill: "#207e56",
-    width: "20px",
-    height: "20px"
-  }),
-  info: /*#__PURE__*/_jsx__default["default"](dsIcons.InfoFill, {
-    fill: "#1e79c2",
-    width: "20px",
-    height: "20px"
-  }),
-  danger: /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetailFill, {
-    fill: "#c64252",
-    width: "20px",
-    height: "20px"
-  }),
-  warning: /*#__PURE__*/_jsx__default["default"](dsIcons.WarningSquare, {
-    fill: "#d17a00",
-    width: "20px",
-    height: "20px"
-  })
-};
-
-exports.icons = icons;

package/cjs/utils/styleHelpers.js

@@ -1,53 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var dsSystem = require('@elliemae/ds-system');
-var bannerTypes = require('./bannerTypes.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const slideIn = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
-const slideOut = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n"])));
-
-const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
-
-const shrinkContainer = height => dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
-
-const handleBorderColor = (type, _ref) => {
-  let {
-    colors
-  } = _ref;
-
-  switch (type) {
-    case bannerTypes.BANNER_TYPES.SUCCESS:
-      return colors.success[900];
-
-    case bannerTypes.BANNER_TYPES.INFO:
-      return colors.brand[600];
-
-    case bannerTypes.BANNER_TYPES.WARNING:
-      return colors.warning[900];
-
-    case bannerTypes.BANNER_TYPES.DANGER:
-      return colors.danger[900];
-  }
-};
-const handleAnimation = function (isAnimating, isOpen) {
-  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
-  if (isAnimating) {
-    if (isOpen) {
-      return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
-    } else {
-      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
-    }
-  }
-};
-
-exports.handleAnimation = handleAnimation;
-exports.handleBorderColor = handleBorderColor;