@manuscripts/style-guide 3.4.5 → 3.4.7

package/dist/es/components/ContextMenu.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { IconButton, IconButtonGroup } from './Button';
 import * as Icons from './icons';
@@ -13,6 +14,11 @@ const ContextMenuIconButton = styled(IconButton) `
     background-color: #f2f2f2;
     border-color: #f2f2f2;
   }
+  &:not([disabled]):focus-visible {
+    outline: 4px solid #3dadff;
+    outline-offset: -2px;
+    background-color: transparent !important;
+  }
   &[disabled] {
     color: #c9c9c9 !important;
     background-color: #fff !important;
@@ -23,7 +29,42 @@ const icons = Object.entries(Icons).reduce((acc, [name, IconComponent]) => {
     acc[iconName] = IconComponent;
     return acc;
 }, {});
-export const ContextMenu = ({ actions }) => (_jsx(IconButtonGroup, { size: 32, children: actions.map((action) => {
-        const Icon = icons[action.icon];
-        return (_jsx(ContextMenuIconButton, { "data-tooltip-content": action.label, onClick: action.disabled === true ? () => null : action.action, className: action.selected ? 'selected' : '', disabled: !!action.disabled, children: _jsx(Icon, { width: 18, height: 18 }) }, action.icon));
-    }) }));
+export const ContextMenu = ({ actions }) => {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const buttons = Array.from(container.querySelectorAll('button:not([disabled])'));
+        if (buttons.length === 0) {
+            return;
+        }
+        buttons.forEach((button, index) => {
+            button.tabIndex = index === 0 ? 0 : -1;
+        });
+        const handleKeyDown = (event) => {
+            if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+                return;
+            }
+            const target = event.target;
+            const currentIndex = buttons.indexOf(target);
+            if (currentIndex === -1) {
+                return;
+            }
+            event.preventDefault();
+            const nextIndex = event.key === 'ArrowRight'
+                ? (currentIndex + 1) % buttons.length
+                : (currentIndex - 1 + buttons.length) % buttons.length;
+            buttons[nextIndex]?.focus();
+        };
+        container.addEventListener('keydown', handleKeyDown);
+        return () => {
+            container.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [actions]);
+    return (_jsx(IconButtonGroup, { size: 32, ref: containerRef, children: actions.map((action) => {
+            const Icon = icons[action.icon];
+            return (_jsx(ContextMenuIconButton, { "data-tooltip-content": action.label, onClick: action.disabled === true ? () => null : action.action, className: action.selected ? 'selected' : '', disabled: !!action.disabled, children: _jsx(Icon, { width: 18, height: 18 }) }, action.icon));
+        }) }));
+};

package/dist/es/components/DatePicker.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'react-datepicker/dist/react-datepicker.css';
+import { useState } from 'react';
+import ReactDatePicker from 'react-datepicker';
+import styled from 'styled-components';
+import { CalendarIcon } from './icons';
+export const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, }) => {
+    const [selectedDate, setSelectedDate] = useState(date || null);
+    const handleChange = (date) => {
+        setSelectedDate(date);
+        handleDateChange(date);
+    };
+    const format = showTimeSelect
+        ? 'd MMM yyyy, EEEE h:mm aa'
+        : 'd MMM yyyy, EEEE';
+    return (_jsxs(Calendar, { children: [_jsx(ReactDatePicker, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required }), _jsx(IconWrapper, { children: _jsx(CalendarIcon, { width: 16, height: 16 }) })] }));
+};
+const Calendar = styled.div `
+  width: 100%;
+  position: relative;
+  display: block;
+
+  .react-datepicker {
+    display: flex;
+    padding: ${(props) => props.theme.grid.unit * 5}px;
+    font-size: ${(props) => props.theme.font.size.normal};
+  }
+
+  .react-datepicker-wrapper,
+  .react-datepicker__input-container {
+    display: block;
+    width: 100% !important;
+
+    input::placeholder {
+      color: ${(props) => props.theme.colors.text.greyMuted ||
+    props.theme.colors.text.secondary ||
+    '#6E6E6E'};
+      opacity: 1;
+      font-family: 'PT Sans', sans-serif;
+      font-size: ${(props) => props.theme.font.size.medium};
+      font-style: italic;
+      font-weight: ${(props) => props.theme.font.weight.normal};
+      line-height: ${(props) => props.theme.font.lineHeight.large};
+    }
+
+    input:focus::placeholder {
+      color: ${(props) => props.theme.colors.text.greyLight || '#C9C9C9'} !important;
+      opacity: 1 !important;
+    }
+  }
+
+  .react-datepicker__header {
+    background-color: unset;
+    border: unset;
+  }
+
+  .react-datepicker__day.react-datepicker__day--disabled {
+    color: #ccc;
+  }
+
+  .react-datepicker__day-name,
+  .react-datepicker__day,
+  .react-datepicker__time-name {
+    color: #000000cc;
+    padding: ${(props) => props.theme.grid.unit}px;
+  }
+
+  .react-datepicker__day-names .react-datepicker__day-name {
+    color: #d4d4d4;
+  }
+
+  .react-datepicker__time {
+    .react-datepicker__time-box {
+      width: 95px;
+
+      .react-datepicker__time-list {
+        overflow-y: unset;
+      }
+    }
+  }
+
+  h2.react-datepicker__current-month {
+    padding-bottom: ${(props) => props.theme.grid.unit * 5}px;
+    font-weight: 400;
+    font-size: ${(props) => props.theme.font.size.medium};
+  }
+
+  .react-datepicker[aria-label='Choose Date and Time'] {
+    .react-datepicker__navigation--next {
+      right: 150px;
+    }
+  }
+
+  .react-datepicker__navigation--next {
+    right: 65px;
+    top: 24px;
+  }
+
+  .react-datepicker__navigation--previous {
+    left: 65px;
+    top: 24px;
+  }
+
+  .react-datepicker__day--selected {
+    border: 1px solid rgb(188, 231, 246);
+    background-color: rgb(242, 251, 252);
+    border-radius: 50%;
+  }
+
+  .react-datepicker__day:not(.-selected):hover {
+    border-radius: 50%;
+    background-color: rgb(242, 251, 252);
+  }
+
+  .react-datepicker-popper[data-placement^='bottom']
+    .react-datepicker__triangle {
+    fill: white;
+    color: white;
+  }
+
+  .react-datepicker__day--outside-month {
+    visibility: hidden;
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background-color: unset;
+  }
+
+  .calendar-input {
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 40px;
+    border-radius: 3px;
+    font: ${(props) => props.theme.font.weight.normal}
+      ${(props) => props.theme.font.size.medium} / 1
+      ${(props) => props.theme.font.family.sans};
+    line-height: ${(props) => props.theme.font.lineHeight.large};
+    padding: 0 ${(props) => props.theme.grid.unit * 10}px 0
+      ${(props) => props.theme.grid.unit * 4}px;
+    text-align: start;
+    border: 1px solid ${(props) => props.theme.colors.border.field.default};
+    color: ${(props) => props.theme.colors.text.primary};
+    outline: 0;
+    background-color: #fff;
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.text.greyMuted ||
+    props.theme.colors.text.secondary ||
+    '#6E6E6E'};
+      opacity: 1;
+      font-family: 'PT Sans', sans-serif;
+      font-size: ${(props) => props.theme.font.size.medium};
+      font-style: italic;
+      font-weight: ${(props) => props.theme.font.weight.normal};
+      line-height: ${(props) => props.theme.font.lineHeight.large};
+    }
+
+    &:focus {
+      border: 2px solid ${(props) => props.theme.colors.brand.default};
+      background-color: #f2fbfc;
+      padding: 0 ${(props) => props.theme.grid.unit * 10 - 1}px 0
+        ${(props) => props.theme.grid.unit * 4 - 1}px;
+      outline: none;
+    }
+
+    &:hover {
+      border-color: ${(props) => props.theme.colors.text.greyMuted};
+      background-color: #f2fbfc;
+    }
+  }
+`;
+const IconWrapper = styled.div `
+  position: absolute;
+  right: ${(props) => props.theme.grid.unit * 3}px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  color: ${(props) => props.theme.colors.border.secondary};
+`;

package/dist/es/components/Form.js

@@ -75,7 +75,7 @@ export const FormLabel = styled.legend `
     ${(props) => props.theme.font.lineHeight.large}
     ${(props) => props.theme.font.family.sans};
   letter-spacing: -0.4px;
