@manuscripts/style-guide 3.4.0 → 3.4.1

package/dist/cjs/components/Checkbox.js

@@ -20,6 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxField = exports.CheckboxLabel = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
+const CHECKED_ICON = 'data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z" fill="%230D79D0"/%3E%3Cpath d="M6.48052 9.81367L11.5848 4.26912C11.7499 4.08971 11.9444 4 12.1685 4C12.3926 4 12.5872 4.08971 12.7523 4.26912C12.9174 4.44842 13 4.66099 13 4.90684C13 5.15269 12.9174 5.36531 12.7523 5.54473L7.06432 11.7309C6.89916 11.9103 6.70456 12 6.48052 12C6.25648 12 6.06187 11.9103 5.89671 11.7309L3.24437 8.84968C3.07921 8.67026 2.99777 8.45763 3.00005 8.21179C3.00232 7.96594 3.08604 7.75337 3.2512 7.57407C3.41626 7.39465 3.61195 7.30495 3.83827 7.30495C4.06458 7.30495 4.26032 7.39465 4.42548 7.57407L6.48052 9.81367Z" fill="white" stroke="white" stroke-width="0.5"/%3E%3C/svg%3E';
 exports.CheckboxLabel = styled_components_1.default.label `
   input {
     border: 0;
@@ -36,39 +37,56 @@ exports.CheckboxLabel = styled_components_1.default.label `
 
   div {
     align-items: center;
-    color: ${(props) => props.disabled ? '#aaa' : props.theme.colors.text.secondary};
+    font-family: ${(props) => props.theme.font.family.sans};
+    font-size: ${(props) => props.theme.font.size.normal};
+    font-weight: ${(props) => props.theme.font.weight.normal};
+    color: ${(props) => props.disabled
+    ? props.theme.colors.text.muted
+    : props.theme.colors.text.primary};
     display: flex;
     flex-wrap: nowrap;
-    line-height: 16px;
-    margin: 16px 0 8px;
+    line-height: 20px;
+    margin: 8px 0;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
 
     &::before {
-      content: ' ';
+      content: '';
       display: inline-block;
       flex-shrink: 0;
       width: 16px;
       height: 16px;
-      border: 1px solid ${(props) => props.theme.colors.text.secondary};
-      border-radius: 4px;
-      margin-right: 1em;
+      border: 1.5px solid ${(props) => props.theme.colors.border.field.default};
+      border-radius: 3px;
+      margin-right: 10px;
       text-align: center;
+      background: ${(props) => props.theme.colors.background.primary};
     }
   }
 
+
   input:checked + div::before {
-    background: ${(props) => props.theme.colors.brand.default};
-    border-color: ${(props) => props.theme.colors.brand.default};
-    color: white;
-    content: '✓';
+    background-color: transparent !important;
+    border-color: transparent !important;
+    background-image: url('${CHECKED_ICON}') !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    background-size: cover !important;
   }
 
