@hexure/ui 1.8.13 → 1.8.15

package/dist/cjs/types/components/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface FieldGroupProps {
+    /** The label to display above the field group */
+    label: string;
+    /** The content of the field group...usually a set of Field components */
+    children: any;
+}
+declare const FieldGroup: FC<FieldGroupProps>;
+export default FieldGroup;

package/dist/cjs/types/components/FieldGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FieldGroup';

package/dist/cjs/types/components/Input/Input.d.ts

@@ -33,7 +33,7 @@ export interface InputProps extends AccessibleProps {
     /** Set the css of the wrapping div */
     style?: styleProps;
     /** Define the type of input to be displayed */
-    type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea' | 'search';
+    type?: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea' | 'search';
     /** Set the value of the input. This should be used by the parent component to control the input's value. */
     value?: string;
 }

package/dist/cjs/types/components/Modal/Modal.d.ts

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
+import { StepProps } from '../ProgressBar/ProgressBar';
 interface ButtonProps {
     disabled?: boolean;
     children: string;
@@ -8,11 +9,6 @@ interface ButtonProps {
     tabIndex?: number;
     loading?: boolean;
 }
-interface StepProps {
-    label: string;
-    complete?: boolean;
-    active?: boolean;
-}
 export interface ModalProps extends AccessibleProps {
     /** Defines a button to be displayed on the far right of the bottom button bar */
     primaryButton?: ButtonProps;

package/dist/cjs/types/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+export interface StepProps {
+    label: string;
+    complete?: boolean;
+    active?: boolean;
+}
+export interface ProgressBarProps {
+    /**  */
+    steps: StepProps[];
+}
+declare const ProgressBar: FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/cjs/types/components/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ProgressBar';

package/dist/cjs/types/index.d.ts

@@ -10,6 +10,7 @@ export { default as Copy } from './components/Copy';
 export { default as DatePicker } from './components/DatePicker';
 export { default as Drawer } from './components/Drawer';
 export { default as Field } from './components/Field';
+export { default as FieldGroup } from './components/FieldGroup';
 export { default as FileUpload } from './components/FileUpload';
 export { default as Heading } from './components/Heading';
 export { default as Input } from './components/Input';
@@ -21,6 +22,7 @@ export { default as MoreMenu } from './components/MoreMenu';
 export { default as MultiSelect } from './components/MultiSelect';
 export { default as PageHeader } from './components/PageHeader';
 export { default as Pagination } from './components/Pagination';
+export { default as ProgressBar } from './components/ProgressBar';
 export { default as Radio } from './components/Radio';
 export { default as RadioList } from './components/RadioList';
 export { default as Select } from './components/Select';

package/dist/esm/index.js

@@ -2114,7 +2114,7 @@ const StyledButton = styled.button `
     opacity: ${props => (props.$disabled ? 0.6 : 1)};
   }
 `;
-const Label$4 = styled.span `
+const Label$5 = styled.span `
   color: ${props => (props.$format ? button_type_mapping[props.$format].content_color : '#fff')};
   font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
   font-family: ${FontStyles.DEFAULT};
@@ -2149,7 +2149,7 @@ const Button = (_a) => {
     var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
     const has_children = children && children.length > 0;
     return (React.createElement(StyledButton, Object.assign({ "$disabled": disabled || loading, "$format": format, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
-        children ? (React.createElement(Label$4, { "$format": format, "$small": small }, children)) : null,
+        children ? (React.createElement(Label$5, { "$format": format, "$small": small }, children)) : null,
         icon && !badge ? (React.createElement(StyledIcon$3, { "$hasChildren": !!has_children },
             React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
@@ -2225,7 +2225,7 @@ Heading.defaultProps = {
     type: 'primary',
 };
 
-const Wrapper$h = styled.div `
+const Wrapper$i = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -2261,7 +2261,7 @@ const Buttons = styled.div `
 `;
 const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
-    return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$i, Object.assign({}, accessibleProps),
         React.createElement(Container$3, { open: true },
             title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? React.createElement(Copy, { align: 'center' }, description) : null,
@@ -2271,7 +2271,7 @@ const ActionDialog = (_a) => {
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
 };
 
-const Wrapper$g = styled.div `
+const Wrapper$h = styled.div `
   border: 1px solid #f1f1f1;
   border-radius: 4px;
   border-left-width: 4px;
@@ -2281,7 +2281,7 @@ const Wrapper$g = styled.div `
   padding: 20px;
   box-sizing: border-box;
 `;
-const Content$3 = styled.div `
+const Content$4 = styled.div `
   margin-left: 20px;
 `;
 const Action$1 = styled.div `
@@ -2312,16 +2312,16 @@ const Alert = (_a) => {
             icon: mdiCheckboxMarkedCircleOutline,
         },
     };
-    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
+    return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
         React.createElement("div", { style: { flexShrink: 0 } },
             React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
-        React.createElement(Content$3, null,
+        React.createElement(Content$4, null,
             title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
             action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
 };
 
-const Wrapper$f = styled.div `
+const Wrapper$g = styled.div `
   border: 1px solid ${Colors.PRIMARY.Hex};
   border-radius: 8px;
   box-sizing: border-box;
@@ -2389,7 +2389,7 @@ const ErrorMsg = styled.span `
 `;
 const BulkActionBar = (_a) => {
     var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
-    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps),
         React.createElement(Left, null,
             React.createElement(Info$1, null,
                 React.createElement(Selected, null,
@@ -2402,7 +2402,7 @@ const BulkActionBar = (_a) => {
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
 
-const Wrapper$e = styled.div `
+const Wrapper$f = styled.div `
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
@@ -2442,14 +2442,14 @@ const Title$1 = styled.span `
 `;
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
-    return (React.createElement(Wrapper$e, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
+    return (React.createElement(Wrapper$f, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
         return (React.createElement(MenuItem, { key: i, onClick: item.onClick },
             item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
             React.createElement(Title$1, null, item.label)));
     })));
 };
 
-const Wrapper$d = styled.div `
+const Wrapper$e = styled.div `
   position: relative;
   display: inline-block;
 `;
@@ -2463,12 +2463,12 @@ const StyledMoreMenu = styled(MoreMenu) `
 `;
 const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', menuWidth = '200px', }) => {
     const [show_menu, toggleMenu] = useState(false);
-    return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
+    return (React.createElement(Wrapper$e, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
         React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
         show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
 };
 
-const Wrapper$c = styled.label `
+const Wrapper$d = styled.label `
   padding: 4px 0;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
@@ -2483,7 +2483,7 @@ const Input$2 = styled.input `
   line-height: 1.1em;
   box-sizing: border-box;
 `;
-const Label$3 = styled.span `
+const Label$4 = styled.span `
   font-family: ${FontStyles.DEFAULT};
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
@@ -2494,9 +2494,9 @@ const Label$3 = styled.span `
 `;
 const Checkbox = (_a) => {
     var { children, disabled, checked, onChange } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
-    return (React.createElement(Wrapper$c, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps),
         React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
-        children ? React.createElement(Label$3, null, children) : null));
+        children ? React.createElement(Label$4, null, children) : null));
 };
 
 const SelectAll = styled.div `
@@ -2863,7 +2863,7 @@ var dayjs_min = {exports: {}};
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
-const Wrapper$b = styled.div `
+const Wrapper$c = styled.div `
   border-radius: 4px;
   height: 40px;
   background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
@@ -2907,7 +2907,7 @@ const IconWrapper$2 = styled(Icon) `
 `;
 const Select = (_a) => {
     var { options, optionGroups, placeholder, readOnly, invalid, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
-    return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
+    return (React.createElement(Wrapper$c, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
         React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
             placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
             optionGroups &&
@@ -3077,7 +3077,7 @@ const Drawer = (_a) => {
         scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
 };
 
-const Wrapper$a = styled.div `
+const Wrapper$b = styled.div `
   display: inline-block;
   position: relative;
   height: 16px;
@@ -3117,15 +3117,15 @@ const positions = {
         transform: 'translateY(-50%)',
     },
 };
-const Content$2 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: Colors.PRIMARY.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 10 }, positions[props.$position])));
+const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: Colors.PRIMARY.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 10 }, positions[props.$position])));
 const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
     const [show_content, toggleContent] = useState(false);
-    return (React.createElement(Wrapper$a, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
+    return (React.createElement(Wrapper$b, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$2, { path: mdiInformationOutline }),
-        show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
+        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
 };
 
-const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
+const Wrapper$a = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
 const LabelRow = styled.div `
   display: flex;
   align-items: center;
@@ -3133,7 +3133,7 @@ const LabelRow = styled.div `
   margin: 0 0 4px 0;
   box-sizing: border-box;
 `;
-const Label$2 = styled.label `
+const Label$3 = styled.label `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 500;
   line-height: 1em;
@@ -3174,9 +3174,9 @@ const Validation = styled.div `
 `;
 const Field = (_a) => {
     var { action, children, validationText, label, description, required, htmlFor, style, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
-    return (React.createElement(Wrapper$9, Object.assign({ style: style }, accessibleProps),
+    return (React.createElement(Wrapper$a, Object.assign({ style: style }, accessibleProps),
         React.createElement(LabelRow, null,
-            React.createElement(Label$2, { htmlFor: htmlFor },
+            React.createElement(Label$3, { htmlFor: htmlFor },
                 label,
                 required ? React.createElement(Required, null, "*") : null,
                 tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null),
@@ -3186,6 +3186,41 @@ const Field = (_a) => {
         validationText ? React.createElement(Validation, null, validationText) : null));
 };
 
+const Wrapper$9 = styled.fieldset `
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-block-start: 0px;
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
+  padding-block-end: 0px;
+  min-inline-size: min-content;
+  border-width: 0px;
+  border-style: none;
+  border-color: transparent;
+  border-image: none;
+`;
+const Label$2 = styled.legend `
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
+
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 6px;
+`;
+const Content$2 = styled.div `
+  padding: 20px;
+  border-radius: 8px;
+  background: #fcfcfc;
+`;
+const FieldGroup = ({ children, label }) => {
+    return (React.createElement(Wrapper$9, null,
+        React.createElement(Label$2, null, label),
+        React.createElement(Content$2, null, children)));
+};
+
 const Dropzone = styled.div `
   border-radius: 8px;
   border-width: 1px;
@@ -3605,6 +3640,49 @@ const Logo = (_a) => {
     }
 };
 
+const Steps = styled.div `
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  background: #f5f5f5;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+const Step = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StepIndicator = styled.div `
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex)};
+  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+const StepLabel = styled.div `
+  color: #000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+`;
+const ProgressBar = ({ steps }) => {
+    return (React.createElement(Steps, null, steps.map((step, i) => {
+        return (React.createElement(Step, { key: i },
+            step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
+            React.createElement(StepLabel, null, step.label)));
+    })));
+};
+
 const Wrapper$7 = styled.div `
   position: fixed;
   top: 0;
@@ -3653,41 +3731,6 @@ const CloseMsg = styled.span `
   line-height: 1em;
   color: ${Colors.MEDIUM_GRAY.Hex};
 `;
-const Steps = styled.div `
-  padding: 20px;
-  border-bottom: 1px solid #e7e6e6;
-  background: #f5f5f5;
-  display: flex;
-  gap: 30px;
-  align-items: center;
-`;
-const Step = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const StepIndicator = styled.div `
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex)};
-  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-`;
-const StepLabel = styled.div `
-  color: #000;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-`;
 const ContentWrapper = styled.div `
   overflow-x: hidden;
   overflow-y: auto;
@@ -3725,11 +3768,7 @@ const Modal = (_a) => {
                 React.createElement(Close, { onClick: onClose },
                     React.createElement(CloseMsg, null, "(Esc)"),
                     React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiClose, size: '24px' }))),
-            steps ? (React.createElement(Steps, null, steps.map((step, i) => {
-                return (React.createElement(Step, { key: i },
-                    step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
-                    React.createElement(StepLabel, null, step.label)));
-            }))) : null,
+            steps ? React.createElement(ProgressBar, { steps: steps }) : null,
             React.createElement(ContentWrapper, null, children),
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
                 tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
@@ -4176,5 +4215,5 @@ const ZeroState = (_a) => {
         action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
 };
 
-export { Accordion, ActionDialog, Alert, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState };
+export { Accordion, ActionDialog, Alert, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FieldGroup, FileUpload, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState };
 //# sourceMappingURL=index.js.map