@elliemae/ds-banner 2.2.0-next.6 → 2.3.0-alpha.1

package/cjs/styles.js

@@ -1,146 +1,107 @@
-'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);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledActionLink: () => StyledActionLink,
+  StyledBannerContainer: () => StyledBannerContainer,
+  StyledCloseButton: () => StyledCloseButton,
+  StyledIconContainer: () => StyledIconContainer,
+  StyledInnerContainer: () => StyledInnerContainer,
+  StyledSubTitle: () => StyledSubTitle,
+  StyledTitle: () => StyledTitle
 });
-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;
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+var import_styleHelpers = require("./utils/styleHelpers");
+const StyledBannerContainer = (0, import_ds_system.styled)("div", { name: "DS-Banner", slot: "root" })`
+  overflow: hidden;
+  height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
+  ${({ isAnimating, isOpen, height }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen, height)};
+`;
+const StyledInnerContainer = (0, import_ds_system.styled)("div", {
+  name: "DS-Banner",
+  slot: "innerContainer"
+})`
+  padding-right: 6px;
+  display: grid;
+  align-items: center;
+  min-height: 41px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  border-bottom: 5px solid ${({ type, theme }) => (0, import_styleHelpers.handleBorderColor)(type, theme)};
+  ${({ isAnimating, isOpen }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen)};
+  &:focus {
+    position: relative;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      border-radius: 2px;
+      width: calc(100%);
+      border: 2px solid #1e79c2;
+      height: calc(100% + 4px);
+    }
+  }
+  grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
+`;
+const StyledIconContainer = (0, import_ds_system.styled)("div", { name: "DS-Banner", slot: "iconContainer" })`
+  margin-right: ${({ theme }) => theme.space.xxs};
+  margin-left: ${({ theme }) => theme.space.xs};
+`;
+const StyledTitle = (0, import_ds_system.styled)("div", { name: "DS-Banner", slot: "title" })`
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  font-size: ${({ theme }) => theme.fontSizes.label[400]};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+`;
+const StyledSubTitle = (0, import_ds_system.styled)("div", { name: "DS-Banner", slot: "subtitle" })`
+  width: 100%;
+  margin-left: ${({ theme }) => theme.space.xs};
+  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+`;
+const StyledActionLink = (0, import_ds_system.styled)("a", { name: "DS-Banner", slot: "action" })`
+  margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
+  white-space: nowrap;
+  text-decoration: none;
+  line-height: 1.1;
+  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  color: ${({ theme }) => theme.colors.brand[600]};
+`;
+const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.default, { name: "DS-Banner", slot: "closeButton" })`
+  margin-left: ${({ theme }) => theme.space.xxs};
+  &:not(focus) {
+    border: transparent;
+  }
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

package/cjs/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport DSButton from '@elliemae/ds-button';\nimport type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', { name: 'DS-Banner', slot: 'root' })`\n  overflow: hidden;\n  height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n  name: 'DS-Banner',\n  slot: 'innerContainer',\n})`\n  padding-right: 6px;\n  display: grid;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\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`;\n\nexport const StyledIconContainer = styled('div', { name: 'DS-Banner', slot: 'iconContainer' })`\n  margin-right: ${({ theme }) => theme.space.xxs};\n  margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: 'DS-Banner', slot: 'title' })`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled('div', { name: 'DS-Banner', slot: 'subtitle' })`\n  width: 100%;\n  margin-left: ${({ theme }) => theme.space.xs};\n  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled<StyledActionLinkT>('a', { name: 'DS-Banner', slot: 'action' })`\n  margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledCloseButton = styled(DSButton, { name: 'DS-Banner', slot: 'closeButton' })`\n  margin-left: ${({ theme }) => theme.space.xxs};\n  &:not(focus) {\n    border: transparent;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAqB;AAErB,0BAAmD;AAE5C,MAAM,wBAAwB,6BAA+B,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA;AAAA,YAE1F,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,yCAAgB,aAAa,QAAQ;AAAA;AAGvE,MAAM,uBAAuB,6BAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOc,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,2CAAkB,MAAM;AAAA,IACtE,CAAC,EAAE,aAAa,aAAa,yCAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBvD,MAAM,sBAAsB,6BAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA,kBAC1D,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,6BAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA,WACzD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,6BAAO,OAAO,EAAE,MAAM,aAAa,MAAM;AAAA;AAAA,iBAEtD,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,6BAA0B,KAAK,EAAE,MAAM,aAAa,MAAM;AAAA,iBACzE,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,oBAAoB,6BAAO,0BAAU,EAAE,MAAM,aAAa,MAAM;AAAA,iBAC5D,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/cjs/utils/bannerTypes.js

@@ -1,12 +1,40 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var bannerTypes_exports = {};
+__export(bannerTypes_exports, {
+  BANNER_TYPES: () => BANNER_TYPES
+});
+var React = __toESM(require("react"));
 const BANNER_TYPES = {
-  INFO: 'info',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  DANGER: 'danger'
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger"
 };
-
-exports.BANNER_TYPES = BANNER_TYPES;
+module.exports = __toCommonJS(bannerTypes_exports);
+//# sourceMappingURL=bannerTypes.js.map

package/cjs/utils/bannerTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/bannerTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const BANNER_TYPES = {\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  DANGER: 'danger',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA;",
+  "names": []
+}

package/cjs/utils/icons.js

@@ -1,36 +1,58 @@
-'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);
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var icons_exports = {};
+__export(icons_exports, {
+  icons: () => icons
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
 const icons = {
-  success: /*#__PURE__*/_jsx__default["default"](dsIcons.SuccessFill, {
+  success: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.SuccessFill, {
     fill: "#207e56",
     width: "20px",
     height: "20px"
   }),
-  info: /*#__PURE__*/_jsx__default["default"](dsIcons.InfoFill, {
+  info: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.InfoFill, {
     fill: "#1e79c2",
     width: "20px",
     height: "20px"
   }),
-  danger: /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetailFill, {
+  danger: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.AlertsDetailFill, {
     fill: "#c64252",
     width: "20px",
     height: "20px"
   }),
-  warning: /*#__PURE__*/_jsx__default["default"](dsIcons.WarningSquare, {
+  warning: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.WarningSquare, {
     fill: "#d17a00",
     width: "20px",
     height: "20px"
   })
 };
-
-exports.icons = icons;
+module.exports = __toCommonJS(icons_exports);
+//# sourceMappingURL=icons.js.map

package/cjs/utils/icons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/icons.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from '@elliemae/ds-icons';\n\nexport const icons = {\n  success: <SuccessFill fill=\"#207e56\" width=\"20px\" height=\"20px\" />,\n  info: <InfoFill fill=\"#1e79c2\" width=\"20px\" height=\"20px\" />,\n  danger: <AlertsDetailFill fill=\"#c64252\" width=\"20px\" height=\"20px\" />,\n  warning: <WarningSquare fill=\"#d17a00\" width=\"20px\" height=\"20px\" />,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAuE;AAEhE,MAAM,QAAQ;AAAA,EACnB,SAAS,mDAAC,6BAAD;AAAA,IAAa,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EACzD,MAAM,mDAAC,0BAAD;AAAA,IAAU,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EACnD,QAAQ,mDAAC,kCAAD;AAAA,IAAkB,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EAC7D,SAAS,mDAAC,+BAAD;AAAA,IAAe,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA;",
+  "names": []
+}

package/cjs/utils/styleHelpers.js

@@ -1,53 +1,99 @@
-'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;
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styleHelpers_exports = {};
+__export(styleHelpers_exports, {
+  handleAnimation: () => handleAnimation,
+  handleBorderColor: () => handleBorderColor
+});
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_bannerTypes = require("./bannerTypes");
+const slideIn = import_ds_system.kfrm`
+  0% {
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+const slideOut = import_ds_system.kfrm`
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  60% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+const spanContainer = (height) => import_ds_system.kfrm`
+  0% {
+    height: 0px;
+  }
+  100% {
+    height: ${height}px;
+  }
+`;
+const shrinkContainer = (height) => import_ds_system.kfrm`
+  0% {
+    height: ${height}px;
+  }
+  100% {
+    height: 0px;
+  }
+`;
+const handleBorderColor = (type, { colors }) => {
   switch (type) {
-    case bannerTypes.BANNER_TYPES.SUCCESS:
+    case import_bannerTypes.BANNER_TYPES.SUCCESS:
       return colors.success[900];
-
-    case bannerTypes.BANNER_TYPES.INFO:
+    case import_bannerTypes.BANNER_TYPES.INFO:
       return colors.brand[600];
-
-    case bannerTypes.BANNER_TYPES.WARNING:
+    case import_bannerTypes.BANNER_TYPES.WARNING:
       return colors.warning[900];
-
-    case bannerTypes.BANNER_TYPES.DANGER:
+    case import_bannerTypes.BANNER_TYPES.DANGER:
       return colors.danger[900];
   }
 };
-const handleAnimation = function (isAnimating, isOpen) {
-  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
+const handleAnimation = (isAnimating, isOpen, height = null) => {
   if (isAnimating) {
     if (isOpen) {
-      return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
+      return import_ds_system.css`
+        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
+      `;
     } else {
-      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+      return import_ds_system.css`
+        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
+      `;
     }
   }
 };
-
-exports.handleAnimation = handleAnimation;
-exports.handleBorderColor = handleBorderColor;
+module.exports = __toCommonJS(styleHelpers_exports);
+//# sourceMappingURL=styleHelpers.js.map

package/cjs/utils/styleHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/styleHelpers.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport { BANNER_TYPES } from './bannerTypes';\n\nconst slideIn = kfrm`\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n`;\n\nconst slideOut = kfrm`\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`;\n\nconst spanContainer = (height: number) => kfrm`\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ${height}px;\n  }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n  0% {\n    height: ${height}px;\n  }\n  100% {\n    height: 0px;\n  }\n`;\n\nexport const handleBorderColor = (type, { colors }): string => {\n  switch (type) {\n    case BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case BANNER_TYPES.DANGER:\n      return colors.danger[900];\n  }\n};\n\nexport const handleAnimation = (\n  isAnimating: boolean,\n  isOpen: boolean,\n  height: number | null = null,\n): FlattenSimpleInterpolation => {\n  if (isAnimating) {\n    if (isOpen) {\n      return css`\n        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n      `;\n    } else {\n      return css`\n        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n      `;\n    }\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAE1B,yBAA6B;AAE7B,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAAM,EAAE,aAAqB;AAC7D,UAAQ;AAAA,SACD,gCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,gCAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,gCAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,gCAAa;AAChB,aAAO,OAAO,OAAO;AAAA;AAAA;AAIpB,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,UAAU;AAAA;AAAA,WAE3C;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}