-  color: ${(props) => props.theme.colors.text.secondary};
+  color: ${(props) => props.theme.colors.text.primary};
 `;
 export const FormActionsBar = styled.div `
   display: flex;

package/dist/es/components/FormCommon.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { AttentionRedIcon } from './icons';
+export const FieldError = ({ error }) => {
+    if (!error) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(AttentionRedIcon, { className: "error-icon", width: 16, height: 16 }), _jsx(ErrorText, { children: error })] }));
+};
+export const FieldInfo = ({ info }) => {
+    if (!info) {
+        return null;
+    }
+    return _jsx(FieldInfoText, { children: info });
+};
+const ErrorText = styled.span `
+  font-size: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.colors.text.error};
+`;
+const FieldInfoText = styled.span `
+  font-size: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+export const TextWithGenerationWrapper = styled.div `
+  display: flex;
+  align-items: start;
+  gap: 1rem;
+  width: 100%;
+
+  > div:first-child {
+    flex-grow: 1;
+  }
+
+  button {
+    margin-top: ${(props) => props.theme.grid.unit * 6}px !important;
+  }
+`;
+export const TextFieldError = styled.div `
+  margin-top: 4px;
+`;
+export const TextFieldErrorItem = styled.div `
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.colors.text.error};
+`;

package/dist/es/components/FormFieldContainer.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, Fragment, } from 'react';
+import styled from 'styled-components';
+import { TextFieldLabel } from './TextField';
+import { TextFieldError, TextFieldErrorItem } from './FormCommon';
+export const FormFieldContainer = ({ label, error, info, id, children, }) => {
+    const childrenWithErrorProp = Children.map(children, (child) => cloneElement(child, {
+        error: error ? String(error) : undefined,
+    }));
+    return (_jsxs(Fragment, { children: [label ? (_jsxs(TextFieldLabel, { htmlFor: id, children: [label, " ", childrenWithErrorProp] })) : (childrenWithErrorProp), info && !error && _jsx(FormFieldInfo, { children: info }), error && (_jsx(TextFieldError, { children: _jsx(TextFieldErrorItem, { children: error }) }))] }));
+};
+const FormFieldInfo = styled.div `
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-top: 4px;
+`;

package/dist/es/components/InspectorSection.js

@@ -8,7 +8,7 @@ const Section = styled.div `
 `;
 const Heading = styled.div `
   display: flex;
