@manuscripts/style-guide 2.1.8-LEAN-4344.0 → 2.1.9

package/dist/cjs/lib/files.js

@@ -1,7 +1,10 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const icons_1 = require("../components/icons");
 var FileType;
 (function (FileType) {
@@ -57,53 +60,53 @@ const extension2type = new Map([
 const type2icon = new Map([
     [
         FileType.Audio,
-        (0, jsx_runtime_1.jsx)(icons_1.FileAudioIcon, { className: "file-icon" }, FileType.Audio),
+        react_1.default.createElement(icons_1.FileAudioIcon, { key: FileType.Audio, className: "file-icon" }),
     ],
     [
         FileType.Video,
-        (0, jsx_runtime_1.jsx)(icons_1.FileVideoIcon, { className: "file-icon" }, FileType.Video),
+        react_1.default.createElement(icons_1.FileVideoIcon, { key: FileType.Video, className: "file-icon" }),
     ],
     [
         FileType.PlainDocument,
-        (0, jsx_runtime_1.jsx)(icons_1.FileDocumentIcon, { color: "#1A9BC7", className: "file-icon" }, FileType.PlainDocument),
+        react_1.default.createElement(icons_1.FileDocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
     ],
     [
         FileType.SheetsWorkbooks,
-        (0, jsx_runtime_1.jsx)(icons_1.FileTableIcon, { className: "file-icon" }, FileType.SheetsWorkbooks),
+        react_1.default.createElement(icons_1.FileTableIcon, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
     ],
     [
         FileType.Latex,
-        (0, jsx_runtime_1.jsx)(icons_1.FileLatexIcon, { color: "#1A9BC7", className: "file-icon" }, FileType.Latex),
+        react_1.default.createElement(icons_1.FileLatexIcon, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
     ],
     [
         FileType.CodeFile,
-        (0, jsx_runtime_1.jsx)(icons_1.FileCodeIcon, { className: "file-icon" }, FileType.CodeFile),
+        react_1.default.createElement(icons_1.FileCodeIcon, { key: FileType.CodeFile, className: "file-icon" }),
     ],
     [
         FileType.PdfFile,
-        (0, jsx_runtime_1.jsx)(icons_1.FilePdfIcon, { className: "file-icon" }, FileType.PdfFile),
+        react_1.default.createElement(icons_1.FilePdfIcon, { key: FileType.PdfFile, className: "file-icon" }),
     ],
     [
         FileType.CompressedFile,
-        (0, jsx_runtime_1.jsx)(icons_1.FileCompressedIcon, { className: "file-icon" }, FileType.CompressedFile),
+        react_1.default.createElement(icons_1.FileCompressedIcon, { key: FileType.CompressedFile, className: "file-icon" }),
     ],
     [
         FileType.PlainText,
-        (0, jsx_runtime_1.jsx)(icons_1.FileDocumentIcon, { color: "#FFBD26", className: "file-icon" }, FileType.PlainText),
+        react_1.default.createElement(icons_1.FileDocumentIcon, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
     ],
     [
         FileType.Image,
-        (0, jsx_runtime_1.jsx)(icons_1.FileImageIcon, { className: "file-icon" }, FileType.Image),
+        react_1.default.createElement(icons_1.FileImageIcon, { key: FileType.Image, className: "file-icon" }),
     ],
     [
         FileType.Figure,
-        (0, jsx_runtime_1.jsx)(icons_1.FileFigureIcon, { className: "file-icon" }, FileType.Figure),
+        react_1.default.createElement(icons_1.FileFigureIcon, { key: FileType.Figure, className: "file-icon" }),
     ],
     [
         FileType.GraphicalAbstract,
-        (0, jsx_runtime_1.jsx)(icons_1.FileGraphicalAbstractIcon, { className: "file-icon" }, FileType.GraphicalAbstract),
+        react_1.default.createElement(icons_1.FileGraphicalAbstractIcon, { key: FileType.GraphicalAbstract, className: "file-icon" }),
     ],
-    [undefined, (0, jsx_runtime_1.jsx)(icons_1.FileUnknownIcon, { className: "file-icon" }, undefined)],
+    [undefined, react_1.default.createElement(icons_1.FileUnknownIcon, { key: undefined, className: "file-icon" })],
 ]);
 const getFileType = (name) => {
     const extension = getExtension(name);

package/dist/es/components/AlertMessage.js

@@ -1,7 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+/*!
+ * © 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 styled, { css } from 'styled-components';
-import { IconTextButton } from './Button';
+import { IconButton, IconTextButton } from './Button';
 import { AttentionBlueIcon, AttentionGreenIcon, AttentionOrangeIcon, AttentionRedIcon, } from './icons';
 const buttonStyles = css `
   color: inherit;
@@ -20,6 +35,12 @@ 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;
@@ -91,15 +112,27 @@ const alertContainers = {
     info: InfoAlertContainer,
     warning: WarningAlertContainer,
 };
-export const AlertMessage = ({ dismissButton, children, type, }) => {
-    const [isOpen, setIsOpen] = useState(true);
-    const handleClose = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-    if (!isOpen) {
-        return null;
+export class AlertMessage extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isOpen: true,
+        };
+        this.handleClose = () => {
+            this.setState({ isOpen: false });
+        };
     }
-    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 })))] }) })));
-};
+    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))))))));
+    }
+}

package/dist/es/components/AutoSaveInput.js

@@ -1,32 +1,52 @@
-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();
+/*!
+ * © 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();
             }
         };
-    }, [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 })));
-};
+    }
+    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 })));
+    }
+}

package/dist/es/components/Avatar.js

@@ -1,5 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+/*!
+ * © 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 styled from 'styled-components';
 import { ProfileIcon } from './icons';
 const AvatarContainer = styled.div `
@@ -30,5 +44,5 @@ export const Avatar = (props) => {
     const handleSrcError = useCallback(() => {
         setSrcError(true);
     }, []);
-    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 })) })));
+    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 }))));
 };

package/dist/es/components/ContextMenu.js

@@ -1,4 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*!
+ * © 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 styled from 'styled-components';
 import { IconButton, IconButtonGroup } from './Button';
 import * as Icons from './icons';
@@ -20,7 +35,9 @@ const icons = Object.entries(Icons).reduce((acc, [name, IconComponent]) => {
     acc[iconName] = IconComponent;
     return acc;
 }, {});
-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));
-    }) })));
+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)));
+})));

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

@@ -1,103 +1,62 @@
-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 '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 styled from 'styled-components';
 import { Category, Dialog, MessageContainer } from '../Dialog';
-const calendarPotentialDueDate = (stepDueDate, selectedDate, submissionDueDate) => {
-    if (!selectedDate || !isValid(selectedDate)) {
-        return null;
-    }
+const calendarGetDay = (date) => ({
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+});
+const calendarPotentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
     const duration = intervalToDuration({
         start: stepDueDate,
-        end: selectedDate,
+        end: new Date(`${dueDate.year}-${dueDate.month < 10 ? `0${dueDate.month}` : dueDate.month}-${dueDate.day < 10 ? `0${dueDate.day}` : dueDate.day}`),
     });
     return add(submissionDueDate, duration);
 };
 const calendarDatePickerDefaultDateFormat = 'd MMM, EEEE';
-const CalendarDatePicker = ({ handleDateChange, originalDueDate, currentDueDate, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', buttonLabel = 'Change Date', }) => {
+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 dialog = Object.assign({}, dialogConfigs, {
         header: 'Change the task due date?',
     });
-    const [selectedDay, setSelectedDay] = useState(currentDueDate);
-    const [potentialNewDate, setPotentialNewDate] = useState(undefined);
+    const [dueDate, setDueDate] = useState();
     const [toggleDialog, setToggleDialog] = useState(false);
     const onConfirmClick = useCallback(() => {
-        if (potentialNewDate) {
-            handleDateChange(potentialNewDate);
-            setSelectedDay(potentialNewDate);
-        }
+        handleDateChange(dueDate);
         setToggleDialog(false);
-    }, [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,
-                    },
-                } })] }));
+    }, [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,
+                },
+            } })));
 };
-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;
@@ -110,6 +69,41 @@ 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};
@@ -124,4 +118,4 @@ const DueDateMessage = styled(MessageContainer) `
   min-height: min-content;
   margin: ${(props) => props.theme.grid.unit * 6}px 0 0 0;
 `;
-export { calendarPotentialDueDate, calendarDatePickerDefaultDateFormat, CalendarDatePicker, };
+export { calendarGetDay, calendarPotentialDueDate, calendarDatePickerDefaultDateFormat, CalendarDatePicker, };

package/dist/es/components/Dialog.js

@@ -1,3 +1,18 @@
+/*!
+ * © 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) {
@@ -7,8 +22,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, PrimaryButton, SecondaryButton } from './Button';
 import { AttentionOrangeIcon, AttentionRedIcon } from './icons';
@@ -65,25 +79,55 @@ export var Category;
     Category["confirmation"] = "confirmation";
     Category["warning"] = "warning";
 })(Category || (Category = {}));
-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)] }) })));
-};
+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))));
+    }
+}