@elliemae/ds-ribbon 1.57.1-rc.0 → 2.0.0-alpha.11

package/cjs/DSRibbon.js

@@ -2,42 +2,48 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/* eslint-disable max-lines */
-var RibbonRow = /*#__PURE__*/styled__default['default'].div.withConfig({
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const RibbonRow = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-0"
-})(["width:100%;display:flex;flex-direction:row;align-items:center;min-height:4rem;@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:5rem;overflow-y:hidden;}flex-wrap:nowrap;overflow-x:auto;", ";", ";"], function (props) {
+})(["width:100%;display:flex;flex-direction:row;align-items:center;min-height:4rem;@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:5rem;overflow-y:hidden;}flex-wrap:nowrap;overflow-x:auto;", ";", ";"], props => {
   if (props.alignLeft) {
     return "\n      align-items: stretch;\n      & > ".concat(RibbonCol, " {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      ");
   }
 
   return "\n      // flex:1;\n      align-items: center;\n      ";
-}, function (props) {
+}, props => {
   if (props.solid) {
     return "\n      & > ".concat(RibbonCol, " {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      ");
   }
 
   return '';
 });
-var RibbonCol = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonCol = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-1"
 })(["display:flex;flex-direction:column;padding:0.25rem 0.5rem;height:100%;justify-content:center;flex:1;position:relative;&:after{position:absolute;top:10%;right:0;height:80%;content:'';border-right:dashed 1px #ebedf0;}& > ", "{align-items:flex-start;}"], RibbonRow);
-var RibbonWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-2"
 })(["width:100%;display:flex;flex-direction:column;padding:0.62rem 1.22rem;border-bottom:solid 1px #cfcfd7;background:#fff;& > ", "{border-bottom:solid 1px #ebedf0;width:auto;&:last-child{border:none;}& > ", "{&:last-child{&:after{display:none;}}}}"], RibbonRow, RibbonCol);
 /* eslint-disable indent */
 
-var RibbonBlockIcon = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonBlockIcon = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-3"
-})(["padding-right:0.5rem;padding-top:0.1rem;svg,svg:not([fill]){fill:", ";}"], function (props) {
+})(["padding-right:0.5rem;padding-top:0.1rem;svg,svg:not([fill]){fill:", ";}"], props => {
   if (props.info) return '#1e79c2';
   if (props.error) return '#E34256';
   if (props.warning) return '#FBB431';
@@ -46,95 +52,90 @@ var RibbonBlockIcon = /*#__PURE__*/styled__default['default'].div.withConfig({
 });
 /* eslint-enable indent */
 
-var RibbonBlockLabel = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonBlockLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-4"
 })(["padding:0.25rem 0.5rem;color:#697489;font-size:0.9rem;line-height:1.2rem;"]);
-var RibbonBlockValue = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonBlockValue = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-5"
 })(["flex:2;font-weight:bold;padding:0.25rem 0.5rem 0.25rem 0rem;font-size:1.1rem;color:#333333;flex-wrap:nowrap;white-space:nowrap;"]);
-var RibbonBlockValueLabel = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonBlockValueLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-6"
 })(["flex:2;padding:0.25rem 0.5rem 0.25rem 0rem;font-size:0.9rem;color:#697489;flex-wrap:nowrap;white-space:nowrap;"]);
-var RibbonBlockCol = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonBlockCol = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-7"
-})(["display:flex;flex-direction:column;flex:2;flex-wrap:nowrap;align-items:", ";height:100%;"], function (props) {
+})(["display:flex;flex-direction:column;flex:2;flex-wrap:nowrap;align-items:", ";height:100%;"], props => {
   if (props.center) return 'center';
   return '';
 });
-var RibbonBlockRow = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonBlockRow = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-8"
-})(["display:flex;flex-direction:row;flex-wrap:nowrap;flex:1;height:100%;align-items:", ";"], function (props) {
+})(["display:flex;flex-direction:row;flex-wrap:nowrap;flex:1;height:100%;align-items:", ";"], props => {
   if (props.center) return 'center';
   return '';
 });
-var RibbonBlock = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RibbonBlock = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-9boes5-9"
 })(["flex:1;height:100%;"]);
 
