@nobak/design-system 1.0.0

package/lib/shared/components/ColorChecker/utils.js

@@ -0,0 +1,159 @@
+/**
+ * Represents an RGB color.
+ */
+
+/**
+ * Represents an HSB (Hue, Saturation, Brightness) color.
+ */
+
+/**
+ * Converts RGB color values to HSB.
+ * @param r - Red component (0-255).
+ * @param g - Green component (0-255).
+ * @param b - Blue component (0-255).
+ * @returns HSB color object.
+ */
+var rgbToHsb = function rgbToHsb(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var v = Math.max(r, g, b);
+  var n = v - Math.min(r, g, b);
+  var h = n === 0 ? 0 : n && v === r ? (g - b) / n : v === g ? 2 + (b - r) / n : 4 + (r - g) / n;
+  return {
+    h: 60 * (h < 0 ? h + 6 : h),
+    s: v && n / v * 100,
+    b: v * 100
+  };
+};
+
+/**
+ * Converts HSB color values to RGB.
+ * @param h - Hue component (0-360).
+ * @param s - Saturation component (0-100).
+ * @param b - Brightness component (0-100).
+ * @returns RGB color object.
+ */
+var hsbToRgb = function hsbToRgb(h, s, b) {
+  s /= 100;
+  b /= 100;
+  var k = function k(n) {
+    return (n + h / 60) % 6;
+  };
+  var f = function f(n) {
+    return b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
+  };
+  return {
+    r: Math.round(255 * f(5)),
+    g: Math.round(255 * f(3)),
+    b: Math.round(255 * f(1))
+  }; // Added Math.round for integer RGB values
+};
+
+/**
+ * Converts a HEX color string to an RGB object.
+ * Handles shorthand hex codes (e.g., #fff).
+ * @param hex - Hex color string (e.g., '#ff0000', 'ff0000', '#f00', 'f00').
+ * @returns RGB color object, or null if the hex string is invalid.
+ */
+var hexToRgb = function hexToRgb(hex) {
+  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function (_m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+};
+
+/**
+ * Converts RGB color values to a HEX string.
+ * @param r - Red component (0-255).
+ * @param g - Green component (0-255).
+ * @param b - Blue component (0-255).
+ * @returns Hex color string (without '#').
+ */
+var rgbToHex = function rgbToHex(r, g, b) {
+  return ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
+};
+
+/**
+ * Lightens or darkens a HEX color by a specific amount.
+ * @param hexColor - Hex color string (e.g., '#ff0000', 'ff0000').
+ * @param amount - Amount to lighten (positive value) or darken (negative value).
+ * @returns The adjusted hex color string.
+ */
+var lightenDarkenColor = function lightenDarkenColor(hexColor, amount) {
+  var usePound = false;
+  if (hexColor[0] == "#") {
+    hexColor = hexColor.slice(1);
+    usePound = true;
+  }
+  var num = parseInt(hexColor, 16);
+  var r = (num >> 16) + amount;
+  r = Math.max(0, Math.min(255, r)); // Clamp Red
+
+  var g = (num >> 8 & 0x00FF) + amount;
+  g = Math.max(0, Math.min(255, g)); // Clamp Green
+
+  var b = (num & 0x0000FF) + amount;
+  b = Math.max(0, Math.min(255, b)); // Clamp Blue
+
+  // Corrected variable order in final calculation (was g, b, r -> r, g, b)
+  var newHex = (r << 16 | g << 8 | b).toString(16).padStart(6, '0');
+  return (usePound ? "#" : "") + newHex;
+};
+
+/**
+ * Applies the sRGB transformation to a single normalized color channel value.
+ * Used for luminance calculation.
+ * @param channelValue - Normalized color channel value (0-1).
+ * @returns The adjusted channel value.
+ */
+var checksRGB = function checksRGB(channelValue) {
+  if (channelValue <= 0.03928) {
+    return channelValue / 12.92;
+  } else {
+    return Math.pow((channelValue + 0.055) / 1.055, 2.4);
+  }
+};
+
+/**
+ * Converts an RGB object's channels using the sRGB transformation.
+ * @param color - An RGB color object.
+ * @returns An object with sRGB-adjusted r, g, b values.
+ */
+var getColorObject = function getColorObject(color) {
+  var colorObj = {
+    r: checksRGB(color.r / 255),
+    g: checksRGB(color.g / 255),
+    b: checksRGB(color.b / 255)
+  };
+  return colorObj;
+};
+
+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * Follows WCAG guidelines.
+ * @param color1 - The first RGB color object.
+ * @param color2 - The second RGB color object.
+ * @returns The contrast ratio.
+ */
+var calculateRatio = function calculateRatio(color1, color2) {
+  var colorOneObject = getColorObject(color1);
+  var colorTwoObject = getColorObject(color2);
+  // Calculate luminance (L)
+  var colorOneL = 0.2126 * colorOneObject.r + 0.7152 * colorOneObject.g + 0.0722 * colorOneObject.b;
+  var colorTwoL = 0.2126 * colorTwoObject.r + 0.7152 * colorTwoObject.g + 0.0722 * colorTwoObject.b;
+
+  // Calculate contrast ratio
+  if (colorOneL > colorTwoL) {
+    return (colorOneL + 0.05) / (colorTwoL + 0.05);
+  } else {
+    return (colorTwoL + 0.05) / (colorOneL + 0.05);
+  }
+};
+export { calculateRatio, getColorObject, checksRGB, lightenDarkenColor, rgbToHex, hexToRgb, rgbToHsb, hsbToRgb };

package/lib/shared/components/Command/Command.js

@@ -0,0 +1,95 @@
+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 clsx from 'clsx';
+// import { SearchIcon } from '@heroicons/react/solid'
+import { Combobox, Dialog, Transition } from '@headlessui/react';
+export var Command = function Command(_ref) {
+  var imageUrl = _ref.imageUrl,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    customCss = _ref.customCss,
+    initialState = _ref.initialState,
+    closeCommand = _ref.closeCommand;
+  var people = [{
+    id: 1,
+    name: 'Leslie Alexander',
+    url: '#'
+  }];
+  var _React$useState = React.useState(people[0]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedPerson = _React$useState2[0],
+    setSelectedPerson = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    query = _React$useState4[0],
+    setQuery = _React$useState4[1];
+  var filteredPeople = query === '' ? [] : people.filter(function (person) {
+    return person.name.toLowerCase().includes(query.toLowerCase());
+  });
+  return /*#__PURE__*/React.createElement(Transition.Root, {
+    show: initialState,
+    as: React.Fragment,
+    afterLeave: function afterLeave() {
+      return setQuery('');
+    },
+    appear: true
+  }, /*#__PURE__*/React.createElement(Dialog, {
+    as: "div",
+    className: "relative z-10",
+    onClose: closeCommand
+  }, /*#__PURE__*/React.createElement(Transition.Child, {
+    as: React.Fragment,
+    enter: "ease-out duration-300",
+    enterFrom: "opacity-0",
+    enterTo: "opacity-100",
+    leave: "ease-in duration-200",
+    leaveFrom: "opacity-100",
+    leaveTo: "opacity-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fixed inset-0 bg-gray-500 bg-opacity-90 transition-opacity"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20"
+  }, /*#__PURE__*/React.createElement(Transition.Child, {
+    as: React.Fragment,
+    enter: "ease-out duration-300",
+    enterFrom: "opacity-0 scale-95",
+    enterTo: "opacity-100 scale-100",
+    leave: "ease-in duration-200",
+    leaveFrom: "opacity-100 scale-100",
+    leaveTo: "opacity-0 scale-95"
+  }, /*#__PURE__*/React.createElement(Dialog.Panel, {
+    className: "mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"
+  }, /*#__PURE__*/React.createElement(Combobox, {
+    value: selectedPerson,
+    onChange: function onChange(person) {
+      return window.location = person.url;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React.createElement(Combobox.Input, {
+    className: "h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 sm:text-sm",
+    placeholder: "Search...",
+    onChange: function onChange(event) {
+      return setQuery(event.target.value);
+    }
+  })), filteredPeople.length > 0 && /*#__PURE__*/React.createElement(Combobox.Options, {
+    "static": true,
+    className: "max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-gray-800"
+  }, filteredPeople.map(function (person) {
+    return /*#__PURE__*/React.createElement(Combobox.Option, {
+      key: person.id,
+      value: person,
+      className: function className(_ref2) {
+        var active = _ref2.active;
+        return clsx('cursor-default select-none px-4 py-2', active && 'bg-indigo-600 text-white');
+      }
+    }, person.name);
+  })), query !== '' && filteredPeople.length === 0 && /*#__PURE__*/React.createElement("p", {
+    className: "p-4 text-sm text-gray-500"
+  }, "No people found.")))))));
+};

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

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

package/lib/shared/components/Container/Container.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import clsx from 'clsx';
+export var Container = function Container(_ref) {
+  var children = _ref.children,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'none' : _ref$padding,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? 'none' : _ref$border,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'small' : _ref$height,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? false : _ref$overflow,
+    customCss = _ref.customCss;
+  var style = clsx(padding === 'small' && 'px-2', height === '1/3' && 'h-v76', border === 'bottom' && 'border-b', overflow && 'overflow-y-scroll', 'border-solid border-primary border-collapse', "".concat(customCss));
+  return /*#__PURE__*/React.createElement("div", {
+    className: style
+  }, children);
+};

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

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

package/lib/shared/components/Cover/Cover.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+export var Cover = function Cover(_ref) {
+  var imageUrl = _ref.imageUrl,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'large' : _ref$variant,
+    _ref$fade = _ref.fade,
+    fade = _ref$fade === void 0 ? false : _ref$fade;
+  var style = clsx(variant === 'medium' && 'h-[160px]', variant === 'large' && 'h-[260px] rounded-t-[20px]', "bg-cover bg-center w-full object-center object-cover");
+  return /*#__PURE__*/React.createElement("div", {
+    className: style,
+    style: {
+      backgroundImage: "linear-gradient(to top, rgba(28, 24, 30, 1), rgba(28, 24, 30, 0.2), rgba(249, 252, 255, 0.16)), url('".concat(imageUrl, "')"),
+      backgroundSize: 'cover'
+    }
+  });
+};

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

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

package/lib/shared/components/DatePicker/DatePicker.js

@@ -0,0 +1,52 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 { DateWrapper } from "./components";
+// import { Moon } from "lunarphase-js";
+import { DateTime } from 'luxon';
+export var DatePicker = function DatePicker(_ref) {
+  var value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    handleChange = _ref.handleChange,
+    close = _ref.close;
+  var _React$useState = React.useState({
+      selectedDate: !!value ? typeof value === 'string' ? new Date(value) : value : new Date(),
+      date: value,
+      firstDayOfWeek: 0,
+      showOutsideDays: false
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selected = _React$useState2[0],
+    setSelected = _React$useState2[1];
+  var handleOnDateSelected = function handleOnDateSelected(dateObj) {
+    var date = dateObj.date,
+      selectable = dateObj.selectable;
+    if (!selectable) {
+      return;
+    } else {
+      setSelected(_objectSpread(_objectSpread({}, selected), {}, {
+        selectedDate: date,
+        date: date
+      }));
+      var dt = DateTime.fromJSDate(date).startOf('day');
+      handleChange({
+        name: "".concat(dt.weekdayShort, " ").concat(dt.day, " ").concat(dt.monthLong),
+        value: +new Date(date) / 1000
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateWrapper, {
+    selected: selected.selectedDate,
+    onDateSelected: handleOnDateSelected
+  }));
+};

package/lib/shared/components/DatePicker/components/Calendar.js

@@ -0,0 +1,125 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var monthNamesShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var weekdayNamesShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, forwarededRef) {
+  var calendars = _ref.calendars,
+    getBackProps = _ref.getBackProps,
+    getForwardProps = _ref.getForwardProps,
+    getDateProps = _ref.getDateProps,
+    onDateSelected = _ref.onDateSelected;
+  var ref = React.useRef(null);
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  React.useImperativeHandle(forwarededRef, function () {
+    return ref.current;
+  });
+  if (calendars.length) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, calendars.map(function (calendar, key) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-center",
+        key: key
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between leading-8"
+      }, /*#__PURE__*/React.createElement("h1", {
+        className: "font-medium text-neutral-800"
+      }, monthNamesShort[calendar.month], " ", calendar.year), /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center text-neutral-800"
+      }, /*#__PURE__*/React.createElement("button", _extends({}, getBackProps({
+        calendars: calendars
+      }), {
+        type: "button"
+      }), /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "icon icon-tabler icon-tabler-chevron-left",
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }, /*#__PURE__*/React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }), /*#__PURE__*/React.createElement("polyline", {
+        points: "15 6 9 12 15 18"
+      }))), /*#__PURE__*/React.createElement("button", _extends({}, getForwardProps({
+        calendars: calendars
+      }), {
+        type: "button"
+      }), /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "icon icon-tabler ml-3 icon-tabler-chevron-right",
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }, /*#__PURE__*/React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }), /*#__PURE__*/React.createElement("polyline", {
+        points: "9 6 15 12 9 18"
+      }))))), /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between pt-4 overflow-x-auto "
+      }, /*#__PURE__*/React.createElement("table", {
+        className: "w-full"
+      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, weekdayNamesShort.map(function (weekday, key) {
+        return /*#__PURE__*/React.createElement("th", {
+          key: key
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "w-full flex justify-center"
+        }, /*#__PURE__*/React.createElement("p", {
+          className: " font-medium text-center text-neutral-800"
+        }, weekday)));
+      }))), /*#__PURE__*/React.createElement("tbody", null, calendar.weeks.map(function (week, weekIndex) {
+        return /*#__PURE__*/React.createElement("tr", {
+          key: weekIndex
+        }, week.map(function (dateObj, index) {
+          var key = "".concat(calendar.month).concat(calendar.year).concat(weekIndex).concat(index);
+          if (!dateObj) {
+            return /*#__PURE__*/React.createElement("td", {
+              className: "p-0.5",
+              key: key
+            }, /*#__PURE__*/React.createElement("div", {
+              className: "cursor-pointer flex w-full justify-center"
+            }));
+          }
+          var date = dateObj.date,
+            selected = dateObj.selected,
+            selectable = dateObj.selectable,
+            today = dateObj.today;
+
+          // console.log('Date is', date)
+          var background = today ? 'text-primary-400' : 'transparent';
+          background = selected ? 'bg-secondary-400 text-neutral-800' : background;
+          background = !selectable ? 'bg-primary-100 text-neutral-800' : background;
+          return /*#__PURE__*/React.createElement("td", {
+            className: "p-0.5",
+            key: key
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "cursor-pointer flex w-full justify-center"
+          }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", _extends({
+            type: "button",
+            className: "w-10 h-10 flex items-center justify-center font-medium text-neutral-800 ".concat(background, " rounded-full")
+          }, getDateProps({
+            dateObj: dateObj
+          }), {
+            onClick: function onClick() {
+              return onDateSelected(dateObj);
+            }
+          }), selectable ? date.getDate() : 'X'))));
+        }));
+      }))))));
+    }));
+  }
+  return null;
+});

