beem-component 2.0.27 → 2.1.0

package/dist/components/Chats/chat.js

@@ -9,50 +9,52 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
-var _excluded = ["children", "displayTime", "type", "size", "color", "status"],
+const _excluded = ["children", "displayTime", "type", "size", "color", "status"],
   _excluded2 = ["children", "displayTime", "type"],
   _excluded3 = ["children", "displayTime", "type"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var BmChatWrapper = _styledComponents.default.div.withConfig({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const BmChatWrapper = exports.BmChatWrapper = _styledComponents.default.div.withConfig({
   displayName: "chat__BmChatWrapper"
-})(["display:flex;flex-direction:row;align-items:center;padding:1.143rem;background:", ";border:0.071rem solid ", ";border-radius:0.25rem 0.21875rem 0.21875rem 0rem;max-width:50%;overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;"], function (_ref) {
-  var type = _ref.type;
+})(["display:flex;flex-direction:row;align-items:center;padding:1.143rem;background:", ";border:0.071rem solid ", ";border-radius:0.25rem 0.21875rem 0.21875rem 0rem;max-width:50%;overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;"], _ref => {
+  let {
+    type
+  } = _ref;
   if (type) {
     if (type === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (type === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey400);
-exports.BmChatWrapper = BmChatWrapper;
-var BmChatText = _styledComponents.default.p.withConfig({
+const BmChatText = exports.BmChatText = _styledComponents.default.p.withConfig({
   displayName: "chat__BmChatText"
-})(["overflow-wrap:break-word;word-wrap:break-word;max-width:100%;color:", ";"], function (_ref2) {
-  var type = _ref2.type;
+})(["overflow-wrap:break-word;word-wrap:break-word;max-width:100%;color:", ";"], _ref2 => {
+  let {
+    type
+  } = _ref2;
   if (type) {
     if (type === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (type === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryBlack);
 });
-exports.BmChatText = BmChatText;
-var BmDisplayTime = _styledComponents.default.p.withConfig({
+const BmDisplayTime = exports.BmDisplayTime = _styledComponents.default.p.withConfig({
   displayName: "chat__BmDisplayTime"
 })(["color:", ";padding-top:0.571rem !important;padding-bottom:1.143rem;"], _colors.BmPrimaryBlack);
-exports.BmDisplayTime = BmDisplayTime;
-var BmDisplay = _styledComponents.default.div.withConfig({
+const BmDisplay = exports.BmDisplay = _styledComponents.default.div.withConfig({
   displayName: "chat__BmDisplay"
 })(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;", "{margin-left:0.5rem;}"], BmDisplayTime);
-exports.BmDisplay = BmDisplay;
-var BmUserChat = function BmUserChat(_ref3) {
-  var children = _ref3.children,
-    displayTime = _ref3.displayTime,
-    type = _ref3.type,
-    size = _ref3.size,
-    color = _ref3.color,
-    status = _ref3.status,
+const BmUserChat = _ref3 => {
+  let {
+      children,
+      displayTime,
+      type,
+      size,
+      color,
+      status
+    } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmChatWrapper, _extends({}, rest, {
     type: type
@@ -71,43 +73,48 @@ var BmUserChat = function BmUserChat(_ref3) {
 
 // File Attachments
 exports.BmUserChat = BmUserChat;
-var BmFileWrapper = _styledComponents.default.div.withConfig({
+const BmFileWrapper = exports.BmFileWrapper = _styledComponents.default.div.withConfig({
   displayName: "chat__BmFileWrapper"
-})(["display:flex;flex-direction:row;align-items:center;padding:1.143rem;background:", ";border:0.071rem solid ", ";border-radius:3.357rem 3.357rem 3.357rem 0rem;max-width:50%;align-items:center;overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;"], function (_ref4) {
-  var type = _ref4.type;
+})(["display:flex;flex-direction:row;align-items:center;padding:1.143rem;background:", ";border:0.071rem solid ", ";border-radius:3.357rem 3.357rem 3.357rem 0rem;max-width:50%;align-items:center;overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;"], _ref4 => {
+  let {
+    type
+  } = _ref4;
   if (type) {
     if (type === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (type === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey400);
-exports.BmFileWrapper = BmFileWrapper;
-var BmFileText = _styledComponents.default.p.withConfig({
+const BmFileText = exports.BmFileText = _styledComponents.default.p.withConfig({
   displayName: "chat__BmFileText"
-})(["overflow-wrap:break-word;word-wrap:break-word;max-width:100%;color:", ";margin:0rem 1rem 0rem 0.5rem;flex-grow:1;"], function (_ref5) {
-  var type = _ref5.type;
+})(["overflow-wrap:break-word;word-wrap:break-word;max-width:100%;color:", ";margin:0rem 1rem 0rem 0.5rem;flex-grow:1;"], _ref5 => {
+  let {
+    type
+  } = _ref5;
   if (type) {
     if (type === 'inbound') return "".concat(_colors.BmPrimaryBlue);
     if (type === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryBlue);
 });
-exports.BmFileText = BmFileText;
-var FileIcons = (0, _styledComponents.default)(_iconStyles.BmIcons).withConfig({
+const FileIcons = exports.FileIcons = (0, _styledComponents.default)(_iconStyles.BmIcons).withConfig({
   displayName: "chat__FileIcons"
-})(["color:", ";"], function (_ref6) {
-  var type = _ref6.type;
+})(["color:", ";"], _ref6 => {
+  let {
+    type
+  } = _ref6;
   if (type) {
     if (type === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (type === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryBlack);
 });
-exports.FileIcons = FileIcons;
-var BmFileChat = function BmFileChat(_ref7) {
-  var children = _ref7.children,
-    displayTime = _ref7.displayTime,
-    type = _ref7.type,
+const BmFileChat = _ref7 => {
+  let {
+      children,
+      displayTime,
+      type
+    } = _ref7,
     rest = _objectWithoutProperties(_ref7, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmFileWrapper, _extends({
     type: type
@@ -122,22 +129,21 @@ var BmFileChat = function BmFileChat(_ref7) {
   })), displayTime && /*#__PURE__*/_react.default.createElement(BmDisplayTime, rest, displayTime));
 };
 exports.BmFileChat = BmFileChat;
-var BmImageWrapper = _styledComponents.default.div.withConfig({
+const BmImageWrapper = exports.BmImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "chat__BmImageWrapper"
 })(["background:", ";border:0.071rem solid ", ";border-radius:0.25rem 0.21875rem 0rem 0.21875rem;display:flex;flex-direction:column;max-width:50%;max-height:50%;"], _colors.BmGrey100, _colors.BmGrey400);
-exports.BmImageWrapper = BmImageWrapper;
-var BmImage = _styledComponents.default.img.withConfig({
+const BmImage = exports.BmImage = _styledComponents.default.img.withConfig({
   displayName: "chat__BmImage"
 })(["width:100%;", " object-fit:cover;flex-grow:1;"], '' /* height: 100%; */);
-exports.BmImage = BmImage;
-var BmImageFileName = (0, _styledComponents.default)(BmFileChat).withConfig({
+const BmImageFileName = exports.BmImageFileName = (0, _styledComponents.default)(BmFileChat).withConfig({
   displayName: "chat__BmImageFileName"
 })(["padding:0.5rem 1rem;max-width:100%;border:none;border-top:0.071rem solid ", ";border-radius:0rem;display:flex;"], _colors.BmSecondaryGrey);
-exports.BmImageFileName = BmImageFileName;
-var BmImageChat = function BmImageChat(_ref8) {
-  var children = _ref8.children,
-    displayTime = _ref8.displayTime,
-    type = _ref8.type,
+const BmImageChat = _ref8 => {
+  let {
+      children,
+      displayTime,
+      type
+    } = _ref8,
     rest = _objectWithoutProperties(_ref8, _excluded3);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({}, rest, {
     type: type

package/dist/components/Chats/chatInput.js

@@ -10,22 +10,19 @@ var _icons = require("@material-ui/icons");
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
 var _input = require("../input");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 // Main wrapper
-var BmMessageTab = _styledComponents.default.div.withConfig({
+const BmMessageTab = exports.BmMessageTab = _styledComponents.default.div.withConfig({
   displayName: "chatInput__BmMessageTab"
 })(["display:flex;flex-direction:row;justify-content:center;align-items:center;", " background:", ";padding:0.786rem 1.786rem !important;"], '' /* height: 15%; */, _colors.BmGrey50);
-exports.BmMessageTab = BmMessageTab;
-var BmMessageTabInput = (0, _styledComponents.default)(_input.BmInputField).withConfig({
+const BmMessageTabInput = exports.BmMessageTabInput = (0, _styledComponents.default)(_input.BmInputField).withConfig({
   displayName: "chatInput__BmMessageTabInput"
 })(["color:", ";flex-grow:1;padding:0rem !important;border:none !important;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none !important;}max-width:100%;"], _colors.BmSecondaryGrey);
-exports.BmMessageTabInput = BmMessageTabInput;
-var BmSendIconWrapper = _styledComponents.default.div.withConfig({
+const BmSendIconWrapper = exports.BmSendIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatInput__BmSendIconWrapper"
 })(["padding-left:1.429rem;"]);
-exports.BmSendIconWrapper = BmSendIconWrapper;
-var BmSend = function BmSend(props) {
+const BmSend = props => {
   return /*#__PURE__*/_react.default.createElement(BmSendIconWrapper, null, /*#__PURE__*/_react.default.createElement(_iconStyles.BmEmojiIcon, _extends({
     icon: /*#__PURE__*/_react.default.createElement(_icons.Send, null)
   }, props)));
@@ -33,13 +30,11 @@ var BmSend = function BmSend(props) {
 
 // Div for attachments
 exports.BmSend = BmSend;
-var BmAttachment = (0, _styledComponents.default)('div').withConfig({
+const BmAttachment = exports.BmAttachment = (0, _styledComponents.default)('div').withConfig({
   displayName: "chatInput__BmAttachment"
 })(["justify-content:center;padding-right:1.143rem !important;"]);
 
 // Div for message input
-exports.BmAttachment = BmAttachment;
-var BmMessage = (0, _styledComponents.default)('div').withConfig({
+const BmMessage = exports.BmMessage = (0, _styledComponents.default)('div').withConfig({
   displayName: "chatInput__BmMessage"
-})(["display:flex;flex-direction:row;align-items:center;padding:0.714rem 1.143rem !important;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;flex-grow:1;max-width:75%;"], _colors.BmPrimaryWhite, _colors.BmGrey400);
-exports.BmMessage = BmMessage;
+})(["display:flex;flex-direction:row;align-items:center;padding:0.714rem 1.143rem !important;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;flex-grow:1;max-width:75%;"], _colors.BmPrimaryWhite, _colors.BmGrey400);

package/dist/components/Chats/chatwrapper.js

@@ -6,35 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.MessageOut = exports.MessageIn = exports.MainWrapper = exports.Main = exports.BmChatMenu = exports.BmChat = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../colors");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Main wrapper
-var Main = _styledComponents.default.div.withConfig({
+const Main = exports.Main = _styledComponents.default.div.withConfig({
   displayName: "chatwrapper__Main"
 })(["display:flex;flex-direction:row;align-item:center;", " max-height:calc(100vh - 12.857rem);height:calc(100vh - 12.857rem);max-width:100%;width:100%;"], '' /* justify-content: space-between; */);
 
 // Main Chat Wrapper
-exports.Main = Main;
-var BmChat = _styledComponents.default.div.withConfig({
+const BmChat = exports.BmChat = _styledComponents.default.div.withConfig({
   displayName: "chatwrapper__BmChat"
 })(["background:", ";display:flex;flex-direction:column;", " border-top:0.0625rem solid ", ";border-bottom:0.0625rem solid ", ";max-width:70%;width:70%;max-height:100%;height:100%;"], _colors.BmBgGreyBlue, '' /* flex-grow: 1; */, _colors.BmGrey400, _colors.BmGrey400);
-exports.BmChat = BmChat;
-var BmChatMenu = _styledComponents.default.div.withConfig({
+const BmChatMenu = exports.BmChatMenu = _styledComponents.default.div.withConfig({
   displayName: "chatwrapper__BmChatMenu"
 })(["display:flex;padding:1.5rem !important;flex-grow:1;height:100%;max-height:100%;overflow:auto;flex-direction:column-reverse;", ""], '' /* border: 0.714rem solid yellow; */);
 
 // Incoming message
-exports.BmChatMenu = BmChatMenu;
-var MessageIn = _styledComponents.default.div.withConfig({
+const MessageIn = exports.MessageIn = _styledComponents.default.div.withConfig({
   displayName: "chatwrapper__MessageIn"
 })(["display:flex;align-items:flex-start;flex-direction:column;padding:0.5rem 0rem !important;"]);
 
 // Outgoing message
-exports.MessageIn = MessageIn;
-var MessageOut = _styledComponents.default.div.withConfig({
+const MessageOut = exports.MessageOut = _styledComponents.default.div.withConfig({
   displayName: "chatwrapper__MessageOut"
 })(["display:flex;align-items:flex-end;flex-direction:column;padding:0.5rem 0rem !important;"]);
-exports.MessageOut = MessageOut;
-var MainWrapper = _styledComponents.default.div.withConfig({
+const MainWrapper = exports.MainWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatwrapper__MainWrapper"
-})(["padding:2.1875rem;background-color:", ";"], _colors.BmBgGreyBlue);
-exports.MainWrapper = MainWrapper;
+})(["padding:2.1875rem;background-color:", ";"], _colors.BmBgGreyBlue);

package/dist/components/Checkbox/checkboxToggler.js

@@ -8,31 +8,33 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../colors");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var CheckBoxWrapper = _styledComponents.default.div.withConfig({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CheckBoxWrapper = _styledComponents.default.div.withConfig({
   displayName: "checkboxToggler__CheckBoxWrapper"
 })(["position:relative;align-items:center;display:flex;flex-direction:row;> *:not(:last-child){margin-right:0.5rem;}"]);
-var CheckBoxLabel = _styledComponents.default.label.withConfig({
+const CheckBoxLabel = _styledComponents.default.label.withConfig({
   displayName: "checkboxToggler__CheckBoxLabel"
-})(["align-items:center;display:flex;position:relative;width:3rem;height:1.25rem;border-radius:1.25rem;background:", ";cursor:pointer;&::after{content:'';display:block;border-radius:100%;width:1.75rem;height:1.75rem;background:", ";transition:0.2s;}"], function (props) {
-  return props.disabled ? _colors.BmGrey400 : _colors.BmBgGrey38;
-}, _colors.BmGrey200);
-var Label = _styledComponents.default.label.withConfig({
+})(["align-items:center;display:flex;position:relative;width:3rem;height:1.25rem;border-radius:1.25rem;background:", ";cursor:pointer;&::after{content:'';display:block;border-radius:100%;width:1.75rem;height:1.75rem;background:", ";transition:0.2s;}"], props => props.disabled ? _colors.BmGrey400 : _colors.BmBgGrey38, _colors.BmGrey200);
+const Label = _styledComponents.default.label.withConfig({
   displayName: "checkboxToggler__Label"
 })(["align-items:center;display:flex;position:relative;"]);
-var CheckBox = _styledComponents.default.input.withConfig({
+const CheckBox = _styledComponents.default.input.withConfig({
   displayName: "checkboxToggler__CheckBox"
-})(["opacity:0;z-index:1;", "}"], function (_ref) {
-  var checked = _ref.checked,
-    disabled = _ref.disabled;
+})(["opacity:0;z-index:1;", "}"], _ref => {
+  let {
+    checked,
+    disabled
+  } = _ref;
   return !disabled && checked !== undefined && checked === true && "\n      &:checked + ".concat(CheckBoxLabel, " {\n        background: ").concat(_colors.BmSecondaryDarkGreen, ";\n        &::after {\n          content: '';\n          display: block;\n          width: 1.75rem;\n          height: 1.75rem;\n          margin-left: 1.25rem;\n          transition: 0.2s;\n        }  ");
 });
-var BmCheckboxToggle = function BmCheckboxToggle(_ref2) {
-  var checked = _ref2.checked,
-    _onChange = _ref2.onChange,
-    disabled = _ref2.disabled,
-    label = _ref2.label,
-    hidden = _ref2.hidden;
+const BmCheckboxToggle = _ref2 => {
+  let {
+    checked,
+    onChange,
+    disabled,
+    label,
+    hidden
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(CheckBoxWrapper, null, hidden ? null : /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: label,
     disabled: disabled
@@ -40,9 +42,7 @@ var BmCheckboxToggle = function BmCheckboxToggle(_ref2) {
     id: label || 'checkbox',
     type: "checkbox",
     checked: checked,
-    onChange: function onChange() {
-      return _onChange && _onChange(!checked);
-    },
+    onChange: () => onChange && onChange(!checked),
     disabled: disabled,
     hidden: true
   }), /*#__PURE__*/_react.default.createElement(CheckBoxLabel, {

package/dist/components/Checkbox/checkboxToggler.stories.js

@@ -1,21 +1,14 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.hiddenToggleLabel = exports.default = exports.Sample = exports.DisabledToggler = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _checkboxToggler = require("./checkboxToggler");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var _default = {
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* eslint-disable import/no-anonymous-default-export */
+var _default = exports.default = {
   component: _checkboxToggler.BmCheckboxToggle,
   title: 'components/CheckboxToggler',
   argTypes: {
@@ -45,47 +38,31 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var Sample = function Sample() {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    checked = _useState2[0],
-    setChecked = _useState2[1];
+const Sample = () => {
+  const [checked, setChecked] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_checkboxToggler.BmCheckboxToggle, {
     checked: checked,
-    onChange: function onChange() {
-      return setChecked(!checked);
-    },
+    onChange: () => setChecked(!checked),
     label: /*#__PURE__*/_react.default.createElement("h4", null, "Field Label")
   });
 };
 exports.Sample = Sample;
-var DisabledToggler = function DisabledToggler() {
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    checked = _useState4[0],
-    setChecked = _useState4[1];
+const DisabledToggler = () => {
+  const [checked, setChecked] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_checkboxToggler.BmCheckboxToggle, {
     checked: checked,
-    onChange: function onChange() {
-      return setChecked(!checked);
-    },
+    onChange: () => setChecked(!checked),
     label: /*#__PURE__*/_react.default.createElement("h4", null, "Field Label"),
     disabled: true
   });
 };
 exports.DisabledToggler = DisabledToggler;
-var hiddenToggleLabel = function hiddenToggleLabel() {
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    checked = _useState6[0],
-    setChecked = _useState6[1];
+const hiddenToggleLabel = () => {
+  const [checked, setChecked] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_checkboxToggler.BmCheckboxToggle, {
     hidden: true,
     checked: checked,
-    onChange: function onChange() {
-      return setChecked(!checked);
-    },
+    onChange: () => setChecked(!checked),
     label: /*#__PURE__*/_react.default.createElement("h4", null, "Field Label")
   });
 };

package/dist/components/InfoPanel/InfoPanel.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const hexToRgba = function (hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;
+  try {
+    const normalizedHex = hex === null || hex === void 0 ? void 0 : hex.replace('#', '');
+    if (!normalizedHex || normalizedHex.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(normalizedHex)) {
+      throw new Error('Invalid hex');
+    }
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  } catch (e) {
+    return "rgba(0, 0, 0, ".concat(opacity, ")");
+  }
+};
+const Panel = _styledComponents.default.div.withConfig({
+  displayName: "InfoPanel__Panel"
+})(["border:0.0714rem solid rgba(51,177,186,0.1);border-radius:0.5rem;overflow:hidden;"]);
+const SectionSummaryContainer = _styledComponents.default.div.withConfig({
+  displayName: "InfoPanel__SectionSummaryContainer"
+})(["display:flex;align-items:center;margin-bottom:1rem;@media (min-width:45.7143rem){margin-bottom:1.25rem;}"]);
+const IconBox = _styledComponents.default.div.withConfig({
+  displayName: "InfoPanel__IconBox"
+})(["display:flex;align-items:center;justify-content:center;text-align:center;margin-right:0.5rem;padding:0.5rem;border-radius:714.2143rem;background-color:", ";svg{height:1.2rem;width:1.2rem;color:", ";@media (min-width:45.7143rem){height:1.5rem;width:1.5rem;}}"], _ref => {
+  let {
+    iconBackgroundColor,
+    iconColor
+  } = _ref;
+  return iconBackgroundColor && hexToRgba(iconColor, 0.1);
+}, _ref2 => {
+  let {
+    iconColor
+  } = _ref2;
+  return iconColor || '#00000';
+});
+const TextBox = _styledComponents.default.div.withConfig({
+  displayName: "InfoPanel__TextBox"
+})(["display:flex;flex-direction:column;"]);
+const SummaryTitle = _styledComponents.default.p.withConfig({
+  displayName: "InfoPanel__SummaryTitle"
+})(["font-weight:500;margin:0;color:", ";"], _ref3 => {
+  let {
+    textColor
+  } = _ref3;
+  return textColor || '#00000';
+});
+const SummarySubtitle = _styledComponents.default.p.withConfig({
+  displayName: "InfoPanel__SummarySubtitle"
+})(["font-size:0.75rem;color:", ";margin:0;@media (min-width:45.7143rem){font-size:0.875rem;}"], _ref4 => {
+  let {
+    textColor
+  } = _ref4;
+  return hexToRgba(textColor || '#000000', 0.6);
+});
+const SectionContainer = _styledComponents.default.div.withConfig({
+  displayName: "InfoPanel__SectionContainer"
+})(["padding:0.75rem 1rem;display:flex;align-items:center;gap:0.5rem;", " @media (max-width:42.8571rem){padding:0.5rem 0.75rem;gap:0.25rem;}"], _ref5 => {
+  let {
+    backgroundColor
+  } = _ref5;
+  return backgroundColor && "\n    background-color: ".concat(hexToRgba(backgroundColor, 0.05), ";\n  ");
+});
+const SectionTitle = _styledComponents.default.h3.withConfig({
+  displayName: "InfoPanel__SectionTitle"
+})(["font-size:1.1rem;font-weight:500;display:flex;align-items:center;margin:0;@media (max-width:42.8571rem){font-size:0.9rem;}"]);
+const SectionBody = _styledComponents.default.div.withConfig({
+  displayName: "InfoPanel__SectionBody"
+})(["padding:1rem;display:flex;flex-direction:column;gap:0.5rem;@media (max-width:42.8571rem){padding:0.75rem;gap:0.4rem;}"]);
+const RowContainer = _styledComponents.default.div.withConfig({
+  displayName: "InfoPanel__RowContainer"
+})(["display:flex;justify-content:space-between;font-size:0.875rem;align-items:center;@media (max-width:42.8571rem){font-size:0.8rem;}"]);
+const Label = _styledComponents.default.span.withConfig({
+  displayName: "InfoPanel__Label"
+})(["color:rgba(0,0,0,0.6);@media (max-width:42.8571rem){font-size:0.75rem;}"]);
+const Value = _styledComponents.default.span.withConfig({
+  displayName: "InfoPanel__Value"
+})(["font-weight:500;@media (max-width:42.8571rem){font-size:0.75rem;}"]);
+const Divider = _styledComponents.default.hr.withConfig({
+  displayName: "InfoPanel__Divider"
+})(["border:none;border-top:0.0714rem dashed rgba(51,177,186,0.2);margin:1rem auto;max-width:97%;@media (max-width:42.8571rem){margin:0.75rem auto;max-width:97%;}"]);
+const SectionSummary = _ref6 => {
+  let {
+    icon: Icon,
+    title,
+    iconColor,
+    textColor,
+    subtitle,
+    iconBackgroundColor
+  } = _ref6;
+  return /*#__PURE__*/_react.default.createElement(SectionSummaryContainer, null, Icon && /*#__PURE__*/_react.default.createElement(IconBox, {
+    iconColor: iconColor,
+    iconBackgroundColor: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(TextBox, null, /*#__PURE__*/_react.default.createElement(SummaryTitle, {
+    textColor: textColor
+  }, title), /*#__PURE__*/_react.default.createElement(SummarySubtitle, {
+    textColor: textColor
+  }, subtitle)));
+};
+const BmInfoPanel = _ref7 => {
+  let {
+    children
+  } = _ref7;
+  return /*#__PURE__*/_react.default.createElement(Panel, null, children);
+};
+const Section = _ref8 => {
+  let {
+    title,
+    icon: Icon,
+    children,
+    showDivider,
+    backgroundColor,
+    iconColor,
+    iconBackgroundColor
+  } = _ref8;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDivider && /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(SectionContainer, {
+    backgroundColor: backgroundColor
+  }, Icon && /*#__PURE__*/_react.default.createElement(IconBox, {
+    iconColor: iconColor,
+    iconBackgroundColor: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(SectionTitle, null, title)), /*#__PURE__*/_react.default.createElement(SectionBody, null, children));
+};
+const Row = _ref9 => {
+  let {
+    label,
+    value
+  } = _ref9;
+  return /*#__PURE__*/_react.default.createElement(RowContainer, null, /*#__PURE__*/_react.default.createElement(Label, null, label, ":"), /*#__PURE__*/_react.default.createElement(Value, null, value));
+};
+BmInfoPanel.Section = Section;
+BmInfoPanel.Row = Row;
+BmInfoPanel.SectionSummary = SectionSummary;
+var _default = exports.default = BmInfoPanel;