-function RibbonCard(_ref) {
-  var _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? null : _ref$icon,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? '' : _ref$label,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      _ref$additionalValue = _ref.additionalValue,
-      additionalValue = _ref$additionalValue === void 0 ? '' : _ref$additionalValue,
-      _ref$additionalLabel = _ref.additionalLabel,
-      additionalLabel = _ref$additionalLabel === void 0 ? '' : _ref$additionalLabel,
-      _ref$info = _ref.info,
-      info = _ref$info === void 0 ? false : _ref$info,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? false : _ref$error,
-      _ref$warning = _ref.warning,
-      warning = _ref$warning === void 0 ? false : _ref$warning,
-      _ref$success = _ref.success,
-      success = _ref$success === void 0 ? false : _ref$success,
-      _ref$center = _ref.center,
-      center = _ref$center === void 0 ? false : _ref$center,
-      _ref$solid = _ref.solid,
-      solid = _ref$solid === void 0 ? false : _ref$solid;
-  var labelPlace = icon ? /*#__PURE__*/React__default['default'].createElement(RibbonBlockIcon, {
+function RibbonCard({
+  containerProps = {},
+  icon = null,
+  label = '',
+  value = '',
+  additionalValue = '',
+  additionalLabel = '',
+  info = false,
+  error = false,
+  warning = false,
+  success = false,
+  center = false,
+  solid = false
+}) {
+  var _RibbonBlockValue;
+
+  const labelPlace = icon ? /*#__PURE__*/_jsx__default["default"](RibbonBlockIcon, {
     error: error,
     info: info,
     success: success,
     warning: warning
-  }, icon) : /*#__PURE__*/React__default['default'].createElement(RibbonBlockLabel, null, label);
+  }, void 0, icon) : /*#__PURE__*/_jsx__default["default"](RibbonBlockLabel, {}, void 0, label);
 
   if (additionalValue || additionalLabel) {
-    var additionalInformation;
+    let additionalInformation;
 
     if (additionalValue) {
-      additionalInformation = additionalValue && /*#__PURE__*/React__default['default'].createElement(RibbonBlockValue, null, additionalValue);
+      additionalInformation = additionalValue && /*#__PURE__*/_jsx__default["default"](RibbonBlockValue, {}, void 0, additionalValue);
     } else if (additionalLabel) {
-      additionalInformation = additionalLabel && /*#__PURE__*/React__default['default'].createElement(RibbonBlockValueLabel, null, additionalLabel);
+      additionalInformation = additionalLabel && /*#__PURE__*/_jsx__default["default"](RibbonBlockValueLabel, {}, void 0, additionalLabel);
     }
 
-    return /*#__PURE__*/React__default['default'].createElement(RibbonBlock, containerProps, /*#__PURE__*/React__default['default'].createElement(RibbonBlockRow, {
-      className: "ribbon-block-row",
-      solid: solid,
-      style: {
-        alignItems: 'flex-start'
-      }
-    }, labelPlace, /*#__PURE__*/React__default['default'].createElement(RibbonBlockCol, {
-      center: center,
-      className: "ribbon-block-col"
-    }, /*#__PURE__*/React__default['default'].createElement(RibbonBlockValue, null, value), additionalInformation)));
+    return /*#__PURE__*/jsxRuntime.jsx(RibbonBlock, _objectSpread(_objectSpread({}, containerProps), {}, {
+      children: /*#__PURE__*/_jsx__default["default"](RibbonBlockRow, {
+        className: "ribbon-block-row",
+        solid: solid,
+        style: {
+          alignItems: 'flex-start'
+        }
+      }, void 0, labelPlace, /*#__PURE__*/_jsx__default["default"](RibbonBlockCol, {
+        center: center,
+        className: "ribbon-block-col"
+      }, void 0, _RibbonBlockValue || (_RibbonBlockValue = /*#__PURE__*/_jsx__default["default"](RibbonBlockValue, {}, void 0, value)), additionalInformation))
+    }));
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(RibbonBlock, containerProps, /*#__PURE__*/React__default['default'].createElement(RibbonBlockRow, {
-    center: center,
-    solid: solid
-  }, labelPlace, /*#__PURE__*/React__default['default'].createElement(RibbonBlockValue, null, value)));
+  return /*#__PURE__*/jsxRuntime.jsx(RibbonBlock, _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](RibbonBlockRow, {
+      center: center,
+      solid: solid
+    }, void 0, labelPlace, /*#__PURE__*/_jsx__default["default"](RibbonBlockValue, {}, void 0, value))
+  }));
 }
 