package/lib/shared/components/DatePicker/components/CalendarDay.js

@@ -0,0 +1,23 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+export var CalendarDay = function CalendarDay(_ref) {
+  var selectable = _ref.selectable,
+    date = _ref.date,
+    dateObj = _ref.dateObj,
+    onDateSelected = _ref.onDateSelected,
+    color = _ref.color,
+    background = _ref.background,
+    getDateProps = _ref.getDateProps;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cursor-pointer flex w-full justify-center"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: "w-10 h-10 flex items-center justify-center font-medium text-".concat(color, " ").concat(background, " rounded-full")
+  }, getDateProps({
+    dateObj: dateObj
+  }), {
+    onClick: function onClick() {
+      return onDateSelected(dateObj);
+    }
+  }), selectable ? date.getDate() : 'X')));
+};

package/lib/shared/components/DatePicker/components/DateWrapper.js

@@ -0,0 +1,15 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { useDayzed } from 'dayzed';
+import { Calendar } from '.';
+export var DateWrapper = function DateWrapper(_ref) {
+  var selected = _ref.selected,
+    onDateSelected = _ref.onDateSelected;
+  var dayzedData = useDayzed({
+    selected: selected,
+    onDateSelected: onDateSelected
+  });
+  return /*#__PURE__*/React.createElement(Calendar, _extends({}, dayzedData, {
+    onDateSelected: onDateSelected
+  }));
+};

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