-  input:focus + div::before {
-    border-color: ${(props) => props.theme.colors.button.primary.border.hover};
+  input:focus-visible + div::before {
+    outline: none;
   }
 
-  input:focus-visible + div::before {
-    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
-    outline-offset: 2px;
+  input:disabled + div::before {
+    background: ${(props) => props.theme.colors.background.fifth};
+    border-color: ${(props) => props.theme.colors.border.field.default};
+  }
+  input:disabled + div {
+    color: ${(props) => props.theme.colors.text.secondary};
+  }
+
+  input:checked:disabled + div::before {
+    filter: grayscale(1) opacity(0.4);
   }
 `;
 exports.CheckboxField = styled_components_1.default.input.attrs({

package/dist/cjs/components/ContextMenu.js

@@ -42,7 +42,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
 const Icons = __importStar(require("./icons"));
 const ContextMenuIconButton = (0, styled_components_1.default)(Button_1.IconButton) `
-  color: #6e6e6e;
+  color: ${(props) => props.theme.colors.text.secondary};
   &:not([disabled]).selected {
     background-color: #c9c9c9;
   }

package/dist/cjs/components/Form.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormError = exports.FormActions = exports.FormHeader = exports.CenteredForm = void 0;
+exports.InputErrorText = exports.InputHelperText = exports.LabelText = exports.Label = exports.FormSubtitle = exports.FormTitle = exports.FormActionsBar = exports.FormLabel = exports.FormRow = exports.FormField = exports.FormContainer = exports.FormError = exports.FormActions = exports.FormHeader = exports.CenteredForm = void 0;
 const formik_1 = require("formik");
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.CenteredForm = (0, styled_components_1.default)(formik_1.Form) `
@@ -49,3 +49,96 @@ exports.FormError = styled_components_1.default.div `
   position: relative;
   padding: 12px;
 `;
+exports.FormContainer = styled_components_1.default.div `
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.grid.unit * 4}px;
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  box-sizing: border-box;
+`;
+exports.FormField = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+exports.FormRow = styled_components_1.default.div `
+  display: flex;
+  flex-direction: ${(props) => props.direction ?? 'column'};
+  gap: ${(props) => props.theme.grid.unit * 2}px;
+  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
+  justify-content: ${(props) => props.justify ?? 'flex-start'};
+  align-items: ${(props) => props.align ?? (props.direction === 'row' ? 'center' : 'stretch')};
+  flex-wrap: ${(props) => (props.direction === 'row' ? 'wrap' : 'nowrap')};
+`;
+exports.FormLabel = styled_components_1.default.legend `
+  &:not(:first-child) {
+    margin-top: 15px;
+  }
+  margin-bottom: 15px;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.xlarge} /
+    ${(props) => props.theme.font.lineHeight.large}
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.4px;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+exports.FormActionsBar = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: ${(props) => props.theme.grid.unit * 3}px;
+`;
+exports.FormTitle = styled_components_1.default.h2 `
+  margin: 0;
+  font: ${(props) => props.theme.font.weight.medium}
+    ${(props) => props.theme.font.size.xlarge} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+exports.FormSubtitle = styled_components_1.default.p `
+  margin: 0;
+  color: ${(props) => props.theme.colors.text.secondary};
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.medium} /
+    ${(props) => props.theme.font.lineHeight.large}
+    ${(props) => props.theme.font.family.sans};
+`;
+exports.Label = styled_components_1.default.label `
+  display: inline-flex;
+  align-items: center;
+  gap: ${(props) => props.theme.grid.unit}px;
+  color: ${(props) => props.theme.colors.text.secondary};
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
+`;
+exports.LabelText = styled_components_1.default.div `
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal} / 1
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.2px;
+  color: ${(props) => props.theme.colors.text.primary};
+  &::before {
+    margin-right: 8px !important;
+  }
+`;
+exports.InputHelperText = styled_components_1.default.span `
+  color: ${(props) => props.theme.colors.text.muted};
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.small} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
+`;
+exports.InputErrorText = styled_components_1.default.span `
+  color: ${(props) => props.theme.colors.text.error};
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.small} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
+  display: block;
+  margin-top: 4px;
+`;

package/dist/cjs/components/Menus/Shortcut.js

@@ -9,7 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const isMac = /Mac/.test(window.navigator.platform);
 exports.ShortcutContainer = styled_components_1.default.div `
   display: inline-flex;
-  color: #6e6e6e;
+  color: ${(props) => props.theme.colors.text.secondary};
   margin-left: 16px;
   flex-shrink: 0;
   justify-content: flex-end;

package/dist/cjs/components/MultiValueInput.js

@@ -15,8 +15,8 @@ const Container = styled_components_1.default.div `
   flex-wrap: wrap;
   gap: 4px;
   align-items: center;
