@manuscripts/style-guide 3.4.5 → 3.4.7

package/dist/cjs/components/ContextMenu.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
 const Icons = __importStar(require("./icons"));
@@ -52,6 +53,11 @@ const ContextMenuIconButton = (0, styled_components_1.default)(Button_1.IconButt
     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;
@@ -62,8 +68,43 @@ const icons = Object.entries(Icons).reduce((acc, [name, IconComponent]) => {
     acc[iconName] = IconComponent;
     return acc;
 }, {});
-const ContextMenu = ({ actions }) => ((0, jsx_runtime_1.jsx)(Button_1.IconButtonGroup, { size: 32, children: actions.map((action) => {
-        const Icon = icons[action.icon];
-        return ((0, jsx_runtime_1.jsx)(ContextMenuIconButton, { "data-tooltip-content": action.label, onClick: action.disabled === true ? () => null : action.action, className: action.selected ? 'selected' : '', disabled: !!action.disabled, children: (0, jsx_runtime_1.jsx)(Icon, { width: 18, height: 18 }) }, action.icon));
-    }) }));
+const ContextMenu = ({ actions }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)(Button_1.IconButtonGroup, { size: 32, ref: containerRef, children: actions.map((action) => {
+            const Icon = icons[action.icon];
+            return ((0, jsx_runtime_1.jsx)(ContextMenuIconButton, { "data-tooltip-content": action.label, onClick: action.disabled === true ? () => null : action.action, className: action.selected ? 'selected' : '', disabled: !!action.disabled, children: (0, jsx_runtime_1.jsx)(Icon, { width: 18, height: 18 }) }, action.icon));
+        }) }));
+};
 exports.ContextMenu = ContextMenu;

package/dist/cjs/components/DatePicker.js

@@ -0,0 +1,188 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react-datepicker/dist/react-datepicker.css");
+const react_1 = require("react");
+const react_datepicker_1 = __importDefault(require("react-datepicker"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("./icons");
+const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, }) => {
+    const [selectedDate, setSelectedDate] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(Calendar, { children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required }), (0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIcon, { width: 16, height: 16 }) })] }));
+};
+exports.DatePicker = DatePicker;
+const Calendar = styled_components_1.default.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_components_1.default.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/cjs/components/Form.js

@@ -81,7 +81,7 @@ exports.FormLabel = styled_components_1.default.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};
 `;
 exports.FormActionsBar = styled_components_1.default.div `
   display: flex;

package/dist/cjs/components/FormCommon.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldErrorItem = exports.TextFieldError = exports.TextWithGenerationWrapper = exports.FieldInfo = exports.FieldError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("./icons");
+const FieldError = ({ error }) => {
+    if (!error) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icons_1.AttentionRedIcon, { className: "error-icon", width: 16, height: 16 }), (0, jsx_runtime_1.jsx)(ErrorText, { children: error })] }));
+};
+exports.FieldError = FieldError;
+const FieldInfo = ({ info }) => {
+    if (!info) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(FieldInfoText, { children: info });
+};
+exports.FieldInfo = FieldInfo;
+const ErrorText = styled_components_1.default.span `
+  font-size: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.colors.text.error};
+`;
+const FieldInfoText = styled_components_1.default.span `
+  font-size: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+exports.TextWithGenerationWrapper = styled_components_1.default.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;
+  }
+`;
+exports.TextFieldError = styled_components_1.default.div `
+  margin-top: 4px;
+`;
+exports.TextFieldErrorItem = styled_components_1.default.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/cjs/components/FormFieldContainer.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const TextField_1 = require("./TextField");
+const FormCommon_1 = require("./FormCommon");
+const FormFieldContainer = ({ label, error, info, id, children, }) => {
+    const childrenWithErrorProp = react_1.Children.map(children, (child) => (0, react_1.cloneElement)(child, {
+        error: error ? String(error) : undefined,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [label ? ((0, jsx_runtime_1.jsxs)(TextField_1.TextFieldLabel, { htmlFor: id, children: [label, " ", childrenWithErrorProp] })) : (childrenWithErrorProp), info && !error && (0, jsx_runtime_1.jsx)(FormFieldInfo, { children: info }), error && ((0, jsx_runtime_1.jsx)(FormCommon_1.TextFieldError, { children: (0, jsx_runtime_1.jsx)(FormCommon_1.TextFieldErrorItem, { children: error }) }))] }));
+};
+exports.FormFieldContainer = FormFieldContainer;
+const FormFieldInfo = styled_components_1.default.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/cjs/components/InspectorSection.js

@@ -14,7 +14,7 @@ const Section = styled_components_1.default.div `
 `;
 const Heading = styled_components_1.default.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