@@ -0,0 +1,2 @@
+export { Calendar } from "./Calendar";
+export { DateWrapper } from "./DateWrapper";

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

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

package/lib/shared/components/DateTime/DateTime.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { format } from 'date-fns';
+import clsx from 'clsx';
+var getToday = function getToday() {
+  var date = format(+new Date(), 'MMM, dd, eee, yyyy').split(',');
+  return {
+    month: date[0],
+    date: date[1],
+    dayWeek: date[2],
+    year: date[3]
+  };
+};
+export var DateTime = function DateTime(_ref) {
+  var Component = _ref.component,
+    to = _ref.to,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'large' : _ref$variant;
+  var today = getToday();
+  var containerStyle = clsx(variant === 'medium' && 'w-[64px] h-[64px]', variant === 'large' && 'w-[96px]', 'block rounded-[8px] overflow-hidden bg-neutral-900 text-center');
+  var dateStyle = clsx(variant === 'medium' && 'text-[21px] font-bold', variant === 'large' && 'text-4xl font-bold');
+  var yearStyle = clsx(variant === 'medium' && 'text-[7px] font-bold', variant === 'large' && 'text-xs font-bold');
+  var dayWeekStyle = clsx(variant === 'medium' && 'text-[7px] font-bold', variant === 'large' && 'text-xs font-bold');
+  var monthStyle = clsx(variant === 'medium' && 'bg-secondary-400 text-white text-[12px] py-1 font-bold tracking-wider', variant === 'large' && 'bg-secondary-400 text-white py-1');
+  var topStyle = clsx(variant === 'medium' && 'pt-[1px] border-l border-r', variant === 'large' && 'pt-1 border-l border-r');
+  var botStyle = clsx(variant === 'medium' && 'pb-[1px] px-[2px] border-l border-r border-b flex justify-between', variant === 'large' && 'pb-2 px-2 border-l border-r border-b flex justify-between');
+  return /*#__PURE__*/React.createElement(Component, {
+    to: to
+  }, variant === "medium" && /*#__PURE__*/React.createElement("div", {
+    className: containerStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: monthStyle
+  }, today.dayWeek), /*#__PURE__*/React.createElement("div", {
+    className: topStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: dateStyle
+  }, today.date))), variant === "large" && /*#__PURE__*/React.createElement("div", {
+    className: containerStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: monthStyle
+  }, today.month), /*#__PURE__*/React.createElement("div", {
+    className: topStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: dateStyle
+  }, today.date)), /*#__PURE__*/React.createElement("div", {
+    className: botStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: yearStyle
+  }, today.dayWeek), /*#__PURE__*/React.createElement("span", {
+    className: dayWeekStyle
+  }, today.year))));
+};

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

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

