@manuscripts/style-guide 3.5.10 → 3.5.12

package/README.md

@@ -16,7 +16,7 @@ const Example: React.FunctionComponent<{
 )
 ```
 
-## Development  
+## Development
 
 Run `yarn build` to build the `dist` folder for distribution.
 

package/dist/cjs/components/Checkbox.js

@@ -35,7 +35,7 @@ exports.CheckboxLabel = styled_components_1.default.label `
     width: 1px;
   }
 
-  div {
+  > div {
     align-items: center;
     font-family: ${(props) => props.theme.font.family.sans};
     font-size: ${(props) => props.theme.font.size.normal};
@@ -64,7 +64,6 @@ exports.CheckboxLabel = styled_components_1.default.label `
     }
   }
 
-
   input:checked + div::before {
     background-color: transparent !important;
     border-color: transparent !important;

package/dist/cjs/components/Dialog.js

@@ -63,15 +63,51 @@ var Category;
     Category["warning"] = "warning";
     Category["success"] = "success";
 })(Category || (exports.Category = Category = {}));
+const SecondaryTextDanger = styled_components_1.default.button.attrs({ type: 'button' }) `
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  color: ${(props) => props.theme.colors.text.error};
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  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};
+  justify-content: center;
+  outline: none;
+  padding: 7px ${(props) => props.theme.grid.unit * 3}px;
+  text-decoration: none;
+  transition:
+    color 0.1s,
+    opacity 0.1s;
+
+  &:not([disabled]):hover,
+  &:not([disabled]):focus-visible {
+    text-decoration: underline;
+  }
+
+  &:not([disabled]):focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
 const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }))) : props.hasForm ? ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }));
