@soul-refiner/design-system 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/src/components/iconography/avatar/avatar.js

@@ -0,0 +1,190 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var Image = require('next/image');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var heading = require('../../atoms/typography/heading.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var approved = require('./icons/approved.js');
+var busy = require('./icons/busy.js');
+var declined = require('./icons/declined.js');
+var _default = require('./icons/default.js');
+var focus = require('./icons/focus.js');
+var locked = require('./icons/locked.js');
+var offline = require('./icons/offline.js');
+var online = require('./icons/online.js');
+var subscribed = require('./icons/subscribed.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
+
+/**
+ * Lookup tables for sizes
+ */
+const iconReference = {
+    approved: approved.Approved,
+    busy: busy.Busy,
+    declined: declined.Declined,
+    focus: focus.Focus,
+    locked: locked.Locked,
+    none: () => React__default.default.createElement(React__default.default.Fragment, null),
+    online: online.Online,
+    offline: offline.Offline,
+    subscribed: subscribed.Subscribed,
+};
+const iconSize = {
+    '96': 18,
+    '72': 18,
+    '64': 18,
+    '56': 15,
+    '48': 15,
+    '40': 15,
+    '36': 14,
+    '32': 14,
+    '24': 12,
+    '16': 8,
+};
+const iconOffsetX = {
+    '96': -23,
+    '72': -21,
+    '64': -20,
+    '56': -16,
+    '48': -15,
+    '40': -13,
+    '36': -12,
+    '32': -12,
+    '24': -10,
+    '16': -8,
+};
+const iconOffsetY = {
+    '96': 5,
+    '72': 3,
+    '64': 2,
+    '56': 1,
+    '48': 0,
+    '40': -2,
+    '36': -2,
+    '32': -2,
+    '24': -2,
+    '16': -1,
+};
+const fallbackImgData = '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';
+const fallBackImgSrc = `data:image/png;base64,${fallbackImgData}`;
+/**
+ *
+ * Avatar
+ */
+const Avatar = ({ as = 'button', href, image, fallbackImg = fallBackImgSrc, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, tooltipSx, ...rest }) => {
+    const [displayDefault, setDisplayDefault] = React__default.default.useState(false);
+    const Icon = iconReference?.[status ?? 'none'];
+    return (React__default.default.createElement(box.Box, { "$align": "center", "$gap": 18, sx: `
+        position: relative; 
+        &:hover {
+          .tooltipContainer {
+            display: flex;
+          }
+        }
+        ${sx}
+      `, ...rest },
+        React__default.default.createElement(Container, { as: as, "$size": size, href: href },
+            !displayDefault && (React__default.default.createElement(Image__default.default, { alt: "avatar image", height: size, onError: () => setDisplayDefault(true), quality: 100, sizes: "96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16", src: image ?? fallbackImg, width: size })),
+            displayDefault && React__default.default.createElement(_default.Default, null),
+            React__default.default.createElement("div", null,
+                React__default.default.createElement(Icon, null))),
+        (title || subtitle) && (React__default.default.createElement(TextContainer, { "$textPosition": textPosition },
+            title && (React__default.default.createElement(heading.H, { as: "h3", "$bold": true, "$color": "grey-2", "$textClampLines": 1, sx: "font-size: 26px;" }, title)),
+            subtitle && (React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle)))),
+        tooltipContent && (React__default.default.createElement(TooltipContainer, { className: "tooltipContainer", "$sx": tooltipSx }, tooltipContent))));
+};
+Avatar.displayName = 'Avatar';
+const Container = styled.styled.div `
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  cursor: ${({ as }) => as && (as === 'a' || as === 'button') ? 'pointer' : 'initial'};
+  padding: 0px;
+  border: 0px;
+  position: relative;
+  background-color: transparent;
+
+  > img,
+  > svg {
+    flex-shrink: 0;
+    border-radius: 50%;
+    overflow: hidden;
+    object-fit: cover;
+
+    ${({ $size }) => `
+    width: ${$size}px;
+    height: ${$size}px;
+    `}
+  }
+
+  div > svg {
+    position: relative;
+    width: ${({ $size }) => iconSize[`${$size}`]}px;
+    margin-left: ${({ $size }) => iconOffsetX[`${$size}`]}px;
+    top: ${({ $size }) => iconOffsetY[`${$size}`]}px;
+  }
+`;
+const TextContainer = styled.styled.div `
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 4px;
+  order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
+`;
+const TooltipContainer = styled.styled.div `
+  display: none;
+  position: absolute;
+  top: 100%;
+  z-index: 250;
+  background-color: var(--color-white);
+  border-radius: 24px;
+  box-shadow: var(--elevation-2);
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Group = ({ children, numDisplayed, total }) => {
+    let size = 0;
+    // filter out ReactNodes and ReactElements that are not Avatars
+    const displayedElements = React__default.default.Children.map(children, (child, index) => {
+        if (React__default.default.isValidElement(child) &&
+            child.type.displayName === 'Avatar') {
+            size = child.props.size;
+            return React__default.default.createElement(AvatarWrapper, { "$index": index }, child);
+        }
+        return null;
+    }).slice(0, numDisplayed);
+    displayedElements.push(React__default.default.createElement(Total, { "$index": displayedElements.length + 1, "$size": size },
+        React__default.default.createElement(paragraph.P, { "$fontSize": 11, "$lineHeight": 20 },
+            "+",
+            total - numDisplayed)));
+    return React__default.default.createElement(box.Box, null, displayedElements);
+};
+Group.displayName = 'Avatar.Group';
+Avatar.Group = Group;
+const AvatarWrapper = styled.styled.div `
+  position: relative;
+  z-index: ${({ $index }) => `-${$index}`};
+  border-radius: 50%;
+  border: 2px solid var(--color-white);
+  margin-right: -8px;
+`;
+const Total = styled.styled.div `
+  position: relative;
+  z-index: ${({ $index }) => `-${$index}`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${({ $size }) => `
+    width: ${$size}px;
+    height: ${$size}px;
+  `}
+  border-radius: 50%;
+  background-color: var(--color-grey-9);
+`;
+
+exports.Avatar = Avatar;

package/dist/src/components/iconography/avatar/icons/approved.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Approved = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#09B3A1", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#fff", d: "M6.485 8.521a1.1 1.1 0 1 0-1.555 1.555l2.199 2.199a1.1 1.1 0 0 0 1.555 0l4.398-4.398a1.1 1.1 0 0 0-1.555-1.555l-3.62 3.62-1.422-1.421Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Approved = Approved;

package/dist/src/components/iconography/avatar/icons/busy.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Busy = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#F34436", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#fff", d: "m7.839 5.526 4.622 4.622c.33.33.33.825 0 1.155l-1.156 1.155a.798.798 0 0 1-1.155 0L5.528 7.838a.798.798 0 0 1 0-1.156l1.156-1.155a.798.798 0 0 1 1.155 0Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Busy = Busy;

package/dist/src/components/iconography/avatar/icons/declined.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Declined = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#F34436", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#fff", d: "M10.47 9.015 12 7.479c.402-.404.4-1.056-.005-1.457a1.034 1.034 0 0 0-1.46.005L9.013 7.555 7.464 6.003A1.034 1.034 0 0 0 6.004 6 1.028 1.028 0 0 0 6 7.457l1.556 1.559-1.522 1.528c-.402.403-.4 1.056.004 1.457.404.4 1.058.399 1.46-.005l1.515-1.52 1.486 1.489a1.034 1.034 0 0 0 1.46.003 1.028 1.028 0 0 0 .003-1.457L10.47 9.015Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Declined = Declined;

package/dist/src/components/iconography/avatar/icons/default.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Default = () => (React__default.default.createElement("svg", { viewBox: "0 0 228 228", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.default.createElement("rect", { width: "228", height: "228", fill: "#D0D2D6" }),
+    React__default.default.createElement("path", { d: "M114 114C104.513 114 96.3906 110.622 89.6344 103.866C82.8781 97.1094 79.5 88.9875 79.5 79.5C79.5 70.0125 82.8781 61.8906 89.6344 55.1344C96.3906 48.3781 104.513 45 114 45C123.488 45 131.609 48.3781 138.366 55.1344C145.122 61.8906 148.5 70.0125 148.5 79.5C148.5 88.9875 145.122 97.1094 138.366 103.866C131.609 110.622 123.488 114 114 114ZM45 183V158.85C45 153.963 46.2593 149.469 48.7778 145.369C51.2905 141.275 54.6312 138.15 58.8 135.994C67.7125 131.538 76.7688 128.194 85.9688 125.963C95.1688 123.738 104.513 122.625 114 122.625C123.488 122.625 132.831 123.738 142.031 125.963C151.231 128.194 160.288 131.538 169.2 135.994C173.369 138.15 176.71 141.275 179.222 145.369C181.741 149.469 183 153.963 183 158.85V183H45Z", fill: "white" })));
+
+exports.Default = Default;

package/dist/src/components/iconography/avatar/icons/focus.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Focus = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#fff", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#A246C1", d: "M9 16A7 7 0 1 1 9 2a7 7 0 0 1 0 14Zm0-2.333a4.667 4.667 0 1 0 0-9.334 4.667 4.667 0 0 0 0 9.334Zm0-2.334a2.333 2.333 0 1 1 0-4.666 2.333 2.333 0 0 1 0 4.666Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Focus = Focus;

package/dist/src/components/iconography/avatar/icons/locked.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Locked = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#B3B7BC", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#4A4F55", d: "M9.023 4.594H8.98c-1.221 0-2.21.973-2.21 2.175V7.89h1.116V6.78c0-.6.494-1.087 1.105-1.087h.022c.61 0 1.105.486 1.105 1.087v1.11h1.116V6.77c0-1.203-.989-2.176-2.21-2.176ZM6.77 7.89h1.116V8.99H6.769V7.89Zm3.348 0h1.116V8.99h-1.116V7.89Zm0 1.099H6.77c-.616 0-1.116.492-1.116 1.099v1.648c0 .91.742 1.648 1.655 1.648h3.386c.914 0 1.655-.732 1.655-1.648v-1.648c0-.607-.5-1.1-1.116-1.1h-1.116Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Locked = Locked;

package/dist/src/components/iconography/avatar/icons/offline.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Offline = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#4A4F55", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#B3B7BC", d: "M9 12.3a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Offline = Offline;

package/dist/src/components/iconography/avatar/icons/online.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Online = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#3CC260", rx: "8" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Online = Online;

package/dist/src/components/iconography/avatar/icons/subscribed.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Subscribed = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 20 20" },
+    React__default.default.createElement("path", { fill: "#fff", fillRule: "evenodd", d: "M19.088 9.994a9.088 9.088 0 1 1-18.176 0 9.088 9.088 0 0 1 18.176 0Z", clipRule: "evenodd" }),
+    React__default.default.createElement("path", { fill: "url(#a)", d: "M17.088 9.994a7.088 7.088 0 1 1-14.176 0 7.088 7.088 0 0 1 14.176 0Z" }),
+    React__default.default.createElement("path", { fill: "#fff", d: "M9.25 5h1.5v.936c.338.048.648.134.927.26.458.202.813.485 1.067.847.255.362.386.781.394 1.258h-1.665a.976.976 0 0 0-.413-.734c-.244-.175-.575-.262-.992-.262-.283 0-.523.039-.718.117a1.01 1.01 0 0 0-.45.316.748.748 0 0 0-.152.461.645.645 0 0 0 .092.375c.07.107.165.2.285.278.12.075.26.141.418.199.157.054.326.101.505.14l.738.172c.359.078.688.183.988.313.299.13.559.29.778.48a2.003 2.003 0 0 1 .698 1.559c-.003.49-.131.914-.385 1.273-.252.357-.615.634-1.091.832-.302.125-.643.21-1.024.255V15h-1.5v-.942a4.002 4.002 0 0 1-.923-.242c-.49-.198-.872-.49-1.148-.879-.273-.39-.416-.873-.429-1.449h1.681c.019.269.098.492.237.672.142.177.33.311.566.402.238.089.507.133.806.133.294 0 .55-.041.767-.125.219-.083.389-.199.509-.347a.79.79 0 0 0 .18-.512c0-.18-.054-.33-.164-.453a1.248 1.248 0 0 0-.473-.313 4.908 4.908 0 0 0-.759-.234l-.894-.219c-.693-.164-1.24-.42-1.641-.77-.402-.348-.601-.818-.598-1.41-.003-.484.13-.907.397-1.269.27-.362.64-.645 1.111-.848.242-.104.5-.181.775-.232V5Z" }),
+    React__default.default.createElement("defs", null,
+        React__default.default.createElement("radialGradient", { id: "a", cx: "0", cy: "0", r: "1", gradientTransform: "rotate(-49.924 18.2 -.497) scale(14.7338 19.4196)", gradientUnits: "userSpaceOnUse" },
+            React__default.default.createElement("stop", { stopColor: "#09B3A1" }),
+            React__default.default.createElement("stop", { offset: "1", stopColor: "#3AC15E" })))));
+
+exports.Subscribed = Subscribed;

package/dist/src/components/iconography/icon/icon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { COLORS } from '../../../common/colors';
+type NativeProps = Pick<React.HTMLAttributes<SVGElement>, 'children' | 'className' | 'dangerouslySetInnerHTML' | 'id' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onCopy' | 'onCut' | 'onKeyDown' | 'onKeyDownCapture' | 'onKeyUp' | 'onKeyUpCapture' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'> & {
+    value?: string;
+};
+export interface IconProps extends NativeProps {
+    as?: React.ElementType;
+    color?: (typeof COLORS)[number];
+    size?: 16 | 20 | 24 | 32 | 40;
+    sx?: string;
+}
+export declare const Icon: ({ as, children, color, size, sx, ...rest }: IconProps) => React.JSX.Element;
+export {};

package/dist/src/components/iconography/icon/icon.js

@@ -0,0 +1,19 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var colors = require('../../../common/colors.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Icon = ({ as, children, color = 'grey-3', size = 16, sx, ...rest }) => {
+    return (React__default.default.createElement(SVG, { as: as, width: size, height: size, viewBox: "0 0 16 16", fill: colors.colorReference[color], xmlns: "http://www.w3.org/2000/svg", "$sx": sx, ...rest }, children));
+};
+const SVG = styled.styled.svg `
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+exports.Icon = Icon;

package/dist/src/components/input/calendar/calendar.js

@@ -0,0 +1,267 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var date$1 = require('../../../common/date.js');
+var button = require('../../actions/button/button.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var chevron_left = require('../../../icons/arrow/chevron_left.js');
+var chevron_right = require('../../../icons/arrow/chevron_right.js');
+var calendar = require('../../../icons/time/calendar.js');
+var date = require('../../../utils/date.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, disablePastDates, }) => {
+    const today = new Date();
+    today.setHours(0);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    today.setMilliseconds(0);
+    const firstOfMonth = new Date(today);
+    firstOfMonth.setDate(1);
+    const pickerRef = React__default.default.useRef(null);
+    const [show, setShow] = React__default.default.useState(false);
+    const [displayDate, setDisplayDate] = React__default.default.useState(() => selectedDate?.toDateString() || new Date().toDateString());
+    const [componentSelectedDate, setComponentSelectedDate] = React__default.default.useState(() => selectedDate?.toDateString() || new Date().toDateString());
+    React__default.default.useEffect(() => {
+        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
+    }, [selectedDate]);
+    const handleShow = () => setShow((prev) => !prev);
+    const handleBlur = (event) => {
+        if (pickerRef?.current &&
+            !pickerRef?.current?.contains(event.relatedTarget)) {
+            setShow(false);
+        }
+    };
+    const handlePreviousMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate.toDateString();
+        });
+    };
+    const handleNextMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate.toDateString();
+        });
+    };
+    const onSelect = (newDate) => {
+        setComponentSelectedDate(newDate.toDateString());
+    };
+    const handleApply = () => {
+        parentOnSelect(new Date(componentSelectedDate));
+        setShow(false);
+    };
+    const handleClick = (event) => {
+        const target = event.target;
+        const day = target.getAttribute('data-day');
+        const month = target.getAttribute('data-month');
+        const year = target.getAttribute('data-year');
+        onSelect(new Date(`${month}-${day}-${year}`));
+    };
+    const handleCancel = () => {
+        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
+        setShow(false);
+    };
+    const calendar$1 = date.buildCalendar(new Date(displayDate).getMonth() + 1, new Date(displayDate).getFullYear());
+    const [month, day, year] = (selectedDate || new Date())
+        .toLocaleString('default', {
+        year: '2-digit',
+        month: '2-digit',
+        day: '2-digit',
+    })
+        .split('/');
+    return (React__default.default.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
+        React__default.default.createElement(InputWrapper, null,
+            React__default.default.createElement(Input, { value: selectedDate ? `${month} / ${day} / ${year}` : '', onFocus: handleShow, style: { letterSpacing: '1px', fontSize: '16px' }, readOnly: true }),
+            React__default.default.createElement(calendar.Calendar, null)),
+        show && (React__default.default.createElement(DateSelector, null,
+            React__default.default.createElement(InnerWrapper, null,
+                React__default.default.createElement("div", null,
+                    React__default.default.createElement(MonthBar, null,
+                        React__default.default.createElement(Arrow, { onClick: handlePreviousMonth },
+                            React__default.default.createElement(chevron_left.ChevronLeft, { size: 24 })),
+                        React__default.default.createElement(paragraph.P, null, `${Object.values(date$1.MONTHS)[Math.max(0, Math.min(new Date(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
+                        React__default.default.createElement(Arrow, { onClick: handleNextMonth },
+                            React__default.default.createElement(chevron_right.ChevronRight, { size: 24 }))),
+                    React__default.default.createElement(WeekdayWrapper, null, Object.values(date$1.WEEKDAYS).map((day) => (React__default.default.createElement(paragraph.P, { key: day }, day)))),
+                    React__default.default.createElement(Calendar, null, calendar$1.map((week, index) => {
+                        return (React__default.default.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
+                            const dateObj = new Date(`${day[1]}-${day[2]}-${day[0]}`);
+                            const isPastDate = today.getTime() - dateObj.getTime() > 0;
+                            const isCurrMonth = day[1] !==
+                                date.zeroPad(new Date(displayDate).getMonth() + 1, 2);
+                            const isNotCurrent = disablePastDates
+                                ? isPastDate
+                                : isCurrMonth;
+                            const isToday = Math.abs(dateObj.getTime() - today.getTime()) < 0.5;
+                            const isSelected = new Date(componentSelectedDate).getTime() ===
+                                dateObj.getTime();
+                            return (React__default.default.createElement(Day, { className: `${isToday ? 'today' : ''}${isNotCurrent ? ' not-current' : ''}${isSelected ? ' selected' : ''}`.trim(), "data-day": day[2], "data-month": day[1], "data-year": day[0], key: 'day-' + dayIndex.toString(36), onClick: handleClick }, `${day[2]}`.startsWith('0')
+                                ? `${day[2]}`[1]
+                                : day[2]));
+                        })));
+                    })),
+                    React__default.default.createElement(BottomWrapper, null,
+                        React__default.default.createElement(button.Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
+                        React__default.default.createElement(button.Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
+};
+const Wrapper = styled.styled.div `
+  position: relative;
+  width: fit-content;
+  font-family: var(--font-inter);
+`;
+const DateSelector = styled.styled.div `
+  transform: translateY(26px);
+  position: absolute;
+  z-index: 5;
+  background-color: #ffffff;
+  border-radius: 25px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+`;
+const InnerWrapper = styled.styled.div `
+  display: flex;
+  gap: 31px;
+  padding: 30px;
+  position: relative;
+  border-radius: 25px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 24px;
+    height: 24px;
+    top: -12px;
+    left: 48px;
+    background-color: #ffffff;
+    transform: rotate(45deg);
+    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
+  }
+`;
+const MonthBar = styled.styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  user-select: none;
+`;
+const Arrow = styled.styled.button `
+  appearance: none;
+  border: none;
+  outline: none;
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--color-primary-blue-2);
+    border-color: #ffffff;
+    svg {
+      fill: #ffffff;
+    }
+  }
+`;
+const WeekdayWrapper = styled.styled.div `
+  display: flex;
+  gap: 32px;
+  user-select: none;
+`;
+const Calendar = styled.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin: 32px 0px;
+  user-select: none;
+`;
+const Week = styled.styled.div `
+  display: flex;
+  gap: 32px;
+  border-radius: 24px;
+`;
+const Day = styled.styled.button `
+  outline: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+
+  &.today {
+    color: var(--color-primary-blue-2);
+    font-weight: 600;
+  }
+
+  &.not-current {
+    color: var(--color-grey-9);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &.selected {
+    background-color: var(--color-primary-blue-2);
+    color: #ffffff;
+
+    &.not-current {
+      background-color: var(--color-blue-9);
+    }
+  }
+`;
+const BottomWrapper = styled.styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+`;
+const Input = styled.styled.input `
+  max-width: 140px;
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+`;
+const InputWrapper = styled.styled.div `
+  width: fit-content;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: var(--color-blue-10);
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+`;
+
+exports.CalendarInput = CalendarInput;