@banyan_cloud/roots 1.0.0 → 1.0.2

package/dist/index.js

@@ -1659,12 +1659,12 @@ var BreadcrumbSeperator = function BreadcrumbSeperator(props) {
   var className = props.className;
   return /*#__PURE__*/jsx("svg", {
     className: className,
+    "data-elem": "breadcrumb-seperator-icon",
     viewBox: "0 0 24 24",
-    fill: "none",
+    stroke: "black",
     xmlns: "http://www.w3.org/2000/svg",
     children: /*#__PURE__*/jsx("path", {
       d: "M14.4809 3.88548L9.51916 20.1145",
-      stroke: "black",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     })
@@ -9125,8 +9125,8 @@ const caseAllCaps = {
 };
 const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
 /**
- * @see @link{https://material.io/design/typography/the-type-system.html}
- * @see @link{https://material.io/design/typography/understanding-typography.html}
+ * @see @link{https://m2.material.io/design/typography/the-type-system.html}
+ * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
 
 function createTypography(palette, typography) {
@@ -9228,7 +9228,7 @@ const easing = {
   easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
   // The sharp curve is used by objects that may return to the screen at any time.
   sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
-}; // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+}; // Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
 // to learn when use what timing
 
 const duration = {
@@ -11700,8 +11700,8 @@ process.env.NODE_ENV !== "production" ? Link.propTypes
 } : void 0;
 var Link$1 = Link;
 
-var css_248z$w = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #da1e28;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}\n\n.Breadcrumbs-module_container__w5vWh {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: auto;\n}\n.Breadcrumbs-module_container__w5vWh .Breadcrumbs-module_seperator__sU40m {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.Breadcrumbs-module_container__w5vWh .Breadcrumbs-module_breadcrumb-item__YCE98, .Breadcrumbs-module_container__w5vWh .Breadcrumbs-module_breadcrumb-item-active__Tg9ma {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  font-weight: 400;\n  font-size: 0.875rem;\n  color: var(--info);\n}\n.Breadcrumbs-module_container__w5vWh .Breadcrumbs-module_breadcrumb-item-active__Tg9ma {\n  color: var(--black);\n}";
-var styles$v = {"white":"var(--white)","black":"var(--black)","dark-grey":"var(--dark-grey)","dark-grey-o-85":"var(--dark-grey-o-85)","grey":"var(--grey)","grey1":"var(--grey1)","grey2":"var(--grey2)","grey3":"var(--grey3)","grey4":"var(--grey4)","grey5":"var(--grey5)","grey6":"var(--grey6)","grey7":"var(--grey7)","grey8":"var(--grey8)","grey9":"var(--grey9)","grey10":"var(--grey10)","highlight":"var(--highlight)","dark-blue":"var(--dark-blue)","background":"var(--background)","banyan-blue":"var(--banyan-blue)","banyan-orange":"var(--banyan-orange)","banyan-pink":"var(--banyan-pink)","banyan-gradient":"var(--banyan-gradient)","error":"var(--error)","error-bg":"var(--error-bg)","error-outline":"var(--error-outline)","success":"var(--success)","success-bg":"var(--success-bg)","success-outline":"var(--success-outline)","warning":"var(--warning)","warning-bg":"var(--warning-bg)","warning-outline":"var(--warning-outline)","info":"var(--info)","info-bg":"var(--info-bg)","info-outline":"var(--info-outline)","container":"Breadcrumbs-module_container__w5vWh","seperator":"Breadcrumbs-module_seperator__sU40m","breadcrumb-item":"Breadcrumbs-module_breadcrumb-item__YCE98","breadcrumb-item-active":"Breadcrumbs-module_breadcrumb-item-active__Tg9ma"};
+var css_248z$w = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #da1e28;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}\n\n.Breadcrumbs-module_container__w5vWh {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: auto;\n}\n.Breadcrumbs-module_container__w5vWh .Breadcrumbs-module_seperator__sU40m {\n  width: 1.5rem;\n  height: 1.5rem;\n  stroke: var(--grey2);\n}\n.Breadcrumbs-module_container__w5vWh .Breadcrumbs-module_breadcrumb-item__YCE98 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  font-weight: 600;\n  font-size: 0.875rem;\n  color: var(--grey2);\n}\n.Breadcrumbs-module_container__w5vWh .Breadcrumbs-module_breadcrumb-item__YCE98.Breadcrumbs-module_active__rs4zQ {\n  color: var(--black);\n}";
+var styles$v = {"white":"var(--white)","black":"var(--black)","dark-grey":"var(--dark-grey)","dark-grey-o-85":"var(--dark-grey-o-85)","grey":"var(--grey)","grey1":"var(--grey1)","grey2":"var(--grey2)","grey3":"var(--grey3)","grey4":"var(--grey4)","grey5":"var(--grey5)","grey6":"var(--grey6)","grey7":"var(--grey7)","grey8":"var(--grey8)","grey9":"var(--grey9)","grey10":"var(--grey10)","highlight":"var(--highlight)","dark-blue":"var(--dark-blue)","background":"var(--background)","banyan-blue":"var(--banyan-blue)","banyan-orange":"var(--banyan-orange)","banyan-pink":"var(--banyan-pink)","banyan-gradient":"var(--banyan-gradient)","error":"var(--error)","error-bg":"var(--error-bg)","error-outline":"var(--error-outline)","success":"var(--success)","success-bg":"var(--success-bg)","success-outline":"var(--success-outline)","warning":"var(--warning)","warning-bg":"var(--warning-bg)","warning-outline":"var(--warning-outline)","info":"var(--info)","info-bg":"var(--info-bg)","info-outline":"var(--info-outline)","container":"Breadcrumbs-module_container__w5vWh","seperator":"Breadcrumbs-module_seperator__sU40m","breadcrumb-item":"Breadcrumbs-module_breadcrumb-item__YCE98","active":"Breadcrumbs-module_active__rs4zQ"};
 styleInject(css_248z$w);
 
 var BreadCrumbs = function BreadCrumbs(props) {
@@ -11720,11 +11720,13 @@ var BreadCrumbs = function BreadCrumbs(props) {
       }),
       "aria-label": "breadcrumb",
       children: crumbs.map(function (crumb, index) {
+        var active = index === crumbs.length - 1;
         return /*#__PURE__*/jsx(Link$1, {
           href: " ",
           underline: "hover",
           children: /*#__PURE__*/jsx("span", {
-            className: classes(index === crumbs.length - 1 ? styles$v['breadcrumb-item-active'] : styles$v['breadcrumb-item']),
+            "data-elem": "breadcrumb-item".concat(active ? '-active' : ''),
+            className: classes(styles$v['breadcrumb-item'], active ? styles$v.active : ''),
             children: getSpacedDisplayName(crumb).replace(/-/g, ' ')
           })
         }, crumb);
@@ -11739,7 +11741,7 @@ BreadCrumbs.propTypes = {
   itemsAfterCollapse: propTypes$1.exports.number
 };
 BreadCrumbs.defaultProps = {
-  crumbs: ['Section1', 'Section2', 'Section3'],
+  crumbs: [],
   maxItems: 4,
   itemsBeforeCollapse: 2,
   itemsAfterCollapse: 1
@@ -14124,8 +14126,8 @@ BaseModal.defaultProps = {
   toggle: function toggle() {}
 };
 
-var css_248z$f = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #da1e28;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}\n\n.PageHeader-module_root__RW2kD {\n  width: 100%;\n  background-color: transparent;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 4px;\n}\n.PageHeader-module_root__RW2kD.PageHeader-module_dark__Xe9bz {\n  color: red;\n}\n.PageHeader-module_root__RW2kD.PageHeader-module_dark__Xe9bz .PageHeader-module_description__G3-qZ {\n  color: pink;\n}\n.PageHeader-module_root__RW2kD.PageHeader-module_light__zutYi {\n  color: var(--dark-grey);\n}\n.PageHeader-module_root__RW2kD.PageHeader-module_light__zutYi .PageHeader-module_description__G3-qZ {\n  color: var(--grey);\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_breadcrumb__v0tnM {\n  display: inline;\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e .PageHeader-module_left__fqL7M,\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e .PageHeader-module_right__KgzBp {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 10px;\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e .PageHeader-module_left__fqL7M .PageHeader-module_title__sDcrr {\n  font-size: 2.25rem;\n  font-weight: 600;\n  line-height: 3.375rem;\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e .PageHeader-module_left__fqL7M .PageHeader-module_chip__pr-6S {\n  font-weight: 500;\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_description__G3-qZ {\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n}\n\n.PageHeader-module_download__RCFoC,\n.PageHeader-module_calender__ecLCu {\n  width: 1.5rem;\n  height: 1.5rem;\n}";
-var styles$e = {"white":"var(--white)","black":"var(--black)","dark-grey":"var(--dark-grey)","dark-grey-o-85":"var(--dark-grey-o-85)","grey":"var(--grey)","grey1":"var(--grey1)","grey2":"var(--grey2)","grey3":"var(--grey3)","grey4":"var(--grey4)","grey5":"var(--grey5)","grey6":"var(--grey6)","grey7":"var(--grey7)","grey8":"var(--grey8)","grey9":"var(--grey9)","grey10":"var(--grey10)","highlight":"var(--highlight)","dark-blue":"var(--dark-blue)","background":"var(--background)","banyan-blue":"var(--banyan-blue)","banyan-orange":"var(--banyan-orange)","banyan-pink":"var(--banyan-pink)","banyan-gradient":"var(--banyan-gradient)","error":"var(--error)","error-bg":"var(--error-bg)","error-outline":"var(--error-outline)","success":"var(--success)","success-bg":"var(--success-bg)","success-outline":"var(--success-outline)","warning":"var(--warning)","warning-bg":"var(--warning-bg)","warning-outline":"var(--warning-outline)","info":"var(--info)","info-bg":"var(--info-bg)","info-outline":"var(--info-outline)","root":"PageHeader-module_root__RW2kD","dark":"PageHeader-module_dark__Xe9bz","description":"PageHeader-module_description__G3-qZ","light":"PageHeader-module_light__zutYi","breadcrumb":"PageHeader-module_breadcrumb__v0tnM","contents":"PageHeader-module_contents__w0Y7e","left":"PageHeader-module_left__fqL7M","right":"PageHeader-module_right__KgzBp","title":"PageHeader-module_title__sDcrr","chip":"PageHeader-module_chip__pr-6S","download":"PageHeader-module_download__RCFoC","calender":"PageHeader-module_calender__ecLCu"};
+var css_248z$f = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #da1e28;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}\n\n.PageHeader-module_root__RW2kD {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  width: 100%;\n  background-color: transparent;\n  gap: 4px;\n}\n.PageHeader-module_root__RW2kD.PageHeader-module_theme-dark__X5zgh {\n  color: var(--white);\n}\n.PageHeader-module_root__RW2kD.PageHeader-module_theme-dark__X5zgh .PageHeader-module_breadcrumb__v0tnM [data-elem=breadcrumb-item-active] {\n  color: var(--white);\n}\n.PageHeader-module_root__RW2kD.PageHeader-module_theme-light__Tercn {\n  color: var(--dark-grey);\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_description__G3-qZ {\n  color: var(--grey);\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e .PageHeader-module_left__fqL7M,\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e .PageHeader-module_right__KgzBp {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 10px;\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e .PageHeader-module_left__fqL7M .PageHeader-module_title__sDcrr {\n  font-size: 2.25rem;\n  font-weight: 600;\n  line-height: 3.375rem;\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_contents__w0Y7e .PageHeader-module_left__fqL7M .PageHeader-module_chip__pr-6S {\n  font-weight: 500;\n  background: var(--highlight);\n  color: var(--white);\n}\n.PageHeader-module_root__RW2kD .PageHeader-module_description__G3-qZ {\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n}\n\n.PageHeader-module_download__RCFoC,\n.PageHeader-module_calender__ecLCu {\n  width: 1.5rem;\n  height: 1.5rem;\n}";
+var styles$e = {"white":"var(--white)","black":"var(--black)","dark-grey":"var(--dark-grey)","dark-grey-o-85":"var(--dark-grey-o-85)","grey":"var(--grey)","grey1":"var(--grey1)","grey2":"var(--grey2)","grey3":"var(--grey3)","grey4":"var(--grey4)","grey5":"var(--grey5)","grey6":"var(--grey6)","grey7":"var(--grey7)","grey8":"var(--grey8)","grey9":"var(--grey9)","grey10":"var(--grey10)","highlight":"var(--highlight)","dark-blue":"var(--dark-blue)","background":"var(--background)","banyan-blue":"var(--banyan-blue)","banyan-orange":"var(--banyan-orange)","banyan-pink":"var(--banyan-pink)","banyan-gradient":"var(--banyan-gradient)","error":"var(--error)","error-bg":"var(--error-bg)","error-outline":"var(--error-outline)","success":"var(--success)","success-bg":"var(--success-bg)","success-outline":"var(--success-outline)","warning":"var(--warning)","warning-bg":"var(--warning-bg)","warning-outline":"var(--warning-outline)","info":"var(--info)","info-bg":"var(--info-bg)","info-outline":"var(--info-outline)","root":"PageHeader-module_root__RW2kD","theme-dark":"PageHeader-module_theme-dark__X5zgh","breadcrumb":"PageHeader-module_breadcrumb__v0tnM","theme-light":"PageHeader-module_theme-light__Tercn","description":"PageHeader-module_description__G3-qZ","contents":"PageHeader-module_contents__w0Y7e","left":"PageHeader-module_left__fqL7M","right":"PageHeader-module_right__KgzBp","title":"PageHeader-module_title__sDcrr","chip":"PageHeader-module_chip__pr-6S","download":"PageHeader-module_download__RCFoC","calender":"PageHeader-module_calender__ecLCu"};
 styleInject(css_248z$f);
 
 var PageHeader = function PageHeader(props) {
@@ -14134,12 +14136,15 @@ var PageHeader = function PageHeader(props) {
     description = props.description,
     children = props.children,
     chipTitle = props.chipTitle,
-    renderRightAction = props.renderRightAction;
+    RightAction = props.rightAction,
+    crumbsProps = props.crumbsProps;
   return /*#__PURE__*/jsxs("div", {
-    className: classes(styles$e.root, styles$e[theme]),
+    className: classes(styles$e.root, styles$e["theme-".concat(theme)]),
     children: [/*#__PURE__*/jsx("div", {
       className: styles$e.breadcrumb,
-      children: /*#__PURE__*/jsx(BreadCrumbs, _objectSpread2({}, props))
+      children: /*#__PURE__*/jsx(BreadCrumbs, _objectSpread2({}, _objectSpread2(_objectSpread2({}, crumbsProps), {}, {
+        className: styles$e.breadcrumb
+      })))
     }), /*#__PURE__*/jsxs("div", {
       className: styles$e.contents,
       children: [/*#__PURE__*/jsxs("div", {
@@ -14148,16 +14153,15 @@ var PageHeader = function PageHeader(props) {
           className: styles$e.title,
           children: title
         }), chipTitle && /*#__PURE__*/jsx(Chip, {
-          variant: "contained",
-          color: "primary",
-          size: "small",
+          className: styles$e.chip,
+          size: "sm",
           title: chipTitle,
-          radius: "ellipsis",
-          customClass: styles$e.chip
+          radius: "ellipse",
+          variant: "status"
         })]
-      }), renderRightAction && /*#__PURE__*/jsx("div", {
+      }), RightAction && /*#__PURE__*/jsx("div", {
         className: styles$e.right,
-        children: renderRightAction
+        children: /*#__PURE__*/jsx(RightAction, {})
       })]
     }), /*#__PURE__*/jsx("div", {
       className: styles$e.description,
@@ -14167,11 +14171,19 @@ var PageHeader = function PageHeader(props) {
 };
 PageHeader.propTypes = {
   title: propTypes$1.exports.string,
-  description: propTypes$1.exports.string
+  description: propTypes$1.exports.string,
+  theme: propTypes$1.exports.oneOf(['dark', 'light']),
+  chipTitle: propTypes$1.exports.string,
+  crumbsProps: propTypes$1.exports.shape(BreadCrumbs.propTypes),
+  rightAction: propTypes$1.exports.node
 };
 PageHeader.defaultProps = {
   title: 'Page Header',
-  description: ''
+  description: '',
+  theme: 'light',
+  chipTitle: null,
+  crumbsProps: {},
+  rightAction: null
 };
 
 /* eslint-disable max-classes-per-file */
@@ -15639,4 +15651,4 @@ Tooltip.defaultProps = {
   position: 'top'
 };
 
-export { Accordion, Alert, AlertIcon, AngleDouble as AngleDoubleIcon, Arrow as ArrowIcon, BASE_URLS, BaseButton, BaseCell, BaseModal, BaseTable, BreadCrumbs, BreadcrumbSeperator as BreadcrumbSeperatorIcon, Button, Calender, Calender$1 as CalenderIcon, Caret as CaretIcon, Checkbox, CheckboxIcon, Chevron as ChevronIcon, Chip, CodeSnippet, Columns$1 as ColumnsIcon, Copy as CopyIcon, Cross as CrossIcon, DAYS, DatePicker, Delete as DeleteIcon, Download as DownloadIcon, Dropdown, DropdownItem, Edit as EditIcon, FULL_MONTHS, Filter as FilterIcon, HalfShade as HalfShadeIcon, HierarchyBrowser, HierarchyItem, MONTHS, MagnifyingGlass as MagnifyingGlassIcon, Nut as NutIcon, PageHeader, Pagination, PaginationList, Plus as PlusIcon, Popover, Popper, Radio, RadioIcon, Refresh as RefreshIcon, Server as ServerIcon, Stepper, Table, TableColumn, Tabs, TextField, Tick as TickIcon, Tooltip, View as ViewIcon, classes, cloneDeep, defaultProps$1 as defaultProps, doubleDigitted, get, getCurrentSearchParams, getDateFromEpoch, getDatesInAMonth, getInitialsOfName, getJSDateFromEpoch, getPagination, getSpacedDisplayName, getTimeFromEpoch, getToday, inputHelper, propTypes, stringToPath, sumArrayOfObjects, uniqueArray, uniqueArrayOfObjects, useOutsideClickListener, usePagination, useResize, useRowFilter };
+export { Accordion, Alert, AlertIcon, AngleDouble as AngleDoubleIcon, Arrow as ArrowIcon, BASE_URLS, BaseButton, BaseCell, BaseModal, BaseTable, BreadCrumbs, BreadcrumbSeperator as BreadcrumbSeperatorIcon, Button, Calender, Calender$1 as CalenderIcon, Caret as CaretIcon, Checkbox, CheckboxIcon, Chevron as ChevronIcon, Chip, CodeSnippet, Columns$1 as ColumnsIcon, Copy as CopyIcon, Cross as CrossIcon, DAYS, DatePicker, Delete as DeleteIcon, Download as DownloadIcon, Dropdown, DropdownItem, Edit as EditIcon, FULL_MONTHS, Filter as FilterIcon, HalfShade as HalfShadeIcon, HierarchyBrowser, HierarchyItem, MONTHS, MagnifyingGlass as MagnifyingGlassIcon, Nut as NutIcon, PageHeader, Pagination, PaginationList, Plus as PlusIcon, Popover, Popper, Radio, RadioIcon, Refresh as RefreshIcon, Server as ServerIcon, Stepper, Table, TableCell, TableColumn, Tabs, TextField, Tick as TickIcon, Tooltip, View as ViewIcon, classes, cloneDeep, defaultProps$1 as defaultProps, doubleDigitted, get, getCurrentSearchParams, getDateFromEpoch, getDatesInAMonth, getInitialsOfName, getJSDateFromEpoch, getPagination, getSpacedDisplayName, getTimeFromEpoch, getToday, inputHelper, propTypes, stringToPath, sumArrayOfObjects, uniqueArray, uniqueArrayOfObjects, useOutsideClickListener, usePagination, useResize, useRowFilter };

package/package.json

@@ -1,12 +1,16 @@
 {
 	"name": "@banyan_cloud/roots",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "Design System Library which drives the Banyan Cloud products",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
 	"files": [
-		"dist"
+		"dist",
+		"styles"
 	],
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org"
+	},
 	"peerDependencies": {
 		"@emotion/react": "^11.10.4",
 		"@emotion/styled": "^11.10.4",
@@ -50,6 +54,8 @@
 		]
 	},
 	"devDependencies": {
+		"@emotion/react": "^11.10.4",
+		"@emotion/styled": "^11.10.4",
 		"@storybook/addon-a11y": "^6.5.12",
 		"@storybook/addon-actions": "^6.5.12",
 		"@storybook/addon-backgrounds": "^6.5.12",
@@ -79,7 +85,9 @@
 		"sass": "^1.55.0",
 		"sass-loader": "^13.1.0",
 		"storybook-addon-designs": "^6.3.1",
-		"storybook-dark-mode": "^1.1.2"
+		"storybook-dark-mode": "^1.1.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
 	},
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
@@ -88,7 +96,7 @@
 		"lint": "eslint --ext js,jsx .",
 		"lint:fix": "eslint --ext js,jsx . --fix",
 		"format": "prettier --write './**/*.{js,jsx,ts,tsx,md,json}' --config ./.prettierrc",
-		"rollup": "rollup -c --bundleConfigAsCjs"
+		"build": "rollup -c --bundleConfigAsCjs"
 	},
 	"repository": {
 		"type": "git",

package/styles/_colors.scss

@@ -0,0 +1,136 @@
+:root {
+	&[data-theme='dark'] {
+	}
+
+	&[data-theme='light'] {
+	}
+	// Monochromatic
+	--white: #ffffff;
+	--black: #000000;
+
+	--dark-grey: #333333;
+	--dark-grey-o-85: rgba(51, 51, 51, 0.85);
+	--grey: #737373;
+	--grey1: #888888;
+	--grey2: #a6a6a6;
+	--grey3: #bbbbbb;
+	--grey4: #c4c4c4;
+	--grey5: #dddddd;
+	--grey6: #e8e8e8;
+	--grey7: #eeeeee;
+	--grey8: #f2f2f2;
+	--grey9: #eff0f0;
+	--grey10: #f7f7f7;
+
+	//Base colors
+	--highlight: #0f62fe;
+	--dark-blue: #001833;
+	--background: #d0e2ff;
+
+	--banyan-blue: #00037c;
+	--banyan-orange: #ff892a;
+	--banyan-pink: #ff1597;
+	--banyan-gradient: linear-gradient(
+		84.71deg,
+		var(--banyan-pink) 0.48%,
+		var(--banyan-orange) 99.57%
+	);
+
+	// Alert colors
+	--error: #da1e28;
+	--error-bg: #fff1f1;
+	--error-outline: rgba(218, 30, 40, 0.08);
+	--success: #24a148;
+	--success-bg: #defbe6;
+	--success-outline: rgba(36, 161, 72, 0.08);
+	--warning: #f1c21b;
+	--warning-bg: #fff8e1;
+	--warning-outline: rgba(203, 160, 6, 0.08);
+	--info: #0043ce;
+	--info-bg: #edf5ff;
+	--info-outline: #2864db98;
+}
+
+// Monochromatic
+$white: var(--white);
+$black: var(--black);
+
+$dark-grey: var(--dark-grey);
+$dark-grey-o-85: var(--dark-grey-o-85);
+$grey: var(--grey);
+$grey1: var(--grey1);
+$grey2: var(--grey2);
+$grey3: var(--grey3);
+$grey4: var(--grey4);
+$grey5: var(--grey5);
+$grey6: var(--grey6);
+$grey7: var(--grey7);
+$grey8: var(--grey8);
+$grey9: var(--grey9);
+$grey10: var(--grey10);
+
+//Base colors
+$highlight: var(--highlight);
+$dark-blue: var(--dark-blue);
+$background: var(--background);
+
+$banyan-blue: var(--banyan-blue);
+$banyan-orange: var(--banyan-orange);
+$banyan-pink: var(--banyan-pink);
+$banyan-gradient: var(--banyan-gradient);
+
+// Alert colors
+$error: var(--error);
+$error-bg: var(--error-bg);
+$error-outline: var(--error-outline);
+$success: var(--success);
+$success-bg: var(--success-bg);
+$success-outline: var(--success-outline);
+$warning: var(--warning);
+$warning-bg: var(--warning-bg);
+$warning-outline: var(--warning-outline);
+$info: var(--info);
+$info-bg: var(--info-bg);
+$info-outline: var(--info-outline);
+
+:export {
+	white: $white;
+	black: $black;
+
+	dark-grey: $dark-grey;
+	dark-grey-o-85: $dark-grey-o-85;
+	grey: $grey;
+	grey1: $grey1;
+	grey2: $grey2;
+	grey3: $grey3;
+	grey4: $grey4;
+	grey5: $grey5;
+	grey6: $grey6;
+	grey7: $grey7;
+	grey8: $grey8;
+	grey9: $grey9;
+	grey10: $grey10;
+	//  Base colors
+	highlight: $highlight;
+	dark-blue: $dark-blue;
+	background: $background;
+
+	banyan-blue: $banyan-blue;
+	banyan-orange: $banyan-orange;
+	banyan-pink: $banyan-pink;
+	banyan-gradient: $banyan-gradient;
+
+	// Alert colors
+	error: $error;
+	error-bg: $error-bg;
+	error-outline: $error-outline;
+	success: $success;
+	success-bg: $success-bg;
+	success-outline: $success-outline;
+	warning: $warning;
+	warning-bg: $warning-bg;
+	warning-outline: $warning-outline;
+	info: $info;
+	info-bg: $info-bg;
+	info-outline: $info-outline;
+}

package/styles/_index.scss

@@ -0,0 +1 @@
+@import './utils', './colors', './responsive';

package/styles/_responsive.scss

@@ -0,0 +1,41 @@
+// Small tablets and large smartphones (landscape view)
+$screen-sm-min: 576px;
+
+// Small tablets (portrait view)
+$screen-md-min: 768px;
+
+// Tablets and small desktops
+$screen-lg-min: 992px;
+
+// Large tablets and desktops
+$screen-xl-min: 1200px;
+
+@mixin sm {
+	@media (min-width: #{$screen-sm-min}) {
+		@content;
+	}
+}
+
+@mixin md {
+	@media (min-width: #{$screen-md-min}) {
+		@content;
+	}
+}
+
+@mixin lg {
+	@media (min-width: #{$screen-lg-min}) {
+		@content;
+	}
+}
+
+@mixin xl {
+	@media (min-width: #{$screen-xl-min}) {
+		@content;
+	}
+}
+
+@mixin rwd($screen) {
+	@media (min-width: $screen+'px') {
+		@content;
+	}
+}

package/styles/_utils.scss

@@ -0,0 +1,47 @@
+@mixin flex($flex-direction: row, $justify-content: center, $align-items: center) {
+	display: flex;
+	flex-direction: $flex-direction;
+	justify-content: $justify-content;
+	align-items: $align-items;
+}
+
+@mixin bordermixin($border-color, $background-color) {
+	border-style: solid;
+	border-color: $border-color;
+	background-color: $background-color;
+}
+
+@mixin debug {
+	border: 1px solid red;
+}
+
+@mixin ellipsis {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+@mixin removeArrows {
+	-moz-appearance: textfield;
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+}
+
+@mixin removeScrollbar() {
+	&::-webkit-scrollbar {
+		display: none;
+	}
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+@function derive-rgb-values-from-hex($hex) {
+	@return red($hex), green($hex), blue($hex);
+}
+
+@mixin boxShadow {
+	box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);
+}

package/styles/main.css

@@ -0,0 +1,103 @@
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: "Poppins", sans-serif;
+  background-color: #ffffff;
+}
+
+/**************************************************************
+                     font-family- Poppins
+   Incase of adding new font folw the steps:
+   ---> Download the respective font from Google fonts
+   ---> Save to assets/font
+   ---> Add the font face in this page
+   ---> Create a variable in scss/_common.scss
+ **************************************************************/
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 100;
+  src: url("../fonts/Poppins-Thin.ttf") format("truetype");
+}
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 200;
+  src: url("../fonts/Poppins-ExtraLight.ttf") format("truetype");
+}
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 300;
+  src: url("../fonts/Poppins-Light.ttf") format("truetype");
+}
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
+}
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
+}
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 600;
+  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
+}
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 700;
+  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
+}
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 800;
+  src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype");
+}
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/Poppins-Black.ttf") format("truetype");
+}
+.app-container {
+  display: flex;
+  height: 100%;
+}
+
+.table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  width: 100%;
+}
+.table > tr > td,
+.table > tr th {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}
+.table > tr:nth-child(even) {
+  background-color: #dddddd;
+}/*# sourceMappingURL=main.css.map */

