@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

package/src/Checkbox/Checkbox.css

@@ -11,10 +11,10 @@
 .Checkbox__indicator {
   width: var(--Checkbox--size);
   height: var(--Checkbox--size);
-  border: 0.0625rem solid var(--bitkit-colors-gray-3);
+  border: 0.0625rem solid var(--color-gray--3);
   border-radius: var(--size--x1);
   box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--bitkit-colors-white);
+  background-color: var(--color-white);
   color: transparent;
   cursor: pointer;
   transition-property: border-color, box-shadow, background-color, color;
@@ -23,17 +23,17 @@
 }
 
 .Checkbox__input:disabled + .Checkbox__indicator {
-  background-color: var(--bitkit-colors-gray-2);
+  background-color: var(--color-gray--2);
   cursor: default;
 }
 
 .Checkbox__input:focus + .Checkbox__indicator {
-  border-color: var(--bitkit-colors-grape-3);
+  border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
 }
 
 .Checkbox__input:checked + .Checkbox__indicator {
-  border-color: var(--bitkit-colors-grape-3);
-  background-color: var(--bitkit-colors-grape-3);
-  color: var(--bitkit-colors-white);
+  border-color: var(--color-grape--3);
+  background-color: var(--color-grape--3);
+  color: var(--color-white);
 }

package/src/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import './Checkbox.css';
 
-export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type Props = React.InputHTMLAttributes<HTMLInputElement>;
 
 /**
  * Run-of-the-mill Checkbox component.
@@ -12,29 +12,19 @@ const Checkbox: React.FunctionComponent<Props> = (props: Props) => {
   const { children, ...rest } = props;
 
   return (
-    <Flex
-        Component="label"
-        alignChildrenVertical="start"
-        className="Checkbox"
-        direction="horizontal"
-        gap="x2">
+    <Flex Component="label" alignChildrenVertical="start" className="Checkbox" direction="horizontal" gap="x2">
       <Flex>
-        <input { ...rest }
-            className="Checkbox__input"
-            type="checkbox" />
-        <Flex
-            alignChildren="middle"
-            className="Checkbox__indicator"
-            direction="horizontal">
+        <input {...rest} className="Checkbox__input" type="checkbox" />
+        <Flex alignChildren="middle" className="Checkbox__indicator" direction="horizontal">
           <Icon name="Tick" />
         </Flex>
       </Flex>
 
-      { children && (
-        <Flex grow initial="none" textColor="grape-5" >
-          { children }
+      {children && (
+        <Flex grow initial="none" textColor="grape-5">
+          {children}
         </Flex>
-      ) }
+      )}
     </Flex>
   );
 };

package/src/DatePicker/DatePicker.css

@@ -1,5 +1,5 @@
 .DatePicker__grid + .DatePicker__grid {
-  border-top: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-top: 0.0625rem solid var(--color-gray--2);
 }
 
 .DatePicker__day {
@@ -20,7 +20,7 @@
     transform: scale(0);
     opacity: 0;
     border-radius: 50%;
-    background-color: var(--bitkit-colors-grape-4);
+    background-color: var(--color-grape--4);
     transition-property: transform, opacity, background-color;
     transition-duration: var(--transition-duration--fast);
     transition-timing-function: var(--transition-timing-function);
@@ -36,7 +36,7 @@
 }
 
 .DatePicker__day--selectable.DatePicker__day--unselected:hover {
-  color: var(--bitkit-colors-gray-1);
+  color: var(--color-gray--1);
 }
 
 .DatePicker__day--selected,
@@ -44,19 +44,19 @@
   &::before {
     transform: scale(calc(2.5 / 3));
     opacity: 1;
-    background-color: var(--bitkit-colors-grape-4);
+    background-color: var(--color-grape--4);
   }
 }
 
 .DatePicker__day--selected::before {
   transform: scale(1);
-  background-color: var(--bitkit-colors-aqua-3);
+  background-color: var(--color-aqua--3);
 }
 
 .DatePicker__day--selected-from,
 .DatePicker__day--selected-between,
 .DatePicker__day--selected-to {
-  background-color: var(--bitkit-colors-aqua-2);
+  background-color: var(--color-aqua--2);
 }
 
 .DatePicker__day--selected-from {
@@ -70,5 +70,5 @@
 }
 
 .DatePicker__day--unselectable {
-  color: var(--bitkit-colors-gray-5);
+  color: var(--color-gray--5);
 }

package/src/DatePicker/DatePicker.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import * as React from 'react';
 import { DateTime } from 'luxon';
 import { ReferenceChildrenProps } from 'react-popper';
@@ -5,12 +6,12 @@ import dataAtIds from '../dataAtIds.json';
 import { useMediaQuery, useSyncedStateAndProps } from '../hooks';
 import Button from '../Button/Button';
 import Buttons from '../Button/Buttons';
-import DatePickerMonth from './DatePickerMonth';
 import { Props as FlexProps } from '../Flex/Flex';
 import Placement from '../Placement/Placement';
 import PlacementArea from '../Placement/PlacementArea';
 import PlacementManager from '../Placement/PlacementManager';
 import PlacementReference from '../Placement/PlacementReference';
+import DatePickerMonth from './DatePickerMonth';
 import './DatePicker.css';
 
 const { useState } = React;
@@ -55,12 +56,7 @@ export interface Props extends FlexProps {
  * range selection.
  */
 const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    children,
