@nobak/design-system 1.0.0

package/lib/shared/components/Search/Search.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import clsx from 'clsx';
+export var Search = function Search(_ref) {
+  var imageUrl = _ref.imageUrl;
+  var style = clsx('w-16 h-16 bg-cover bg-center rounded-full');
+  return /*#__PURE__*/React.createElement("div", {
+    className: style,
+    style: {
+      backgroundImage: "url(".concat(imageUrl, ")")
+    }
+  });
+};

package/lib/shared/components/Search/index.js

@@ -0,0 +1 @@
+export { Search } from "./Search";

package/lib/shared/components/Select/Select.js

@@ -0,0 +1,90 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import * as React from 'react';
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react';
+// import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
+
+export var Select = function Select(_ref) {
+  var id = _ref.id,
+    defaultValue = _ref.defaultValue,
+    debug = _ref.debug,
+    options = _ref.options,
+    afterUpdate = _ref.afterUpdate,
+    mRef = _ref.mRef,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple;
+  var _React$useState = React.useState(defaultValue ? options.find(function (_ref2) {
+      var value = _ref2.value;
+      return String(value) === String(defaultValue);
+    }) : options[0]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selected = _React$useState2[0],
+    setSelected = _React$useState2[1];
+  React.useEffect(function () {
+    var value = defaultValue ? options.find(function (_ref3) {
+      var value = _ref3.value;
+      return String(value) === String(defaultValue);
+    }) : options[0];
+    setSelected(value);
+    if (!!afterUpdate) {
+      afterUpdate(value);
+    }
+  }, [defaultValue]);
+  var handleUpdate = function handleUpdate(event) {
+    console.log('event', event);
+    setSelected(event);
+    if (!!afterUpdate) {
+      afterUpdate(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Listbox, {
+    value: selected,
+    onChange: function onChange(e) {
+      return handleUpdate(e);
+    },
+    multiple: multiple
+  }, function (_ref4) {
+    var open = _ref4.open;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "relative mt-1"
+    }, /*#__PURE__*/React.createElement(ListboxButton, {
+      className: "".concat(!!open ? 'bg-neutral-50' : 'bg-neutral-100 border-neutral-200', " relative w-full shadow-sm py-2 pl-3 pr-10 text-left text-neutral-800 rounded-md cursor-default open:bg-neutral-50 active:ring-1 active:ring-offset-1 active:ring-blue-500 sm:text-sm border")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "block truncate"
+    }, selected === null || selected === void 0 ? void 0 : selected.name, " ", !selected && 'Select your option'), /*#__PURE__*/React.createElement("span", {
+      className: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
+    })), /*#__PURE__*/React.createElement(Transition, {
+      as: React.Fragment,
+      show: open,
+      enter: "transition duration-100 ease-out",
+      enterFrom: "transform scale-95 opacity-0",
+      enterTo: "transform scale-100 opacity-100",
+      leave: "transition duration-75 ease-out",
+      leaveFrom: "transform scale-100 opacity-100",
+      leaveTo: "transform scale-95 opacity-0"
+    }, /*#__PURE__*/React.createElement(ListboxOptions, {
+      className: "absolute w-full py-1 mt-1 overflow-auto text-base bg-neutral-100 rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-50 py-[8px] border border-neutral-200"
+    }, Array.isArray(options) && options.map(function (item) {
+      return /*#__PURE__*/React.createElement(ListboxOption, {
+        key: item.value,
+        className: function className(_ref5) {
+          var active = _ref5.active;
+          return "".concat(active ? 'text-neutral-600 font-bold bg-primary-300' : 'text-neutral-800', "\n                          cursor-default select-none relative py-2 pl-10 pr-4");
+        },
+        value: item
+      }, function (_ref6) {
+        var selected = _ref6.selected,
+          active = _ref6.active;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+          className: "".concat(selected ? 'font-medium' : 'font-normal', " block truncate")
+        }, item.name), selected ? /*#__PURE__*/React.createElement("span", {
+          className: "".concat(active && 'text-neutral-600', "\n                                absolute inset-y-0 left-0 flex items-center pl-3")
+        }) : null);
+      });
+    }))));
+  }));
+};

package/lib/shared/components/Select/index.js