package/styles/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAA;EACC,YAAA;EACA,WAAA;EACA,sBAAA;EACA,oBAAA;ACCD;;ADEA;;;EAGC,gBAAA;EACA,YAAA;EACA,uBAAA;ACCD;;ADEA;EACC,mCAAA;EACA,kCAAA;EACA,kCAAA;EACA,yBAAA;ACCD;;ADEA;;;;;;;+DAAA;AASA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,wDAAA;ACAD;ADGA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,8DAAA;ACDD;ADIA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,yDAAA;ACFD;ADKA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,2DAAA;ACHD;ADMA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0DAAA;ACJD;ADOA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,4DAAA;ACLD;ADQA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,wDAAA;ACND;ADSA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,6DAAA;ACPD;ADUA;EACC,oBAAA;EACA,kBAAA;EACA,gBAAA;EACA,yDAAA;ACRD;ADWA;EACC,aAAA;EACA,YAAA;ACTD;;ADYA;EACC,yBAAA;EACA,mBAAA;EACA,WAAA;ACTD;ADWE;;EAEC,yBAAA;EACA,gBAAA;EACA,YAAA;ACTH;ADYC;EACC,yBAAA;ACVF","file":"main.css"}

package/styles/main.scss

@@ -0,0 +1,115 @@
+* {
+	padding: 0px;
+	margin: 0px;
+	box-sizing: border-box;
+	font-family: inherit;
+}
+
+html,
+body,
+#root {
+	min-height: 100%;
+	height: 100%;
+	scroll-behavior: smooth;
+}
+
+body {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-family: 'Poppins', sans-serif;
+	background-color: #ffffff;
+}
+
+/**************************************************************
+                     font-family- Poppins
+   Incase of adding new font folw the steps:
+   ---> Download the respective font from Google fonts
+   ---> Save to assets/font
+   ---> Add the font face in this page
+   ---> Create a variable in scss/_common.scss
+ **************************************************************/
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 100;
+	src: url('../fonts/Poppins-Thin.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 200;
+	src: url('../fonts/Poppins-ExtraLight.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 300;
+	src: url('../fonts/Poppins-Light.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 400;
+	src: url('../fonts/Poppins-Regular.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 500;
+	src: url('../fonts/Poppins-Medium.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 600;
+	src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 700;
+	src: url('../fonts/Poppins-Bold.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 800;
+	src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Poppins;
+	font-style: normal;
+	font-weight: 900;
+	src: url('../fonts/Poppins-Black.ttf') format('truetype');
+}
+
+.app-container {
+	display: flex;
+	height: 100%;
+}
+
+.table {
+	border-collapse: collapse;
+	border-spacing: 0px;
+	width: 100%;
+	& > tr {
+		& > td,
+		th {
+			border: 1px solid #dddddd;
+			text-align: left;
+			padding: 8px;
+		}
+	}
+	& > tr:nth-child(even) {
+		background-color: #dddddd;
+	}
+}