-    onApply,
-    onClose,
-    visible,
-  } = props;
+  const { children, onApply, onClose, visible } = props;
 
   const match = useMediaQuery(['56rem']);
   const [dateSelectedFromMillis, setDateSelectedFromMillis] = useSyncedStateAndProps(props.dateSelectedFrom);
@@ -68,8 +64,10 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
   const [viewDateStartMillis, setViewDateStartMillis] = useState(dateSelectedFromMillis);
   const [viewDateEndMillis, setViewDateEndMillis] = useState(dateSelectedToMillis);
 
-  const dateSelectableFrom = props.dateSelectableFrom === undefined ? undefined : DateTime.fromMillis(props.dateSelectableFrom).startOf('day');
-  const dateSelectableTo = props.dateSelectableTo === undefined ? undefined : DateTime.fromMillis(props.dateSelectableTo);
+  const dateSelectableFrom =
+    props.dateSelectableFrom === undefined ? undefined : DateTime.fromMillis(props.dateSelectableFrom).startOf('day');
+  const dateSelectableTo =
+    props.dateSelectableTo === undefined ? undefined : DateTime.fromMillis(props.dateSelectableTo);
   const dateSelectedFrom = dateSelectedFromMillis && DateTime.fromMillis(dateSelectedFromMillis).startOf('day');
   const dateSelectedTo = dateSelectedToMillis && DateTime.fromMillis(dateSelectedToMillis).startOf('day');
 
@@ -77,9 +75,10 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
     ? DateTime.fromMillis(viewDateStartMillis).startOf('month')
     : DateTime.local().startOf('month');
 