-  padding: 0 ${(props) => props.theme.grid.unit * 2}px;
+  padding: 0;
   cursor: pointer;
   margin: ${(props) => props.theme.grid.unit * 4}px
     ${(props) => props.theme.grid.unit * 6}px
@@ -51,11 +51,11 @@ export const Subheading = styled(HeadingText) `
 export const Field = styled.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
 `;
-export const InspectorSection = ({ title, contentStyles, children, }) => {
+export const InspectorSection = ({ title, contentStyles, children, collapsible = true, }) => {
     const [expanded, setExpanded] = useState(true);
-    return (_jsxs(Section, { children: [_jsx(Line, {}), _jsxs(Heading, { onClick: () => setExpanded(!expanded), marginBottom: (!(expanded && children) && '40px') || undefined, children: [_jsx(HeadingText, { children: title }), _jsx(ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
+    return (_jsxs(Section, { children: [_jsx(Line, {}), _jsxs(Heading, { onClick: () => collapsible && setExpanded(!expanded), marginBottom: (!(expanded && children) && '40px') || undefined, style: { cursor: collapsible ? 'pointer' : 'default' }, children: [_jsx(HeadingText, { children: title }), collapsible && (_jsx(ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
                             transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-                        }, children: _jsx(ArrowDownCircleIcon, {}) })] }), expanded && children && _jsx("div", { style: contentStyles, children: children })] }));
+                        }, children: _jsx(ArrowDownCircleIcon, {}) }))] }), expanded && children && _jsx("div", { style: contentStyles, children: children })] }));
 };
 const Line = styled.hr `
   flex: 1;

package/dist/es/components/RadioButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 const Input = styled.input `
   border: 0;