-  padding: 0;
-  background: hotpink
+  padding: 4px 8px;
+  background: ${(props) => props.theme.colors.background.primary};
 
 
   &:hover Input {
@@ -49,7 +49,7 @@ const RemoveButton = styled_components_1.default.button `
   width: 10px;
   height: 10px;
   color: white;
-  background: #6e6e6e;
+  background: ${(props) => props.theme.colors.text.secondary};
   margin-left: 4px;
   border: none;
   border-radius: 100%;

package/dist/cjs/components/RadioButton.js

@@ -7,49 +7,72 @@ exports.RadioButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Input = styled_components_1.default.input `
-    position: absolute;
-    left: -9999px;
-    opacity: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 
-    + label {
-      cursor: pointer;
-      margin: 0;
-      display: inline-block;
-      font-size: ${(props) => props.theme.font.size.large};
-      color: ${(props) => props.theme.colors.text.primary};
-      line-height: ${(props) => props.theme.font.lineHeight.large};
-      margin-bottom: ${(props) => props.theme.grid.unit}px;
-      position: relative;
-      padding-left: ${(props) => props.theme.grid.unit * 7}px;
-      text-align: left;
+  + label {
+    cursor: pointer;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    font-family: ${(props) => props.theme.font.family.sans};
+    font-size: ${(props) => props.theme.font.size.normal};
+    font-weight: ${(props) => props.theme.font.weight.normal};
+    color: ${(props) => props.theme.colors.text.primary};
+    line-height: 20px;
+    margin-bottom: ${(props) => props.theme.grid.unit}px;
+    position: relative;
+    padding-left: 24px;
+    text-align: left;
+    user-select: none;
 
-      &::before {
-        border: 2px solid ${(props) => props.theme.colors.background.primary};
-        border-radius: 50%;
-        box-shadow: 0 0 0 1px
-          ${(props) => props.theme.colors.text.primary};
-        box-sizing: border-box;
-        content: ' ';
-        display: block;
-        height: 18px;
-        position: absolute;
-        left: 0;
-        top: ${(props) => props.theme.grid.unit}px;
-        width: 18px;
-        z-index: 0;
-      }
+    &::before {
+      border: 1.5px solid ${(props) => props.theme.colors.border.field.default};
+      border-radius: 50%;
+      box-sizing: border-box;
+      content: ' ';
+      display: block;
+      height: 16px;
+      width: 16px;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      background: ${(props) => props.theme.colors.background.primary};
     }
+  }
 
-    &:checked + label::before {
-      background: ${(props) => props.theme.colors.brand.medium};
-      box-shadow: 0 0 0 1px ${(props) => props.theme.colors.brand.medium};
-    }
-    &:hover,
-    &:focus {
-      + label::before {
-        box-shadow: 0 0 0 1px ${(props) => props.theme.colors.brand.medium};
-      }
-    }
+  &:checked + label::before {
+    background: ${(props) => props.theme.colors.background.primary};
+    box-shadow: inset 0 0 0 4px #0d79d0;
+    border-color: #0d79d0;
+  }
+
+  &:hover:not(:disabled) + label::before {
+    border-color: ${(props) => props.theme.colors.text.secondary};
+  }
+
+  &:focus-visible + label::before {
+    border-color: #0d79d0;
+  }
+
+  &:disabled + label {
+    color: ${(props) => props.theme.colors.text.secondary};
+    cursor: not-allowed;
+  }
+
+  &:disabled + label::before {
+    background: #c9c9c9;
+    filter: grayscale(1) opacity(0.4);
+    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 })] }));

package/dist/cjs/components/SelectField.js

@@ -6,5 +6,94 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_select_1 = __importDefault(require("react-select"));
-const SelectField = ({ id, options, field, form, }) => ((0, jsx_runtime_1.jsx)(react_select_1.default, { inputId: id, options: options, name: field.name, classNamePrefix: field.name, value: options?.find((option) => option.value === field.value), onChange: (option) => form.setFieldValue(field.name, option?.value), onBlur: field.onBlur }));
+const styled_components_1 = require("styled-components");
+const selectStyles = (theme, error, variant) => ({
+    control: (base, state) => ({
+        ...base,
+        minHeight: variant === 'large' ? 40 : 32,
+        borderRadius: 3,
+        fontFamily: theme.font.family.sans,
+        fontSize: theme.font.size.medium,
+        borderColor: error
+            ? theme.colors.border.error
+            : state.isFocused
+                ? theme.colors.brand.default
+                : theme.colors.border.field.default,
+        boxShadow: 'none',
+        '&:hover': {
+            borderColor: error
+                ? theme.colors.border.error
+                : state.isFocused
+                    ? theme.colors.brand.default
+                    : theme.colors.text.secondary,
+            backgroundColor: !state.isDisabled ? '#F2FBFC' : 'transparent',
+        },
+        backgroundColor: state.isDisabled
+            ? '#F5F5F5'
+            : state.isFocused
+                ? '#F2FBFC'
+                : theme.colors.background.primary,
+        transition: 'border-color 120ms ease, box-shadow 120ms ease',
+        cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+    }),
+    valueContainer: (base) => ({
+        ...base,
+        padding: '0 8px',
+    }),
+    singleValue: (base, state) => ({
+        ...base,
+        color: state.isDisabled ? '#B3B3B3' : theme.colors.text.primary,
+        fontFamily: theme.font.family.sans,
+        fontSize: theme.font.size.medium,
+    }),
+    option: (base, state) => ({
+        ...base,
+        fontFamily: theme.font.family.sans,
+        fontSize: theme.font.size.medium,
+        backgroundColor: state.isSelected
+            ? theme.colors.brand.default
+            : state.isFocused
+                ? '#F2FBFC'
+                : theme.colors.background.primary,
+        color: state.isSelected ? '#FFF' : theme.colors.text.primary,
+        '&:active': {
+            backgroundColor: theme.colors.brand.default,
+            color: '#FFF',
+        },
+    }),
+    menu: (base) => ({
+        ...base,
+        borderRadius: 3,
+        overflow: 'hidden',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    }),
+    placeholder: (base) => ({
+        ...base,
+        color: theme.colors.text.secondary,
+        fontStyle: 'italic',
+        fontFamily: theme.font.family.sans,
+        fontSize: theme.font.size.medium,
+        fontWeight: theme.font.weight.normal,
+        lineHeight: theme.font.lineHeight.large,
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        color: state.isDisabled ? '#B3B3B3' : theme.colors.text.secondary,
+        '&:hover': {
+            color: state.isDisabled ? '#B3B3B3' : theme.colors.text.primary,
+        },
+    }),
+});
+const SelectField = ({ id, options, field, form, error, variant, isDisabled, ...rest }) => {
+    const theme = (0, styled_components_1.useTheme)();
+    const name = field?.name || '';
+    const value = field?.value;
+    return ((0, jsx_runtime_1.jsx)(react_select_1.default, { inputId: id, options: options, name: name, classNamePrefix: name, value: options?.find((option) => option.value === value), onChange: (option) => form?.setFieldValue(name, option?.value), onBlur: field?.onBlur, styles: selectStyles(theme, error, variant), isDisabled: form?.isSubmitting || isDisabled, ...rest, theme: (base) => ({
+            ...base,
+            colors: {
+                ...base.colors,
+                primary: theme.colors.brand.default || base.colors.primary,
+            },
+        }) }));
+};
 exports.SelectField = SelectField;

