@mackin.com/styleguide 7.8.0 → 7.9.0

package/index.d.ts

@@ -59,15 +59,7 @@ declare const Backdrop: (p: {
 }) => JSX.Element;
 
 declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
-interface ButtonProps {
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    type?: 'button' | 'submit';
-    children?: any;
-    style?: React.CSSProperties;
+interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     /** Defaults to 'center'. */
     textAlign?: 'left' | 'center' | 'right';
@@ -76,21 +68,16 @@ interface ButtonProps {
     round?: boolean;
     /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
-    className?: string;
     rightIcon?: JSX.Element;
     leftIcon?: JSX.Element;
     /** full width with max space between the text and the icon */
     iconBlock?: boolean;
     small?: boolean;
-    disabled?: boolean;
     /** The button will not respond to click or mouse events, but it will appear normal. */
     readonly?: boolean;
     waiting?: boolean;
     /** The minimum button size will be set to the themes' formButtonMinWidth. */
     enforceMinWidth?: boolean;
-    title?: string;
-    tabIndex?: number;
-    id?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 
@@ -415,20 +402,17 @@ interface LabelProps {
 }
 declare const Label: (props: LabelProps) => JSX.Element;
 
-declare const List: (props: {
-    children?: any;
+interface ListProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
     altRowColor?: boolean;
     noLines?: boolean;
-    className?: string;
     items?: (string | JSX.Element)[];
-}) => JSX.Element;
-declare const ListItem: (props: {
-    children?: any;
-    id?: string | number;
+}
+declare const List: React.ForwardRefExoticComponent<Pick<ListProps, "altRowColor" | "noLines" | "items" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLUListElement>>;
+interface ListItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
     /** For variant 'full', the content will take up the entire space of the parent (no padding applied by this component). */
     variant?: 'full';
-    className?: string;
-}) => JSX.Element;
+}
+declare const ListItem: (props: ListItemProps) => JSX.Element;
 
 interface ModalProps {
     show: boolean;
@@ -670,6 +654,7 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
     type?: 'select';
     /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
+    round?: boolean;
 }
 declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
 
@@ -994,4 +979,4 @@ declare const WaitingIndicator: (p: {
     debug?: boolean;
 }) => JSX.Element;
 
-export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
+export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };

package/index.js