@@ -46,16 +46,16 @@ const Input = styled.input `
 
   &:checked + label::before {
     background: ${(props) => props.theme.colors.background.primary};
-    box-shadow: inset 0 0 0 4px #0d79d0;
-    border-color: #0d79d0;
+    box-shadow: inset 0 0 0 4px ${(props) => props.theme.colors.brand.default};
+    border-color: ${(props) => props.theme.colors.brand.default};
   }
 
   &:hover:not(:disabled) + label::before {
-    border-color: ${(props) => props.theme.colors.text.secondary};
+    border-color: ${(props) => props.theme.colors.text.greyMuted};
   }
 
   &:focus-visible + label::before {
-    border-color: #0d79d0;
+    border-color: ${(props) => props.theme.colors.brand.default};
   }
 
   &:disabled + label {
@@ -69,4 +69,14 @@ const Input = styled.input `
     border-color: #e4e4e4;
   }
 `;
-export const RadioButton = ({ checked, id, label, name, ...rest }) => (_jsxs(_Fragment, { children: [_jsx(Input, { checked: checked, type: "radio", name: name, id: id, ...rest }), _jsx("label", { htmlFor: id, children: label })] }));
+const RadioButtonContainer = styled.div `
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  margin-right: ${(props) => props.theme.grid.unit * 4}px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+export const RadioButton = ({ checked, id, label, name, ...rest }) => (_jsxs(RadioButtonContainer, { className: "radio-button-container", children: [_jsx(Input, { checked: checked, type: "radio", name: name, id: id, ...rest }), _jsx("label", { htmlFor: id, children: label })] }));