package/dist/cjs/components/StyledModal.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledModal = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = void 0;
+exports.StyledModal = exports.ModalTitle = exports.ModalCardBody = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_modal_1 = __importDefault(require("react-modal"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -100,6 +100,25 @@ exports.ScrollableModalContent = (0, styled_components_1.default)(exports.ModelC
   overflow-y: auto;
   max-height: 100%;
 `;
+exports.ModalCardBody = styled_components_1.default.div `
+  box-sizing: border-box;
+  padding: ${(props) => 6 * props.theme.grid.unit}px;
+  background-color: ${(props) => props.theme.colors.background.primary};
+  width: ${(props) => props.width
+    ? typeof props.width === 'number'
+        ? `${props.width}px`
+        : props.width
+    : '640px'};
+  max-width: 60vw;
+  max-height: 80vh;
+`;
+exports.ModalTitle = styled_components_1.default.h2 `
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: ${(props) => props.theme.font.size.medium};
+  font-weight: ${(props) => props.theme.font.weight.bold};
+  color: ${(props) => props.theme.colors.text.primary};
+  margin: 0 0 20px 0;
+`;
 exports.StyledModal = (0, styled_components_1.default)(ReactModalAdapter).attrs({
     closeTimeoutMS: totalTransitionTime,
     overlayClassName: {

package/dist/cjs/components/TextField.js

@@ -33,37 +33,79 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextFieldWrapper = exports.TextFieldLabel = exports.TextFieldGroup = exports.TextArea = exports.TextField = exports.commonStyles = void 0;
+exports.TextFieldWrapper = exports.TextFieldLabel = exports.TextFieldGroup = exports.YearField = exports.YearInput = exports.TextArea = exports.TextField = exports.commonStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const formik_1 = require("formik");
 const styled_components_1 = __importStar(require("styled-components"));
 exports.commonStyles = (0, styled_components_1.css) `
   border: 1px solid
     ${(props) => props.error
     ? props.theme.colors.border.error
     : props.theme.colors.border.field.default};
-  border-radius: ${(props) => props.theme.grid.radius.small};
+  border-radius: 3px;
   box-sizing: border-box;
   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};
   outline: none;
-  padding: 10px ${(props) => props.theme.grid.unit * 4}px;
+  padding: ${(props) => {
+    if (props.variant === 'small') {
+        return '0 12px';
+    }
+    if (props.variant === 'large') {
+        return '4px 16px';
+    }
+    return '0 12px';
+}};
+  min-height: ${(props) => {
+    if (props.variant === 'small') {
+        return '32px';
+    }
+    if (props.variant === 'large') {
+        return '40px';
+    }
+    return '40px';
+}};
   position: relative;
   width: 100%;
-  ${(props) => props.error && 'z-index: 2'};
+  background-color: #fff;
+  color: ${(props) => props.theme.colors.text.primary};
+
+  &::placeholder {
+    color: ${(props) => props.theme.colors.text.secondary};
+    opacity: 1;
+    font-family: ${(props) => props.theme.font.family.sans};
+    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-color: ${(props) => props.theme.colors.border.field.hover};
-    background-color: ${(props) => props.theme.colors.background.fifth};
+  &:hover:not(:disabled) {
+    background-color: #f2fbfc;
   }
 
-  &:hover {
-    background-color: ${(props) => props.theme.colors.background.fifth};
+  &:focus:not(:disabled) {
+    border: 2px solid
+      ${(props) => props.error
+    ? props.theme.colors.border.error
+    : props.theme.colors.brand.default};
+    background-color: #f2fbfc;
+
+    &::placeholder {
+      color: #c9c9c9;
+    }
   }
 
-  &:invalid {
-    box-shadow: none;
+  &:disabled {
+    background-color: #f5f5f5;
+    border-color: #e4e4e4;
+    color: #b3b3b3;
+    cursor: not-allowed;
   }
+
+  ${(props) => props.error && 'z-index: 2'};
 `;
 exports.TextField = styled_components_1.default.input `
   display: block;
@@ -73,6 +115,10 @@ exports.TextArea = styled_components_1.default.textarea `
   ${exports.commonStyles}
   max-width: 100%;
 `;
+exports.YearInput = styled_components_1.default.input `
+  ${exports.commonStyles}
+`;
+exports.YearField = (0, styled_components_1.default)(formik_1.Field).attrs({ as: exports.YearInput }) ``;
 exports.TextFieldGroup = styled_components_1.default.div `
   & ${exports.TextField}:first-of-type {
     margin-top: ${(props) => props.theme.grid.unit}px;

package/dist/cjs/components/ToggleSwitch.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleSwitch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Track = styled_components_1.default.button `
+  position: relative;
+  width: 30px;
+  height: 16px;
+  border-radius: 999px;
+  border: 1px solid
+    ${(props) => props.checked ? '#0d79d0' : props.theme.colors.text.secondary};
+  background: ${(props) => props.checked ? '#0d79d0' : props.theme.colors.text.secondary};
+  padding: 0;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  outline: none;
+  flex-shrink: 0;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #0d79d04d;
+  }
+
+  &:disabled {
+    background: #c9c9c9;
+    border-color: #c9c9c9;
+  }
+`;
+const Thumb = styled_components_1.default.span `
+  position: absolute;
+  top: 0;
+  left: ${(props) => (props.checked ? '14px' : '0px')};
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: left 120ms ease;
+
+  ${(props) => props.disabled &&
+    `
+    background: #fdfdfd;
+    box-shadow: none;
+  `}
+`;
+const LabelText = styled_components_1.default.span `
+  color: ${(props) => props.disabled ? '#b3b3b3' : props.theme.colors.text.primary};
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.medium} / 1
+    ${(props) => props.theme.font.family.sans};
+  line-height: 20px;
+`;
+const Container = styled_components_1.default.label `
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
+`;
+const ToggleSwitch = ({ checked, disabled, onChange, label, id, labelPosition = 'left', }) => {
+    return ((0, jsx_runtime_1.jsxs)(Container, { labelPosition: labelPosition, children: [label && (0, jsx_runtime_1.jsx)(LabelText, { disabled: disabled, children: label }), (0, jsx_runtime_1.jsx)(Track, { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, checked: checked, disabled: disabled, onClick: () => !disabled && onChange(!checked), children: (0, jsx_runtime_1.jsx)(Thumb, { checked: checked, disabled: disabled }) })] }));
+};
+exports.ToggleSwitch = ToggleSwitch;

package/dist/cjs/index.js

@@ -51,6 +51,7 @@ __exportStar(require("./components/TextField"), exports);
 __exportStar(require("./components/TextFieldContainer"), exports);
 __exportStar(require("./components/TextFieldError"), exports);
 __exportStar(require("./components/TextFieldGroupContainer"), exports);
+__exportStar(require("./components/ToggleSwitch"), exports);
 var ToggleHeader_1 = require("./components/ToggleHeader");
 Object.defineProperty(exports, "ToggleHeader", { enumerable: true, get: function () { return ToggleHeader_1.ToggleHeader; } });
 Object.defineProperty(exports, "ToggleIcon", { enumerable: true, get: function () { return ToggleHeader_1.ToggleIcon; } });