@@ -0,0 +1 @@
+export { Select } from "./Select";

package/lib/shared/components/Sidebar/Sidebar.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Transition } from '@headlessui/react';
+// import { XIcon, ArrowsExpandIcon } from '@heroicons/react/outline';
+import clsx from 'clsx';
+export var Sidebar = function Sidebar(_ref) {
+  var _ref$initialState = _ref.initialState,
+    initialState = _ref$initialState === void 0 ? false : _ref$initialState,
+    user = _ref.user,
+    items = _ref.items,
+    Component = _ref.component,
+    closeSidebar = _ref.closeSidebar,
+    children = _ref.children;
+  var barStyle = clsx('rounded-t-[12px] bg-neutral-100 p-[2px] drop-shadow border-b border-neutral-150');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Transition.Root, {
+    show: initialState,
+    as: React.Fragment
+  }, /*#__PURE__*/React.createElement(Transition.Child, {
+    as: React.Fragment,
+    enter: "ease-out duration-500",
+    enterFrom: "opacity-0 translate-x-[200px]",
+    enterTo: "opacity-100 translate-x-[0px]",
+    leave: "ease-in duration-500",
+    leaveFrom: "opacity-100 translate-x-[0px]",
+    leaveTo: "opacity-0 translate-x-[200px]"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute h-v92 top-0 right-0 w-[200px] bg-neutral-50 border border-neutral-200 rounded-[12px] my-[20px] mr-[20px] text-neutral-600 overflow-y-auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: barStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-between items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-start"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "bg-neutral-150 text-neutral-200 p-[2px] rounded-full hover:text-red-100 hover:bg-red-400 focus:outline-none",
+    onClick: closeSidebar
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Close"))))), /*#__PURE__*/React.createElement("div", {
+    className: "p-[8px]"
+  }, children)))));
+};

package/lib/shared/components/Sidebar/index.js

@@ -0,0 +1 @@
+export { Sidebar } from "./Sidebar";

package/lib/shared/components/SlideOver/SlideOver.js

@@ -0,0 +1,81 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+import React, { Fragment, useState } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+// import { XIcon } from '@heroicons/react/outline';
+
+export var SlideOver = function SlideOver(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/React.createElement(Transition.Root, {
+    show: open,
+    as: Fragment
+  }, /*#__PURE__*/React.createElement(Dialog, {
+    as: "div",
+    className: "fixed inset-0 overflow-hidden",
+    onClose: setOpen
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute inset-0 overflow-hidden"
+  }, /*#__PURE__*/React.createElement(Transition.Child, {
+    as: Fragment,
+    enter: "ease-in-out duration-500",
+    enterFrom: "opacity-0",
+    enterTo: "opacity-100",
+    leave: "ease-in-out duration-500",
+    leaveFrom: "opacity-100",
+    leaveTo: "opacity-0"
+  }, /*#__PURE__*/React.createElement(Dialog.Overlay, {
+    className: "absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "fixed inset-y-0 right-0 pl-10 max-w-full flex"
+  }, /*#__PURE__*/React.createElement(Transition.Child, {
+    as: Fragment,
+    enter: "transform transition ease-in-out duration-500 sm:duration-700",
+    enterFrom: "translate-x-full",
+    enterTo: "translate-x-0",
+    leave: "transform transition ease-in-out duration-500 sm:duration-700",
+    leaveFrom: "translate-x-0",
+    leaveTo: "translate-x-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative w-screen max-w-md"
+  }, /*#__PURE__*/React.createElement(Transition.Child, {
+    as: Fragment,
+    enter: "ease-in-out duration-500",
+    enterFrom: "opacity-0",
+    enterTo: "opacity-100",
+    leave: "ease-in-out duration-500",
+    leaveFrom: "opacity-100",
+    leaveTo: "opacity-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white",
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Close panel")))), /*#__PURE__*/React.createElement("div", {
+    className: "h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "px-4 sm:px-6"
+  }, /*#__PURE__*/React.createElement(Dialog.Title, {
+    className: "text-lg font-medium text-gray-900"
+  }, "Panel title")), /*#__PURE__*/React.createElement("div", {
+    className: "mt-6 relative flex-1 px-4 sm:px-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute inset-0 px-4 sm:px-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "h-full border-2 border-dashed border-gray-200",
+    "aria-hidden": "true"
+  }))))))))));
+};