-  const viewDateEnd = viewDateEndMillis && !DateTime.fromMillis(viewDateEndMillis).startOf('month').equals(viewDateStart)
-    ? DateTime.fromMillis(viewDateEndMillis).startOf('month')
-    : viewDateStart.plus({ months: 1 }).startOf('month');
+  const viewDateEnd =
+    viewDateEndMillis && !DateTime.fromMillis(viewDateEndMillis).startOf('month').equals(viewDateStart)
+      ? DateTime.fromMillis(viewDateEndMillis).startOf('month')
+      : viewDateStart.plus({ months: 1 }).startOf('month');
 
   const handleClose = () => {
     onClose();
@@ -142,65 +141,54 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
 
   return (
     <PlacementManager>
-      <PlacementReference>
-        { children }
-      </PlacementReference>
+      <PlacementReference>{children}</PlacementReference>
 
-      <Placement onClose={ onClose } visible={ visible }>
-        { () => (
+      <Placement onClose={onClose} visible={visible}>
+        {() => (
           <PlacementArea paddingVertical="x8">
             <PlacementArea direction="horizontal">
               <PlacementArea paddingHorizontal="x8">
                 <DatePickerMonth
-                    data-bitkit-at-id={ dataAtIds.DatePickerMonthLeft }
-                    dateSelectableFrom={ dateSelectableFrom }
-                    dateSelectableTo={ dateSelectableTo }
-                    dateSelectedFrom={ dateSelectedFrom }
-                    dateSelectedTo={ dateSelectedTo }
-                    onNextMonth={ handleNextMonthStart }
-                    onPreviousMonth={ handlePreviousMonthStart }
-                    onSelect={ handleSelect }
-                    viewDate={ viewDateStart } />
+                  data-bitkit-at-id={dataAtIds.DatePickerMonthLeft}
+                  dateSelectableFrom={dateSelectableFrom}
+                  dateSelectableTo={dateSelectableTo}
+                  dateSelectedFrom={dateSelectedFrom}
+                  dateSelectedTo={dateSelectedTo}
+                  onNextMonth={handleNextMonthStart}
+                  onPreviousMonth={handlePreviousMonthStart}
+                  onSelect={handleSelect}
+                  viewDate={viewDateStart}
+                />
               </PlacementArea>
 
-              { match('56rem') && (
+              {match('56rem') && (
                 <PlacementArea paddingHorizontal="x8">
                   <DatePickerMonth
-                      data-bitkit-at-id={ dataAtIds.DatePickerMonthRight }
-                      dateSelectableFrom={ dateSelectableFrom }
-                      dateSelectableTo={ dateSelectableTo }
-                      dateSelectedFrom={ dateSelectedFrom }
-                      dateSelectedTo={ dateSelectedTo }
-                      onNextMonth={ handleNextMonthEnd }
-                      onPreviousMonth={ handlePreviousMonthEnd }
-                      onSelect={ handleSelect }
-                      viewDate={ viewDateEnd } />
+                    data-bitkit-at-id={dataAtIds.DatePickerMonthRight}
+                    dateSelectableFrom={dateSelectableFrom}
+                    dateSelectableTo={dateSelectableTo}
+                    dateSelectedFrom={dateSelectedFrom}
+                    dateSelectedTo={dateSelectedTo}
+                    onNextMonth={handleNextMonthEnd}
+                    onPreviousMonth={handlePreviousMonthEnd}
+                    onSelect={handleSelect}
+                    viewDate={viewDateEnd}
+                  />
                 </PlacementArea>
-              ) }
-
+              )}
             </PlacementArea>
 
-            <Buttons
-                alignChildren="end"
-                margin="x2"
-                paddingHorizontal="x8">
-              <Button
-                  level="secondary"
-                  onClick={ handleClose }
-                  size="small">
+            <Buttons alignChildren="end" margin="x2" paddingHorizontal="x8">
+              <Button level="secondary" onClick={handleClose} size="small">
                 Cancel
               </Button>
 
-              <Button
-                  data-bitkit-at-id={ dataAtIds.DatePickerApply }
-                  level="primary"
-                  onClick={ handleApply }
-                  size="small">
+              <Button data-bitkit-at-id={dataAtIds.DatePickerApply} level="primary" onClick={handleApply} size="small">
                 Apply
               </Button>
             </Buttons>
           </PlacementArea>
-        ) }
+        )}
       </Placement>
     </PlacementManager>
   );

package/src/DatePicker/DatePickerDay.tsx

@@ -15,21 +15,13 @@ interface Props extends FlexProps {
 }
 
 const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    dateSelectableFrom,
-    dateSelectableTo,
-    dateSelectedFrom,
-    dateSelectedTo,
-    n,
-    onSelect,
-    viewDate,
-    ...rest
-  } = props;
+  const { dateSelectableFrom, dateSelectableTo, dateSelectedFrom, dateSelectedTo, n, onSelect, viewDate, ...rest } =
+    props;
 
   const date = viewDate.plus({ days: n - viewDate.weekday });
 
   const dayOfWeek = viewDate.weekday;
