@manuscripts/style-guide 3.4.0 → 3.4.2

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/hooks/use-menus.js

@@ -31,6 +31,7 @@ const getSubmenuState = (specs, pointer, position) => {
         const current = [...position, index];
         return {
             ...spec,
+            position: current,
             submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current),
             isOpen: isPart(pointer, current),
         };
@@ -41,6 +42,7 @@ const getMenuState = (specs, pointer) => {
         const position = [index];
         return {
             ...spec,
+            position,
             submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position),
             isOpen: isPart(pointer, position),
         };
@@ -89,13 +91,13 @@ const useMenus = (menus) => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
-    const closeAll = (0, react_1.useCallback)(() => {
-        setPointer(initialPointer);
+    const close = (0, react_1.useCallback)((depth) => {
+        setPointer(depth === undefined ? initialPointer : transformPointer(depth, -1));
     }, []);
     return {
         menus: state,
         handleClick,
-        closeAll,
+        close,
         ref,
     };
 };

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; } });

package/dist/es/components/Checkbox.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import styled from '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';
 export const CheckboxLabel = styled.label `
   input {
     border: 0;
@@ -30,39 +31,56 @@ export const CheckboxLabel = styled.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);
   }
 `;
 export const CheckboxField = styled.input.attrs({

package/dist/es/components/ContextMenu.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { IconButton, IconButtonGroup } from './Button';
 import * as Icons from './icons';
 const ContextMenuIconButton = styled(IconButton) `
-  color: #6e6e6e;
+  color: ${(props) => props.theme.colors.text.secondary};
   &:not([disabled]).selected {
     background-color: #c9c9c9;
   }

package/dist/es/components/Form.js

@@ -43,3 +43,96 @@ export const FormError = styled.div `
   position: relative;
   padding: 12px;
 `;
+export const FormContainer = styled.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;
+`;
+export const FormField = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+export const FormRow = styled.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')};
+`;
+export const FormLabel = styled.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};
+`;
+export const FormActionsBar = styled.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;
+`;
+export const FormTitle = styled.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};
+`;
+export const FormSubtitle = styled.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};
+`;
+export const Label = styled.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};
+`;
+export const LabelText = styled.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;
+  }
+`;
+export const InputHelperText = styled.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};
+`;
+export const InputErrorText = styled.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/es/components/Menus/Menus.js

@@ -28,7 +28,7 @@ const MenuContainer = styled.div `
     }
   }
 `;
-export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
+export const Menus = ({ menus, innerRef, handleClick, close, }) => {
     const menuHeadingsRef = useRef([]);
     useEffect(() => {
         menuHeadingsRef.current.forEach((heading, index) => {
@@ -65,7 +65,7 @@ export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
             case 'Escape': {
                 event.preventDefault();
                 event.stopPropagation();
-                closeAll();
+                close();
                 break;
             }
             case 'ArrowDown': {
@@ -90,7 +90,7 @@ export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
                             e.preventDefault();
                             handleClick([index]);
                         }, isOpen: menu.isOpen, children: _jsx(Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && (_jsx(SubmenusContainerWrapper, { children: _jsx(SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
-                                return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), closeAll: closeAll }, `${index}-${sindex}`));
+                                return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), close: close }, `${index}-${sindex}`));
                             }) }) }))] }, `menu-${index}`));
         }) }));
 };

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const isMac = /Mac/.test(window.navigator.platform);
 export const ShortcutContainer = styled.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/es/components/Menus/Submenu.js

@@ -77,7 +77,7 @@ const Container = styled.div `
   }
 `;
 const activeContent = (menu) => (menu.isActive ? '✓' : '');
-export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
+export const SubmenuLabel = ({ menu, handleClick, close, }) => {
     if (isMenuSeparator(menu)) {
         return null;
     }
@@ -126,17 +126,21 @@ export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
             case 'ArrowLeft': {
                 const parentContainer = submenuContainer?.parentElement?.closest('[data-submenu-container]');
                 if (parentContainer) {
+                    if (menu.position) {
+                        const currentDepth = menu.position.length - 2;
+                        close(currentDepth);
+                    }
                     const parentLabel = parentContainer.querySelector(':scope > [data-submenu-item]');
                     parentLabel?.focus();
                 }
                 else {
                     focusMenuHeading();
-                    closeAll();
+                    close();
                 }
                 break;
             }
             case 'Escape': {
-                closeAll();
+                close();
                 focusMenuHeading();
                 break;
             }
@@ -153,15 +157,15 @@ export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
             handleClick([]);
         }, onKeyDown: handleKeyDown, children: [_jsx(Active, { children: activeContent(menu) }), _jsx(Text, { children: menu.label }), menu.submenu && _jsx(Arrow, {}), menu.shortcut && _jsx(Shortcut, { shortcut: menu.shortcut })] }));
 };
-export const Submenu = ({ menu, handleClick, closeAll, }) => {
+export const Submenu = ({ menu, handleClick, close, }) => {
     if (isMenuSeparator(menu)) {
         return _jsx(Separator, {});
     }
     if (menu.component) {
-        return _jsx(menu.component, { menu: menu, handleClick: handleClick, closeAll: closeAll });
+        return (_jsx(menu.component, { menu: menu, handleClick: handleClick, close: close }));
     }
     if (!menu.submenu) {
-        return (_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }));
+        return _jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, close: close });
     }
-    return (_jsxs(SubmenuContainer, { "data-cy": 'submenu', children: [_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }), menu.submenu && menu.isOpen && (_jsx(NestedSubmenusContainer, { "data-submenu-container": true, children: menu.submenu.map((submenu, index) => (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]), closeAll: closeAll }, `menu-${index}`))) }))] }));
+    return (_jsxs(SubmenuContainer, { "data-cy": 'submenu', children: [_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, close: close }), menu.submenu && menu.isOpen && (_jsx(NestedSubmenusContainer, { "data-submenu-container": true, children: menu.submenu.map((submenu, index) => (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]), close: close }, `menu-${index}`))) }))] }));
 };

package/dist/es/components/MultiValueInput.js

@@ -9,8 +9,8 @@ const Container = styled.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 {
@@ -43,7 +43,7 @@ const RemoveButton = styled.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/es/components/RadioButton.js

@@ -1,49 +1,72 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 const Input = styled.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;
   }
 `;
 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 })] }));

package/dist/es/components/SelectField.js

@@ -1,3 +1,92 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Select from 'react-select';
-export const SelectField = ({ id, options, field, form, }) => (_jsx(Select, { 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 }));
+import { useTheme } from '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,
+        },
+    }),
+});
+export const SelectField = ({ id, options, field, form, error, variant, isDisabled, ...rest }) => {
+    const theme = useTheme();
+    const name = field?.name || '';
+    const value = field?.value;
+    return (_jsx(Select, { 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,
+            },
+        }) }));
+};

package/dist/es/components/StyledModal.js

@@ -94,6 +94,25 @@ export const ScrollableModalContent = styled(ModelContent) `
   overflow-y: auto;
   max-height: 100%;
 `;
+export const ModalCardBody = styled.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;
+`;
+export const ModalTitle = styled.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;
+`;
 export const StyledModal = styled(ReactModalAdapter).attrs({
     closeTimeoutMS: totalTransitionTime,
     overlayClassName: {