@@ -271,6 +271,33 @@ const Backdrop$1 = (props) => {
         }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 const ICONS = {
     add: proSolidSvgIcons.faPlus,
     delete: proSolidSvgIcons.faTrashAlt,
@@ -313,7 +340,8 @@ const Icon = (props) => {
 };
 
 const Button = (props) => {
-    var _a;
+    var _a, _b;
+    const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rounded", "rightIcon", "leftIcon", "iconBlock", "small", "readonly", "waiting", "enforceMinWidth"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -482,7 +510,7 @@ const Button = (props) => {
 		`}
 	`;
     const disabled = props.disabled || props.waiting;
-    return (React__namespace.createElement("button", { id: props.id, tabIndex: props.tabIndex, title: props.title, disabled: disabled, style: props.style, onClick: props.onClick, className: css.cx('button', styles, props.className), onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, type: props.type || 'button' },
+    return (React__namespace.createElement("button", Object.assign({}, nativeProps, { disabled: disabled, className: css.cx('button', styles, props.className), type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button' }),
         props.leftIcon && React__namespace.createElement("span", { className: css.css({ marginRight: '0.5rem' }) }, props.leftIcon),
         props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children,
         props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
@@ -686,9 +714,10 @@ const Input = React__namespace.forwardRef((props, ref) => {
         props.rightControl && props.type !== 'textarea' && React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl)));
 });
 
-const List = (props) => {
+const List = React__namespace.forwardRef((props, ref) => {
     const children = props.items ? props.items.map((item, i) => React__namespace.createElement(ListItem, { key: i }, item)) : props.children;
     const theme = useThemeSafely();
+    const listProps = __rest(props, ["altRowColor", "noLines", "items"]);
     const listStyles = css.css `
 		margin: 0;
 		padding: 0;
@@ -704,9 +733,10 @@ const List = (props) => {
 			}
 		`}
 	`;
-    return (React__namespace.createElement("ul", { className: css.cx('list', listStyles, props.className) }, children));
-};
+    return (React__namespace.createElement("ul", Object.assign({}, listProps, { ref: ref, className: css.cx('list', listStyles, props.className) }), children));
+});
 const ListItem = (props) => {
+    const liProps = __rest(props, ["variant"]);
     const theme = useThemeSafely();
     const itemStyles = css.css `
 		border-bottom: ${theme.controls.border};
@@ -738,7 +768,7 @@ const ListItem = (props) => {
 			}
 		`}
 	`;
-    return (React__namespace.createElement("li", { className: css.cx('listItem', itemStyles, props.className) },
+    return (React__namespace.createElement("li", Object.assign({}, liProps, { className: css.cx('listItem', itemStyles, props.className) }),
         React__namespace.createElement("div", { className: css.css(contentStyle) }, props.children)));
 };
 
@@ -849,6 +879,7 @@ const getAutocompleteValueId = (v) => {
 const Autocomplete = (p) => {
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
+    const list = React__namespace.useRef(null);
     const [values, setValues] = React__namespace.useState([]);
     const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
     const shownValues = React__namespace.useMemo(() => {
@@ -861,22 +892,26 @@ const Autocomplete = (p) => {
 		position: relative;
 		width: 100%;
 	`;
+    let listBorderRadius = '';
+    if (p.round || p.rounded || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
     const listClass = css.css({
         position: 'absolute',
         width: '100%',
         border: theme.controls.border,
-        borderRadius: p.round || p.rounded ? theme.controls.roundedRadius : theme.controls.borderRadius,
+        borderRadius: listBorderRadius,
         boxShadow: theme.controls.boxShadow,
         backgroundColor: theme.colors.bg,
         marginTop: `-4px !important`,
         zIndex: theme.zIndexes.backdrop,
         'li:first-child button': {
-            borderTopRightRadius: theme.controls.borderRadius,
-            borderTopLeftRadius: theme.controls.borderRadius,
+            borderTopRightRadius: listBorderRadius,
+            borderTopLeftRadius: listBorderRadius,
         },
         'li:last-child button': {
-            borderBottomRightRadius: theme.controls.borderRadius,
-            borderBottomLeftRadius: theme.controls.borderRadius,
+            borderBottomRightRadius: listBorderRadius,
+            borderBottomLeftRadius: listBorderRadius,
         }
     });
     const inputClass = css.css `
@@ -888,6 +923,26 @@ const Autocomplete = (p) => {
     const buttonStyles = css.css({
         borderRadius: 0,
     });
+    const buttonMarkerClass = 'ListItem__button';
+    const getNextTabElement = (fromIndex, direction) => {
+        var _a, _b, _c;
+        if (fromIndex === -1) {
+            let buttonIndex = 0;
+            if (direction === -1) {
+                buttonIndex = shownValues.length - 1;
+            }
+            return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
+        }
+        else {
+            const nextIndex = fromIndex + direction;
+            if (nextIndex >= shownValues.length || nextIndex < 0) {
+                return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
+            }
+            else {
+                return (_c = list.current) === null || _c === void 0 ? void 0 : _c.querySelector(`.${buttonMarkerClass}${nextIndex}`);
+            }
+        }
+    };
     return (React__namespace.createElement("div", { ref: element, className: css.cx(baseClass, 'autocomplete') },
         React__namespace.createElement(Backdrop$1, { onClick: () => setValues([]), show: showValues, allowScroll: true, transparent: true }),
         React__namespace.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
@@ -905,11 +960,37 @@ const Autocomplete = (p) => {
                     else {
                         setValues([]);
                     }
+                }, onKeyDown: e => {
+                    var _a, _b;
+                    if (showValues) {
+                        if (e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            (_a = getNextTabElement(-1, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                        }
+                        else if (e.key === 'ArrowUp') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            (_b = getNextTabElement(-1, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                        }
+                    }
                 }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
-            showValues && (React__namespace.createElement(List, { className: listClass },
-                shownValues.map(value => {
+            showValues && (React__namespace.createElement(List, { ref: list, className: listClass },
+                shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
-                        React__namespace.createElement(Button, { className: buttonStyles, onClick: () => {
+                        React__namespace.createElement(Button, { onKeyDown: e => {
+                                var _a, _b;
+                                if (e.key === 'ArrowDown') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    (_a = getNextTabElement(listItemIndex, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
+                                else if (e.key === 'ArrowUp') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                                }
+                            }, className: css.cx(buttonMarkerClass + listItemIndex, buttonStyles), onClick: () => {
                                 p.onPick(value);
                                 setValues([]);
                                 setTimeout(() => {
@@ -1138,33 +1219,6 @@ const Calendar = (p) => {
             cells)));
 };
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 const Checkbox = (props) => {
     const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readonly"]);
     const selected = props.checkedIcon || 'selected';
@@ -2678,7 +2732,7 @@ const OmniLink = (props) => {
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onChange", "type", "rounded", "readonly"]);
+    , ["value", "options", "onChange", "type", "rounded", "round", "readonly"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -2714,6 +2768,9 @@ const Picker = (props) => {
 			${props.rounded && `
 				border-radius: ${theme.controls.roundedRadius};
 			`}
+			${props.round && `
+				border-radius: ${theme.controls.roundRadius};
+			`}
 			${props.readonly && `
 				background-color: transparent !important;
 				border: none;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "7.8.0",
+	"version": "7.9.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",