package/lib/shared/components/SlideOver/index.js

@@ -0,0 +1 @@
+export { SlideOver } from "./SlideOver";

package/lib/shared/components/Slider/Slider.js

@@ -0,0 +1,80 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+export var Slider = function Slider(_ref) {
+  var cards = _ref.cards,
+    _ref$debug = _ref.debug,
+    debug = _ref$debug === void 0 ? false : _ref$debug;
+  var containerRef = React.useRef(null);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    x = _React$useState2[0],
+    setX = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    scrollWidth = _React$useState4[0],
+    setScrollWidth = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    offsetWidth = _React$useState6[0],
+    setOffsetWidth = _React$useState6[1];
+  React.useEffect(function () {
+    var _containerRef$current, _containerRef$current2;
+    if (!containerRef.current) return;
+    setScrollWidth((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.scrollWidth);
+    setOffsetWidth((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth);
+  }, []);
+  var updatePosition = function updatePosition() {
+    var _containerRef$current3;
+    if (!containerRef.current) return;
+    setX((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.scrollLeft);
+  };
+  var backward = function backward() {
+    var _containerRef$current4;
+    if (!containerRef.current) return;
+    (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 || _containerRef$current4.scroll({
+      left: -offsetWidth + (scrollWidth - offsetWidth),
+      behavior: 'smooth'
+    });
+    setX(scrollWidth - offsetWidth);
+  };
+  var forward = function forward() {
+    var _containerRef$current5;
+    if (!containerRef.current) return;
+    (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 || _containerRef$current5.scroll({
+      left: offsetWidth + 200,
+      behavior: 'smooth'
+    });
+    setX(scrollWidth - offsetWidth);
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "overflow-y-hidden scroll-pl-6 scroll-smooth flex w-full gap-4 snap-x snap-mandatory overflow-x-auto scrollbar-none pl-4",
+    onScroll: function onScroll(e) {
+      return updatePosition();
+    }
+  }, cards.map(function (card, key) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: "relative flex-card snap-start snap-always"
+    }, card);
+  })), 0 < x && /*#__PURE__*/React.createElement("button", {
+    className: "absolute w-[40px] h-full top-0 left-0 bg-gray-800 bg-opacity-50 border border-neutral-500",
+    onClick: function onClick(e) {
+      return backward();
+    }
+  }), x + offsetWidth !== scrollWidth && /*#__PURE__*/React.createElement("button", {
+    className: "absolute w-[40px] h-full top-0 right-0 bg-gray-800 bg-opacity-50 border border-neutral-500",
+    onClick: function onClick(e) {
+      return forward();
+    }
+  })), debug && /*#__PURE__*/React.createElement("div", {
+    className: "text-neutral-800"
+  }, x, " - ", scrollWidth, " - ", offsetWidth));
+};

package/lib/shared/components/Slider/index.js

@@ -0,0 +1 @@
+export { Slider } from "./Slider";

package/lib/shared/components/Stepper/Stepper.js

@@ -0,0 +1,32 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/* This example requires Tailwind CSS v2.0+ */
+import React from 'react';
+var Step = function Step(_ref) {
+  var Component = _ref.component,
+    options = _ref.options;
+  return /*#__PURE__*/React.createElement(Component, {
+    options: options
+  });
+};
+export var Stepper = function Stepper(_ref2) {
+  var _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'radio' : _ref2$type,
+    steps = _ref2.steps;
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    current = _React$useState2[0],
+    setStep = _React$useState2[1];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Step, {
+    component: steps[current].component,
+    options: steps[current].options
+  }), steps.indexOf(steps[current]) >= 0 && /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return setStep(current + 1);
+    }
+  }, "Next"));
+};

package/lib/shared/components/Stepper/index.js

@@ -0,0 +1 @@
+export { Stepper } from "./Stepper";

package/lib/shared/components/Steps/Steps.js

