@soul-refiner/design-system 2.0.0-alpha.27 → 2.0.0-alpha.28

package/dist/components/input/date/date.js

@@ -11,6 +11,10 @@ var chevron_right = require('../../../icons/arrow/chevron_right.js');
 var arrow_right = require('../../../icons/arrow/arrow_right.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 DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) => {
     const today = new Date();
     today.setHours(0);
@@ -22,19 +26,19 @@ const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) =>
     const thisMonth = firstOfMonth.getMonth() + 1;
     const thisYear = firstOfMonth.getFullYear();
     const isSingleDate = !endDate;
-    const pickerRef = React.useRef(null);
-    const [show, setShow] = React.useState(false);
-    const [displayDate, setDisplayDate] = React.useState(() => endDate?.toDateString() ?? startDate.toDateString());
-    const [componentStartDate, setComponentStartDate] = React.useState(() => startDate.toDateString());
-    const [componentEndDate, setComponentEndDate] = React.useState(() => endDate?.toDateString() ?? startDate.toDateString());
-    const [firstClick, setFirstClick] = React.useState(true);
-    React.useEffect(() => {
+    const pickerRef = React__default.default.useRef(null);
+    const [show, setShow] = React__default.default.useState(false);
+    const [displayDate, setDisplayDate] = React__default.default.useState(() => endDate?.toDateString() ?? startDate.toDateString());
+    const [componentStartDate, setComponentStartDate] = React__default.default.useState(() => startDate.toDateString());
+    const [componentEndDate, setComponentEndDate] = React__default.default.useState(() => endDate?.toDateString() ?? startDate.toDateString());
+    const [firstClick, setFirstClick] = React__default.default.useState(true);
+    React__default.default.useEffect(() => {
         setComponentStartDate(startDate.toDateString());
     }, [startDate]);
-    React.useEffect(() => {
+    React__default.default.useEffect(() => {
         setComponentEndDate((endDate ?? new Date())?.toDateString());
     }, [endDate]);
-    React.useEffect(() => {
+    React__default.default.useEffect(() => {
         if (!isSingleDate &&
             new Date(componentStartDate).getTime() >
                 new Date(componentEndDate).getTime()) {
@@ -159,34 +163,34 @@ const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) =>
     displayFirstOfMonth.setDate(1);
     const displayLastOfMonth = new Date(displayDateObj);
     displayLastOfMonth.setDate(date.getMonthDays(displayDateObj.getMonth() + 1));
-    return (React.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
-        React.createElement(Trigger, { onClick: handleShow },
-            label && (React.createElement(React.Fragment, null,
+    return (React__default.default.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
+        React__default.default.createElement(Trigger, { onClick: handleShow },
+            label && (React__default.default.createElement(React__default.default.Fragment, null,
                 label,
                 ' | ')),
-            React.createElement("span", null, startDate.toLocaleDateString('en-US').replaceAll('/', '-')),
-            !!endDate && startDate.toDateString() !== endDate?.toDateString() && (React.createElement(arrow_right.ArrowRight, { sx: "padding: 0px 8px; margin-bottom: -2px;" })),
-            startDate.toDateString() !== endDate?.toDateString() && (React.createElement("span", null, endDate?.toLocaleDateString('en-US').replaceAll('/', '-')))),
-        show && (React.createElement(DateSelector, null,
-            React.createElement(InnerWrapper, null,
-                !!endDate && (React.createElement(Left, null,
-                    React.createElement(button.Button, { size: "small", type: "text", onClick: handleSetToday }, "Today"),
-                    React.createElement(button.Button, { size: "small", type: "text", onClick: handleSetYesterday }, "Yesterday"),
-                    React.createElement(button.Button, { size: "small", type: "text", onClick: handleLastSevenDays }, "Last 7 days"),
-                    React.createElement(button.Button, { size: "small", type: "text", onClick: handleLastThirtyDays }, "Last 30 days"),
-                    React.createElement(button.Button, { size: "small", type: "text", onClick: handleThisMonth }, "This month"),
-                    React.createElement(button.Button, { size: "small", type: "text", onClick: handleLastMonth }, "Last month"),
-                    React.createElement(button.Button, { size: "small", type: "text", onClick: handleLastYear }, "Last Year"))),
-                React.createElement("div", null,
-                    React.createElement(MonthBar, null,
-                        React.createElement(Arrow, { onClick: handlePreviousMonth },
-                            React.createElement(chevron_left.ChevronLeft, { size: 24 })),
-                        React.createElement(paragraph.P, null, `${Object.values(date$1.MONTHS)[Math.max(0, Math.min(new Date(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
-                        React.createElement(Arrow, { onClick: handleNextMonth },
-                            React.createElement(chevron_right.ChevronRight, { size: 24 }))),
-                    React.createElement(WeekdayWrapper, null, Object.values(date$1.WEEKDAYS).map((day) => (React.createElement(paragraph.P, { key: day }, day)))),
-                    React.createElement(Calendar, null, calendar.map((week, index) => {
-                        return (React.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
+            React__default.default.createElement("span", null, startDate.toLocaleDateString('en-US').replaceAll('/', '-')),
+            !!endDate && startDate.toDateString() !== endDate?.toDateString() && (React__default.default.createElement(arrow_right.ArrowRight, { sx: "padding: 0px 8px; margin-bottom: -2px;" })),
+            startDate.toDateString() !== endDate?.toDateString() && (React__default.default.createElement("span", null, endDate?.toLocaleDateString('en-US').replaceAll('/', '-')))),
+        show && (React__default.default.createElement(DateSelector, null,
+            React__default.default.createElement(InnerWrapper, null,
+                !!endDate && (React__default.default.createElement(Left, null,
+                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleSetToday }, "Today"),
+                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleSetYesterday }, "Yesterday"),
+                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleLastSevenDays }, "Last 7 days"),
+                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleLastThirtyDays }, "Last 30 days"),
+                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleThisMonth }, "This month"),
+                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleLastMonth }, "Last month"),
+                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleLastYear }, "Last Year"))),
+                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.map((week, index) => {
+                        return (React__default.default.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
                             const isCurrMonth = day[1] !==
                                 date.zeroPad(new Date(displayDate).getMonth() + 1, 2);
                             const dateObj = new Date(`${day[1]}-${day[2]}-${day[0]}`);
@@ -201,14 +205,14 @@ const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) =>
                                 !isEndDate;
                             const isFirstOfMonth = displayFirstOfMonth.toDateString() === time;
                             const isLastOfMonth = displayLastOfMonth.toDateString() === time;
-                            return (React.createElement(Day, { className: `${isToday ? 'today' : ''}${isCurrMonth ? ' not-current' : ''}${isStartDate ? ' start-date' : ''}${isEndDate ? ' end-date' : ''}${between ? ' between' : ''}${isFirstOfMonth ? ' first-of-month' : ''}${isLastOfMonth ? ' last-of-month' : ''}`.trim(), "data-day": day[2], "data-month": day[1], "data-year": day[0], key: 'day-' + dayIndex.toString(36), onClick: handleClick }, `${day[2]}`.startsWith('0')
+                            return (React__default.default.createElement(Day, { className: `${isToday ? 'today' : ''}${isCurrMonth ? ' not-current' : ''}${isStartDate ? ' start-date' : ''}${isEndDate ? ' end-date' : ''}${between ? ' between' : ''}${isFirstOfMonth ? ' first-of-month' : ''}${isLastOfMonth ? ' last-of-month' : ''}`.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.createElement(BottomWrapper, null,
-                        React.createElement(button.Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
-                        React.createElement(button.Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
+                    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;

package/dist/components/input/filter/filter.js

@@ -12,26 +12,31 @@ var close = require('../../../icons/basic/close.js');
 var styles = require('../../../common/styles.js');
 var filter_option = require('./filter_option.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', resetGraphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
     const multiple = !!checkbox;
-    const wrapperRef = React.useRef(null);
-    const optionsRef = React.useRef(null);
-    const [open, setOpen] = React.useState(false);
-    const [selected, setSelected] = React.useState(() => defaultValue ? defaultValue : multiple ? [] : '');
-    const [filterLabel, setFilterLabel] = React.useState('');
-    React.useEffect(() => {
+    const wrapperRef = React__default.default.useRef(null);
+    const optionsRef = React__default.default.useRef(null);
+    const [open, setOpen] = React__default.default.useState(false);
+    const [selected, setSelected] = React__default.default.useState(() => defaultValue ? defaultValue : multiple ? [] : '');
+    const [filterLabel, setFilterLabel] = React__default.default.useState('');
+    React__default.default.useEffect(() => {
         if (disabled) {
             setOpen(false);
         }
     }, [disabled]);
-    React.useEffect(() => {
+    React__default.default.useEffect(() => {
         if (triggerType === 'outlined' && defaultValue === undefined) {
             setSelected(multiple
                 ? [options[0]?.value]
                 : options[0]?.value);
         }
     }, [triggerType, defaultValue]);
-    React.useEffect(() => {
+    React__default.default.useEffect(() => {
         if (open) {
             return;
         }
@@ -97,18 +102,18 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'lef
     const dropdownOptions = [
         ...options.map((option, index) => {
             if (typeof option === 'string' && option === 'break') {
-                return React.createElement(filter_option.Spacer, { key: `${React.useId()}-spacer-${index}` });
+                return React__default.default.createElement(filter_option.Spacer, { key: `${React__default.default.useId()}-spacer-${index}` });
             }
-            return (React.createElement(filter_option.Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: !multiple && triggerType === 'pill', showClose: optionShowClose === undefined
+            return (React__default.default.createElement(filter_option.Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: !multiple && triggerType === 'pill', showClose: optionShowClose === undefined
                     ? index === 0 && triggerType === 'pill'
                     : optionShowClose, onClose: () => setOpen(false), ...option }));
         }),
-        triggerType === 'pill' && React.createElement(filter_option.Spacer, { key: `spacer-${options.length}` }),
+        triggerType === 'pill' && React__default.default.createElement(filter_option.Spacer, { key: `spacer-${options.length}` }),
     ];
     const showResetGraphic = resetGraphic &&
         (typeof selected === 'string' ? !!selected : !!selected.length);
-    return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
-        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, onReset: resetGraphic
+    return (React__default.default.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
+        React__default.default.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, onReset: resetGraphic
                 ? (event) => {
                     event.stopPropagation();
                     resetOnClick && resetOnClick(event);
@@ -116,27 +121,27 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'lef
                     setOpen(false);
                 }
                 : undefined, open: open, resetGraphic: showResetGraphic, type: triggerType, value: filterLabel }),
-        open && (React.createElement(Container, { ref: optionsRef },
-            React.createElement(React.Fragment, null,
+        open && (React__default.default.createElement(Container, { ref: optionsRef },
+            React__default.default.createElement(React__default.default.Fragment, null,
                 dropdownOptions,
-                triggerType === 'pill' && applyResetActions && (React.createElement(box.Box, { "$display": "flex", "$dir": "row", "$align": "center", "$justify": "flex-end", "$gap": 8, sx: "margin-top: 8px; padding-right: 8px; padding-bottom: 8px" },
-                    React.createElement(button.Button, { onClick: (event) => {
+                triggerType === 'pill' && applyResetActions && (React__default.default.createElement(box.Box, { "$display": "flex", "$dir": "row", "$align": "center", "$justify": "flex-end", "$gap": 8, sx: "margin-top: 8px; padding-right: 8px; padding-bottom: 8px" },
+                    React__default.default.createElement(button.Button, { onClick: (event) => {
                             resetOnClick && resetOnClick(event);
                             setSelected(multiple ? [] : '');
                             setOpen(false);
                         }, size: "small", type: "text" }, "Reset"),
-                    React.createElement(button.Button, { onClick: (event) => {
+                    React__default.default.createElement(button.Button, { onClick: (event) => {
                             applyOnClick && applyOnClick(event);
                             setOpen(false);
                         }, size: "small", type: "primary" }, "Apply"))))))));
 };
-const Wrapper = styled.div `
+const Wrapper = styled__default.default.div `
   position: relative;
   display: block;
   outline: none;
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Container = styled.div `
+const Container = styled__default.default.div `
   position: absolute;
   width: max-content;
   z-index: 100;
@@ -169,39 +174,39 @@ const wrapperProps = {
 };
 const FilterTrigger = ({ disabled, graphic, graphicAlignment, label, onClick, resetGraphic, open, onReset, type, value, }) => {
     if (type === 'pill') {
-        return (React.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
+        return (React__default.default.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
             graphicAlignment === 'left' ? graphic : null,
-            React.createElement(paragraph.P, { ...textProps }, value),
-            resetGraphic ? React.createElement(close.Close, { color: "blue-3", onClick: onReset }) : null,
+            React__default.default.createElement(paragraph.P, { ...textProps }, value),
+            resetGraphic ? React__default.default.createElement(close.Close, { color: "blue-3", onClick: onReset }) : null,
             graphicAlignment === 'right' ? graphic : null,
-            !graphic && !resetGraphic && (open ? React.createElement(chevron_up.ChevronUp, null) : React.createElement(chevron_down.ChevronDown, null))));
+            !graphic && !resetGraphic && (open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null))));
     }
     if (type === 'labeled') {
-        return (React.createElement(Labeled, { disabled: disabled, onClick: onClick, ...wrapperProps },
-            React.createElement(paragraph.P, { ...textProps }, label),
-            React.createElement(LabelSeparator, null),
-            React.createElement(paragraph.P, { "$color": "primary-blue-2", "$mediumBold": true, ...textProps }, value),
-            open ? React.createElement(chevron_up.ChevronUp, null) : React.createElement(chevron_down.ChevronDown, null)));
+        return (React__default.default.createElement(Labeled, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            React__default.default.createElement(paragraph.P, { ...textProps }, label),
+            React__default.default.createElement(LabelSeparator, null),
+            React__default.default.createElement(paragraph.P, { "$color": "primary-blue-2", "$mediumBold": true, ...textProps }, value),
+            open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null)));
     }
     if (type === 'avatar') {
-        return (React.createElement(Avatar, { "$align": "center", "$dir": "row", "$gap": 8, disabled: disabled, onClick: onClick },
+        return (React__default.default.createElement(Avatar, { "$align": "center", "$dir": "row", "$gap": 8, disabled: disabled, onClick: onClick },
             graphic,
-            open ? React.createElement(chevron_up.ChevronUp, null) : React.createElement(chevron_down.ChevronDown, null)));
+            open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null)));
     }
     if (type === 'text') {
-        return (React.createElement(Text, { disabled: disabled, onClick: onClick, ...wrapperProps },
-            React.createElement(paragraph.P, { "$color": "grey-4", "$semiBold": true, ...textProps },
+        return (React__default.default.createElement(Text, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$semiBold": true, ...textProps },
                 label,
                 ":"),
-            React.createElement(paragraph.P, { "$color": "primary-blue-2", "$semiBold": true, className: "filter-trigger-value", ...textProps }, value),
-            open ? React.createElement(chevron_up.ChevronUp, null) : React.createElement(chevron_down.ChevronDown, null)));
+            React__default.default.createElement(paragraph.P, { "$color": "primary-blue-2", "$semiBold": true, className: "filter-trigger-value", ...textProps }, value),
+            open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null)));
     }
-    return (React.createElement(Outlined, { disabled: disabled, onClick: onClick, ...wrapperProps },
+    return (React__default.default.createElement(Outlined, { disabled: disabled, onClick: onClick, ...wrapperProps },
         graphicAlignment === 'left' ? graphic : null,
         graphic,
-        React.createElement(paragraph.P, { ...textProps }, value),
+        React__default.default.createElement(paragraph.P, { ...textProps }, value),
         graphicAlignment === 'right' ? graphic : null,
-        !graphic && (open ? React.createElement(chevron_up.ChevronUp, null) : React.createElement(chevron_down.ChevronDown, null))));
+        !graphic && (open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null))));
 };
 Filter.Trigger = FilterTrigger;
 FilterTrigger.displayName = 'Filter.Trigger';
@@ -224,7 +229,7 @@ const sharedStyles = styled.css `
     }
   }
 `;
-const Outlined = styled.button `
+const Outlined = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   border: 1px solid var(--color-grey-8);
@@ -236,7 +241,7 @@ const Outlined = styled.button `
     background-color: var(--color-grey-9);
   }
 `;
-const Pill = styled.button `
+const Pill = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   border: 1px solid var(--color-grey-8);
@@ -262,7 +267,7 @@ const Pill = styled.button `
     `
     : ''}
 `;
-const Labeled = styled.button `
+const Labeled = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   border-radius: 24px;
@@ -274,12 +279,12 @@ const Labeled = styled.button `
     background-color: var(--color-grey-9);
   }
 `;
-const LabelSeparator = styled.div `
+const LabelSeparator = styled__default.default.div `
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-8);
 `;
-const Avatar = styled.button `
+const Avatar = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   padding: 4px 16px;
@@ -300,7 +305,7 @@ const Avatar = styled.button `
     }
   }
 `;
-const Text = styled.button `
+const Text = styled__default.default.button `
   ${sharedStyles}
   ${styles.Styles.flex}
   gap: 8px;

package/dist/components/input/filter/filter_option.js

@@ -9,12 +9,16 @@ var checkbox = require('../checkbox/checkbox.js');
 var radio = require('../radio/radio.js');
 var close = require('../../../icons/basic/close.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Option = ({ label, onClick, selected, sx, value, checkbox: checkbox$1, radio: radio$1 = false, showClose = false, onClose, }) => {
-    return (React.createElement(OptionWrapper, { "data-value": value, onClick: onClick, "$selected": selected, "$sx": sx, "$hasCheckbox": !!checkbox$1 },
-        checkbox$1 && React.createElement(checkbox.Checkbox, { selected: selected }),
-        radio$1 && React.createElement(radio.Radio, { checked: selected, value: value }),
-        React.createElement(box.Box, { "$dir": "column", "$display": "flex" }, label && (React.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label))),
-        showClose && (React.createElement(close.Close, { sx: "margin-left: auto; pointer-events: auto !important;", size: 16, onClick: (event) => {
+    return (React__default.default.createElement(OptionWrapper, { "data-value": value, onClick: onClick, "$selected": selected, "$sx": sx, "$hasCheckbox": !!checkbox$1 },
+        checkbox$1 && React__default.default.createElement(checkbox.Checkbox, { selected: selected }),
+        radio$1 && React__default.default.createElement(radio.Radio, { checked: selected, value: value }),
+        React__default.default.createElement(box.Box, { "$dir": "column", "$display": "flex" }, label && (React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label))),
+        showClose && (React__default.default.createElement(close.Close, { sx: "margin-left: auto; pointer-events: auto !important;", size: 16, onClick: (event) => {
                 event.stopPropagation();
                 onClose && onClose();
             } }))));
@@ -60,7 +64,7 @@ const OptionWrapper = styled.styled.div `
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
 const Spacer = ({ sx }) => {
-    return React.createElement(SpacerWrapper, { "$sx": sx });
+    return React__default.default.createElement(SpacerWrapper, { "$sx": sx });
 };
 Spacer.displayName = 'Filter.Spacer';
 const SpacerWrapper = styled.styled.div `

package/dist/components/input/radio/radio.js

@@ -6,6 +6,10 @@ var styled = require('styled-components');
 var box = require('../../atoms/box/box.js');
 var paragraph = require('../../atoms/typography/paragraph.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Radio = ({ checked = false, disabled, label, onClick, reversed, sx, value, ...rest }) => {
     const handleInputClick = (event) => {
         event.stopPropagation();
@@ -16,9 +20,9 @@ const Radio = ({ checked = false, disabled, label, onClick, reversed, sx, value,
         event.preventDefault();
         onClick && onClick(event);
     };
-    return (React.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx, onClick: handleLabelClick },
-        React.createElement(Input, { checked: checked, onClickCapture: handleInputClick, disabled: disabled, type: "radio", value: value, ...rest }),
-        React.createElement(paragraph.P, { as: "span" }, label)));
+    return (React__default.default.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx, onClick: handleLabelClick },
+        React__default.default.createElement(Input, { checked: checked, onClickCapture: handleInputClick, disabled: disabled, type: "radio", value: value, ...rest }),
+        React__default.default.createElement(paragraph.P, { as: "span" }, label)));
 };
 const Label = styled.styled.label `
   display: flex;
@@ -77,9 +81,9 @@ const Input = styled.styled.input `
   }
 `;
 const RadioGroup = ({ children, name, ...rest }) => {
-    return (React.createElement(box.Box, { ...rest }, React.Children.map(children, (child) => {
-        if (React.isValidElement(child))
-            return React.createElement(Radio, { key: child.key, name: name, ...child.props });
+    return (React__default.default.createElement(box.Box, { ...rest }, React__default.default.Children.map(children, (child) => {
+        if (React__default.default.isValidElement(child))
+            return React__default.default.createElement(Radio, { key: child.key, name: name, ...child.props });
     })));
 };
 Radio.Group = RadioGroup;

package/dist/components/input/search/search.js

@@ -7,10 +7,14 @@ var styles = require('../../../common/styles.js');
 var close = require('../../../icons/basic/close.js');
 var search = require('../../../icons/basic/search.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder, size, sx, value, }) => {
-    const [expanded, setExpanded] = React.useState(false);
-    const [focused, setFocused] = React.useState(false);
-    const inputRef = React.useRef(null);
+    const [expanded, setExpanded] = React__default.default.useState(false);
+    const [focused, setFocused] = React__default.default.useState(false);
+    const inputRef = React__default.default.useRef(null);
     const isCollapsed = !expanded && size === 'collapsed';
     const iconSize = isCollapsed || size === 'large' ? 24 : 16;
     const handleExpand = () => {
@@ -25,12 +29,12 @@ const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder,
     const handleFocus = () => {
         inputRef?.current?.focus();
     };
-    return (React.createElement(Wrapper, { "$align": "center", "$dir": "row", "$isCollapsed": isCollapsed, "$isFocused": focused, "$borderRadius": "large", "$size": size, "$sx": sx, onClick: dropdownFilter && size === 'large'
+    return (React__default.default.createElement(Wrapper, { "$align": "center", "$dir": "row", "$isCollapsed": isCollapsed, "$isFocused": focused, "$borderRadius": "large", "$size": size, "$sx": sx, onClick: dropdownFilter && size === 'large'
             ? undefined
             : isCollapsed
                 ? handleExpand
                 : handleFocus },
-        React.createElement(search.Search, { color: size === 'large' ? 'blue-7' : 'grey-3', size: iconSize, onClick: isCollapsed ? undefined : handleCollapse, sx: isCollapsed || size !== 'collapsed'
+        React__default.default.createElement(search.Search, { color: size === 'large' ? 'blue-7' : 'grey-3', size: iconSize, onClick: isCollapsed ? undefined : handleCollapse, sx: isCollapsed || size !== 'collapsed'
                 ? undefined
                 : `
           &:hover {
@@ -38,8 +42,8 @@ const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder,
             background-color: var(--color-grey-10);
             border-radius: 50%;
           }` }),
-        React.createElement(Input, { "$isCollapsed": isCollapsed, onBlur: () => setFocused(false), onChange: onChange, onFocus: () => setFocused(true), onSubmit: onSubmit, placeholder: placeholder, ref: inputRef, value: value }),
-        !isCollapsed && onClearText && (React.createElement(close.Close, { size: 16, onClick: onClearText, sx: `
+        React__default.default.createElement(Input, { "$isCollapsed": isCollapsed, onBlur: () => setFocused(false), onChange: onChange, onFocus: () => setFocused(true), onSubmit: onSubmit, placeholder: placeholder, ref: inputRef, value: value }),
+        !isCollapsed && onClearText && (React__default.default.createElement(close.Close, { size: 16, onClick: onClearText, sx: `
             ${value.length === 0 ? 'visibility: hidden;' : ''}
             padding: 4px;
             &:hover {
@@ -47,8 +51,8 @@ const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder,
               background-color: var(--color-grey-10);
               border-radius: 50%;
             }` })),
-        size === 'large' && dropdownFilter && (React.createElement(React.Fragment, null,
-            React.createElement(Separator, null),
+        size === 'large' && dropdownFilter && (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(Separator, null),
             dropdownFilter))));
 };
 const Wrapper = styled.styled.div `

package/dist/components/input/select/select.js

@@ -5,11 +5,15 @@ var React = require('react');
 var styled = require('styled-components');
 var paragraph = require('../../atoms/typography/paragraph.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Select = ({ label, onClick, selected, sx, value, }) => {
-    return (React.createElement(Label, { onClick: (event) => onClick(event, value), "$sx": sx },
-        React.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),
-        React.createElement(SelectBox, { "$selected": selected }),
-        React.createElement(paragraph.P, { as: "div" }, label)));
+    return (React__default.default.createElement(Label, { onClick: (event) => onClick(event, value), "$sx": sx },
+        React__default.default.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),
+        React__default.default.createElement(SelectBox, { "$selected": selected }),
+        React__default.default.createElement(paragraph.P, { as: "div" }, label)));
 };
 const Label = styled.styled.div `
   display: flex;

package/dist/components/input/text_area/text_area.js

@@ -7,27 +7,31 @@ var box = require('../../atoms/box/box.js');
 var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
 var alert_circle = require('../../../icons/notifications/alert_circle.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, minHeight, minWidth, name, onChange, placeholder, resize = false, successful, sx, value, warning, }) => {
-    const ref = React.useRef(null);
-    React.useEffect(() => {
+    const ref = React__default.default.useRef(null);
+    React__default.default.useEffect(() => {
         if (ref.current) {
             ref.current.style.height = `${minHeight}px`;
             const scrollHeight = ref.current.scrollHeight;
             ref.current.style.height = scrollHeight + 'px';
         }
     }, [ref.current, value]);
-    return (React.createElement(Label, { "$disabled": disabled, "$sx": sx },
+    return (React__default.default.createElement(Label, { "$disabled": disabled, "$sx": sx },
         label,
-        React.createElement(InputWrapper, { "$bg": bg, "$minWidth": minWidth, "$successful": successful, "$warning": warning },
+        React__default.default.createElement(InputWrapper, { "$bg": bg, "$minWidth": minWidth, "$successful": successful, "$warning": warning },
             icon,
-            React.createElement(TextAreaElement, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, ref: ref, value: maxCharacters
+            React__default.default.createElement(TextAreaElement, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, ref: ref, value: maxCharacters
                     ? value.slice(0, maxCharacters - 1)
                     : value, "$minHeight": minHeight, "$resize": resize }),
-            successful && React.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
-            warning && React.createElement(alert_circle.AlertCircle, { color: "red-4" })),
-        React.createElement(box.Box, { "$gap": 16, "$justify": "space-between" },
-            helperText && React.createElement(HelperText, null, helperText),
-            maxCharacters && (React.createElement(MaxCharactersText, null,
+            successful && React__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
+            warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
+        React__default.default.createElement(box.Box, { "$gap": 16, "$justify": "space-between" },
+            helperText && React__default.default.createElement(HelperText, null, helperText),
+            maxCharacters && (React__default.default.createElement(MaxCharactersText, null,
                 value.length,
                 " / ",
                 maxCharacters)))));

package/dist/components/input/text_input/text_input.js

@@ -7,10 +7,14 @@ var chip = require('../../feedback/chip/chip.js');
 var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
 var alert_circle = require('../../../icons/notifications/alert_circle.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size = 'large', successful, sx, value, warning, type = 'text', placeIconAtTheEnd = false, inputSx, }) => {
-    const id = React.useId();
+    const id = React__default.default.useId();
     const isMultiple = multiple;
-    const [multipleValueToAdd, setMultipleValueToAdd] = React.useState('');
+    const [multipleValueToAdd, setMultipleValueToAdd] = React__default.default.useState('');
     const handleMultipleValueToAdd = (event) => {
         setMultipleValueToAdd(event.target.value);
     };
@@ -46,26 +50,26 @@ const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, la
         onMultipleChange &&
             onMultipleChange(value.filter((item) => item !== removalItem));
     };
-    return (React.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
+    return (React__default.default.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
         label,
-        React.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
+        React__default.default.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
             !placeIconAtTheEnd && icon,
-            isMultiple && (React.createElement(MultipleInputWrapper, { onSubmit: handleMultipleAdd },
-                value.filter(Boolean).map((item, index) => (React.createElement(chip.Chip, { key: id + item + index, color: "blue", size: "small", onDismiss: () => handleMultipleItemRemoval(item) }, item))),
-                React.createElement(Input, { onChange: handleMultipleValueToAdd, onKeyDown: handleMultipleValueDelete, value: multipleValueToAdd, "$size": size, "$sx": inputSx }))),
-            !isMultiple && (React.createElement(Input, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, value: type === 'number'
+            isMultiple && (React__default.default.createElement(MultipleInputWrapper, { onSubmit: handleMultipleAdd },
+                value.filter(Boolean).map((item, index) => (React__default.default.createElement(chip.Chip, { key: id + item + index, color: "blue", size: "small", onDismiss: () => handleMultipleItemRemoval(item) }, item))),
+                React__default.default.createElement(Input, { onChange: handleMultipleValueToAdd, onKeyDown: handleMultipleValueDelete, value: multipleValueToAdd, "$size": size, "$sx": inputSx }))),
+            !isMultiple && (React__default.default.createElement(Input, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, value: type === 'number'
                     ? value
                     : maxCharacters
                         ? value?.slice(0, maxCharacters - 1) || ''
                         : value, "$size": size, type: type, "$sx": inputSx })),
-            maxCharacters && type !== 'number' && !placeIconAtTheEnd && (React.createElement(MaxCharactersText, { "$size": size },
+            maxCharacters && type !== 'number' && !placeIconAtTheEnd && (React__default.default.createElement(MaxCharactersText, { "$size": size },
                 value?.length || 0,
                 " / ",
                 maxCharacters)),
             placeIconAtTheEnd && icon,
-            successful && React.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
-            warning && React.createElement(alert_circle.AlertCircle, { color: "red-4" })),
-        helperText && React.createElement(HelperText, { "$size": size }, helperText)));
+            successful && React__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
+            warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
+        helperText && React__default.default.createElement(HelperText, { "$size": size }, helperText)));
 };
 const Label = styled.styled.div `
   width: 100%;

package/dist/components/input/time/time.js

@@ -6,8 +6,12 @@ var React = require('react');
 var styled = require('styled-components');
 var clock = require('../../../icons/time/clock.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
-    const hours = React.useMemo(() => {
+    const hours = React__default.default.useMemo(() => {
         const hours = [];
         for (let i = 1; i <= 12; i++) {
             hours.push(`${i}:00`);
@@ -17,12 +21,12 @@ const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
         }
         return hours;
     }, []);
-    return (React.createElement(dropdown.Dropdown, { options: hours.map((hour) => ({
+    return (React__default.default.createElement(dropdown.Dropdown, { options: hours.map((hour) => ({
             value: hour,
             label: hour,
-        })), containerSx: "height: 440px;", trigger: React.createElement(InputWrapper, null,
-            React.createElement(Input, { readOnly: true, value: `${selectedTime} ${selectedPeriod}` }),
-            React.createElement(clock.Clock, null)), additionalOptions: [
+        })), containerSx: "height: 440px;", trigger: React__default.default.createElement(InputWrapper, null,
+            React__default.default.createElement(Input, { readOnly: true, value: `${selectedTime} ${selectedPeriod}` }),
+            React__default.default.createElement(clock.Clock, null)), additionalOptions: [
             {
                 label: 'AM',
                 value: 'AM',