package/dist/es/components/RadioGroup.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { RadioButton } from './RadioButton';
+const RadioWrapper = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${(props) => props.theme.grid.unit * 4}px;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+
+  & > * {
+    margin-right: ${(props) => props.theme.grid.unit * 4}px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+`;
+export const StyledRadioGroup = ({ name, options, value, onChange, disabled, }) => {
+    return (_jsx(RadioWrapper, { children: options.map((option, index) => (_jsx(RadioButton, { name: name, id: `${name}-option-${index}`, label: option.label, value: option.value, checked: value === option.value, onChange: onChange, disabled: disabled }, index))) }));
+};

package/dist/es/components/SelectField.js

@@ -13,15 +13,17 @@ const selectStyles = (theme, error, variant) => ({
             : state.isFocused
                 ? theme.colors.brand.default
                 : theme.colors.border.field.default,
+        borderWidth: state.isFocused ? 2 : 1,
         boxShadow: 'none',
         '&:hover': {
             borderColor: error
                 ? theme.colors.border.error
                 : state.isFocused
                     ? theme.colors.brand.default
-                    : theme.colors.text.secondary,
+                    : theme.colors.text.greyMuted || theme.colors.text.secondary,
             backgroundColor: !state.isDisabled ? '#F2FBFC' : 'transparent',
         },
+        padding: state.isFocused ? '0 7px' : '0 8px',
         backgroundColor: state.isDisabled
             ? '#F5F5F5'
             : state.isFocused
@@ -61,11 +63,15 @@ const selectStyles = (theme, error, variant) => ({
         overflow: 'hidden',
         boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
     }),
-    placeholder: (base) => ({
+    placeholder: (base, state) => ({
         ...base,
-        color: theme.colors.text.secondary,
+        color: state.isFocused || state.selectProps.menuIsOpen
+            ? theme.colors.text.greyLight || '#C9C9C9'
+            : theme.colors.text.greyMuted ||
+                theme.colors.text.secondary ||
+                '#6E6E6E',
         fontStyle: 'italic',
-        fontFamily: theme.font.family.sans,
+        fontFamily: "'PT Sans', sans-serif",
         fontSize: theme.font.size.medium,
         fontWeight: theme.font.weight.normal,
         lineHeight: theme.font.lineHeight.large,

package/dist/es/components/TextField.js

@@ -37,9 +37,9 @@ export const commonStyles = css `
   color: ${(props) => props.theme.colors.text.primary};
 
   &::placeholder {
-    color: ${(props) => props.theme.colors.text.secondary};
+    color: ${(props) => props.theme.colors.text.greyMuted || '#6E6E6E'};
     opacity: 1;
-    font-family: ${(props) => props.theme.font.family.sans};
+    font-family: 'PT Sans', sans-serif;
     font-size: ${(props) => props.theme.font.size.medium};
     font-style: italic;
     font-weight: ${(props) => props.theme.font.weight.normal};
@@ -48,6 +48,7 @@ export const commonStyles = css `
 
   &:hover:not(:disabled) {
     background-color: #f2fbfc;
+    border-color: ${(props) => props.theme.colors.text.greyMuted};
   }
 
   &:focus:not(:disabled) {
@@ -56,10 +57,20 @@ export const commonStyles = css `
     ? props.theme.colors.border.error
     : props.theme.colors.brand.default};
     background-color: #f2fbfc;
-
-    &::placeholder {
-      color: #c9c9c9;
+    padding: ${(props) => {
+    if (props.variant === 'small') {
+        return '0 11px';
+    }
+    if (props.variant === 'large') {
+        return '3px 15px';
     }
+    return '0 11px';
+}};
+  }
+
+  &:focus::placeholder {
+    color: ${(props) => props.theme.colors.text.greyLight || '#C9C9C9'} !important;
+    opacity: 1 !important;
   }
 
   &:disabled {
@@ -109,16 +120,16 @@ export const TextFieldGroup = styled.div `
   }
 `;
 export const TextFieldLabel = styled.label `
+  display: block;
   font-family: ${(props) => props.theme.font.family.sans};
-  text-transform: uppercase;
-  color: ${(props) => props.theme.colors.text.secondary};
-
-  & ${TextField} {
-    margin-top: ${(props) => props.theme.grid.unit}px;
-  }
+  color: ${(props) => props.theme.colors.text.primary};
+  font-size: ${(props) => props.theme.font.size.normal};
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  line-height: ${(props) => props.theme.font.lineHeight.normal};
 
-  & ${TextArea} {
-    margin-top: ${(props) => props.theme.grid.unit}px;
+  > * {
+    margin-top: ${(props) => props.theme.grid.unit * 2}px;
+    display: block;
   }
 `;
 const TextFieldWrapperStyles = styled.div `

package/dist/es/components/icons/calendar.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CalendarIcon = (props) => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M0.5 5.5H15.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14 2.5H2C1.60218 2.5 1.22064 2.65804 0.93934 2.93934C0.658035 3.22064 0.5 3.60218 0.5 4V13C0.5 13.3978 0.658035 13.7794 0.93934 14.0607C1.22064 14.342 1.60218 14.5 2 14.5H14C14.3978 14.5 14.7794 14.342 15.0607 14.0607C15.342 13.7794 15.5 13.3978 15.5 13V4C15.5 3.60218 15.342 3.22064 15.0607 2.93934C14.7794 2.65804 14.3978 2.5 14 2.5V2.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4.5 0.5V2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M11.5 0.5V2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export default CalendarIcon;

package/dist/es/components/icons/globe.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const GlobeIcon = (props) => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15V16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16V15C11.866 15 15 11.866 15 8Z", fill: "currentColor" }), _jsx("path", { d: "M15.5 7.5V8.5L1 8.5L1 7.5L15.5 7.5Z", fill: "currentColor" }), _jsx("path", { d: "M10.5 8C10.5 5.89548 10.1247 4.03808 9.55859 2.74414C9.27493 2.09576 8.96317 1.63356 8.66748 1.34766C8.37657 1.06641 8.15238 1 8 1C7.84762 1 7.62343 1.06641 7.33252 1.34766C7.03683 1.63356 6.72507 2.09576 6.44141 2.74414C5.87533 4.03808 5.5 5.89548 5.5 8C5.5 10.1045 5.87533 11.9619 6.44141 13.2559C6.72507 13.9042 7.03683 14.3664 7.33252 14.6523C7.62343 14.9336 7.84762 15 8 15V16C6.067 16 4.5 12.4183 4.5 8C4.5 3.58172 6.067 0 8 0C9.933 0 11.5 3.58172 11.5 8C11.5 12.4183 9.933 16 8 16V15C8.15238 15 8.37657 14.9336 8.66748 14.6523C8.96317 14.3664 9.27493 13.9042 9.55859 13.2559C10.1247 11.9619 10.5 10.1045 10.5 8Z", fill: "currentColor" }), _jsx("path", { d: "M8 5.5C6.43859 5.5 5.00301 5.27085 3.93994 4.88428C3.41056 4.69177 2.94707 4.45051 2.60645 4.15771C2.26743 3.86625 2 3.47669 2 3H3C3 3.07559 3.04069 3.21233 3.2583 3.39941C3.47429 3.58507 3.816 3.77497 4.28174 3.94434C5.20928 4.28162 6.52384 4.5 8 4.5C9.47616 4.5 10.7907 4.28162 11.7183 3.94434C12.184 3.77497 12.5257 3.58507 12.7417 3.39941C12.9593 3.21233 13 3.07559 13 3H14C14 3.47669 13.7326 3.86625 13.3936 4.15771C13.0529 4.45051 12.5894 4.69177 12.0601 4.88428C10.997 5.27085 9.56141 5.5 8 5.5Z", fill: "currentColor" }), _jsx("path", { d: "M8 10.5C9.56141 10.5 10.997 10.7292 12.0601 11.1157C12.5894 11.3082 13.0529 11.5495 13.3936 11.8423C13.7326 12.1338 14 12.5233 14 13H13C13 12.9244 12.9593 12.7877 12.7417 12.6006C12.5257 12.4149 12.184 12.225 11.7183 12.0557C10.7907 11.7184 9.47616 11.5 8 11.5C6.52384 11.5 5.20928 11.7184 4.28174 12.0557C3.816 12.225 3.47429 12.4149 3.2583 12.6006C3.04069 12.7877 3 12.9244 3 13H2C2 12.5233 2.26743 12.1337 2.60645 11.8423C2.94707 11.5495 3.41056 11.3082 3.93994 11.1157C5.00301 10.7292 6.43859 10.5 8 10.5Z", fill: "currentColor" })] }));
+export default GlobeIcon;

package/dist/es/components/icons/index.js

@@ -36,6 +36,7 @@ export { default as AffiliationIcon } from './affiliation';
 export { default as AuthorPlaceholderIcon } from './author-placeholder';
 export { default as AffiliationPlaceholderIcon } from './affiliation-placeholder';
 export { default as BookIcon } from './book';
+export { default as CalendarIcon } from './calendar';
 export { default as ChatIcon } from './chat';
 export { default as SystemUserAvatarIcon } from './system-user-avatar';
 export { default as CitationCountIcon } from './citation-count';
@@ -65,6 +66,7 @@ export { default as FileUnknownIcon } from './file-unknown';
 export { default as FileVideoIcon } from './file-video';
 export { default as HandleInspectorIcon } from './handle-inspector';
 export { default as HandleOutlineIcon } from './handle-outline';
+export { default as GlobeIcon } from './globe';
 export { default as HelpIcon } from './help';
 export { default as ImageLeftIcon } from './image-left';
 export { default as ImageDefaultIcon } from './image-default';

package/dist/es/index.js

@@ -13,13 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { defaultTheme } from './defaultTheme';
 export * as colors from './colors';
+export { defaultTheme } from './defaultTheme';
 export * from './components/AlertMessage';
 export * from './components/Message';
 export * from './components/Button';
 export * from './components/ContextMenu';
 export * from './components/RadioButton';
+export { StyledRadioGroup, } from './components/RadioGroup';
 export * from './components/Avatar';
 export * from './components/Dialog';
 export * from './components/DraggableModal';
@@ -31,6 +32,8 @@ export * from './components/SaveStatus';
 export * from './components/StyledModal';
 export * from './components/Sidebar';
 export * from './components/TextField';
+export * from './components/FormFieldContainer';
+export * from './components/FormCommon';
 export * from './components/ToggleSwitch';
 export { ToggleHeader, ToggleIcon } from './components/ToggleHeader';
 export * from './components/Tooltip';
@@ -45,6 +48,7 @@ export * from './components/Text';
 export * from './components/RelativeDate';
 export * from './components/Menus';
 export * from './components/Drawer';
+export * from './components/DatePicker';
 export * from './components/SelectField';
 export * from './components/SelectedItemsBox';
 export * from './hooks/use-dropdown';

package/dist/types/components/DatePicker.d.ts

@@ -0,0 +1,27 @@
+/*!
+ * © 2026 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-datepicker/dist/react-datepicker.css';
+import React from 'react';
+export interface DatePickerProps {
+    id?: string;
+    date?: Date;
+    originalDate?: Date;
+    handleDateChange: (date: Date | null) => void;
+    placeholder?: string;
+    showTimeSelect?: boolean;
+    required?: boolean;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/types/components/FormCommon.d.ts

@@ -0,0 +1,25 @@
+/*!
+ * © 2026 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 declare const FieldError: React.FC<{
+    error?: string;
+}>;
+export declare const FieldInfo: React.FC<{
+    info?: string;
+}>;
+export declare const TextWithGenerationWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextFieldError: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextFieldErrorItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/FormFieldContainer.d.ts

@@ -0,0 +1,26 @@
+/*!
+ * © 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 { FunctionComponent, ReactElement, ReactNode } from 'react';
+import { ErrorProps } from './Form';
+interface FormFieldContainerProps {
+    label?: string;
+    error?: ReactNode | undefined;
+    info?: ReactNode | undefined;
+    id?: string;
+    children: ReactElement<ErrorProps>;
+}
+export declare const FormFieldContainer: FunctionComponent<FormFieldContainerProps>;
+export {};