@@ -0,0 +1,53 @@
+/* This example requires Tailwind CSS v2.0+ */
+import React from 'react';
+var steps = [{
+  name: 'Step 1',
+  href: '#',
+  status: 'complete'
+}, {
+  name: 'Step 2',
+  href: '#',
+  status: 'current'
+}, {
+  name: 'Step 3',
+  href: '#',
+  status: 'upcoming'
+}, {
+  name: 'Step 4',
+  href: '#',
+  status: 'upcoming'
+}];
+export var Steps = function Steps() {
+  return /*#__PURE__*/React.createElement("nav", {
+    className: "flex items-center justify-center",
+    "aria-label": "Progress"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text-sm font-medium"
+  }, "Step ", steps.findIndex(function (step) {
+    return step.status === 'current';
+  }) + 1, " of", ' ', steps.length), /*#__PURE__*/React.createElement("ol", {
+    className: "ml-8 flex items-center space-x-5"
+  }, steps.map(function (step) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: step.name
+    }, step.status === 'complete' ? /*#__PURE__*/React.createElement("a", {
+      href: step.href,
+      className: "block w-2.5 h-2.5 bg-indigo-600 rounded-full hover:bg-indigo-900"
+    }) : step.status === 'current' ? /*#__PURE__*/React.createElement("a", {
+      href: step.href,
+      className: "relative flex items-center justify-center",
+      "aria-current": "step"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "absolute w-5 h-5 p-px flex",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "w-full h-full rounded-full bg-indigo-200"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "relative block w-2.5 h-2.5 bg-indigo-600 rounded-full",
+      "aria-hidden": "true"
+    })) : /*#__PURE__*/React.createElement("a", {
+      href: step.href,
+      className: "block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400"
+    }));
+  })));
+};

package/lib/shared/components/Steps/index.js

@@ -0,0 +1 @@
+export { Steps } from "./Steps";

package/lib/shared/components/Switch/Switch.js

@@ -0,0 +1,26 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+import { Switch as SwitchComponent } from '@headlessui/react';
+export var Switch = function Switch(_ref) {
+  var onChange = _ref.onChange;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    enabled = _React$useState2[0],
+    setEnabled = _React$useState2[1];
+  var toggleAction = function toggleAction() {
+    setEnabled(!enabled);
+    onChange();
+  };
+  return /*#__PURE__*/React.createElement(SwitchComponent, {
+    checked: enabled,
+    onChange: toggleAction,
+    className: "".concat(enabled ? 'bg-blue-600' : 'bg-gray-200', " relative inline-flex items-center h-6 rounded-full w-11")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(enabled ? 'translate-x-6' : 'translate-x-1', " inline-block w-4 h-4 transform bg-white rounded-full")
+  }));
+};

package/lib/shared/components/Switch/index.js

@@ -0,0 +1 @@
+export { Switch } from "./Switch";

package/lib/shared/components/Tab/Tab.js

@@ -0,0 +1,59 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+import { Tab as TabComponent } from '@headlessui/react';
+import clsx from 'clsx';
+import { Icon } from "../Icon";
+export var Tab = function Tab(_ref) {
+  var options = _ref.options,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation;
+  var _React$useState = React.useState(options),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    navigation = _React$useState2[0];
+  var listStyle = clsx(orientation === 'horizontal' && 'py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3 space-y-2', orientation === 'vertical' && 'flex p-1 space-x-1 bg-blue-900/20 rounded-xl');
+  var panelStyle = clsx(orientation === 'horizontal' && 'flex flex-1');
+  var gridStyle = {
+    right: clsx(orientation === 'horizontal' && 'space-y-6 sm:px-6 lg:px-0 lg:col-span-9'),
+    left: clsx(orientation === 'horizontal' && 'lg:grid lg:grid-cols-12 lg:gap-x-5 ')
+  };
+  var highlightPanel = clsx(false && "bg-white rounded-xl p-3 focus:outline-none focus:ring-2 ring-offset-2 ring-offset-blue-400 ring-white ring-opacity-60");
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: gridStyle.left
+  }, /*#__PURE__*/React.createElement(TabComponent.Group, null, /*#__PURE__*/React.createElement(TabComponent.List, {
+    as: "aside",
+    className: listStyle
+  }, options.map(function (_ref2) {
+    var name = _ref2.name,
+      icon = _ref2.icon;
+    return /*#__PURE__*/React.createElement(TabComponent, {
+      as: "nav",
+      key: name,
+      className: function className(_ref3) {
+        var selected = _ref3.selected;
+        return clsx('text-primary border border-primary hover:text-primary-hover hover:bg-secondary-400-hover cursor-pointer group rounded-md px-3 py-2 flex items-center text-sm font-medium', selected ? 'bg-secondary-400 text-background' : 'text-blue-100');
+      }
+    }, icon && /*#__PURE__*/React.createElement(Icon, {
+      name: icon.name,
+      size: "medium",
+      customCss: "mr-2"
+    }), name && /*#__PURE__*/React.createElement("span", {
+      className: "py-0.5 px-1"
+    }, name));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: gridStyle.right
+  }, /*#__PURE__*/React.createElement("div", {
+    className: panelStyle
+  }, /*#__PURE__*/React.createElement(TabComponent.Panels, {
+    className: "w-full"
+  }, Object.values(navigation).map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(TabComponent.Panel, {
+      key: idx,
+      className: highlightPanel
+    }, /*#__PURE__*/React.createElement(item.view, null));
+  })))))));
+};

