@manuscripts/style-guide 2.1.7-LEAN-2394.0 → 2.1.8-LEAN-4344.0

package/dist/cjs/lib/files.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isImageFile = exports.getFileTypeIcon = exports.getFileIcon = exports.getFileType = exports.FileType = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("../components/icons");
 var FileType;
 (function (FileType) {
@@ -60,53 +57,53 @@ const extension2type = new Map([
 const type2icon = new Map([
     [
         FileType.Audio,
-        react_1.default.createElement(icons_1.FileAudioIcon, { key: FileType.Audio, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileAudioIcon, { className: "file-icon" }, FileType.Audio),
     ],
     [
         FileType.Video,
-        react_1.default.createElement(icons_1.FileVideoIcon, { key: FileType.Video, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileVideoIcon, { className: "file-icon" }, FileType.Video),
     ],
     [
         FileType.PlainDocument,
-        react_1.default.createElement(icons_1.FileDocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileDocumentIcon, { color: "#1A9BC7", className: "file-icon" }, FileType.PlainDocument),
     ],
     [
         FileType.SheetsWorkbooks,
-        react_1.default.createElement(icons_1.FileTableIcon, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileTableIcon, { className: "file-icon" }, FileType.SheetsWorkbooks),
     ],
     [
         FileType.Latex,
-        react_1.default.createElement(icons_1.FileLatexIcon, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileLatexIcon, { color: "#1A9BC7", className: "file-icon" }, FileType.Latex),
     ],
     [
         FileType.CodeFile,
-        react_1.default.createElement(icons_1.FileCodeIcon, { key: FileType.CodeFile, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileCodeIcon, { className: "file-icon" }, FileType.CodeFile),
     ],
     [
         FileType.PdfFile,
-        react_1.default.createElement(icons_1.FilePdfIcon, { key: FileType.PdfFile, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FilePdfIcon, { className: "file-icon" }, FileType.PdfFile),
     ],
     [
         FileType.CompressedFile,
-        react_1.default.createElement(icons_1.FileCompressedIcon, { key: FileType.CompressedFile, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileCompressedIcon, { className: "file-icon" }, FileType.CompressedFile),
     ],
     [
         FileType.PlainText,
-        react_1.default.createElement(icons_1.FileDocumentIcon, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileDocumentIcon, { color: "#FFBD26", className: "file-icon" }, FileType.PlainText),
     ],
     [
         FileType.Image,
-        react_1.default.createElement(icons_1.FileImageIcon, { key: FileType.Image, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileImageIcon, { className: "file-icon" }, FileType.Image),
     ],
     [
         FileType.Figure,
-        react_1.default.createElement(icons_1.FileFigureIcon, { key: FileType.Figure, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileFigureIcon, { className: "file-icon" }, FileType.Figure),
     ],
     [
         FileType.GraphicalAbstract,
-        react_1.default.createElement(icons_1.FileGraphicalAbstractIcon, { key: FileType.GraphicalAbstract, className: "file-icon" }),
+        (0, jsx_runtime_1.jsx)(icons_1.FileGraphicalAbstractIcon, { className: "file-icon" }, FileType.GraphicalAbstract),
     ],
-    [undefined, react_1.default.createElement(icons_1.FileUnknownIcon, { key: undefined, className: "file-icon" })],
+    [undefined, (0, jsx_runtime_1.jsx)(icons_1.FileUnknownIcon, { className: "file-icon" }, undefined)],
 ]);
 const getFileType = (name) => {
     const extension = getExtension(name);

package/dist/es/components/AlertMessage.js

@@ -1,22 +1,7 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import { SizeMe } from 'react-sizeme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { IconButton, IconTextButton } from './Button';
+import { IconTextButton } from './Button';
 import { AttentionBlueIcon, AttentionGreenIcon, AttentionOrangeIcon, AttentionRedIcon, } from './icons';
 const buttonStyles = css `
   color: inherit;
@@ -35,12 +20,6 @@ const buttonStyles = css `
 export const TextButton = styled(IconTextButton) `
   ${buttonStyles}
 `;
-const CloseIconButton = styled(IconButton).attrs({
-    defaultColor: true,
-    size: 16,
-}) `
-  ${buttonStyles}
-`;
 const InformativeIcon = styled.div `
   height: 24px;
   margin-right: ${(props) => props.theme.grid.unit * 3}px;
@@ -112,27 +91,15 @@ const alertContainers = {
     info: InfoAlertContainer,
     warning: WarningAlertContainer,
 };
-export class AlertMessage extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            isOpen: true,
-        };
-        this.handleClose = () => {
-            this.setState({ isOpen: false });
-        };
+export const AlertMessage = ({ dismissButton, children, type, }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    if (!isOpen) {
+        return null;
     }
-    render() {
-        const { hideCloseButton, dismissButton, children, type } = this.props;
-        const { isOpen } = this.state;
-        const AlertContainer = alertContainers[type];
-        const AlertIcon = alertIcons[type];
-        return (isOpen && (React.createElement(SizeMe, null, () => (React.createElement(AlertContainer, { className: 'alert-message' },
-            React.createElement(InnerContainer, null,
-                React.createElement(InformativeIcon, null, React.createElement(AlertIcon, null)),
-                React.createElement(TextContainer, null, children),
-                dismissButton && (React.createElement(TextButton, { onClick: dismissButton.action
-                        ? dismissButton.action
-                        : this.handleClose }, dismissButton.text))))))));
-    }
-}
+    const AlertContainer = alertContainers[type];
+    const AlertIcon = alertIcons[type];
+    return (_jsx(AlertContainer, Object.assign({ className: 'alert-message' }, { children: _jsxs(InnerContainer, { children: [_jsx(InformativeIcon, { children: _jsx(AlertIcon, {}) }), _jsx(TextContainer, { children: children }), dismissButton && (_jsx(TextButton, Object.assign({ onClick: dismissButton.action ? dismissButton.action : handleClose }, { children: dismissButton.text })))] }) })));
+};

package/dist/es/components/AutoSaveInput.js

@@ -1,52 +1,32 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-export class AutoSaveInput extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            focused: false,
-        };
-        this.handleSubmit = () => {
-            window.setTimeout(this.props.form.submitForm, 10);
-        };
-        this.handleFocus = () => {
-            this.setState({ focused: true });
-        };
-        this.handleBlur = (event) => {
-            this.setState({ focused: false });
-            this.props.field.onBlur(event);
-            if (this.props.saveOn === 'blur') {
-                this.handleSubmit();
-            }
-        };
-        this.handleChange = (event) => {
-            this.props.field.onChange(event);
-            if (this.props.saveOn === 'change') {
-                this.handleSubmit();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, } from 'react';
+export const AutoSaveInput = ({ component: Component, field, form, placeholder, disabled, testId, isInvalid, saveOn, }) => {
+    const [focused, setFocused] = useState(false);
+    const handleSubmit = useCallback(() => {
+        window.setTimeout(form.submitForm, 10);
+    }, [form]);
+    const handleFocus = useCallback(() => {
+        setFocused(true);
+    }, []);
+    const handleBlur = useCallback((event) => {
+        setFocused(false);
+        field.onBlur(event);
+        if (saveOn === 'blur') {
+            handleSubmit();
+        }
+    }, [field, saveOn, handleSubmit]);
+    const handleChange = useCallback((event) => {
+        field.onChange(event);
+        if (saveOn === 'change') {
+            handleSubmit();
+        }
+    }, [field, saveOn, handleSubmit]);
+    useEffect(() => {
+        return () => {
+            if (focused) {
+                handleSubmit();
             }
         };
-    }
-    componentWillUnmount() {
-        if (this.state.focused) {
-            this.handleSubmit();
-        }
-    }
-    render() {
-        const { component: Component, field, placeholder, disabled, testId, } = this.props;
-        return (React.createElement(Component, Object.assign({}, field, { placeholder: placeholder, disabled: disabled, checked: !!field.value, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, "data-testid": testId && `${testId}__input`, "aria-invalid": this.props.isInvalid || undefined })));
-    }
-}
+    }, [focused, handleSubmit]);
+    return (_jsx(Component, Object.assign({}, field, { placeholder: placeholder, disabled: disabled, checked: !!field.value, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, "data-testid": testId && `${testId}__input`, "aria-invalid": isInvalid || undefined })));
+};

package/dist/es/components/Avatar.js

@@ -1,19 +1,5 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React, { useCallback, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { ProfileIcon } from './icons';
 const AvatarContainer = styled.div `
@@ -44,5 +30,5 @@ export const Avatar = (props) => {
     const handleSrcError = useCallback(() => {
         setSrcError(true);
     }, []);
-    return (React.createElement(AvatarContainer, { opacity: props.opacity || 1 }, props.src && !srcError ? (React.createElement(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (React.createElement(StyledAvatar, { height: props.size, width: props.size, color: props.color }))));
+    return (_jsx(AvatarContainer, Object.assign({ opacity: props.opacity || 1 }, { children: props.src && !srcError ? (_jsx(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (_jsx(StyledAvatar, { height: props.size, width: props.size, color: props.color })) })));
 };

package/dist/es/components/ContextMenu.js

@@ -1,19 +1,4 @@
-/*!
- * © 2024 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { IconButton, IconButtonGroup } from './Button';
 import * as Icons from './icons';
@@ -35,9 +20,7 @@ const icons = Object.entries(Icons).reduce((acc, [name, IconComponent]) => {
     acc[iconName] = IconComponent;
     return acc;
 }, {});
-export const ContextMenu = ({ actions }) => (React.createElement(IconButtonGroup, { size: 32 }, actions.map((action) => {
-    const Icon = icons[action.icon];
-    return (React.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action, className: action.selected ? 'selected' : '' },
-        React.createElement(Icon, { width: 18, height: 18 }),
-        React.createElement(Tooltip, { id: action.icon, place: "bottom" }, action.label)));
-})));
+export const ContextMenu = ({ actions }) => (_jsx(IconButtonGroup, Object.assign({ size: 32 }, { children: actions.map((action) => {
+        const Icon = icons[action.icon];
+        return (_jsxs(ContextMenuIconButton, Object.assign({ "data-tooltip-id": action.icon, onClick: action.action, className: action.selected ? 'selected' : '' }, { children: [_jsx(Icon, { width: 18, height: 18 }), _jsx(Tooltip, Object.assign({ id: action.icon, place: "bottom" }, { children: action.label }))] }), action.icon));
+    }) })));

package/dist/es/components/DatePicker/CalendarDatePicker.js

@@ -1,62 +1,103 @@
-import 'react-modern-calendar-datepicker/lib/DatePicker.css';
-import { add, format, intervalToDuration } from 'date-fns';
-import React, { useCallback, useMemo, useState } from 'react';
-import DatePicker from 'react-modern-calendar-datepicker';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+require('react-day-picker/style.css');
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
+import { add, format, intervalToDuration, isValid } from 'date-fns';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { DayPicker } from 'react-day-picker';
 import styled from 'styled-components';
 import { Category, Dialog, MessageContainer } from '../Dialog';
-const calendarGetDay = (date) => ({
-    year: date.getFullYear(),
-    month: date.getMonth() + 1,
-    day: date.getDate(),
-});
-const calendarPotentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
+const calendarPotentialDueDate = (stepDueDate, selectedDate, submissionDueDate) => {
+    if (!selectedDate || !isValid(selectedDate)) {
+        return null;
+    }
     const duration = intervalToDuration({
         start: stepDueDate,
-        end: new Date(`${dueDate.year}-${dueDate.month < 10 ? `0${dueDate.month}` : dueDate.month}-${dueDate.day < 10 ? `0${dueDate.day}` : dueDate.day}`),
+        end: selectedDate,
     });
     return add(submissionDueDate, duration);
 };
 const calendarDatePickerDefaultDateFormat = 'd MMM, EEEE';
-const CalendarDatePicker = ({ Button, handleDateChange, originalDueDate, currentDueDate, datePickerConfigs, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', }) => {
-    datePickerConfigs = Object.assign({ position: 'bottom', color: '#f2fbfc', selectedDayClassName: 'selected-day', calendarClassName: 'responsive-calendar' }, datePickerConfigs);
+const CalendarDatePicker = ({ handleDateChange, originalDueDate, currentDueDate, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', buttonLabel = 'Change Date', }) => {
     const dialog = Object.assign({}, dialogConfigs, {
         header: 'Change the task due date?',
     });
-    const [dueDate, setDueDate] = useState();
+    const [selectedDay, setSelectedDay] = useState(currentDueDate);
+    const [potentialNewDate, setPotentialNewDate] = useState(undefined);
     const [toggleDialog, setToggleDialog] = useState(false);
     const onConfirmClick = useCallback(() => {
-        handleDateChange(dueDate);
+        if (potentialNewDate) {
+            handleDateChange(potentialNewDate);
+            setSelectedDay(potentialNewDate);
+        }
         setToggleDialog(false);
-    }, [dueDate, setToggleDialog, handleDateChange]);
-    const formattedDueDate = useMemo(() => dueDate &&
-        format(new Date(dueDate.year, dueDate.month, dueDate.day), calendarDatePickerDefaultDateFormat), [dueDate]);
-    const formattedPotentialDueDate = useMemo(() => dueDate &&
-        format(calendarPotentialDueDate(currentDueDate, dueDate, originalDueDate), calendarDatePickerDefaultDateFormat), [originalDueDate, currentDueDate, dueDate]);
-    const onDatePickerChange = useCallback((date) => {
-        setDueDate(date);
-        setToggleDialog(true);
-        const button = document.querySelector('.DatePicker button');
-        button.blur();
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Calendar, null,
-            React.createElement(DatePicker, { value: calendarGetDay(currentDueDate), onChange: onDatePickerChange, calendarPopperPosition: datePickerConfigs.position, colorPrimary: datePickerConfigs.color, calendarSelectedDayClassName: datePickerConfigs.selectedDayClassName, calendarClassName: datePickerConfigs.calendarClassName, renderInput: Button })),
-        React.createElement(Dialog, { isOpen: toggleDialog, category: Category.confirmation, header: dialog.header, message: React.createElement(React.Fragment, null,
-                React.createElement(UpdatedDueDate, null, formattedDueDate),
-                dialog.dueDateMessage && (React.createElement(DueDateMessage, null, dialog.dueDateMessage)),
-                React.createElement(Value, null,
-                    React.createElement(StrikeDueDate, { as: 'del' }, format(originalDueDate, calendarDatePickerDefaultDateFormat)),
-                    formattedPotentialDueDate)), actions: {
-                primary: {
-                    action: onConfirmClick,
-                    title: primaryButtonTitle,
-                },
-                secondary: {
-                    action: () => setToggleDialog(false),
-                    title: secondaryButtonTitle,
-                },
-            } })));
+    }, [potentialNewDate, handleDateChange]);
+    const formattedPotentialDate = useMemo(() => potentialNewDate && isValid(potentialNewDate)
+        ? format(potentialNewDate, calendarDatePickerDefaultDateFormat)
+        : 'Invalid Date', [potentialNewDate]);
+    const formattedPotentialDueDate = useMemo(() => {
+        const potentialDate = calendarPotentialDueDate(currentDueDate, potentialNewDate, originalDueDate);
+        return potentialDate && isValid(potentialDate)
+            ? format(potentialDate, calendarDatePickerDefaultDateFormat)
+            : 'Calculation Error';
+    }, [originalDueDate, currentDueDate, potentialNewDate]);
+    const handleDaySelect = (date) => {
+        if (date) {
+            setPotentialNewDate(date);
+            setToggleDialog(true);
+        }
+    };
+    useEffect(() => {
+        setSelectedDay(currentDueDate);
+    }, [currentDueDate]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { children: [_jsx(CalendarPopoverButton, { children: buttonLabel }), _jsx(CalendarPopoverPanel, { children: _jsx(DayPicker, { mode: "single", selected: selectedDay, onSelect: handleDaySelect, initialFocus: true }) })] }), _jsx(Dialog, { isOpen: toggleDialog, category: Category.confirmation, header: dialog.header, message: _jsxs(_Fragment, { children: [_jsx(UpdatedDueDate, { children: formattedPotentialDate }), dialog.dueDateMessage && (_jsx(DueDateMessage, { children: dialog.dueDateMessage })), _jsxs(Value, { children: [_jsx(StrikeDueDate, Object.assign({ as: 'del' }, { children: isValid(originalDueDate)
+                                        ? format(originalDueDate, calendarDatePickerDefaultDateFormat)
+                                        : 'Invalid Original Date' })), formattedPotentialDueDate] })] }), actions: {
+                    primary: {
+                        action: onConfirmClick,
+                        title: primaryButtonTitle,
+                    },
+                    secondary: {
+                        action: () => setToggleDialog(false),
+                        title: secondaryButtonTitle,
+                    },
+                } })] }));
 };
+const CalendarPopoverButton = styled(PopoverButton) `
+  /* Add styles similar to your original PrimaryButton or specific needs */
+  border: 1px solid
+    ${(props) => props.theme.colors.button.default.border.default};
+  background: ${(props) => props.theme.colors.button.default.background.default};
+  color: ${(props) => props.theme.colors.button.default.color.default};
+  padding: 10px 15px;
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  cursor: pointer;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: ${(props) => props.theme.font.size.medium};
+
+  &:hover {
+    background: ${(props) => props.theme.colors.button.default.background.hover};
+  }
+`;
+const CalendarPopoverPanel = styled(PopoverPanel) `
+  background: ${(props) => props.theme.colors.background.primary};
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  box-shadow: ${(props) => props.theme.shadow.dropShadow};
+  z-index: 10; /* Ensure it's above other content */
+  margin-top: 4px;
+
+  /* Target react-day-picker internal classes for styling */
+  .rdp {
+    --rdp-cell-size: 36px; /* Adjust size */
+    --rdp-accent-color: ${(props) => props.theme.colors.brand.default};
+    --rdp-background-color: ${(props) => props.theme.colors.brand.xlight};
+    /* Add more overrides as needed */
+    margin: ${(props) => props.theme.grid.unit * 2}px; /* Add some padding */
+  }
+  .rdp-day_selected {
+    font-weight: bold;
+  }
+`;
 const StrikeDueDate = styled(MessageContainer) `
   margin: 0;
   min-height: min-content;
@@ -69,41 +110,6 @@ const Value = styled.div `
   align-items: center;
   line-height: 1;
 `;
-const Calendar = styled.div `
-  flex: 1;
-
-  .DatePicker {
-    width: 100%;
-  }
-
-  .DatePicker__calendarContainer {
-    position: absolute;
-    top: unset;
-    left: unset !important;
-    right: 0 !important;
-    transform: unset !important;
-  }
-
-  .Calendar__weekDay {
-    color: #e6e6e6;
-    font-size: ${(props) => props.theme.font.size.normal};
-    line-height: ${(props) => props.theme.font.lineHeight.large};
-    font-weight: ${(props) => props.theme.font.weight.medium};
-  }
-
-  .Calendar__day:not(.-blank):not(.-selected):hover {
-    background: #f2fbfc !important;
-  }
-
-  .Calendar__day.-today:hover::after {
-    opacity: 0.5 !important;
-  }
-
-  .selected-day {
-    color: ${(props) => props.theme.colors.text.primary} !important;
-    border: 1px solid ${(props) => props.theme.colors.border.primary} !important;
-  }
-`;
 const UpdatedDueDate = styled.div `
   background: ${(props) => props.theme.colors.background.secondary};
   color: ${(props) => props.theme.colors.text.primary};
@@ -118,4 +124,4 @@ const DueDateMessage = styled(MessageContainer) `
   min-height: min-content;
   margin: ${(props) => props.theme.grid.unit * 6}px 0 0 0;
 `;
-export { calendarGetDay, calendarPotentialDueDate, calendarDatePickerDefaultDateFormat, CalendarDatePicker, };
+export { calendarPotentialDueDate, calendarDatePickerDefaultDateFormat, CalendarDatePicker, };

package/dist/es/components/Dialog.js

@@ -1,18 +1,3 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -22,7 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, PrimaryButton, SecondaryButton } from './Button';
 import { AttentionOrangeIcon, AttentionRedIcon } from './icons';
@@ -79,55 +65,25 @@ export var Category;
     Category["confirmation"] = "confirmation";
     Category["warning"] = "warning";
 })(Category || (Category = {}));
-const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (React.createElement(PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (React.createElement(PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title))) : props.hasForm ? (React.createElement(PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (React.createElement(PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title));
-const SecondaryAction = (props) => (React.createElement(SecondaryButton, { disabled: props.disabled, onClick: props.action }, props.title));
-export class Dialog extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            primaryActionDisabled: true,
-        };
-        this.renderButtons = (props, disabled) => (React.createElement(ButtonsContainer, null, props.actions.secondary ? (!props.actions.primary.isDestructive ? (React.createElement(React.Fragment, null,
-            React.createElement(SecondaryAction, { action: props.actions.secondary.action, hasForm: !!this.props.confirmFieldText, title: props.actions.secondary.title }),
-            React.createElement(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, title: props.actions.primary.title || 'Dismiss' }))) : (React.createElement(React.Fragment, null,
-            React.createElement(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }),
-            React.createElement(SecondaryAction, { action: props.actions.secondary.action, title: props.actions.secondary.title })))) : (React.createElement(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: props.actions.primary.isDestructive, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }))));
-        this.checkInputValue = (event) => {
-            const testingVal = this.props.confirmFieldText && this.props.confirmFieldText.toUpperCase();
-            const target = event.target;
-            const newVal = target.value.toUpperCase();
-            this.setDisabledBtnState(newVal !== testingVal);
-        };
-        this.setDisabledBtnState = (state) => {
-            this.setState({ primaryActionDisabled: state });
-        };
-        this.handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
-            const { primaryActionDisabled } = this.state;
-            e.preventDefault();
-            if (!primaryActionDisabled) {
-                this.props.actions.primary.action();
-            }
-        });
-    }
-    componentDidMount() {
-        this.setDisabledBtnState(!!this.props.confirmFieldText);
-    }
-    render() {
-        const { actions, isOpen, header, message, category, children, confirmFieldText, className, } = this.props;
-        const { primaryActionDisabled } = this.state;
-        return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: actions.onClose, shouldCloseOnOverlayClick: true, className: className },
-            React.createElement(DialogModalBody, null,
-                React.createElement(HeaderContainer, null,
-                    category === Category.error && (React.createElement(Icon, null,
-                        React.createElement(AttentionRedIcon, null))),
-                    category === Category.warning && (React.createElement(Icon, null,
-                        React.createElement(AttentionOrangeIcon, null))),
-                    header),
-                React.createElement(MessageContainer, null,
-                    message,
-                    confirmFieldText && (React.createElement("form", { id: "formDialog", onSubmit: this.handleSubmit },
-                        React.createElement(ConfirmationTextField, { autoFocus: true, onChange: this.checkInputValue, placeholder: 'Please type: ' + confirmFieldText, required: true }))),
-                    children),
-                this.renderButtons(this.props, primaryActionDisabled))));
-    }
-}
+const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (_jsx(PrimaryButton, Object.assign({ disabled: props.disabled, form: "formDialog", type: "submit" }, { children: props.title }))) : (_jsx(PrimaryButton, Object.assign({ disabled: props.disabled, onClick: props.action, autoFocus: true }, { children: props.title })))) : props.hasForm ? (_jsx(PrimaryButton, Object.assign({ disabled: props.disabled, form: "formDialog", type: "submit" }, { children: props.title }))) : (_jsx(PrimaryButton, Object.assign({ disabled: props.disabled, onClick: props.action, autoFocus: true }, { children: props.title })));
+const SecondaryAction = (props) => (_jsx(SecondaryButton, Object.assign({ disabled: props.disabled, onClick: props.action }, { children: props.title })));
+export const Dialog = ({ actions, isOpen, header, message, category, children, confirmFieldText, className, }) => {
+    const [primaryActionDisabled, setPrimaryActionDisabled] = useState(true);
+    useEffect(() => {
+        setPrimaryActionDisabled(!!confirmFieldText);
+    }, [confirmFieldText]);
+    const checkInputValue = useCallback((event) => {
+        const testingVal = confirmFieldText && confirmFieldText.toUpperCase();
+        const target = event.target;
+        const newVal = target.value.toUpperCase();
+        setPrimaryActionDisabled(newVal !== testingVal);
+    }, [confirmFieldText]);
+    const handleSubmit = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
+        e.preventDefault();
+        if (!primaryActionDisabled) {
+            actions.primary.action();
+        }
+    }), [primaryActionDisabled, actions.primary]);
+    const renderButtons = useCallback((disabled) => (_jsx(ButtonsContainer, { children: actions.secondary ? (!actions.primary.isDestructive ? (_jsxs(_Fragment, { children: [_jsx(SecondaryAction, { action: actions.secondary.action, hasForm: !!confirmFieldText, title: actions.secondary.title }), _jsx(PrimaryAction, { action: actions.primary.action, disabled: disabled, title: actions.primary.title || 'Dismiss' })] })) : (_jsxs(_Fragment, { children: [_jsx(PrimaryAction, { action: actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!confirmFieldText, title: actions.primary.title || 'Dismiss' }), _jsx(SecondaryAction, { action: actions.secondary.action, title: actions.secondary.title })] }))) : (_jsx(PrimaryAction, { action: actions.primary.action, disabled: disabled, isDestructive: actions.primary.isDestructive, hasForm: !!confirmFieldText, title: actions.primary.title || 'Dismiss' })) })), [actions, confirmFieldText]);
+    return (_jsx(StyledModal, Object.assign({ isOpen: isOpen, onRequestClose: actions.onClose, shouldCloseOnOverlayClick: true, className: className }, { children: _jsxs(DialogModalBody, { children: [_jsxs(HeaderContainer, { children: [category === Category.error && (_jsx(Icon, { children: _jsx(AttentionRedIcon, {}) })), category === Category.warning && (_jsx(Icon, { children: _jsx(AttentionOrangeIcon, {}) })), header] }), _jsxs(MessageContainer, { children: [message, confirmFieldText && (_jsx("form", Object.assign({ id: "formDialog", onSubmit: handleSubmit }, { children: _jsx(ConfirmationTextField, { autoFocus: true, onChange: checkInputValue, placeholder: 'Please type: ' + confirmFieldText, required: true }) }))), children] }), renderButtons(primaryActionDisabled)] }) })));
+};