@@ -57,11 +57,11 @@ exports.Subheading = (0, styled_components_1.default)(HeadingText) `
 exports.Field = styled_components_1.default.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const InspectorSection = ({ title, contentStyles, children, }) => {
+const InspectorSection = ({ title, contentStyles, children, collapsible = true, }) => {
     const [expanded, setExpanded] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsxs)(Section, { children: [(0, jsx_runtime_1.jsx)(Line, {}), (0, jsx_runtime_1.jsxs)(Heading, { onClick: () => setExpanded(!expanded), marginBottom: (!(expanded && children) && '40px') || undefined, children: [(0, jsx_runtime_1.jsx)(HeadingText, { children: title }), (0, jsx_runtime_1.jsx)(exports.ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
+    return ((0, jsx_runtime_1.jsxs)(Section, { children: [(0, jsx_runtime_1.jsx)(Line, {}), (0, jsx_runtime_1.jsxs)(Heading, { onClick: () => collapsible && setExpanded(!expanded), marginBottom: (!(expanded && children) && '40px') || undefined, style: { cursor: collapsible ? 'pointer' : 'default' }, children: [(0, jsx_runtime_1.jsx)(HeadingText, { children: title }), collapsible && ((0, jsx_runtime_1.jsx)(exports.ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
                             transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-                        }, children: (0, jsx_runtime_1.jsx)(icons_1.ArrowDownCircleIcon, {}) })] }), expanded && children && (0, jsx_runtime_1.jsx)("div", { style: contentStyles, children: children })] }));
+                        }, children: (0, jsx_runtime_1.jsx)(icons_1.ArrowDownCircleIcon, {}) }))] }), expanded && children && (0, jsx_runtime_1.jsx)("div", { style: contentStyles, children: children })] }));
 };
 exports.InspectorSection = InspectorSection;
 const Line = styled_components_1.default.hr `

package/dist/cjs/components/RadioButton.js

@@ -52,16 +52,16 @@ const Input = styled_components_1.default.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 {
@@ -75,5 +75,15 @@ const Input = styled_components_1.default.input `
     border-color: #e4e4e4;
   }
 `;
-const RadioButton = ({ checked, id, label, name, ...rest }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, type: "radio", name: name, id: id, ...rest }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, children: label })] }));
+const RadioButtonContainer = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  margin-right: ${(props) => props.theme.grid.unit * 4}px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+const RadioButton = ({ checked, id, label, name, ...rest }) => ((0, jsx_runtime_1.jsxs)(RadioButtonContainer, { className: "radio-button-container", children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, type: "radio", name: name, id: id, ...rest }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, children: label })] }));
 exports.RadioButton = RadioButton;