-  const daysInMonth = viewDate.daysInMonth;
+  const { daysInMonth } = viewDate;
   const daysInPreviousMonth = viewDate.minus({ month: 1 }).daysInMonth;
 
   const isPreviousMonth = n < dayOfWeek;
@@ -41,9 +33,15 @@ const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
 
   const hasSelectionRange = dateSelectedFrom && dateSelectedTo && !dateSelectedFrom.equals(dateSelectedTo);
 
-  const isSelectedFrom = isCurrentMonth && (dateSelectedFrom && date.equals(dateSelectedFrom));
-  const isSelectedTo = isCurrentMonth && (dateSelectedTo && date.equals(dateSelectedTo));
-  const isSelectedBetween = isCurrentMonth && dateSelectedFrom && dateSelectedTo && hasSelectionRange && (+date > +dateSelectedFrom && +date < +dateSelectedTo);
+  const isSelectedFrom = isCurrentMonth && dateSelectedFrom && date.equals(dateSelectedFrom);
+  const isSelectedTo = isCurrentMonth && dateSelectedTo && date.equals(dateSelectedTo);
+  const isSelectedBetween =
+    isCurrentMonth &&
+    dateSelectedFrom &&
+    dateSelectedTo &&
+    hasSelectionRange &&
+    +date > +dateSelectedFrom &&
+    +date < +dateSelectedTo;
 
   const classes = classnames('DatePicker__day', {
     'DatePicker__day--selected': isSelectedFrom || isSelectedTo,
@@ -56,19 +54,18 @@ const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Flex { ...rest }
-        alignChildren="middle"
-        className={ classes }
-        data-bitkit-at-id={ isSelectable ? dataAtIds.DatePickerDay : undefined }
-        direction="horizontal"
-        onClick={ isSelectable ? () => onSelect(date) : undefined }>
-      <Flex
-          alignChildren="middle"
-          className="DatePicker__day-inner"
-          direction="horizontal">
-        { isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n) }
-        { isCurrentMonth && n - dayOfWeek + 1 }
-        { isNextMonth && n - dayOfWeek - daysInMonth + 1 }
+    <Flex
+      {...rest}
+      alignChildren="middle"
+      className={classes}
+      data-bitkit-at-id={isSelectable ? dataAtIds.DatePickerDay : undefined}
+      direction="horizontal"
+      onClick={isSelectable ? () => onSelect(date) : undefined}
+    >
+      <Flex alignChildren="middle" className="DatePicker__day-inner" direction="horizontal">
+        {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n)}
+        {isCurrentMonth && n - dayOfWeek + 1}
+        {isNextMonth && n - dayOfWeek - daysInMonth + 1}
       </Flex>
     </Flex>
   );

package/src/DatePicker/DatePickerGrid.tsx

@@ -1,16 +1,10 @@
 import * as React from 'react';
 import Grid, { Props as GridProps } from '../Grid/Grid';
 
-interface Props extends GridProps {}
+type Props = GridProps;
 
 const DatePickerGrid: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Grid { ...props }
-        className="DatePicker__grid"
-        gapVertical="x1"
-        repeat="7"
-        repeatWidth="3rem" />
-  );
+  return <Grid {...props} className="DatePicker__grid" gapVertical="x1" repeat="7" repeatWidth="3rem" />;
 };
 
 export default DatePickerGrid;

package/src/DatePicker/DatePickerMonth.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { DateTime, Info } from 'luxon';
 import Base, { Props as BaseProps } from '../Base/Base';
-import DatePickerDay from './DatePickerDay';
-import DatePickerGrid from './DatePickerGrid';
 import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import Link from '../Link/Link';
 import Text from '../Text/Text';
+import DatePickerGrid from './DatePickerGrid';
+import DatePickerDay from './DatePickerDay';
 
 const daysOfTheWeek = Info.weekdays('short');
 const daysCount = 6 * 7;
