@bigbinary/neeto-molecules 1.0.4 → 1.0.6

package/README.md

@@ -10,7 +10,9 @@ A package of reusable molecular components for neeto products.
 - [BrowserSupport](./docs/components.md#browsersupport)
 - [Columns](./docs/components.md#columns)
 - [CustomDomain](./docs/components.md#customdomain)
+- [DateFormat/TimeFormat](./docs/components.md#dateformattimeformat)
 - [DateRangeFilter](./docs/components.md#daterangefilter)
+- [DynamicVariables](./docs/components.md#dynamicvariables)
 - [EmailPreview](./docs/components.md#emailpreview)
 - [ErrorPage](./docs/components.md#errorpage)
 - [IpRestriction](./docs/components.md#iprestriction)

package/dist/DateFormat.cjs.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var pure = require('@bigbinary/neeto-commons-frontend/pure');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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);
+}
+
+var DateFormat = ramda.fromPairs(ramda.keys(utils.timeFormat).map(function (key) {
+  return [pure.capitalize(key), function (_ref) {
+    var date = _ref.date,
+      _ref$tooltipProps = _ref.tooltipProps,
+      tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+      _ref$typographyProps = _ref.typographyProps,
+      typographyProps = _ref$typographyProps === void 0 ? {} : _ref$typographyProps;
+    var dateDisplay = /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends({
+      component: "span",
+      style: "body2"
+    }, typographyProps), utils.timeFormat[key](date));
+    return key === "extended" ? dateDisplay : /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, _extends({
+      content: utils.timeFormat.extended(date),
+      position: "top"
+    }, tooltipProps), dateDisplay);
+  }];
+}));
+
+module.exports = DateFormat;

package/dist/DateFormat.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { capitalize } from '@bigbinary/neeto-commons-frontend/pure';
+import { timeFormat } from '@bigbinary/neeto-commons-frontend/utils';
+import { Typography, Tooltip } from '@bigbinary/neetoui';
+import { fromPairs, keys } from 'ramda';
+
+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);
+}
+
+var DateFormat = fromPairs(keys(timeFormat).map(function (key) {
+  return [capitalize(key), function (_ref) {
+    var date = _ref.date,
+      _ref$tooltipProps = _ref.tooltipProps,
+      tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+      _ref$typographyProps = _ref.typographyProps,
+      typographyProps = _ref$typographyProps === void 0 ? {} : _ref$typographyProps;
+    var dateDisplay = /*#__PURE__*/React.createElement(Typography, _extends({
+      component: "span",
+      style: "body2"
+    }, typographyProps), timeFormat[key](date));
+    return key === "extended" ? dateDisplay : /*#__PURE__*/React.createElement(Tooltip, _extends({
+      content: timeFormat.extended(date),
+      position: "top"
+    }, tooltipProps), dateDisplay);
+  }];
+}));
+
+export { DateFormat as default };

package/dist/DateRangeFilter.cjs.js

@@ -211,9 +211,9 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     autoFocus: true,
     className: "ml-3 w-full",
     dateFormat: initializers.globalProps === null || initializers.globalProps === void 0 ? void 0 : (_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.dateFormat,
-    defaultValue: [dayjs__default["default"](startDate), dayjs__default["default"](endDate)],
     picker: "date",
     type: "range",
+    defaultValue: [startDate ? dayjs__default["default"](startDate) : null, endDate ? dayjs__default["default"](endDate) : null],
     onChange: function onChange(_, _ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
         startDate = _ref3[0],

package/dist/DateRangeFilter.js

@@ -204,9 +204,9 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     autoFocus: true,
     className: "ml-3 w-full",
     dateFormat: globalProps === null || globalProps === void 0 ? void 0 : (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.dateFormat,
-    defaultValue: [dayjs(startDate), dayjs(endDate)],
     picker: "date",
     type: "range",
+    defaultValue: [startDate ? dayjs(startDate) : null, endDate ? dayjs(endDate) : null],
     onChange: function onChange(_, _ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
         startDate = _ref3[0],

package/dist/DynamicVariables.cjs.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var pure = require('@bigbinary/neeto-commons-frontend/pure');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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);
+}
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".neeto-molecules-dynamic-variables{max-width:360px;min-width:184px}.neeto-molecules-dynamic-variables button{border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-md);color:rgb(var(--neeto-ui-black));padding:6px;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-dynamic-variables button:focus,.neeto-molecules-dynamic-variables button:focus-visible,.neeto-molecules-dynamic-variables button:hover{border-color:rgb(var(--neeto-ui-primary-800));box-shadow:none;color:rgb(var(--neeto-ui-primary-800));outline:none}";
+n(css,{});
+
+var parseVariables = function parseVariables() {
+  var variableArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var uncategorized = [];
+  var groupedVariables = [];
+  var categorySet = new Set();
+  variableArr.forEach(function (variable) {
+    var category = variable.category,
+      label = variable.label,
+      variables = variable.variables;
+    if (category && variables) {
+      var parsedVariables = variables.map(ramda.assoc("category", category));
+      if (!categorySet.has(category)) {
+        categorySet.add(category);
+        groupedVariables.push({
+          label: label,
+          variables: parsedVariables
+        });
+      } else {
+        var existingGroup = pure.findBy({
+          label: label
+        }, groupedVariables);
+        existingGroup.variables = ramda.uniqBy(ramda.prop("key"), existingGroup.variables.concat(parsedVariables));
+      }
+    } else {
+      uncategorized.push(variable);
+    }
+  });
+  if (!ramda.isEmpty(uncategorized)) {
+    groupedVariables.push({
+      label: !ramda.isEmpty(groupedVariables) ? "Others" : null,
+      variables: uncategorized
+    });
+  }
+  return groupedVariables;
+};
+
+var Menu = neetoui.Dropdown.Menu;
+var DynamicVariables = function DynamicVariables(_ref) {
+  var _ref$onVariableClick = _ref.onVariableClick,
+    onVariableClick = _ref$onVariableClick === void 0 ? pure.noop : _ref$onVariableClick,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps;
+  if (ramda.isEmpty(variables)) {
+    return null;
+  }
+  var parsedVariables = parseVariables(variables);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, _extends({
+    buttonProps: {
+      "data-testid": "variables-dropdown"
+    },
+    buttonStyle: "secondary",
+    icon: neetoIcons.Braces,
+    strategy: "fixed"
+  }, dropdownProps), /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-3 p-2 neeto-molecules-dynamic-variables",
+    "data-testid": "variables-list"
+  }, parsedVariables.map(function (_ref2) {
+    var label = _ref2.label,
+      variables = _ref2.variables;
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+      key: label
+    }, label && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "",
+      style: "h6"
+    }, label), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex flex-wrap items-center gap-2"
+    }, variables.map(function (item) {
+      return /*#__PURE__*/React__default["default"].createElement("button", {
+        key: item.label,
+        onClick: function onClick() {
+          return onVariableClick(item);
+        }
+      }, item.label);
+    })));
+  }))));
+};
+
+module.exports = DynamicVariables;