package/lib/shared/components/Tab/index.js

@@ -0,0 +1 @@
+export { Tab } from "./Tab";

package/lib/shared/components/Table/Table.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Cell } from "../Cell";
+export var Table = function Table(_ref) {
+  var header = _ref.header,
+    data = _ref.data,
+    component = _ref.component,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'default' : _ref$background,
+    customCss = _ref.customCss;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, data.length !== 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col ".concat(customCss)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pt-4 pb-12 align-middle inline-block min-w-full sm:px-6 lg:px-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "shadow-xl overflow-hidden border border-primary-200 sm:rounded-lg"
+  }, /*#__PURE__*/React.createElement("table", {
+    className: "min-w-full divide-y divide-primary-200"
+  }, /*#__PURE__*/React.createElement("thead", {
+    className: "".concat(background === 'default' ? 'bg-primary-800' : 'bg-primary-100')
+  }, /*#__PURE__*/React.createElement("tr", null, header.map(function (item, key) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: key,
+      scope: "col",
+      className: "px-6 py-3 text-left text-sm font-bold text-primary-1600 uppercase tracking-wider"
+    }, item);
+  }))), /*#__PURE__*/React.createElement("tbody", {
+    className: "bg-primary-300 divide-y divide-primary-700"
+  }, data.map(function (row, key) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: key,
+      className: "hover:bg-primary-800 transition duration-150 ease-in-out"
+    }, row.map(function (column, key) {
+      return /*#__PURE__*/React.createElement("td", {
+        className: "px-6 py-4 whitespace-nowrap ".concat(background === 'default' ? 'bg-primary-200' : 'bg-primary-1200', " text-primary-2400"),
+        key: key
+      }, /*#__PURE__*/React.createElement(Cell, {
+        type: column.type,
+        value: column.value,
+        component: component
+      }));
+    }));
+  }))))))) : /*#__PURE__*/React.createElement("div", {
+    className: "text-center text-neutral-500"
+  }, "No data available"));
+};

package/lib/shared/components/Table/index.js

@@ -0,0 +1 @@
+export { Table } from "./Table";

package/lib/shared/components/Text/Text.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export var Text = function Text(_ref) {
+  var content = _ref.content,
+    fontSize = _ref.fontSize;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "text-p3-medium text-neutral-800 p-[8px]",
+    style: {
+      fontSize: "".concat(fontSize, "px")
+    }
+  }, content);
+};

package/lib/shared/components/Text/index.js

@@ -0,0 +1 @@
+export { Text } from "./Text";

package/lib/shared/components/TextList/TextList.js

@@ -0,0 +1,15 @@
+import React from 'react';
+export var TextList = function TextList(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-3 gap-4 content-start"
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, key) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: key
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "text-[14px] text-neutral-800 font-bold"
+    }, item[0]), /*#__PURE__*/React.createElement("div", {
+      className: "text-[16.2px] text-neutral-900"
+    }, item[1]));
+  }));
+};

package/lib/shared/components/TextList/index.js

@@ -0,0 +1 @@
+export { TextList } from "./TextList";