@@ -36,57 +36,49 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
   } = props;
 
   return (
-    <Base { ...rest }>
-      <Flex
-          alignChildren="middle"
-          direction="horizontal"
-          gap="x4"
-          margin="x4"
-          paddingHorizontal="x12">
+    <Base {...rest}>
+      <Flex alignChildren="middle" direction="horizontal" gap="x4" margin="x4" paddingHorizontal="x12">
         <Flex>
-          <Link onClick={ onPreviousMonth }>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link onClick={onPreviousMonth}>
             <Icon name="ChevronLeft" />
           </Link>
         </Flex>
 
         <Flex grow>
-          <Text align="middle">{ viewDate.toFormat('MMMM yyyy') }</Text>
+          <Text align="middle">{viewDate.toFormat('MMMM yyyy')}</Text>
         </Flex>
 
         <Flex>
-          <Link onClick={ onNextMonth }>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link onClick={onNextMonth}>
             <Icon name="ChevronRight" />
           </Link>
         </Flex>
       </Flex>
 
       <DatePickerGrid margin="x1">
-        { daysOfTheWeek.map((day) => (
-          <Text
-              align="middle"
-              key={ day }
-              paddingVertical="x4"
-              size="2"
-              textColor="gray-5"
-              uppercase>
-            { day }
+        {daysOfTheWeek.map((day) => (
+          <Text align="middle" key={day} paddingVertical="x4" size="2" textColor="gray-5" uppercase>
+            {day}
           </Text>
-        )) }
+        ))}
       </DatePickerGrid>
 
-      <DatePickerGrid
-          paddingVertical="x2">
-        { Array.from({ length: daysCount }).map((_, i) => (
+      <DatePickerGrid paddingVertical="x2">
+        {Array.from({ length: daysCount }).map((_, i) => (
           <DatePickerDay
-              dateSelectableFrom={ dateSelectableFrom }
-              dateSelectableTo={ dateSelectableTo }
-              dateSelectedFrom={ dateSelectedFrom }
-              dateSelectedTo={ dateSelectedTo }
-              key={ i }
-              n={ i + 1 }
-              onSelect={ onSelect }
-              viewDate={ viewDate } />
-        )) }
+            dateSelectableFrom={dateSelectableFrom}
+            dateSelectableTo={dateSelectableTo}
+            dateSelectedFrom={dateSelectedFrom}
+            dateSelectedTo={dateSelectedTo}
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            n={i + 1}
+            onSelect={onSelect}
+            viewDate={viewDate}
+          />
+        ))}
       </DatePickerGrid>
     </Base>
   );

package/src/Divider/Divider.tsx

@@ -29,13 +29,7 @@ const Divider: React.FunctionComponent<Props> = (props: Props) => {
     [direction === 'horizontal' ? 'borderTopWidth' : 'borderRightWidth']: width,
   };
 