package/dist/DynamicVariables.js

@@ -0,0 +1,106 @@
+import React, { Fragment } from 'react';
+import { findBy, noop } from '@bigbinary/neeto-commons-frontend/pure';
+import { Braces } from '@bigbinary/neeto-icons';
+import { Dropdown, Typography } from '@bigbinary/neetoui';
+import { assoc, uniqBy, prop, isEmpty } from 'ramda';
+
+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);
+}
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".neeto-molecules-dynamic-variables{max-width:360px;min-width:184px}.neeto-molecules-dynamic-variables button{border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-md);color:rgb(var(--neeto-ui-black));padding:6px;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-dynamic-variables button:focus,.neeto-molecules-dynamic-variables button:focus-visible,.neeto-molecules-dynamic-variables button:hover{border-color:rgb(var(--neeto-ui-primary-800));box-shadow:none;color:rgb(var(--neeto-ui-primary-800));outline:none}";
+n(css,{});
+
+var parseVariables = function parseVariables() {
+  var variableArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var uncategorized = [];
+  var groupedVariables = [];
+  var categorySet = new Set();
+  variableArr.forEach(function (variable) {
+    var category = variable.category,
+      label = variable.label,
+      variables = variable.variables;
+    if (category && variables) {
+      var parsedVariables = variables.map(assoc("category", category));
+      if (!categorySet.has(category)) {
+        categorySet.add(category);
+        groupedVariables.push({
+          label: label,
+          variables: parsedVariables
+        });
+      } else {
+        var existingGroup = findBy({
+          label: label
+        }, groupedVariables);
+        existingGroup.variables = uniqBy(prop("key"), existingGroup.variables.concat(parsedVariables));
+      }
+    } else {
+      uncategorized.push(variable);
+    }
+  });
+  if (!isEmpty(uncategorized)) {
+    groupedVariables.push({
+      label: !isEmpty(groupedVariables) ? "Others" : null,
+      variables: uncategorized
+    });
+  }
+  return groupedVariables;
+};
+
+var Menu = Dropdown.Menu;
+var DynamicVariables = function DynamicVariables(_ref) {
+  var _ref$onVariableClick = _ref.onVariableClick,
+    onVariableClick = _ref$onVariableClick === void 0 ? noop : _ref$onVariableClick,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps;
+  if (isEmpty(variables)) {
+    return null;
+  }
+  var parsedVariables = parseVariables(variables);
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    buttonProps: {
+      "data-testid": "variables-dropdown"
+    },
+    buttonStyle: "secondary",
+    icon: Braces,
+    strategy: "fixed"
+  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+    className: "space-y-3 p-2 neeto-molecules-dynamic-variables",
+    "data-testid": "variables-list"
+  }, parsedVariables.map(function (_ref2) {
+    var label = _ref2.label,
+      variables = _ref2.variables;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: label
+    }, label && /*#__PURE__*/React.createElement(Typography, {
+      className: "",
+      style: "h6"
+    }, label), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-wrap items-center gap-2"
+    }, variables.map(function (item) {
+      return /*#__PURE__*/React.createElement("button", {
+        key: item.label,
+        onClick: function onClick() {
+          return onVariableClick(item);
+        }
+      }, item.label);
+    })));
+  }))));
+};
+
+export { DynamicVariables as default };