-var DSRibbon = {
-  RibbonWrapper: RibbonWrapper,
-  RibbonRow: RibbonRow,
-  RibbonCol: RibbonCol,
-  RibbonCard: RibbonCard
+const DSRibbon = {
+  RibbonWrapper,
+  RibbonRow,
+  RibbonCol,
+  RibbonCard
 };
 RibbonWrapper.propTypes = {};
 RibbonRow.propTypes = {
@@ -142,7 +143,7 @@ RibbonRow.propTypes = {
   alignLeft: reactDesc.PropTypes.bool.description('align left')
 };
 RibbonCol.propTypes = {};
-var cardprops = {
+const cardprops = {
   /** props to inject to wrapper */
   containerProps: reactDesc.PropTypes.object.description('props to inject to wrapper'),
 
@@ -179,10 +180,8 @@ var cardprops = {
   /** solid style */
   solid: reactDesc.PropTypes.bool.description('solid style')
 };
-RibbonCard.propTypes = cardprops;
-var DSRibbonCardWithSchema = reactDesc.describe(RibbonCard);
+const DSRibbonCardWithSchema = reactDesc.describe(RibbonCard);
 DSRibbonCardWithSchema.propTypes = cardprops;
 
 exports.DSRibbonCardWithSchema = DSRibbonCardWithSchema;
-exports['default'] = DSRibbon;
-//# sourceMappingURL=DSRibbon.js.map
+exports["default"] = DSRibbon;

package/cjs/index.js

@@ -3,12 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DSRibbon = require('./DSRibbon.js');
-require('react');
-require('react-desc');
-require('styled-components');
 
 
 
 exports.DSRibbonCardWithSchema = DSRibbon.DSRibbonCardWithSchema;
-exports.default = DSRibbon['default'];
-//# sourceMappingURL=index.js.map
+exports["default"] = DSRibbon["default"];

package/esm/DSRibbon.js

@@ -1,34 +1,39 @@
-import React from 'react';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
-/* eslint-disable max-lines */
-var RibbonRow = /*#__PURE__*/styled.div.withConfig({
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const RibbonRow = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-0"
-})(["width:100%;display:flex;flex-direction:row;align-items:center;min-height:4rem;@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:5rem;overflow-y:hidden;}flex-wrap:nowrap;overflow-x:auto;", ";", ";"], function (props) {
+})(["width:100%;display:flex;flex-direction:row;align-items:center;min-height:4rem;@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:5rem;overflow-y:hidden;}flex-wrap:nowrap;overflow-x:auto;", ";", ";"], props => {
   if (props.alignLeft) {
     return "\n      align-items: stretch;\n      & > ".concat(RibbonCol, " {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      ");
   }
 
   return "\n      // flex:1;\n      align-items: center;\n      ";
-}, function (props) {
+}, props => {
   if (props.solid) {
     return "\n      & > ".concat(RibbonCol, " {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      ");
   }
 
   return '';
 });
-var RibbonCol = /*#__PURE__*/styled.div.withConfig({
+const RibbonCol = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-1"
 })(["display:flex;flex-direction:column;padding:0.25rem 0.5rem;height:100%;justify-content:center;flex:1;position:relative;&:after{position:absolute;top:10%;right:0;height:80%;content:'';border-right:dashed 1px #ebedf0;}& > ", "{align-items:flex-start;}"], RibbonRow);
-var RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
+const RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-2"
 })(["width:100%;display:flex;flex-direction:column;padding:0.62rem 1.22rem;border-bottom:solid 1px #cfcfd7;background:#fff;& > ", "{border-bottom:solid 1px #ebedf0;width:auto;&:last-child{border:none;}& > ", "{&:last-child{&:after{display:none;}}}}"], RibbonRow, RibbonCol);
 /* eslint-disable indent */
 
-var RibbonBlockIcon = /*#__PURE__*/styled.div.withConfig({
+const RibbonBlockIcon = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-3"
-})(["padding-right:0.5rem;padding-top:0.1rem;svg,svg:not([fill]){fill:", ";}"], function (props) {
+})(["padding-right:0.5rem;padding-top:0.1rem;svg,svg:not([fill]){fill:", ";}"], props => {
   if (props.info) return '#1e79c2';
   if (props.error) return '#E34256';
   if (props.warning) return '#FBB431';
@@ -37,95 +42,90 @@ var RibbonBlockIcon = /*#__PURE__*/styled.div.withConfig({
 });
 /* eslint-enable indent */
 
-var RibbonBlockLabel = /*#__PURE__*/styled.div.withConfig({
+const RibbonBlockLabel = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-4"
 })(["padding:0.25rem 0.5rem;color:#697489;font-size:0.9rem;line-height:1.2rem;"]);
-var RibbonBlockValue = /*#__PURE__*/styled.div.withConfig({
+const RibbonBlockValue = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-5"
 })(["flex:2;font-weight:bold;padding:0.25rem 0.5rem 0.25rem 0rem;font-size:1.1rem;color:#333333;flex-wrap:nowrap;white-space:nowrap;"]);
-var RibbonBlockValueLabel = /*#__PURE__*/styled.div.withConfig({
+const RibbonBlockValueLabel = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-6"
 })(["flex:2;padding:0.25rem 0.5rem 0.25rem 0rem;font-size:0.9rem;color:#697489;flex-wrap:nowrap;white-space:nowrap;"]);
-var RibbonBlockCol = /*#__PURE__*/styled.div.withConfig({
+const RibbonBlockCol = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-7"
-})(["display:flex;flex-direction:column;flex:2;flex-wrap:nowrap;align-items:", ";height:100%;"], function (props) {
+})(["display:flex;flex-direction:column;flex:2;flex-wrap:nowrap;align-items:", ";height:100%;"], props => {
   if (props.center) return 'center';
   return '';
 });
-var RibbonBlockRow = /*#__PURE__*/styled.div.withConfig({
+const RibbonBlockRow = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-8"
-})(["display:flex;flex-direction:row;flex-wrap:nowrap;flex:1;height:100%;align-items:", ";"], function (props) {
+})(["display:flex;flex-direction:row;flex-wrap:nowrap;flex:1;height:100%;align-items:", ";"], props => {
   if (props.center) return 'center';
   return '';
 });
-var RibbonBlock = /*#__PURE__*/styled.div.withConfig({
+const RibbonBlock = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-9boes5-9"
 })(["flex:1;height:100%;"]);
 
-function RibbonCard(_ref) {
-  var _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? null : _ref$icon,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? '' : _ref$label,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      _ref$additionalValue = _ref.additionalValue,
-      additionalValue = _ref$additionalValue === void 0 ? '' : _ref$additionalValue,
-      _ref$additionalLabel = _ref.additionalLabel,
-      additionalLabel = _ref$additionalLabel === void 0 ? '' : _ref$additionalLabel,
-      _ref$info = _ref.info,
-      info = _ref$info === void 0 ? false : _ref$info,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? false : _ref$error,
-      _ref$warning = _ref.warning,
-      warning = _ref$warning === void 0 ? false : _ref$warning,
-      _ref$success = _ref.success,
-      success = _ref$success === void 0 ? false : _ref$success,
-      _ref$center = _ref.center,
-      center = _ref$center === void 0 ? false : _ref$center,
-      _ref$solid = _ref.solid,
-      solid = _ref$solid === void 0 ? false : _ref$solid;
-  var labelPlace = icon ? /*#__PURE__*/React.createElement(RibbonBlockIcon, {
+function RibbonCard({
+  containerProps = {},
+  icon = null,
+  label = '',
+  value = '',
+  additionalValue = '',
+  additionalLabel = '',
+  info = false,
+  error = false,
+  warning = false,
+  success = false,
+  center = false,
+  solid = false
+}) {
+  var _RibbonBlockValue;
+
+  const labelPlace = icon ? /*#__PURE__*/_jsx(RibbonBlockIcon, {
     error: error,
     info: info,
     success: success,
     warning: warning
-  }, icon) : /*#__PURE__*/React.createElement(RibbonBlockLabel, null, label);
+  }, void 0, icon) : /*#__PURE__*/_jsx(RibbonBlockLabel, {}, void 0, label);
 
   if (additionalValue || additionalLabel) {
-    var additionalInformation;
+    let additionalInformation;
 
     if (additionalValue) {
-      additionalInformation = additionalValue && /*#__PURE__*/React.createElement(RibbonBlockValue, null, additionalValue);
+      additionalInformation = additionalValue && /*#__PURE__*/_jsx(RibbonBlockValue, {}, void 0, additionalValue);
     } else if (additionalLabel) {
-      additionalInformation = additionalLabel && /*#__PURE__*/React.createElement(RibbonBlockValueLabel, null, additionalLabel);
+      additionalInformation = additionalLabel && /*#__PURE__*/_jsx(RibbonBlockValueLabel, {}, void 0, additionalLabel);
     }
 
-    return /*#__PURE__*/React.createElement(RibbonBlock, containerProps, /*#__PURE__*/React.createElement(RibbonBlockRow, {
-      className: "ribbon-block-row",
-      solid: solid,
-      style: {
-        alignItems: 'flex-start'
-      }
-    }, labelPlace, /*#__PURE__*/React.createElement(RibbonBlockCol, {
-      center: center,
-      className: "ribbon-block-col"
-    }, /*#__PURE__*/React.createElement(RibbonBlockValue, null, value), additionalInformation)));
+    return /*#__PURE__*/jsx(RibbonBlock, _objectSpread(_objectSpread({}, containerProps), {}, {
+      children: /*#__PURE__*/_jsx(RibbonBlockRow, {
+        className: "ribbon-block-row",
+        solid: solid,
+        style: {
+          alignItems: 'flex-start'
+        }
+      }, void 0, labelPlace, /*#__PURE__*/_jsx(RibbonBlockCol, {
+        center: center,
+        className: "ribbon-block-col"
+      }, void 0, _RibbonBlockValue || (_RibbonBlockValue = /*#__PURE__*/_jsx(RibbonBlockValue, {}, void 0, value)), additionalInformation))
+    }));
   }
 
-  return /*#__PURE__*/React.createElement(RibbonBlock, containerProps, /*#__PURE__*/React.createElement(RibbonBlockRow, {
-    center: center,
-    solid: solid
-  }, labelPlace, /*#__PURE__*/React.createElement(RibbonBlockValue, null, value)));
+  return /*#__PURE__*/jsx(RibbonBlock, _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: /*#__PURE__*/_jsx(RibbonBlockRow, {
+      center: center,
+      solid: solid
+    }, void 0, labelPlace, /*#__PURE__*/_jsx(RibbonBlockValue, {}, void 0, value))
+  }));
 }
 
-var DSRibbon = {
-  RibbonWrapper: RibbonWrapper,
-  RibbonRow: RibbonRow,
-  RibbonCol: RibbonCol,
-  RibbonCard: RibbonCard
+const DSRibbon = {
+  RibbonWrapper,
+  RibbonRow,
+  RibbonCol,
+  RibbonCard
 };
 RibbonWrapper.propTypes = {};
 RibbonRow.propTypes = {
@@ -133,7 +133,7 @@ RibbonRow.propTypes = {
   alignLeft: PropTypes.bool.description('align left')
 };
 RibbonCol.propTypes = {};
-var cardprops = {
+const cardprops = {
   /** props to inject to wrapper */
   containerProps: PropTypes.object.description('props to inject to wrapper'),
 
@@ -170,9 +170,7 @@ var cardprops = {
   /** solid style */
   solid: PropTypes.bool.description('solid style')
 };
-RibbonCard.propTypes = cardprops;
-var DSRibbonCardWithSchema = describe(RibbonCard);
+const DSRibbonCardWithSchema = describe(RibbonCard);
 DSRibbonCardWithSchema.propTypes = cardprops;
 
 export { DSRibbonCardWithSchema, DSRibbon as default };
-//# sourceMappingURL=DSRibbon.js.map

package/esm/index.js

@@ -1,5 +1 @@
 export { DSRibbonCardWithSchema, default } from './DSRibbon.js';
-import 'react';
-import 'react-desc';
-import 'styled-components';
-//# sourceMappingURL=index.js.map

package/package.json

@@ -1,14 +1,34 @@
 {
   "name": "@elliemae/ds-ribbon",
-  "version": "1.57.1-rc.0",
+  "version": "2.0.0-alpha.11",
   "license": "MIT",
-  "description": "Ellie Mae - Dim Sum - Ribbon",
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "description": "ICE MT - Dimsum - Ribbon",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./DSRibbon": {
+      "import": "./esm/DSRibbon.js",
+      "require": "./cjs/DSRibbon.js"
+    }
+  },
   "sideEffects": [
     "*.css",
     "*.scss"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "npm": ">=7",
+    "node": ">=14"
+  },
+  "author": "ICE MT",
   "scripts": {
     "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
     "prebuild": "exit 0",
@@ -16,19 +36,21 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "react-desc": "^4.1.2"
+    "@elliemae/ds-basic": "2.0.0-alpha.11",
+    "@elliemae/ds-classnames": "2.0.0-alpha.11"
   },
   "devDependencies": {
-    "styled-components": "~5.3.0"
+    "styled-components": "~5.3.1"
   },
   "peerDependencies": {
-    "lodash": "^4.17.20",
-    "react": "~17.0.1",
-    "react-dom": "^17.0.1",
-    "styled-components": "^5.3.0"
+    "lodash": "^4.17.21",
+    "react": "~17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.1"
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSRibbon.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+declare function RibbonCard({ containerProps, icon, label, value, additionalValue, additionalLabel, info, error, warning, success, center, solid, }: {
+    containerProps?: {} | undefined;
+    icon?: null | undefined;
+    label?: string | undefined;
+    value?: string | undefined;
+    additionalValue?: string | undefined;
+    additionalLabel?: string | undefined;
+    info?: boolean | undefined;
+    error?: boolean | undefined;
+    warning?: boolean | undefined;
+    success?: boolean | undefined;
+    center?: boolean | undefined;
+    solid?: boolean | undefined;
+}): JSX.Element;
+declare namespace RibbonCard {
+    var propTypes: {
+        /** props to inject to wrapper */
+        containerProps: any;
+        /** icon for ribbon card */
+        icon: any;
+        /** label for ribbon card */
+        label: any;
+        /** value for ribbon */
+        value: any;
+        /** additional value */
+        additionalValue: any;
+        /** additional label */
+        additionalLabel: any;
+        /** for main label */
+        info: any;
+        /** error state toggle */
+        error: any;
+        /** warning state toggle */
+        warning: any;
+        /** success state toggle */
+        success: any;
+        /** align center */
+        center: any;
+        /** solid style */
+        solid: any;
+    };
+}
+declare const DSRibbon: {
+    RibbonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+    RibbonRow: any;
+    RibbonCol: any;
+    RibbonCard: typeof RibbonCard;
+};
+declare const DSRibbonCardWithSchema: any;
+export default DSRibbon;
+export { DSRibbonCardWithSchema };

package/types/index.d.ts

@@ -0,0 +1 @@
+export { default, DSRibbonCardWithSchema } from './DSRibbon';

package/DSRibbon/package.json

@@ -1,10 +0,0 @@
-{
-  "name": "@elliemae/ds-ribbon/DSRibbon",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
-  "private": true,
-  "main": "../cjs/DSRibbon.js",
-  "module": "../esm/DSRibbon.js"
-}

package/cjs/DSRibbon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DSRibbon.js","sources":["../../src/DSRibbon.tsx"],"sourcesContent":["/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\n\nconst RibbonRow = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 4rem;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: 5rem;\n    overflow-y: hidden;\n  }\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  ${(props) => {\n    if (props.alignLeft) {\n      return `\n      align-items: stretch;\n      & > ${RibbonCol} {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      `;\n    }\n    return `\n      // flex:1;\n      align-items: center;\n      `;\n  }};\n  ${(props) => {\n    if (props.solid) {\n      return `\n      & > ${RibbonCol} {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n`;\n\nconst RibbonCol = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 0.25rem 0.5rem;\n  height: 100%;\n  justify-content: center;\n  flex: 1;\n  position: relative;\n  &:after {\n    position: absolute;\n    top: 10%;\n    right: 0;\n    height: 80%;\n    content: '';\n    border-right: dashed 1px #ebedf0;\n  }\n  & > ${RibbonRow} {\n    align-items: flex-start;\n  }\n`;\n\nconst RibbonWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0.62rem 1.22rem;\n  border-bottom: solid 1px #cfcfd7;\n  background: #fff;\n  & > ${RibbonRow} {\n    border-bottom: solid 1px #ebedf0;\n    width: auto;\n    &:last-child {\n      border: none;\n    }\n    & > ${RibbonCol} {\n      &:last-child {\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n`;\n\n/* eslint-disable indent */\nconst RibbonBlockIcon = styled.div`\n  padding-right: 0.5rem;\n  padding-top: 0.1rem;\n  svg,\n  svg:not([fill]) {\n    fill: ${(props) => {\n      if (props.info) return '#1e79c2';\n      if (props.error) return '#E34256';\n      if (props.warning) return '#FBB431';\n      if (props.success) return '#32B87C';\n      return '#1e79c2';\n    }};\n  }\n`;\n/* eslint-enable indent */\n\nconst RibbonBlockLabel = styled.div`\n  padding: 0.25rem 0.5rem;\n  color: #697489;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n`;\nconst RibbonBlockValue = styled.div`\n  flex: 2;\n  font-weight: bold;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 1.1rem;\n  color: #333333;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n`;\nconst RibbonBlockValueLabel = styled.div`\n  flex: 2;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 0.9rem;\n  color: #697489;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n`;\n\nconst RibbonBlockCol = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  flex-wrap: nowrap;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n  height: 100%;\n`;\nconst RibbonBlockRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  flex: 1;\n  height: 100%;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n`;\nconst RibbonBlock = styled.div`\n  flex: 1;\n  height: 100%;\n`;\n\nfunction RibbonCard({\n  containerProps = {},\n  icon = null,\n  label = '',\n  value = '',\n  additionalValue = '',\n  additionalLabel = '',\n  info = false,\n  error = false,\n  warning = false,\n  success = false,\n  center = false,\n  solid = false,\n}) {\n  const labelPlace = icon ? (\n    <RibbonBlockIcon\n      error={error}\n      info={info}\n      success={success}\n      warning={warning}\n    >\n      {icon}\n    </RibbonBlockIcon>\n  ) : (\n    <RibbonBlockLabel>{label}</RibbonBlockLabel>\n  );\n  if (additionalValue || additionalLabel) {\n    let additionalInformation;\n    if (additionalValue) {\n      additionalInformation = additionalValue && (\n        <RibbonBlockValue>{additionalValue}</RibbonBlockValue>\n      );\n    } else if (additionalLabel) {\n      additionalInformation = additionalLabel && (\n        <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>\n      );\n    }\n    return (\n      <RibbonBlock {...containerProps}>\n        <RibbonBlockRow\n          className=\"ribbon-block-row\"\n          solid={solid}\n          style={{ alignItems: 'flex-start' }}\n        >\n          {labelPlace}\n          <RibbonBlockCol center={center} className=\"ribbon-block-col\">\n            <RibbonBlockValue>{value}</RibbonBlockValue>\n            {additionalInformation}\n          </RibbonBlockCol>\n        </RibbonBlockRow>\n      </RibbonBlock>\n    );\n  }\n\n  return (\n    <RibbonBlock {...containerProps}>\n      <RibbonBlockRow center={center} solid={solid}>\n        {labelPlace}\n        <RibbonBlockValue>{value}</RibbonBlockValue>\n      </RibbonBlockRow>\n    </RibbonBlock>\n  );\n}\n\nconst DSRibbon = {\n  RibbonWrapper,\n  RibbonRow,\n  RibbonCol,\n  RibbonCard,\n};\n\nRibbonWrapper.propTypes = {};\n\nRibbonRow.propTypes = {\n  /** align left */\n  alignLeft: PropTypes.bool.description('align left'),\n};\n\nRibbonCol.propTypes = {};\n\nconst cardprops = {\n  /** props to inject to wrapper */\n  containerProps: PropTypes.object.description('props to inject to wrapper'),\n  /** icon for ribbon card */\n  icon: PropTypes.element.description('icon for ribbon card'),\n  /** label for ribbon card */\n  label: PropTypes.string.description('label for ribbon card'),\n  /** value for ribbon */\n  value: PropTypes.string.description('value for ribbon'),\n  /** additional value */\n  additionalValue: PropTypes.string.description('additional value'),\n  /** additional label */\n  additionalLabel: PropTypes.string.description('additional label'),\n  /** for main label */\n  info: PropTypes.bool.description('for main label'),\n  /** error state toggle */\n  error: PropTypes.bool.description('error state toggle'),\n  /** warning state toggle */\n  warning: PropTypes.bool.description('warning state toggle'),\n  /** success state toggle */\n  success: PropTypes.bool.description('success state toggle'),\n  /** align center */\n  center: PropTypes.bool.description('align center'),\n  /** solid style */\n  solid: PropTypes.bool.description('solid style'),\n};\n\nRibbonCard.propTypes = cardprops;\n\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema };\n"],"names":["RibbonRow","styled","div","props","alignLeft","RibbonCol","solid","RibbonWrapper","RibbonBlockIcon","info","error","warning","success","RibbonBlockLabel","RibbonBlockValue","RibbonBlockValueLabel","RibbonBlockCol","center","RibbonBlockRow","RibbonBlock","RibbonCard","containerProps","icon","label","value","additionalValue","additionalLabel","labelPlace","React","additionalInformation","alignItems","DSRibbon","propTypes","PropTypes","bool","description","cardprops","object","element","string","DSRibbonCardWithSchema","describe"],"mappings":"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"}

package/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/DSRibbon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DSRibbon.js","sources":["../../src/DSRibbon.tsx"],"sourcesContent":["/* eslint-disable max-lines */\n/* eslint-disable no-use-before-define */\n/* eslint-disable no-confusing-arrow */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\n\nconst RibbonRow = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 4rem;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: 5rem;\n    overflow-y: hidden;\n  }\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  ${(props) => {\n    if (props.alignLeft) {\n      return `\n      align-items: stretch;\n      & > ${RibbonCol} {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      `;\n    }\n    return `\n      // flex:1;\n      align-items: center;\n      `;\n  }};\n  ${(props) => {\n    if (props.solid) {\n      return `\n      & > ${RibbonCol} {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n`;\n\nconst RibbonCol = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 0.25rem 0.5rem;\n  height: 100%;\n  justify-content: center;\n  flex: 1;\n  position: relative;\n  &:after {\n    position: absolute;\n    top: 10%;\n    right: 0;\n    height: 80%;\n    content: '';\n    border-right: dashed 1px #ebedf0;\n  }\n  & > ${RibbonRow} {\n    align-items: flex-start;\n  }\n`;\n\nconst RibbonWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding: 0.62rem 1.22rem;\n  border-bottom: solid 1px #cfcfd7;\n  background: #fff;\n  & > ${RibbonRow} {\n    border-bottom: solid 1px #ebedf0;\n    width: auto;\n    &:last-child {\n      border: none;\n    }\n    & > ${RibbonCol} {\n      &:last-child {\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n`;\n\n/* eslint-disable indent */\nconst RibbonBlockIcon = styled.div`\n  padding-right: 0.5rem;\n  padding-top: 0.1rem;\n  svg,\n  svg:not([fill]) {\n    fill: ${(props) => {\n      if (props.info) return '#1e79c2';\n      if (props.error) return '#E34256';\n      if (props.warning) return '#FBB431';\n      if (props.success) return '#32B87C';\n      return '#1e79c2';\n    }};\n  }\n`;\n/* eslint-enable indent */\n\nconst RibbonBlockLabel = styled.div`\n  padding: 0.25rem 0.5rem;\n  color: #697489;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n`;\nconst RibbonBlockValue = styled.div`\n  flex: 2;\n  font-weight: bold;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 1.1rem;\n  color: #333333;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n`;\nconst RibbonBlockValueLabel = styled.div`\n  flex: 2;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 0.9rem;\n  color: #697489;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n`;\n\nconst RibbonBlockCol = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  flex-wrap: nowrap;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n  height: 100%;\n`;\nconst RibbonBlockRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  flex: 1;\n  height: 100%;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n`;\nconst RibbonBlock = styled.div`\n  flex: 1;\n  height: 100%;\n`;\n\nfunction RibbonCard({\n  containerProps = {},\n  icon = null,\n  label = '',\n  value = '',\n  additionalValue = '',\n  additionalLabel = '',\n  info = false,\n  error = false,\n  warning = false,\n  success = false,\n  center = false,\n  solid = false,\n}) {\n  const labelPlace = icon ? (\n    <RibbonBlockIcon\n      error={error}\n      info={info}\n      success={success}\n      warning={warning}\n    >\n      {icon}\n    </RibbonBlockIcon>\n  ) : (\n    <RibbonBlockLabel>{label}</RibbonBlockLabel>\n  );\n  if (additionalValue || additionalLabel) {\n    let additionalInformation;\n    if (additionalValue) {\n      additionalInformation = additionalValue && (\n        <RibbonBlockValue>{additionalValue}</RibbonBlockValue>\n      );\n    } else if (additionalLabel) {\n      additionalInformation = additionalLabel && (\n        <RibbonBlockValueLabel>{additionalLabel}</RibbonBlockValueLabel>\n      );\n    }\n    return (\n      <RibbonBlock {...containerProps}>\n        <RibbonBlockRow\n          className=\"ribbon-block-row\"\n          solid={solid}\n          style={{ alignItems: 'flex-start' }}\n        >\n          {labelPlace}\n          <RibbonBlockCol center={center} className=\"ribbon-block-col\">\n            <RibbonBlockValue>{value}</RibbonBlockValue>\n            {additionalInformation}\n          </RibbonBlockCol>\n        </RibbonBlockRow>\n      </RibbonBlock>\n    );\n  }\n\n  return (\n    <RibbonBlock {...containerProps}>\n      <RibbonBlockRow center={center} solid={solid}>\n        {labelPlace}\n        <RibbonBlockValue>{value}</RibbonBlockValue>\n      </RibbonBlockRow>\n    </RibbonBlock>\n  );\n}\n\nconst DSRibbon = {\n  RibbonWrapper,\n  RibbonRow,\n  RibbonCol,\n  RibbonCard,\n};\n\nRibbonWrapper.propTypes = {};\n\nRibbonRow.propTypes = {\n  /** align left */\n  alignLeft: PropTypes.bool.description('align left'),\n};\n\nRibbonCol.propTypes = {};\n\nconst cardprops = {\n  /** props to inject to wrapper */\n  containerProps: PropTypes.object.description('props to inject to wrapper'),\n  /** icon for ribbon card */\n  icon: PropTypes.element.description('icon for ribbon card'),\n  /** label for ribbon card */\n  label: PropTypes.string.description('label for ribbon card'),\n  /** value for ribbon */\n  value: PropTypes.string.description('value for ribbon'),\n  /** additional value */\n  additionalValue: PropTypes.string.description('additional value'),\n  /** additional label */\n  additionalLabel: PropTypes.string.description('additional label'),\n  /** for main label */\n  info: PropTypes.bool.description('for main label'),\n  /** error state toggle */\n  error: PropTypes.bool.description('error state toggle'),\n  /** warning state toggle */\n  warning: PropTypes.bool.description('warning state toggle'),\n  /** success state toggle */\n  success: PropTypes.bool.description('success state toggle'),\n  /** align center */\n  center: PropTypes.bool.description('align center'),\n  /** solid style */\n  solid: PropTypes.bool.description('solid style'),\n};\n\nRibbonCard.propTypes = cardprops;\n\nconst DSRibbonCardWithSchema = describe(RibbonCard);\nDSRibbonCardWithSchema.propTypes = cardprops;\n\nexport default DSRibbon;\nexport { DSRibbonCardWithSchema };\n"],"names":["RibbonRow","styled","div","props","alignLeft","RibbonCol","solid","RibbonWrapper","RibbonBlockIcon","info","error","warning","success","RibbonBlockLabel","RibbonBlockValue","RibbonBlockValueLabel","RibbonBlockCol","center","RibbonBlockRow","RibbonBlock","RibbonCard","containerProps","icon","label","value","additionalValue","additionalLabel","labelPlace","additionalInformation","alignItems","DSRibbon","propTypes","PropTypes","bool","description","cardprops","object","element","string","DSRibbonCardWithSchema","describe"],"mappings":"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"}

package/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}