-const SecondaryAction = (props) => ((0, jsx_runtime_1.jsx)(Button_1.SecondaryButton, { disabled: props.disabled, onClick: props.action, children: props.title }));
+const SecondaryAction = (props) => props.variant === 'textDanger' ? ((0, jsx_runtime_1.jsx)(SecondaryTextDanger, { disabled: props.disabled, onClick: props.action, children: props.title })) : ((0, jsx_runtime_1.jsx)(Button_1.SecondaryButton, { disabled: props.disabled, onClick: props.action, children: props.title }));
 class Dialog extends react_1.default.Component {
     constructor() {
         super(...arguments);
         this.state = {
             primaryActionDisabled: true,
         };
-        this.renderButtons = (props, disabled) => ((0, jsx_runtime_1.jsx)(ButtonsContainer, { children: props.actions.secondary ? (!props.actions.primary.isDestructive ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryAction, { action: props.actions.secondary.action, hasForm: !!this.props.confirmFieldText, title: props.actions.secondary.title }), (0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, title: props.actions.primary.title || 'Dismiss' })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }), (0, jsx_runtime_1.jsx)(SecondaryAction, { action: props.actions.secondary.action, title: props.actions.secondary.title })] }))) : ((0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: props.actions.primary.isDestructive, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' })) }));
+        this.renderButtons = (props, disabled) => ((0, jsx_runtime_1.jsx)(ButtonsContainer, { children: props.actions.secondary ? (!props.actions.primary.isDestructive ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryAction, { action: props.actions.secondary.action, hasForm: !!this.props.confirmFieldText, title: props.actions.secondary.title, variant: props.actions.secondary.variant ?? 'default' }), (0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, title: props.actions.primary.title || 'Dismiss' })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }), (0, jsx_runtime_1.jsx)(SecondaryAction, { action: props.actions.secondary.action, title: props.actions.secondary.title, variant: props.actions.secondary.variant ?? 'default' })] }))) : ((0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: props.actions.primary.isDestructive, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' })) }));
         this.checkInputValue = (event) => {
             const testingVal = this.props.confirmFieldText && this.props.confirmFieldText.toUpperCase();
             const target = event.target;

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.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;
+exports.RequiredIndicator = exports.FormGroup = 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) `
@@ -105,12 +105,13 @@ exports.FormSubtitle = styled_components_1.default.p `
     ${(props) => props.theme.font.size.medium} /
     ${(props) => props.theme.font.lineHeight.large}
     ${(props) => props.theme.font.family.sans};
+  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
+  margin-top: ${(props) => props.theme.grid.unit * 2}px;
 `;
 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};
+  color: ${(props) => props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.normal} /
     ${(props) => props.theme.font.lineHeight.normal}
@@ -140,5 +141,16 @@ exports.InputErrorText = styled_components_1.default.span `
     ${(props) => props.theme.font.lineHeight.normal}
     ${(props) => props.theme.font.family.sans};
   display: block;
-  margin-top: 4px;
+`;
+exports.FormGroup = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: ${(props) => props.theme.grid.unit * 2}px;
+`;
+exports.RequiredIndicator = styled_components_1.default.span `
+  color: ${(props) => props.theme.colors.text.error};
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.medium} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
 `;

package/dist/cjs/components/List.js

@@ -140,6 +140,13 @@ function withListNavigation(Component) {
             if (!element) {
                 return;
             }
+            if (element.hasAttribute('disabled')) {
+                const tabbedElement = element.querySelector('[data-list-item][tabindex="0"]');
+                if (tabbedElement) {
+                    tabbedElement.tabIndex = -1;
+                }
+                return;
+            }
             const firstItem = element.querySelector('[data-list-item]');
             if (!firstItem) {
                 return;
@@ -156,6 +163,13 @@ function withListNavigation(Component) {
         return ((0, jsx_runtime_1.jsx)(Component, { ref: mergeRefs(containerRef, forwardedRef), ...props, onKeyDown: handleKeyDown, onBlur: handelOnBlur }));
     })) `
     outline: none;
+    &[disabled] {
+      pointer-events: none;
+      user-select: none;
+      border-color: #e4e4e4;
+      color: #b3b3b3;
+      opacity: 0.5;
+    }
   `;
 }
 function withNavigableListItem(Component) {

package/dist/cjs/components/MultiValueInput.js

@@ -18,7 +18,6 @@ const Container = styled_components_1.default.div `
   padding: 4px 8px;
   background: ${(props) => props.theme.colors.background.primary};
 
-
   &:hover Input {
     background-color: ${(props) => props.theme.colors.background.fifth};
   }
@@ -126,6 +125,6 @@ const MultiValueInput = ({ id, inputType, placeholder = '', initialValues = [],
         : inputType === 'number'
             ? 'Enter number and press enter'
             : 'Enter text and press enter';
-    return ((0, jsx_runtime_1.jsxs)(Container, { children: [values.map((value, index) => ((0, jsx_runtime_1.jsxs)(Chip, { children: [value, (0, jsx_runtime_1.jsx)(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), (0, jsx_runtime_1.jsx)(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { className: 'multi-value-input', children: [values.map((value, index) => ((0, jsx_runtime_1.jsxs)(Chip, { className: 'chip', children: [value, (0, jsx_runtime_1.jsx)(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), (0, jsx_runtime_1.jsx)(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: values.length > 0 ? '' : xplaceholder })] }));
 };
 exports.MultiValueInput = MultiValueInput;

package/dist/cjs/components/SelectField.js

@@ -7,7 +7,7 @@ exports.SelectField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_select_1 = __importDefault(require("react-select"));
 const styled_components_1 = require("styled-components");
-const selectStyles = (theme, error, variant) => ({
+const selectStyles = (theme, error, variant, listMaxHeight) => ({
     control: (base, state) => ({
         ...base,
         minHeight: variant === 'large' ? 40 : 32,
@@ -69,6 +69,10 @@ const selectStyles = (theme, error, variant) => ({
         overflow: 'hidden',
         boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
     }),
+    menuList: (base) => ({
+        ...base,
+        maxHeight: listMaxHeight || '300px',
+    }),
     placeholder: (base, state) => ({
         ...base,
         color: state.isFocused || state.selectProps.menuIsOpen
@@ -90,11 +94,11 @@ const selectStyles = (theme, error, variant) => ({
         },
     }),
 });
-const SelectField = ({ id, options, field, form, error, variant, isDisabled, ...rest }) => {
+const SelectField = ({ id, options, field, form, error, variant, isDisabled, listMaxHeight, ...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) => ({
+    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, listMaxHeight), isDisabled: form?.isSubmitting || isDisabled, ...rest, theme: (base) => ({
             ...base,
             colors: {
                 ...base.colors,

package/dist/cjs/components/SelectedItemsBox.js

@@ -12,6 +12,12 @@ const BoxContainer = styled_components_1.default.div `
   padding: 8px;
   min-height: 120px;
   background: ${(props) => props.theme.colors.background.primary};
+
+  &[disabled] {
+    color: #707070 !important;
+    background: #f5f5f5;
+    cursor: not-allowed;
+  }
 `;
 const ItemsList = styled_components_1.default.div `
   display: flex;
@@ -36,10 +42,10 @@ const Item = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: 4px;
-  background: #f2f2f2;
+  background: ${(props) => (props.disabled ? '#dddcdc' : '#f2f2f2')};
   border-radius: 6px;
   padding: 4px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${(props) => props.disabled ? '#707070' : props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.small}
     ${(props) => props.theme.font.family.sans};
@@ -65,7 +71,7 @@ const RemoveButton = styled_components_1.default.button `
   }
 `;
 const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(BoxContainer, { ...props, children: items.length > 0 ? ((0, jsx_runtime_1.jsx)(ItemsList, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)(Item, { "data-cy": "item", children: [item.label, (0, jsx_runtime_1.jsx)(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" })] }, item.id))) })) : ((0, jsx_runtime_1.jsx)(EmptyContainer, { children: (0, jsx_runtime_1.jsx)(Placeholder, { children: placeholder }) })) }));
+    return ((0, jsx_runtime_1.jsx)(BoxContainer, { ...props, children: items.length > 0 ? ((0, jsx_runtime_1.jsx)(ItemsList, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)(Item, { "data-cy": "item", disabled: !!props.disabled, children: [item.label, !props.disabled && ((0, jsx_runtime_1.jsx)(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : ((0, jsx_runtime_1.jsx)(EmptyContainer, { children: (0, jsx_runtime_1.jsx)(Placeholder, { children: placeholder }) })) }));
 };
 exports.SelectedItemsBox = SelectedItemsBox;
 exports.default = exports.SelectedItemsBox;

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

@@ -19,8 +19,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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.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.ORCIDIcon = 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 = exports.ToolbarSubscriptIcon = void 0;
+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.ORCIDIcon = 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.InfoCircleIcon = 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 = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = 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");
@@ -137,6 +137,8 @@ var image_default_1 = require("./image-default");
 Object.defineProperty(exports, "ImageDefaultIcon", { enumerable: true, get: function () { return __importDefault(image_default_1).default; } });
 var image_right_1 = require("./image-right");
 Object.defineProperty(exports, "ImageRightIcon", { enumerable: true, get: function () { return __importDefault(image_right_1).default; } });
+var info_circle_1 = require("./info-circle");
+Object.defineProperty(exports, "InfoCircleIcon", { enumerable: true, get: function () { return __importDefault(info_circle_1).default; } });
 var inspector_plugin_1 = require("./inspector-plugin");
 Object.defineProperty(exports, "InspectorPluginIcon", { enumerable: true, get: function () { return __importDefault(inspector_plugin_1).default; } });
 var link_1 = require("./link");

package/dist/cjs/components/icons/info-circle.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InfoCircleIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19.25 26.25H22.75V29.75H19.25V26.25ZM19.25 12.25H22.75V22.75H19.25V12.25ZM20.9912 3.5C11.3225 3.5 3.5 11.3312 3.5 21C3.5 30.6688 11.3225 38.5 20.9912 38.5C30.66 38.5 38.5 30.6688 38.5 21C38.5 11.3312 30.66 3.5 20.9912 3.5ZM21 35C13.265 35 7 28.735 7 21C7 13.265 13.265 7 21 7C28.735 7 35 13.265 35 21C35 28.735 28.735 35 21 35Z", fill: "#6E6E6E" }) }));
+exports.default = InfoCircleIcon;

package/dist/cjs/data/countryOptions.js

@@ -0,0 +1,291 @@
+"use strict";
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COUNTRY_SELECT_OPTIONS = void 0;
+const RAW_COUNTRY_OPTIONS = [
+    { name: 'Afghanistan', value: 'Afghanistan' },
+    { name: 'Albania', value: 'Albania' },
+    { name: 'Algeria', value: 'Algeria' },
+    { name: 'American Samoa', value: 'American Samoa' },
+    { name: 'Andorra', value: 'Andorra' },
+    { name: 'Angola', value: 'Angola' },
+    { name: 'Anguilla', value: 'Anguilla' },
+    { name: 'Antarctica', value: 'Antarctica' },
+    { name: 'Antigua and Barbuda', value: 'Antigua and Barbuda' },
+    { name: 'Argentina', value: 'Argentina' },
+    { name: 'Armenia', value: 'Armenia' },
+    { name: 'Aruba', value: 'Aruba' },
+    { name: 'Australia', value: 'Australia' },
+    { name: 'Austria', value: 'Austria' },
+    { name: 'Azerbaijan', value: 'Azerbaijan' },
+    { name: 'Bahamas', value: 'Bahamas' },
+    { name: 'Bahrain', value: 'Bahrain' },
+    { name: 'Bangladesh', value: 'Bangladesh' },
+    { name: 'Barbados', value: 'Barbados' },
+    { name: 'Belarus', value: 'Belarus' },
+    { name: 'Belgium', value: 'Belgium' },
+    { name: 'Belize', value: 'Belize' },
+    { name: 'Benin', value: 'Benin' },
+    { name: 'Bermuda', value: 'Bermuda' },
+    { name: 'Bhutan', value: 'Bhutan' },
+    { name: 'Bolivia', value: 'Bolivia' },
+    {
+        name: 'Bonaire, Sint Eustatius and Saba',
+        value: 'Bonaire, Sint Eustatius and Saba',
+    },
+    { name: 'Bosnia and Herzegovina', value: 'Bosnia and Herzegovina' },
+    { name: 'Botswana', value: 'Botswana' },
+    { name: 'Bouvet Island', value: 'Bouvet Island' },
+    { name: 'Brazil', value: 'Brazil' },
+    {
+        name: 'British Indian Ocean Territory',
+        value: 'British Indian Ocean Territory',
+    },
+    { name: 'Brunei Darussalam', value: 'Brunei Darussalam' },
+    { name: 'Bulgaria', value: 'Bulgaria' },
+    { name: 'Burkina Faso', value: 'Burkina Faso' },
+    { name: 'Burundi', value: 'Burundi' },
+    { name: 'Cabo Verde', value: 'Cabo Verde' },
+    { name: 'Cambodia', value: 'Cambodia' },
+    { name: 'Cameroon', value: 'Cameroon' },
+    { name: 'Canada', value: 'Canada' },
+    { name: 'Cayman Islands', value: 'Cayman Islands' },
+    { name: 'Central African Republic', value: 'Central African Republic' },
+    { name: 'Chad', value: 'Chad' },
+    { name: 'Chile', value: 'Chile' },
+    { name: 'China', value: 'China' },
+    { name: 'Christmas Island', value: 'Christmas Island' },
+    { name: 'Cocos (Keeling) Islands', value: 'Cocos (Keeling) Islands' },
+    { name: 'Colombia', value: 'Colombia' },
+    { name: 'Comoros', value: 'Comoros' },
+    { name: 'Congo - Brazzaville', value: 'Congo - Brazzaville' },
+    { name: 'Congo - Kinshasa', value: 'Congo - Kinshasa' },
+    { name: 'Cook Islands', value: 'Cook Islands' },
+    { name: 'Costa Rica', value: 'Costa Rica' },
+    { name: 'Croatia', value: 'Croatia' },
+    { name: 'Cuba', value: 'Cuba' },
+    { name: 'Curaçao', value: 'Curaçao' },
+    { name: 'Cyprus', value: 'Cyprus' },
+    { name: 'Czechia', value: 'Czechia' },
+    { name: "Côte d'Ivoire", value: "Côte d'Ivoire" },
+    { name: 'Denmark', value: 'Denmark' },
+    { name: 'Djibouti', value: 'Djibouti' },
+    { name: 'Dominica', value: 'Dominica' },
+    { name: 'Dominican Republic', value: 'Dominican Republic' },
+    { name: 'Ecuador', value: 'Ecuador' },
+    { name: 'Egypt', value: 'Egypt' },
+    { name: 'El Salvador', value: 'El Salvador' },
+    { name: 'Equatorial Guinea', value: 'Equatorial Guinea' },
+    { name: 'Eritrea', value: 'Eritrea' },
+    { name: 'Estonia', value: 'Estonia' },
+    { name: 'Eswatini', value: 'Eswatini' },
+    { name: 'Ethiopia', value: 'Ethiopia' },
+    { name: 'Falkland Islands (Malvinas)', value: 'Falkland Islands (Malvinas)' },
+    { name: 'Faroe Islands', value: 'Faroe Islands' },
+    { name: 'Fiji', value: 'Fiji' },
+    { name: 'Finland', value: 'Finland' },
+    { name: 'France', value: 'France' },
+    { name: 'French Guiana', value: 'French Guiana' },
+    { name: 'French Polynesia', value: 'French Polynesia' },
+    { name: 'French Southern Territories', value: 'French Southern Territories' },
+    { name: 'Gabon', value: 'Gabon' },
+    { name: 'Gambia', value: 'Gambia' },
+    { name: 'Georgia', value: 'Georgia' },
+    { name: 'Germany', value: 'Germany' },
+    { name: 'Ghana', value: 'Ghana' },
+    { name: 'Gibraltar', value: 'Gibraltar' },
+    { name: 'Greece', value: 'Greece' },
+    { name: 'Greenland', value: 'Greenland' },
+    { name: 'Grenada', value: 'Grenada' },
+    { name: 'Guadeloupe', value: 'Guadeloupe' },
+    { name: 'Guam', value: 'Guam' },
+    { name: 'Guatemala', value: 'Guatemala' },
+    { name: 'Guernsey', value: 'Guernsey' },
+    { name: 'Guinea', value: 'Guinea' },
+    { name: 'Guinea-Bissau', value: 'Guinea-Bissau' },
+    { name: 'Guyana', value: 'Guyana' },
+    { name: 'Haiti', value: 'Haiti' },
+    {
+        name: 'Heard Island and McDonald Islands',
+        value: 'Heard Island and McDonald Islands',
+    },
+    { name: 'Honduras', value: 'Honduras' },
+    { name: 'Hong Kong', value: 'Hong Kong' },
+    { name: 'Hungary', value: 'Hungary' },
+    { name: 'Iceland', value: 'Iceland' },
+    { name: 'India', value: 'India' },
+    { name: 'Indonesia', value: 'Indonesia' },
+    { name: 'Iran', value: 'Iran' },
+    { name: 'Iraq', value: 'Iraq' },
+    { name: 'Ireland', value: 'Ireland' },
+    { name: 'Isle of Man', value: 'Isle of Man' },
+    { name: 'Israel', value: 'Israel' },
+    { name: 'Italy', value: 'Italy' },
+    { name: 'Jamaica', value: 'Jamaica' },
+    { name: 'Japan', value: 'Japan' },
+    { name: 'Jersey', value: 'Jersey' },
+    { name: 'Jordan', value: 'Jordan' },
+    { name: 'Kazakhstan', value: 'Kazakhstan' },
+    { name: 'Kenya', value: 'Kenya' },
+    { name: 'Kiribati', value: 'Kiribati' },
+    { name: 'Kuwait', value: 'Kuwait' },
+    { name: 'Kyrgyzstan', value: 'Kyrgyzstan' },
+    { name: 'Laos', value: 'Laos' },
+    { name: 'Latvia', value: 'Latvia' },
+    { name: 'Lebanon', value: 'Lebanon' },
+    { name: 'Lesotho', value: 'Lesotho' },
+    { name: 'Liberia', value: 'Liberia' },
+    { name: 'Libya', value: 'Libya' },
+    { name: 'Liechtenstein', value: 'Liechtenstein' },
+    { name: 'Lithuania', value: 'Lithuania' },
+    { name: 'Luxembourg', value: 'Luxembourg' },
+    { name: 'Macao', value: 'Macao' },
+    { name: 'Madagascar', value: 'Madagascar' },
+    { name: 'Malawi', value: 'Malawi' },
+    { name: 'Malaysia', value: 'Malaysia' },
+    { name: 'Maldives', value: 'Maldives' },
+    { name: 'Mali', value: 'Mali' },
+    { name: 'Malta', value: 'Malta' },
+    { name: 'Marshall Islands', value: 'Marshall Islands' },
+    { name: 'Martinique', value: 'Martinique' },
+    { name: 'Mauritania', value: 'Mauritania' },
+    { name: 'Mauritius', value: 'Mauritius' },
+    { name: 'Mayotte', value: 'Mayotte' },
+    { name: 'Mexico', value: 'Mexico' },
+    { name: 'Micronesia', value: 'Micronesia' },
+    { name: 'Moldova', value: 'Moldova' },
+    { name: 'Monaco', value: 'Monaco' },
+    { name: 'Mongolia', value: 'Mongolia' },
+    { name: 'Montenegro', value: 'Montenegro' },
+    { name: 'Montserrat', value: 'Montserrat' },
+    { name: 'Morocco', value: 'Morocco' },
+    { name: 'Mozambique', value: 'Mozambique' },
+    { name: 'Myanmar', value: 'Myanmar' },
+    { name: 'Namibia', value: 'Namibia' },
+    { name: 'Nauru', value: 'Nauru' },
+    { name: 'Nepal', value: 'Nepal' },
+    { name: 'Netherlands', value: 'Netherlands' },
+    { name: 'New Caledonia', value: 'New Caledonia' },
+    { name: 'New Zealand', value: 'New Zealand' },
+    { name: 'Nicaragua', value: 'Nicaragua' },
+    { name: 'Niger', value: 'Niger' },
+    { name: 'Nigeria', value: 'Nigeria' },
+    { name: 'Niue', value: 'Niue' },
+    { name: 'Norfolk Island', value: 'Norfolk Island' },
+    { name: 'North Korea', value: 'North Korea' },
+    { name: 'North Macedonia', value: 'North Macedonia' },
+    { name: 'Northern Mariana Islands', value: 'Northern Mariana Islands' },
+    { name: 'Norway', value: 'Norway' },
+    { name: 'Oman', value: 'Oman' },
+    { name: 'Pakistan', value: 'Pakistan' },
+    { name: 'Palau', value: 'Palau' },
+    { name: 'Palestinian Territories', value: 'Palestinian Territories' },
+    { name: 'Panama', value: 'Panama' },
+    { name: 'Papua New Guinea', value: 'Papua New Guinea' },
+    { name: 'Paraguay', value: 'Paraguay' },
+    { name: 'Peru', value: 'Peru' },
+    { name: 'Philippines', value: 'Philippines' },
+    { name: 'Pitcairn', value: 'Pitcairn' },
+    { name: 'Poland', value: 'Poland' },
+    { name: 'Portugal', value: 'Portugal' },
+    { name: 'Puerto Rico', value: 'Puerto Rico' },
+    { name: 'Qatar', value: 'Qatar' },
+    { name: 'Romania', value: 'Romania' },
+    { name: 'Russia', value: 'Russia' },
+    { name: 'Rwanda', value: 'Rwanda' },
+    { name: 'Réunion', value: 'Réunion' },
+    { name: 'Saint Barthélemy', value: 'Saint Barthélemy' },
+    {
+        name: 'Saint Helena, Ascension and Tristan da Cunha',
+        value: 'Saint Helena, Ascension and Tristan da Cunha',
+    },
+    { name: 'Saint Kitts and Nevis', value: 'Saint Kitts and Nevis' },
+    { name: 'Saint Lucia', value: 'Saint Lucia' },
+    { name: 'Saint Martin (French part)', value: 'Saint Martin (French part)' },
+    { name: 'Saint Pierre and Miquelon', value: 'Saint Pierre and Miquelon' },
+    {
+        name: 'Saint Vincent and the Grenadines',
+        value: 'Saint Vincent and the Grenadines',
+    },
+    { name: 'Samoa', value: 'Samoa' },
+    { name: 'San Marino', value: 'San Marino' },
+    { name: 'Sao Tome and Principe', value: 'Sao Tome and Principe' },
+    { name: 'Saudi Arabia', value: 'Saudi Arabia' },
+    { name: 'Senegal', value: 'Senegal' },
+    { name: 'Serbia', value: 'Serbia' },
+    { name: 'Seychelles', value: 'Seychelles' },
+    { name: 'Sierra Leone', value: 'Sierra Leone' },
+    { name: 'Singapore', value: 'Singapore' },
+    { name: 'Sint Maarten (Dutch part)', value: 'Sint Maarten (Dutch part)' },
+    { name: 'Slovakia', value: 'Slovakia' },
+    { name: 'Slovenia', value: 'Slovenia' },
+    { name: 'Solomon Islands', value: 'Solomon Islands' },
+    { name: 'Somalia', value: 'Somalia' },
+    { name: 'South Africa', value: 'South Africa' },
+    {
+        name: 'South Georgia and the South Sandwich Islands',
+        value: 'South Georgia and the South Sandwich Islands',
+    },
+    { name: 'South Korea', value: 'South Korea' },
+    { name: 'South Sudan', value: 'South Sudan' },
+    { name: 'Spain', value: 'Spain' },
+    { name: 'Sri Lanka', value: 'Sri Lanka' },
+    { name: 'Sudan', value: 'Sudan' },
+    { name: 'Suriname', value: 'Suriname' },
+    { name: 'Svalbard and Jan Mayen', value: 'Svalbard and Jan Mayen' },
+    { name: 'Sweden', value: 'Sweden' },
+    { name: 'Switzerland', value: 'Switzerland' },
+    { name: 'Syria', value: 'Syria' },
+    { name: 'Taiwan', value: 'Taiwan' },
+    { name: 'Tajikistan', value: 'Tajikistan' },
+    { name: 'Tanzania', value: 'Tanzania' },
+    { name: 'Thailand', value: 'Thailand' },
+    { name: 'Timor-Leste', value: 'Timor-Leste' },
+    { name: 'Togo', value: 'Togo' },
+    { name: 'Tokelau', value: 'Tokelau' },
+    { name: 'Tonga', value: 'Tonga' },
+    { name: 'Trinidad and Tobago', value: 'Trinidad and Tobago' },
+    { name: 'Tunisia', value: 'Tunisia' },
+    { name: 'Turkmenistan', value: 'Turkmenistan' },
+    { name: 'Turks and Caicos Islands', value: 'Turks and Caicos Islands' },
+    { name: 'Tuvalu', value: 'Tuvalu' },
+    { name: 'Türkiye', value: 'Türkiye' },
+    { name: 'Uganda', value: 'Uganda' },
+    { name: 'Ukraine', value: 'Ukraine' },
+    { name: 'United Arab Emirates', value: 'United Arab Emirates' },
+    { name: 'United Kingdom', value: 'United Kingdom' },
+    { name: 'United States', value: 'United States' },
+    {
+        name: 'United States Minor Outlying Islands',
+        value: 'United States Minor Outlying Islands',
+    },
+    { name: 'Uruguay', value: 'Uruguay' },
+    { name: 'Uzbekistan', value: 'Uzbekistan' },
+    { name: 'Vanuatu', value: 'Vanuatu' },
+    { name: 'Vatican City', value: 'Vatican City' },
+    { name: 'Venezuela', value: 'Venezuela' },
+    { name: 'Vietnam', value: 'Vietnam' },
+    { name: 'Virgin Islands (British)', value: 'Virgin Islands (British)' },
+    { name: 'Virgin Islands (U.S.)', value: 'Virgin Islands (U.S.)' },
+    { name: 'Wallis and Futuna', value: 'Wallis and Futuna' },
+    { name: 'Western Sahara', value: 'Western Sahara' },
+    { name: 'Yemen', value: 'Yemen' },
+    { name: 'Zambia', value: 'Zambia' },
+    { name: 'Zimbabwe', value: 'Zimbabwe' },
+    { name: 'Åland Islands', value: 'Åland Islands' },
+];
+exports.COUNTRY_SELECT_OPTIONS = RAW_COUNTRY_OPTIONS.map(({ name, value }) => ({ label: name, value }));

package/dist/cjs/index.js

@@ -101,3 +101,4 @@ __exportStar(require("./hooks/use-scroll-detection"), exports);
 __exportStar(require("./hooks/use-focus-cycle"), exports);
 __exportStar(require("./lib/files"), exports);
 __exportStar(require("./lib/menus"), exports);
+__exportStar(require("./data/countryOptions"), exports);

package/dist/es/components/Checkbox.js

@@ -29,7 +29,7 @@ export const CheckboxLabel = styled.label `
     width: 1px;
   }
 
-  div {
+  > div {
     align-items: center;
     font-family: ${(props) => props.theme.font.family.sans};
     font-size: ${(props) => props.theme.font.size.normal};
@@ -58,7 +58,6 @@ export const CheckboxLabel = styled.label `
     }
   }
 
-
   input:checked + div::before {
     background-color: transparent !important;
     border-color: transparent !important;

package/dist/es/components/Dialog.js

@@ -57,15 +57,51 @@ export var Category;
     Category["warning"] = "warning";
     Category["success"] = "success";
 })(Category || (Category = {}));
+const SecondaryTextDanger = styled.button.attrs({ type: 'button' }) `
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  color: ${(props) => props.theme.colors.text.error};
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  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};
+  justify-content: center;
+  outline: none;
+  padding: 7px ${(props) => props.theme.grid.unit * 3}px;
+  text-decoration: none;
+  transition:
+    color 0.1s,
+    opacity 0.1s;
+
+  &:not([disabled]):hover,
+  &:not([disabled]):focus-visible {
+    text-decoration: underline;
+  }
+
+  &:not([disabled]):focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
 const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (_jsx(PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : (_jsx(PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }))) : props.hasForm ? (_jsx(PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : (_jsx(PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }));
-const SecondaryAction = (props) => (_jsx(SecondaryButton, { disabled: props.disabled, onClick: props.action, children: props.title }));
+const SecondaryAction = (props) => props.variant === 'textDanger' ? (_jsx(SecondaryTextDanger, { disabled: props.disabled, onClick: props.action, children: props.title })) : (_jsx(SecondaryButton, { disabled: props.disabled, onClick: props.action, children: props.title }));
 export class Dialog extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
             primaryActionDisabled: true,
         };
-        this.renderButtons = (props, disabled) => (_jsx(ButtonsContainer, { children: props.actions.secondary ? (!props.actions.primary.isDestructive ? (_jsxs(_Fragment, { children: [_jsx(SecondaryAction, { action: props.actions.secondary.action, hasForm: !!this.props.confirmFieldText, title: props.actions.secondary.title }), _jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, title: props.actions.primary.title || 'Dismiss' })] })) : (_jsxs(_Fragment, { children: [_jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }), _jsx(SecondaryAction, { action: props.actions.secondary.action, title: props.actions.secondary.title })] }))) : (_jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: props.actions.primary.isDestructive, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' })) }));
+        this.renderButtons = (props, disabled) => (_jsx(ButtonsContainer, { children: props.actions.secondary ? (!props.actions.primary.isDestructive ? (_jsxs(_Fragment, { children: [_jsx(SecondaryAction, { action: props.actions.secondary.action, hasForm: !!this.props.confirmFieldText, title: props.actions.secondary.title, variant: props.actions.secondary.variant ?? 'default' }), _jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, title: props.actions.primary.title || 'Dismiss' })] })) : (_jsxs(_Fragment, { children: [_jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }), _jsx(SecondaryAction, { action: props.actions.secondary.action, title: props.actions.secondary.title, variant: props.actions.secondary.variant ?? 'default' })] }))) : (_jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: props.actions.primary.isDestructive, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' })) }));
         this.checkInputValue = (event) => {
             const testingVal = this.props.confirmFieldText && this.props.confirmFieldText.toUpperCase();
             const target = event.target;

package/dist/es/components/Form.js

@@ -99,12 +99,13 @@ export const FormSubtitle = styled.p `
     ${(props) => props.theme.font.size.medium} /
     ${(props) => props.theme.font.lineHeight.large}
     ${(props) => props.theme.font.family.sans};
+  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
+  margin-top: ${(props) => props.theme.grid.unit * 2}px;
 `;
 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};
+  color: ${(props) => props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.normal} /
     ${(props) => props.theme.font.lineHeight.normal}
@@ -134,5 +135,16 @@ export const InputErrorText = styled.span `
     ${(props) => props.theme.font.lineHeight.normal}
     ${(props) => props.theme.font.family.sans};
   display: block;
-  margin-top: 4px;
+`;
+export const FormGroup = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: ${(props) => props.theme.grid.unit * 2}px;
+`;
+export const RequiredIndicator = styled.span `
+  color: ${(props) => props.theme.colors.text.error};
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.medium} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
 `;

package/dist/es/components/List.js

@@ -132,6 +132,13 @@ export function withListNavigation(Component) {
             if (!element) {
                 return;
             }
+            if (element.hasAttribute('disabled')) {
+                const tabbedElement = element.querySelector('[data-list-item][tabindex="0"]');
+                if (tabbedElement) {
+                    tabbedElement.tabIndex = -1;
+                }
+                return;
+            }
             const firstItem = element.querySelector('[data-list-item]');
             if (!firstItem) {
                 return;
@@ -148,6 +155,13 @@ export function withListNavigation(Component) {
         return (_jsx(Component, { ref: mergeRefs(containerRef, forwardedRef), ...props, onKeyDown: handleKeyDown, onBlur: handelOnBlur }));
     })) `
     outline: none;
+    &[disabled] {
+      pointer-events: none;
+      user-select: none;
+      border-color: #e4e4e4;
+      color: #b3b3b3;
+      opacity: 0.5;
+    }
   `;
 }
 export function withNavigableListItem(Component) {

package/dist/es/components/MultiValueInput.js

@@ -12,7 +12,6 @@ const Container = styled.div `
   padding: 4px 8px;
   background: ${(props) => props.theme.colors.background.primary};
 
-
   &:hover Input {
     background-color: ${(props) => props.theme.colors.background.fifth};
   }
@@ -120,5 +119,5 @@ export const MultiValueInput = ({ id, inputType, placeholder = '', initialValues
         : inputType === 'number'
             ? 'Enter number and press enter'
             : 'Enter text and press enter';
-    return (_jsxs(Container, { children: [values.map((value, index) => (_jsxs(Chip, { children: [value, _jsx(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), _jsx(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
+    return (_jsxs(Container, { className: 'multi-value-input', children: [values.map((value, index) => (_jsxs(Chip, { className: 'chip', children: [value, _jsx(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), _jsx(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: values.length > 0 ? '' : xplaceholder })] }));
 };

package/dist/es/components/SelectField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Select from 'react-select';
 import { useTheme } from 'styled-components';
-const selectStyles = (theme, error, variant) => ({
+const selectStyles = (theme, error, variant, listMaxHeight) => ({
     control: (base, state) => ({
         ...base,
         minHeight: variant === 'large' ? 40 : 32,
@@ -63,6 +63,10 @@ const selectStyles = (theme, error, variant) => ({
         overflow: 'hidden',
         boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
     }),
+    menuList: (base) => ({
+        ...base,
+        maxHeight: listMaxHeight || '300px',
+    }),
     placeholder: (base, state) => ({
         ...base,
         color: state.isFocused || state.selectProps.menuIsOpen
@@ -84,11 +88,11 @@ const selectStyles = (theme, error, variant) => ({
         },
     }),
 });
-export const SelectField = ({ id, options, field, form, error, variant, isDisabled, ...rest }) => {
+export const SelectField = ({ id, options, field, form, error, variant, isDisabled, listMaxHeight, ...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) => ({
+    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, listMaxHeight), isDisabled: form?.isSubmitting || isDisabled, ...rest, theme: (base) => ({
             ...base,
             colors: {
                 ...base.colors,

package/dist/es/components/SelectedItemsBox.js

@@ -6,6 +6,12 @@ const BoxContainer = styled.div `
   padding: 8px;
   min-height: 120px;
   background: ${(props) => props.theme.colors.background.primary};
+
+  &[disabled] {
+    color: #707070 !important;
+    background: #f5f5f5;
+    cursor: not-allowed;
+  }
 `;
 const ItemsList = styled.div `
   display: flex;
@@ -30,10 +36,10 @@ const Item = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
-  background: #f2f2f2;
+  background: ${(props) => (props.disabled ? '#dddcdc' : '#f2f2f2')};
   border-radius: 6px;
   padding: 4px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${(props) => props.disabled ? '#707070' : props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.small}
     ${(props) => props.theme.font.family.sans};
@@ -59,6 +65,6 @@ const RemoveButton = styled.button `
   }
 `;
 export const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
-    return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", children: [item.label, _jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" })] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));
+    return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", disabled: !!props.disabled, children: [item.label, !props.disabled && (_jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));
 };
 export default SelectedItemsBox;

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

@@ -71,6 +71,7 @@ export { default as HelpIcon } from './help';
 export { default as ImageLeftIcon } from './image-left';
 export { default as ImageDefaultIcon } from './image-default';
 export { default as ImageRightIcon } from './image-right';
+export { default as InfoCircleIcon } from './info-circle';
 export { default as InspectorPluginIcon } from './inspector-plugin';
 export { default as LinkIcon } from './link';
 export { default as LockIcon } from './lock';

package/dist/es/components/icons/info-circle.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const InfoCircleIcon = (props) => (_jsx("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M19.25 26.25H22.75V29.75H19.25V26.25ZM19.25 12.25H22.75V22.75H19.25V12.25ZM20.9912 3.5C11.3225 3.5 3.5 11.3312 3.5 21C3.5 30.6688 11.3225 38.5 20.9912 38.5C30.66 38.5 38.5 30.6688 38.5 21C38.5 11.3312 30.66 3.5 20.9912 3.5ZM21 35C13.265 35 7 28.735 7 21C7 13.265 13.265 7 21 7C28.735 7 35 13.265 35 21C35 28.735 28.735 35 21 35Z", fill: "#6E6E6E" }) }));
+export default InfoCircleIcon;

package/dist/es/data/countryOptions.js

@@ -0,0 +1,288 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const RAW_COUNTRY_OPTIONS = [
+    { name: 'Afghanistan', value: 'Afghanistan' },
+    { name: 'Albania', value: 'Albania' },
+    { name: 'Algeria', value: 'Algeria' },
+    { name: 'American Samoa', value: 'American Samoa' },
+    { name: 'Andorra', value: 'Andorra' },
+    { name: 'Angola', value: 'Angola' },
+    { name: 'Anguilla', value: 'Anguilla' },
+    { name: 'Antarctica', value: 'Antarctica' },
+    { name: 'Antigua and Barbuda', value: 'Antigua and Barbuda' },
+    { name: 'Argentina', value: 'Argentina' },
+    { name: 'Armenia', value: 'Armenia' },
+    { name: 'Aruba', value: 'Aruba' },
+    { name: 'Australia', value: 'Australia' },
+    { name: 'Austria', value: 'Austria' },
+    { name: 'Azerbaijan', value: 'Azerbaijan' },
+    { name: 'Bahamas', value: 'Bahamas' },
+    { name: 'Bahrain', value: 'Bahrain' },
+    { name: 'Bangladesh', value: 'Bangladesh' },
+    { name: 'Barbados', value: 'Barbados' },
+    { name: 'Belarus', value: 'Belarus' },
+    { name: 'Belgium', value: 'Belgium' },
+    { name: 'Belize', value: 'Belize' },
+    { name: 'Benin', value: 'Benin' },
+    { name: 'Bermuda', value: 'Bermuda' },
+    { name: 'Bhutan', value: 'Bhutan' },
+    { name: 'Bolivia', value: 'Bolivia' },
+    {
+        name: 'Bonaire, Sint Eustatius and Saba',
+        value: 'Bonaire, Sint Eustatius and Saba',
+    },
+    { name: 'Bosnia and Herzegovina', value: 'Bosnia and Herzegovina' },
+    { name: 'Botswana', value: 'Botswana' },
+    { name: 'Bouvet Island', value: 'Bouvet Island' },
+    { name: 'Brazil', value: 'Brazil' },
+    {
+        name: 'British Indian Ocean Territory',
+        value: 'British Indian Ocean Territory',
+    },
+    { name: 'Brunei Darussalam', value: 'Brunei Darussalam' },
+    { name: 'Bulgaria', value: 'Bulgaria' },
+    { name: 'Burkina Faso', value: 'Burkina Faso' },
+    { name: 'Burundi', value: 'Burundi' },
+    { name: 'Cabo Verde', value: 'Cabo Verde' },
+    { name: 'Cambodia', value: 'Cambodia' },
+    { name: 'Cameroon', value: 'Cameroon' },
+    { name: 'Canada', value: 'Canada' },
+    { name: 'Cayman Islands', value: 'Cayman Islands' },
+    { name: 'Central African Republic', value: 'Central African Republic' },
+    { name: 'Chad', value: 'Chad' },
+    { name: 'Chile', value: 'Chile' },
+    { name: 'China', value: 'China' },
+    { name: 'Christmas Island', value: 'Christmas Island' },
+    { name: 'Cocos (Keeling) Islands', value: 'Cocos (Keeling) Islands' },
+    { name: 'Colombia', value: 'Colombia' },
+    { name: 'Comoros', value: 'Comoros' },
+    { name: 'Congo - Brazzaville', value: 'Congo - Brazzaville' },
+    { name: 'Congo - Kinshasa', value: 'Congo - Kinshasa' },
+    { name: 'Cook Islands', value: 'Cook Islands' },
+    { name: 'Costa Rica', value: 'Costa Rica' },
+    { name: 'Croatia', value: 'Croatia' },
+    { name: 'Cuba', value: 'Cuba' },
+    { name: 'Curaçao', value: 'Curaçao' },
+    { name: 'Cyprus', value: 'Cyprus' },
+    { name: 'Czechia', value: 'Czechia' },
+    { name: "Côte d'Ivoire", value: "Côte d'Ivoire" },
+    { name: 'Denmark', value: 'Denmark' },
+    { name: 'Djibouti', value: 'Djibouti' },
+    { name: 'Dominica', value: 'Dominica' },
+    { name: 'Dominican Republic', value: 'Dominican Republic' },
+    { name: 'Ecuador', value: 'Ecuador' },
+    { name: 'Egypt', value: 'Egypt' },
+    { name: 'El Salvador', value: 'El Salvador' },
+    { name: 'Equatorial Guinea', value: 'Equatorial Guinea' },
+    { name: 'Eritrea', value: 'Eritrea' },
+    { name: 'Estonia', value: 'Estonia' },
+    { name: 'Eswatini', value: 'Eswatini' },
+    { name: 'Ethiopia', value: 'Ethiopia' },
+    { name: 'Falkland Islands (Malvinas)', value: 'Falkland Islands (Malvinas)' },
+    { name: 'Faroe Islands', value: 'Faroe Islands' },
+    { name: 'Fiji', value: 'Fiji' },
+    { name: 'Finland', value: 'Finland' },
+    { name: 'France', value: 'France' },
+    { name: 'French Guiana', value: 'French Guiana' },
+    { name: 'French Polynesia', value: 'French Polynesia' },
+    { name: 'French Southern Territories', value: 'French Southern Territories' },
+    { name: 'Gabon', value: 'Gabon' },
+    { name: 'Gambia', value: 'Gambia' },
+    { name: 'Georgia', value: 'Georgia' },
+    { name: 'Germany', value: 'Germany' },
+    { name: 'Ghana', value: 'Ghana' },
+    { name: 'Gibraltar', value: 'Gibraltar' },
+    { name: 'Greece', value: 'Greece' },
+    { name: 'Greenland', value: 'Greenland' },
+    { name: 'Grenada', value: 'Grenada' },
+    { name: 'Guadeloupe', value: 'Guadeloupe' },
+    { name: 'Guam', value: 'Guam' },
+    { name: 'Guatemala', value: 'Guatemala' },
+    { name: 'Guernsey', value: 'Guernsey' },
+    { name: 'Guinea', value: 'Guinea' },
+    { name: 'Guinea-Bissau', value: 'Guinea-Bissau' },
+    { name: 'Guyana', value: 'Guyana' },
+    { name: 'Haiti', value: 'Haiti' },
+    {
+        name: 'Heard Island and McDonald Islands',
+        value: 'Heard Island and McDonald Islands',
+    },
+    { name: 'Honduras', value: 'Honduras' },
+    { name: 'Hong Kong', value: 'Hong Kong' },
+    { name: 'Hungary', value: 'Hungary' },
+    { name: 'Iceland', value: 'Iceland' },
+    { name: 'India', value: 'India' },
+    { name: 'Indonesia', value: 'Indonesia' },
+    { name: 'Iran', value: 'Iran' },
+    { name: 'Iraq', value: 'Iraq' },
+    { name: 'Ireland', value: 'Ireland' },
+    { name: 'Isle of Man', value: 'Isle of Man' },
+    { name: 'Israel', value: 'Israel' },
+    { name: 'Italy', value: 'Italy' },
+    { name: 'Jamaica', value: 'Jamaica' },
+    { name: 'Japan', value: 'Japan' },
+    { name: 'Jersey', value: 'Jersey' },
+    { name: 'Jordan', value: 'Jordan' },
+    { name: 'Kazakhstan', value: 'Kazakhstan' },
+    { name: 'Kenya', value: 'Kenya' },
+    { name: 'Kiribati', value: 'Kiribati' },
+    { name: 'Kuwait', value: 'Kuwait' },
+    { name: 'Kyrgyzstan', value: 'Kyrgyzstan' },
+    { name: 'Laos', value: 'Laos' },
+    { name: 'Latvia', value: 'Latvia' },
+    { name: 'Lebanon', value: 'Lebanon' },
+    { name: 'Lesotho', value: 'Lesotho' },
+    { name: 'Liberia', value: 'Liberia' },
+    { name: 'Libya', value: 'Libya' },
+    { name: 'Liechtenstein', value: 'Liechtenstein' },
+    { name: 'Lithuania', value: 'Lithuania' },
+    { name: 'Luxembourg', value: 'Luxembourg' },
+    { name: 'Macao', value: 'Macao' },
+    { name: 'Madagascar', value: 'Madagascar' },
+    { name: 'Malawi', value: 'Malawi' },
+    { name: 'Malaysia', value: 'Malaysia' },
+    { name: 'Maldives', value: 'Maldives' },
+    { name: 'Mali', value: 'Mali' },
+    { name: 'Malta', value: 'Malta' },
+    { name: 'Marshall Islands', value: 'Marshall Islands' },
+    { name: 'Martinique', value: 'Martinique' },
+    { name: 'Mauritania', value: 'Mauritania' },
+    { name: 'Mauritius', value: 'Mauritius' },
+    { name: 'Mayotte', value: 'Mayotte' },
+    { name: 'Mexico', value: 'Mexico' },
+    { name: 'Micronesia', value: 'Micronesia' },
+    { name: 'Moldova', value: 'Moldova' },
+    { name: 'Monaco', value: 'Monaco' },
+    { name: 'Mongolia', value: 'Mongolia' },
+    { name: 'Montenegro', value: 'Montenegro' },
+    { name: 'Montserrat', value: 'Montserrat' },
+    { name: 'Morocco', value: 'Morocco' },
+    { name: 'Mozambique', value: 'Mozambique' },
+    { name: 'Myanmar', value: 'Myanmar' },
+    { name: 'Namibia', value: 'Namibia' },
+    { name: 'Nauru', value: 'Nauru' },
+    { name: 'Nepal', value: 'Nepal' },
+    { name: 'Netherlands', value: 'Netherlands' },
+    { name: 'New Caledonia', value: 'New Caledonia' },
+    { name: 'New Zealand', value: 'New Zealand' },
+    { name: 'Nicaragua', value: 'Nicaragua' },
+    { name: 'Niger', value: 'Niger' },
+    { name: 'Nigeria', value: 'Nigeria' },
+    { name: 'Niue', value: 'Niue' },
+    { name: 'Norfolk Island', value: 'Norfolk Island' },
+    { name: 'North Korea', value: 'North Korea' },
+    { name: 'North Macedonia', value: 'North Macedonia' },
+    { name: 'Northern Mariana Islands', value: 'Northern Mariana Islands' },
+    { name: 'Norway', value: 'Norway' },
+    { name: 'Oman', value: 'Oman' },
+    { name: 'Pakistan', value: 'Pakistan' },
+    { name: 'Palau', value: 'Palau' },
+    { name: 'Palestinian Territories', value: 'Palestinian Territories' },
+    { name: 'Panama', value: 'Panama' },
+    { name: 'Papua New Guinea', value: 'Papua New Guinea' },
+    { name: 'Paraguay', value: 'Paraguay' },
+    { name: 'Peru', value: 'Peru' },
+    { name: 'Philippines', value: 'Philippines' },
+    { name: 'Pitcairn', value: 'Pitcairn' },
+    { name: 'Poland', value: 'Poland' },
+    { name: 'Portugal', value: 'Portugal' },
+    { name: 'Puerto Rico', value: 'Puerto Rico' },
+    { name: 'Qatar', value: 'Qatar' },
+    { name: 'Romania', value: 'Romania' },
+    { name: 'Russia', value: 'Russia' },
+    { name: 'Rwanda', value: 'Rwanda' },
+    { name: 'Réunion', value: 'Réunion' },
+    { name: 'Saint Barthélemy', value: 'Saint Barthélemy' },
+    {
+        name: 'Saint Helena, Ascension and Tristan da Cunha',
+        value: 'Saint Helena, Ascension and Tristan da Cunha',
+    },
+    { name: 'Saint Kitts and Nevis', value: 'Saint Kitts and Nevis' },
+    { name: 'Saint Lucia', value: 'Saint Lucia' },
+    { name: 'Saint Martin (French part)', value: 'Saint Martin (French part)' },
+    { name: 'Saint Pierre and Miquelon', value: 'Saint Pierre and Miquelon' },
+    {
+        name: 'Saint Vincent and the Grenadines',
+        value: 'Saint Vincent and the Grenadines',
+    },
+    { name: 'Samoa', value: 'Samoa' },
+    { name: 'San Marino', value: 'San Marino' },
+    { name: 'Sao Tome and Principe', value: 'Sao Tome and Principe' },
+    { name: 'Saudi Arabia', value: 'Saudi Arabia' },
+    { name: 'Senegal', value: 'Senegal' },
+    { name: 'Serbia', value: 'Serbia' },
+    { name: 'Seychelles', value: 'Seychelles' },
+    { name: 'Sierra Leone', value: 'Sierra Leone' },
+    { name: 'Singapore', value: 'Singapore' },
+    { name: 'Sint Maarten (Dutch part)', value: 'Sint Maarten (Dutch part)' },
+    { name: 'Slovakia', value: 'Slovakia' },
+    { name: 'Slovenia', value: 'Slovenia' },
+    { name: 'Solomon Islands', value: 'Solomon Islands' },
+    { name: 'Somalia', value: 'Somalia' },
+    { name: 'South Africa', value: 'South Africa' },
+    {
+        name: 'South Georgia and the South Sandwich Islands',
+        value: 'South Georgia and the South Sandwich Islands',
+    },
+    { name: 'South Korea', value: 'South Korea' },
+    { name: 'South Sudan', value: 'South Sudan' },
+    { name: 'Spain', value: 'Spain' },
+    { name: 'Sri Lanka', value: 'Sri Lanka' },
+    { name: 'Sudan', value: 'Sudan' },
+    { name: 'Suriname', value: 'Suriname' },
+    { name: 'Svalbard and Jan Mayen', value: 'Svalbard and Jan Mayen' },
+    { name: 'Sweden', value: 'Sweden' },
+    { name: 'Switzerland', value: 'Switzerland' },
+    { name: 'Syria', value: 'Syria' },
+    { name: 'Taiwan', value: 'Taiwan' },
+    { name: 'Tajikistan', value: 'Tajikistan' },
+    { name: 'Tanzania', value: 'Tanzania' },
+    { name: 'Thailand', value: 'Thailand' },
+    { name: 'Timor-Leste', value: 'Timor-Leste' },
+    { name: 'Togo', value: 'Togo' },
+    { name: 'Tokelau', value: 'Tokelau' },
+    { name: 'Tonga', value: 'Tonga' },
+    { name: 'Trinidad and Tobago', value: 'Trinidad and Tobago' },
+    { name: 'Tunisia', value: 'Tunisia' },
+    { name: 'Turkmenistan', value: 'Turkmenistan' },
+    { name: 'Turks and Caicos Islands', value: 'Turks and Caicos Islands' },
+    { name: 'Tuvalu', value: 'Tuvalu' },
+    { name: 'Türkiye', value: 'Türkiye' },
+    { name: 'Uganda', value: 'Uganda' },
+    { name: 'Ukraine', value: 'Ukraine' },
+    { name: 'United Arab Emirates', value: 'United Arab Emirates' },
+    { name: 'United Kingdom', value: 'United Kingdom' },
+    { name: 'United States', value: 'United States' },
+    {
+        name: 'United States Minor Outlying Islands',
+        value: 'United States Minor Outlying Islands',
+    },
+    { name: 'Uruguay', value: 'Uruguay' },
+    { name: 'Uzbekistan', value: 'Uzbekistan' },
+    { name: 'Vanuatu', value: 'Vanuatu' },
+    { name: 'Vatican City', value: 'Vatican City' },
+    { name: 'Venezuela', value: 'Venezuela' },
+    { name: 'Vietnam', value: 'Vietnam' },
+    { name: 'Virgin Islands (British)', value: 'Virgin Islands (British)' },
+    { name: 'Virgin Islands (U.S.)', value: 'Virgin Islands (U.S.)' },
+    { name: 'Wallis and Futuna', value: 'Wallis and Futuna' },
+    { name: 'Western Sahara', value: 'Western Sahara' },
+    { name: 'Yemen', value: 'Yemen' },
+    { name: 'Zambia', value: 'Zambia' },
+    { name: 'Zimbabwe', value: 'Zimbabwe' },
+    { name: 'Åland Islands', value: 'Åland Islands' },
+];
+export const COUNTRY_SELECT_OPTIONS = RAW_COUNTRY_OPTIONS.map(({ name, value }) => ({ label: name, value }));

package/dist/es/index.js

@@ -58,3 +58,4 @@ export * from './hooks/use-scroll-detection';
 export * from './hooks/use-focus-cycle';
 export * from './lib/files';
 export * from './lib/menus';
+export * from './data/countryOptions';

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

@@ -30,6 +30,7 @@ interface DialogProps {
         secondary?: {
             action: () => void;
             title: string;
+            variant?: 'default' | 'textDanger';
         };
         onClose?: () => void;
     };

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

@@ -38,3 +38,5 @@ export declare const Label: import("styled-components").StyledComponent<"label",
 export declare const LabelText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const InputHelperText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const InputErrorText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const FormGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const RequiredIndicator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -24,6 +24,7 @@ interface Props {
     options: OptionType[];
     error?: boolean;
     variant?: 'small' | 'large';
+    listMaxHeight?: string;
     isDisabled?: boolean;
     isLoading?: boolean;
     isSearchable?: boolean;

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

@@ -7,6 +7,7 @@ interface SelectedItemsBoxProps extends React.HTMLAttributes<HTMLElement> {
     items: SelectedItem[];
     onRemove: (id: string) => void;
     placeholder?: string;
+    disabled?: boolean;
 }
 export declare const SelectedItemsBox: React.FC<SelectedItemsBoxProps>;
 export default SelectedItemsBox;

package/dist/types/components/icons/index.d.ts

@@ -71,6 +71,7 @@ export { default as HelpIcon } from './help';
 export { default as ImageLeftIcon } from './image-left';
 export { default as ImageDefaultIcon } from './image-default';
 export { default as ImageRightIcon } from './image-right';
+export { default as InfoCircleIcon } from './info-circle';
 export { default as InspectorPluginIcon } from './inspector-plugin';
 export { default as LinkIcon } from './link';
 export { default as LockIcon } from './lock';

package/dist/types/components/icons/info-circle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './types';
+declare const InfoCircleIcon: React.FC<IconProps>;
+export default InfoCircleIcon;

package/dist/types/data/countryOptions.d.ts

@@ -0,0 +1,17 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { OptionType } from '../components/SelectField';
+export declare const COUNTRY_SELECT_OPTIONS: OptionType[];

package/dist/types/index.d.ts

@@ -59,3 +59,4 @@ export * from './hooks/use-scroll-detection';
 export * from './hooks/use-focus-cycle';
 export * from './lib/files';
 export * from './lib/menus';
+export * from './data/countryOptions';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.5.10",
+  "version": "3.5.12",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",