package/dist/KeyboardShortcuts.cjs.js

@@ -2161,6 +2161,7 @@ var HotKeyList = function HotKeyList(_ref) {
       className: "pl-4 mb-3",
       href: fullShortcutsLink,
       style: "link",
+      target: "_blank",
       label: t("neetoMolecules.keyboardShortcuts.viewFullListOfShortcuts")
     }));
   });
@@ -2168,7 +2169,7 @@ var HotKeyList = function HotKeyList(_ref) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-commons-keyboard-shortcuts-pane{flex-grow:0;flex-shrink:0;z-index:calc(var(--neeto-ui-modal-z-index) + 1)}";
+var css = ".neeto-molecules-keyboard-shortcuts-pane{flex-grow:0;flex-shrink:0;z-index:calc(var(--neeto-ui-modal-z-index) + 1)}";
 n(css,{});
 
 var KeyboardShortcutsPane = function KeyboardShortcutsPane(_ref) {
@@ -2192,7 +2193,7 @@ var KeyboardShortcutsPane = function KeyboardShortcutsPane(_ref) {
     return setIsOpen(false);
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames("neeto-commons-keyboard-shortcuts-pane neeto-ui-border-gray-300 transition-width ml-auto min-h-screen border-l bg-white duration-300 ease-in-out overflow-y-scroll", {
+    className: classnames("neeto-molecules-keyboard-shortcuts-pane neeto-ui-border-gray-300 transition-width ml-auto min-h-screen border-l bg-white duration-300 ease-in-out overflow-y-scroll", {
       "w-80": isOpen,
       "w-0": !isOpen,
       absolute: hasOverlays,

package/dist/KeyboardShortcuts.js

@@ -2154,6 +2154,7 @@ var HotKeyList = function HotKeyList(_ref) {
       className: "pl-4 mb-3",
       href: fullShortcutsLink,
       style: "link",
+      target: "_blank",
       label: t("neetoMolecules.keyboardShortcuts.viewFullListOfShortcuts")
     }));
   });
@@ -2161,7 +2162,7 @@ var HotKeyList = function HotKeyList(_ref) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-commons-keyboard-shortcuts-pane{flex-grow:0;flex-shrink:0;z-index:calc(var(--neeto-ui-modal-z-index) + 1)}";
+var css = ".neeto-molecules-keyboard-shortcuts-pane{flex-grow:0;flex-shrink:0;z-index:calc(var(--neeto-ui-modal-z-index) + 1)}";
 n(css,{});
 
 var KeyboardShortcutsPane = function KeyboardShortcutsPane(_ref) {
@@ -2185,7 +2186,7 @@ var KeyboardShortcutsPane = function KeyboardShortcutsPane(_ref) {
     return setIsOpen(false);
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames("neeto-commons-keyboard-shortcuts-pane neeto-ui-border-gray-300 transition-width ml-auto min-h-screen border-l bg-white duration-300 ease-in-out overflow-y-scroll", {
+    className: classnames("neeto-molecules-keyboard-shortcuts-pane neeto-ui-border-gray-300 transition-width ml-auto min-h-screen border-l bg-white duration-300 ease-in-out overflow-y-scroll", {
       "w-80": isOpen,
       "w-0": !isOpen,
       absolute: hasOverlays,

package/dist/PublishBlock.cjs.js

@@ -97,7 +97,7 @@ var AlertBlock = function AlertBlock(props) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-commons-publish-block{align-items:center;display:flex;gap:12px;justify-content:flex-end}.neeto-commons-publish-block__action-btn{align-items:center;display:inline-flex;flex-direction:row;gap:1px;justify-content:center}.neeto-commons-publish-block__action-btn>.neeto-ui-btn:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.neeto-commons-publish-block__action-btn>.neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}";
+var css = ".neeto-molecules-publish-block{align-items:center;display:flex;gap:12px;justify-content:flex-end}.neeto-molecules-publish-block__action-btn{align-items:center;display:inline-flex;flex-direction:row;gap:1px;justify-content:center}.neeto-molecules-publish-block__action-btn>.neeto-ui-btn:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.neeto-molecules-publish-block__action-btn>.neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}";
 n(css,{});
 
 var ViewDraftButton = function ViewDraftButton(props) {
@@ -165,7 +165,7 @@ var PublishBlock = function PublishBlock(_ref) {
     ResetDraftButton: ResetDraftButton
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-commons-publish-block"
+    className: "neeto-molecules-publish-block"
   }, draftBlockButtons && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -177,7 +177,7 @@ var PublishBlock = function PublishBlock(_ref) {
   }, draftBlockButtons)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-gray-300 h-full w-px"
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-commons-publish-block__action-btn"
+    className: "neeto-molecules-publish-block__action-btn"
   }, renderPublishButtons({
     PublishButton: PublishButton,
     PublishPreviewButton: PublishPreviewButton

package/dist/PublishBlock.js

@@ -91,7 +91,7 @@ var AlertBlock = function AlertBlock(props) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-commons-publish-block{align-items:center;display:flex;gap:12px;justify-content:flex-end}.neeto-commons-publish-block__action-btn{align-items:center;display:inline-flex;flex-direction:row;gap:1px;justify-content:center}.neeto-commons-publish-block__action-btn>.neeto-ui-btn:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.neeto-commons-publish-block__action-btn>.neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}";
+var css = ".neeto-molecules-publish-block{align-items:center;display:flex;gap:12px;justify-content:flex-end}.neeto-molecules-publish-block__action-btn{align-items:center;display:inline-flex;flex-direction:row;gap:1px;justify-content:center}.neeto-molecules-publish-block__action-btn>.neeto-ui-btn:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.neeto-molecules-publish-block__action-btn>.neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}";
 n(css,{});
 
 var ViewDraftButton = function ViewDraftButton(props) {
@@ -159,7 +159,7 @@ var PublishBlock = function PublishBlock(_ref) {
     ResetDraftButton: ResetDraftButton
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-commons-publish-block"
+    className: "neeto-molecules-publish-block"
   }, draftBlockButtons && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-2"
   }, /*#__PURE__*/React.createElement(Typography, {
@@ -171,7 +171,7 @@ var PublishBlock = function PublishBlock(_ref) {
   }, draftBlockButtons)), /*#__PURE__*/React.createElement("div", {
     className: "neeto-ui-bg-gray-300 h-full w-px"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-commons-publish-block__action-btn"
+    className: "neeto-molecules-publish-block__action-btn"
   }, renderPublishButtons({
     PublishButton: PublishButton,
     PublishPreviewButton: PublishPreviewButton

package/dist/TimeFormat.cjs.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
+
+var TimeFormat = DateFormat__default["default"];
+
+module.exports = TimeFormat;

package/dist/TimeFormat.js

@@ -0,0 +1,5 @@
+import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
+
+var TimeFormat = DateFormat;
+
+export { TimeFormat as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -38,6 +38,7 @@
     "@bigbinary/neeto-commons-frontend": "^2.0.39",
     "@bigbinary/neeto-editor": "^1.23.3",
     "@bigbinary/neeto-icons": "^1.9.15",
+    "@bigbinary/neeto-molecules": "^1.0.5",
     "@bigbinary/neetoui": "4.4.3",
     "@honeybadger-io/react": "2.0.1",
     "@rollup/plugin-alias": "^3.1.9",
@@ -118,7 +119,7 @@
   "peerDependencies": {
     "@bigbinary/neeto-commons-frontend": "^2.0.39",
     "@bigbinary/neeto-icons": "^1.9.15",
-    "@bigbinary/neeto-molecules": "^1.0.0",
+    "@bigbinary/neeto-molecules": "^1.0.5",
     "@bigbinary/neetoui": "^4.4.3",
     "@honeybadger-io/react": "2.0.1",
     "@svgr/webpack": "^6.5.1",

package/types/DateFormat.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { TooltipProps, TypographyProps } from "@bigbinary/neetoui";
+import {
+  timeFormat,
+  DateTimeType,
+} from "@bigbinary/neeto-commons-frontend/utils";
+
+const DateFormat: {
+  [key in Capitalize<keyof typeof timeFormat>]: React.FC<{
+    date: DateTimeType;
+    typographyProps?: Partial<TypographyProps>;
+    tooltipProps?: Partial<TooltipProps>;
+  }>;
+};
+
+export default DateFormat;

package/types/DynamicVariables.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { DropdownProps } from "@bigbinary/neetoui";
+
+interface Variable {
+  label?: string;
+  key?: string;
+  value?: string;
+  category?: string;
+  variables?: Omit<Variable, "variables">[]
+}
+
+const DynamicVariables: React.FC<{
+  onVariableClick?: (variable: Variable) => void;
+  variables: Variable[];
+  dropdownProps?: DropdownProps;
+}>;
+
+export default DynamicVariables;

package/types/TimeFormat.d.ts

@@ -0,0 +1,5 @@
+import DateFormat from "@bigbinary/neeto-molecules/DateFormat";
+
+const TimeFormat = DateFormat;
+
+export default TimeFormat;