-  return (
-    <Base { ...rest }
-        Component="hr"
-        className={ classes }
-        style={ style }
-        textColor={ color } />
-  );
+  return <Base {...rest} Component="hr" className={classes} style={style} textColor={color} />;
 };
 
 Divider.defaultProps = {

package/src/Dot/Dot.tsx

@@ -13,13 +13,7 @@ export interface Props extends BaseProps {
 const Dot: React.FunctionComponent<Props> = (props: Props) => {
   const { backgroundColor, size, ...rest } = props;
 
-  return (
-    <Base { ...rest }
-        backgroundColor={ backgroundColor }
-        className="Dot"
-        height={ size }
-        width={ size } />
-  );
+  return <Base {...rest} backgroundColor={backgroundColor} className="Dot" height={size} width={size} />;
 };
 
 export default Dot;

package/src/Dropdown/Dropdown.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
-import DropdownMenu from './DropdownMenu';
-import DropdownMenuItem from './DropdownMenuItem';
-import DropdownMenuItemGroup from './DropdownMenuItemGroup';
 import Placement from '../Placement/Placement';
 import PlacementManager from '../Placement/PlacementManager';
 import PlacementReference from '../Placement/PlacementReference';
 import Text from '../Text/Text';
+import DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
+import DropdownMenu from './DropdownMenu';
+import DropdownMenuItem from './DropdownMenuItem';
+import DropdownMenuItemGroup from './DropdownMenuItemGroup';
 
 const { useState } = React;
 
@@ -39,52 +39,51 @@ export interface Props extends DropdownButtonProps {
  */
 const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   const { children, options, onChange, selected, maxHeight, ...rest } = props;
-  const [visible, setVisible ] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   const handleToggleVisible = () => setVisible(!visible);
 
   const handleChange = (value: DropdownValue) => {
-    onChange && onChange(value);
+    if (onChange) {
+      onChange(value);
+    }
     handleToggleVisible();
   };
 
-  const renderOption = (({ text, value }: Option) => (
-    <DropdownMenuItem
-        onClick={ () => handleChange(value) }
-        selected={ selected === value }>
-      { text }
+  const renderOption = ({ text, value }: Option) => (
+    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value}>
+      {text}
     </DropdownMenuItem>
-  ));
+  );
 
   return (
     <PlacementManager>
       <PlacementReference>
-        { ({ ref }) => (
-          <DropdownButton { ...rest }
-              alignChildrenHorizontal="start"
-              innerRef={ ref }
-              onClick={ handleToggleVisible }>
-            <Text ellipsis>
-              { children }
-            </Text>
+        {({ ref }) => (
+          <DropdownButton {...rest} alignChildrenHorizontal="start" innerRef={ref} onClick={handleToggleVisible}>
+            <Text ellipsis>{children}</Text>
           </DropdownButton>
-        ) }
+        )}
       </PlacementReference>
 
-      <Placement onClose={ handleToggleVisible } visible={ visible }>
-        { ({ width }) => (
-          <DropdownMenu maxHeight={ maxHeight } width={ width }>
-            { options.map((option) => (
-              <React.Fragment key={ option.text }>
-                { 'options' in option ? (
-                  <DropdownMenuItemGroup text={ option.text }>
-                    { option.options.map(groupOption => <React.Fragment key={ groupOption.value }>{ renderOption(groupOption) }</React.Fragment>) }
+      <Placement onClose={handleToggleVisible} visible={visible}>
+        {({ width }) => (
+          <DropdownMenu maxHeight={maxHeight} width={width}>
+            {options.map((option) => (
+              <React.Fragment key={option.text}>
+                {'options' in option ? (
+                  <DropdownMenuItemGroup text={option.text}>
+                    {option.options.map((groupOption) => (
+                      <React.Fragment key={groupOption.value}>{renderOption(groupOption)}</React.Fragment>
+                    ))}
                   </DropdownMenuItemGroup>
-                ) : renderOption(option) }
+                ) : (
+                  renderOption(option)
+                )}
               </React.Fragment>
-            )) }
+            ))}
           </DropdownMenu>
-        ) }
+        )}
       </Placement>
     </PlacementManager>
   );

package/src/Dropdown/DropdownButton.tsx

@@ -3,7 +3,7 @@ import Button, { Props as ButtonProps } from '../Button/Button';
 import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 
-export interface Props extends Omit<ButtonProps, 'level'> {}
+export type Props = Omit<ButtonProps, 'level'>;
 
 /**
  * A Button under the hood, but set up with a
@@ -13,20 +13,9 @@ const DropdownButton: React.FunctionComponent<Props> = (props: Props) => {
   const { children } = props;
 
   return (
-    <Button
-        type="button"
-        { ...props }
-        alignChildrenHorizontal="start"
-        fullWidth
-        gap="x4"
-        level="secondary">
-      <Flex
-          alignChildrenVertical="middle"
-          direction="horizontal"
-          gap="x2"
-          grow
-          shrink>
-        { children }
+    <Button type="button" {...props} alignChildrenHorizontal="start" fullWidth gap="x4" level="secondary">
+      <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2" grow shrink>
+        {children}
       </Flex>
 
       <Flex>