package/lib/shared/components/Debug/Debug.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export var Debug = function Debug(_ref) {
+  var children = _ref.children,
+    customCss = _ref.customCss;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "mt-[40px] p-[20px] bg-neutral-150 ".concat(customCss, " border rounded-[3px] border-solid border-neutral-200")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-neutral-1500 font-bold"
+  }, "DEBUG"), /*#__PURE__*/React.createElement("div", {
+    className: "bg-neutral-200  border border-neutral-300 rounded-[2px] px-[32px] py-[16px] text-neutral-1300 flex flex-col space-y-[4px"
+  }, children)));
+};

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

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

package/lib/shared/components/Disclosure/Disclosure.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Disclosure as DisclosureComponent } from '@headlessui/react';
+import { Icon } from '..';
+export var Disclosure = function Disclosure(_ref) {
+  var items = _ref.items;
+  var style = clsx('flex flex-col space-y-[20px] w-full');
+  return /*#__PURE__*/React.createElement("div", {
+    className: style
+  }, items.map(function (_ref2, key) {
+    var title = _ref2.title,
+      text = _ref2.text;
+    return /*#__PURE__*/React.createElement(DisclosureComponent, {
+      key: key
+    }, function (_ref3) {
+      var open = _ref3.open;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DisclosureComponent.Button, {
+        className: "w-full py-[15px] px-[30px] text-h4-semi-bold text-neutral-800 border rounded-[4px] border-neutral-150"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex justify-between"
+      }, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(!!open && 'rotate-180')
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "shootingArrowRight",
+        size: "xlarge"
+      }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DisclosureComponent.Panel, {
+        className: "pt-4 pb-2 text-left text-p1-medium text-neutral-500"
+      }, text))));
+    });
+  }));
+};

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

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