package/dist/cjs/components/RadioGroup.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRadioGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const RadioButton_1 = require("./RadioButton");
+const RadioWrapper = styled_components_1.default.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;
+    }
+  }
+`;
+const StyledRadioGroup = ({ name, options, value, onChange, disabled, }) => {
+    return ((0, jsx_runtime_1.jsx)(RadioWrapper, { children: options.map((option, index) => ((0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { name: name, id: `${name}-option-${index}`, label: option.label, value: option.value, checked: value === option.value, onChange: onChange, disabled: disabled }, index))) }));
+};
+exports.StyledRadioGroup = StyledRadioGroup;

package/dist/cjs/components/SelectField.js

@@ -19,15 +19,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
@@ -67,11 +69,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/cjs/components/TextField.js

@@ -73,9 +73,9 @@ exports.commonStyles = (0, styled_components_1.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};
@@ -84,6 +84,7 @@ exports.commonStyles = (0, styled_components_1.css) `
 
   &:hover:not(:disabled) {
     background-color: #f2fbfc;
+    border-color: ${(props) => props.theme.colors.text.greyMuted};
   }
 
   &:focus:not(:disabled) {
@@ -92,10 +93,20 @@ exports.commonStyles = (0, styled_components_1.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 {
@@ -145,16 +156,16 @@ exports.TextFieldGroup = styled_components_1.default.div `
   }
 `;
 exports.TextFieldLabel = styled_components_1.default.label `
+  display: block;
   font-family: ${(props) => props.theme.font.family.sans};
-  text-transform: uppercase;
-  color: ${(props) => props.theme.colors.text.secondary};
-
-  & ${exports.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};
 
-  & ${exports.TextArea} {
-    margin-top: ${(props) => props.theme.grid.unit}px;
+  > * {
+    margin-top: ${(props) => props.theme.grid.unit * 2}px;
+    display: block;
   }
 `;
 const TextFieldWrapperStyles = styled_components_1.default.div `

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CalendarIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M0.5 5.5H15.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.5 0.5V2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M11.5 0.5V2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+exports.CalendarIcon = CalendarIcon;
+exports.default = exports.CalendarIcon;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobeIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GlobeIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.5 7.5V8.5L1 8.5L1 7.5L15.5 7.5Z", fill: "currentColor" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" })] }));
+exports.GlobeIcon = GlobeIcon;
+exports.default = exports.GlobeIcon;

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

@@ -18,9 +18,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.ChatIcon = exports.BookIcon = exports.AffiliationPlaceholderIcon = exports.AuthorPlaceholderIcon = exports.AffiliationIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddRoleIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddFigureIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
-exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SupplementsIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusErrorIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.ManuscriptIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.InspectorPluginIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = void 0;
-exports.XIcon = exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = void 0;
+exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.ChatIcon = exports.CalendarIcon = exports.BookIcon = exports.AffiliationPlaceholderIcon = exports.AuthorPlaceholderIcon = exports.AffiliationIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddRoleIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddFigureIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
+exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SupplementsIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusErrorIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.ManuscriptIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.InspectorPluginIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = exports.GlobeIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = void 0;
+exports.XIcon = exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_comment_1 = require("./add-comment");
@@ -67,6 +67,8 @@ var affiliation_placeholder_1 = require("./affiliation-placeholder");
 Object.defineProperty(exports, "AffiliationPlaceholderIcon", { enumerable: true, get: function () { return __importDefault(affiliation_placeholder_1).default; } });
 var book_1 = require("./book");
 Object.defineProperty(exports, "BookIcon", { enumerable: true, get: function () { return __importDefault(book_1).default; } });
+var calendar_1 = require("./calendar");
+Object.defineProperty(exports, "CalendarIcon", { enumerable: true, get: function () { return __importDefault(calendar_1).default; } });
 var chat_1 = require("./chat");
 Object.defineProperty(exports, "ChatIcon", { enumerable: true, get: function () { return __importDefault(chat_1).default; } });
 var system_user_avatar_1 = require("./system-user-avatar");
@@ -125,6 +127,8 @@ var handle_inspector_1 = require("./handle-inspector");
 Object.defineProperty(exports, "HandleInspectorIcon", { enumerable: true, get: function () { return __importDefault(handle_inspector_1).default; } });
 var handle_outline_1 = require("./handle-outline");
 Object.defineProperty(exports, "HandleOutlineIcon", { enumerable: true, get: function () { return __importDefault(handle_outline_1).default; } });
+var globe_1 = require("./globe");
+Object.defineProperty(exports, "GlobeIcon", { enumerable: true, get: function () { return __importDefault(globe_1).default; } });
 var help_1 = require("./help");
 Object.defineProperty(exports, "HelpIcon", { enumerable: true, get: function () { return __importDefault(help_1).default; } });
 var image_left_1 = require("./image-left");

package/dist/cjs/index.js

@@ -51,15 +51,17 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleIcon = exports.ToggleHeader = exports.colors = exports.defaultTheme = void 0;
+exports.ToggleIcon = exports.ToggleHeader = exports.StyledRadioGroup = exports.defaultTheme = exports.colors = void 0;
+exports.colors = __importStar(require("./colors"));
 var defaultTheme_1 = require("./defaultTheme");
 Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return defaultTheme_1.defaultTheme; } });
-exports.colors = __importStar(require("./colors"));
 __exportStar(require("./components/AlertMessage"), exports);
 __exportStar(require("./components/Message"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/ContextMenu"), exports);
 __exportStar(require("./components/RadioButton"), exports);
+var RadioGroup_1 = require("./components/RadioGroup");
+Object.defineProperty(exports, "StyledRadioGroup", { enumerable: true, get: function () { return RadioGroup_1.StyledRadioGroup; } });
 __exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Dialog"), exports);
 __exportStar(require("./components/DraggableModal"), exports);
@@ -71,6 +73,8 @@ __exportStar(require("./components/SaveStatus"), exports);
 __exportStar(require("./components/StyledModal"), exports);
 __exportStar(require("./components/Sidebar"), exports);
 __exportStar(require("./components/TextField"), exports);
+__exportStar(require("./components/FormFieldContainer"), exports);
+__exportStar(require("./components/FormCommon"), exports);
 __exportStar(require("./components/ToggleSwitch"), exports);
 var ToggleHeader_1 = require("./components/ToggleHeader");
 Object.defineProperty(exports, "ToggleHeader", { enumerable: true, get: function () { return ToggleHeader_1.ToggleHeader; } });
@@ -87,6 +91,7 @@ __exportStar(require("./components/Text"), exports);
 __exportStar(require("./components/RelativeDate"), exports);
 __exportStar(require("./components/Menus"), exports);
 __exportStar(require("./components/Drawer"), exports);
+__exportStar(require("./components/DatePicker"), exports);
 __exportStar(require("./components/SelectField"), exports);
 __exportStar(require("./components/SelectedItemsBox"), exports);
 __exportStar(require("./hooks/use-dropdown"), exports);