@economic/taco 0.0.30-alpha.0 → 0.0.31-alpha.0

package/dist/taco.cjs.development.js

@@ -36,39 +36,6 @@ var PrimitiveSwitch = require('@radix-ui/react-switch');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
 function IconAccountPreview(props, svgRef) {
   return React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3144,14 +3111,12 @@ const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   })) : null;
 });
 
-var _excluded = ["id"],
-    _excluded2 = ["id", "defaultId", "onChange", "as"];
-var AccordionContext = /*#__PURE__*/React__default.createContext({
+const AccordionContext = /*#__PURE__*/React__default.createContext({
   as: 'h2'
 });
-var StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionStyledTrigger(props, ref) {
-  var isExpanded = !!props['aria-expanded'];
-  var className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue focus:yt-focus', props.className);
+const StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionStyledTrigger(props, ref) {
+  const isExpanded = !!props['aria-expanded'];
+  const className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue focus:yt-focus', props.className);
   return React__default.createElement("button", Object.assign({}, props, {
     ref: ref,
     className: className
@@ -3159,12 +3124,13 @@ var StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionSty
     name: isExpanded ? 'chevron-up' : 'chevron-down'
   }));
 });
-var Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(props, ref) {
-  var children = props.children;
-
-  var _React$useContext = React__default.useContext(AccordionContext),
-      Heading = _React$useContext.as;
-
+const Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(props, ref) {
+  const {
+    children
+  } = props;
+  const {
+    as: Heading
+  } = React__default.useContext(AccordionContext);
   return React__default.createElement(AccordionPrimitive.Header, {
     asChild: true
   }, React__default.createElement(Heading, {
@@ -3174,35 +3140,34 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(p
     asChild: true
   }, React__default.createElement(StyledTrigger, null, children))));
 });
-var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(props, ref) {
+const Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(props, ref) {
   return React__default.createElement(AccordionPrimitive.Content, Object.assign({}, props, {
     ref: ref
   }));
 });
 
-var Item = function Item(props) {
-  var id = props.id,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+const Item = props => {
+  const {
+    id,
+    ...otherProps
+  } = props;
   return React__default.createElement(AccordionPrimitive.Item, Object.assign({}, otherProps, {
     value: id
   }));
 };
 
-var Accordion = function Accordion(props) {
-  var id = props.id,
-      defaultId = props.defaultId,
-      onChange = props.onChange,
-      _props$as = props.as,
-      as = _props$as === void 0 ? 'h2' : _props$as,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  var context = React__default.useMemo(function () {
-    return {
-      as: as
-    };
-  }, [as]);
-  var valueProps;
+const Accordion = props => {
+  const {
+    id,
+    defaultId,
+    onChange,
+    as = 'h2',
+    ...otherProps
+  } = props;
+  const context = React__default.useMemo(() => ({
+    as
+  }), [as]);
+  let valueProps;
 
   if (defaultId) {
     valueProps = {
@@ -3215,8 +3180,8 @@ var Accordion = function Accordion(props) {
     };
   }
 
-  var type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';
-  var className = cn('divide-y divide-grey', props.className);
+  const type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';
+  const className = cn('divide-y divide-grey', props.className);
   return React__default.createElement(AccordionContext.Provider, {
     value: context
   }, React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
@@ -3283,19 +3248,20 @@ const getOutlineClasses = state => {
   }
 };
 
-var _excluded$1 = ["children", "compact", "outline", "state"];
-var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
-  var _cn;
-
-  var children = props.children,
-      _props$compact = props.compact,
-      compact = _props$compact === void 0 ? false : _props$compact,
-      _props$outline = props.outline,
-      outline = _props$outline === void 0 ? false : _props$outline,
-      state = props.state,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-
-  var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-[0.354rem]'] = !compact, _cn), props.className);
+const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
+  const {
+    children,
+    compact = false,
+    outline = false,
+    state,
+    ...otherProps
+  } = props;
+  const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', {
+    [getOutlineClasses(state)]: outline,
+    [`border-transparent ${getStateClasses(state)}`]: !outline,
+    'h-2 w-2 min-w-0': compact,
+    'h-5 py-0 px-[0.354rem]': !compact
+  }, props.className);
   return React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
     "aria-live": "polite",
@@ -3383,7 +3349,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 });
 
 const getButtonClasses = () => {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center border';
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max inline-flex items-center justify-center border';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
@@ -3479,11 +3445,13 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref)
   }, className, ref);
 });
 
-var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
-  var children = props.children,
-      state = props.state,
-      onClose = props.onClose;
-  var className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);
+const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
+  const {
+    children,
+    state,
+    onClose
+  } = props;
+  const className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);
   return React.createElement("div", {
     className: className,
     "data-taco": "banner",
@@ -3496,32 +3464,32 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   }) : null);
 });
 
-var _excluded$2 = ["fluid"];
-var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
-  var fluid = props.fluid,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
-
-  var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
+const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+  const {
+    fluid,
+    ...otherProps
+  } = props;
+  const className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
-  var children = otherProps.children; // add a chevron icon to menu buttons
+  let children = otherProps.children; // add a chevron icon to menu buttons
 
   if (typeof otherProps.menu === 'function') {
-    children = Array.isArray(children) ? [].concat(children, [React.createElement(Icon, {
+    children = Array.isArray(children) ? [...children, React.createElement(Icon, {
       key: "chevron-down",
       name: "chevron-down"
-    })]) : [children, React.createElement(Icon, {
+    })] : [children, React.createElement(Icon, {
       key: "chevron-down",
       name: "chevron-down"
     })];
   }
 
-  return createButton(_extends({}, otherProps, {
-    children: children,
+  return createButton({ ...otherProps,
+    children,
     'data-taco': 'button'
-  }), className, ref);
+  }, className, ref);
 });
 
 function useTimer(duration = 0, callback) {
@@ -3977,37 +3945,37 @@ const Provider = props => {
 const useTaco = () => React.useContext(Context);
 const useLocalization = () => useTaco().localization;
 
-var _excluded$3 = ["onChange", "value"];
+const renderDay = (day, modifiers) => modifiers.disabled ? React.createElement("span", {
+  className: "dot"
+}) : day.getDate();
 
-var renderDay = function renderDay(day, modifiers) {
-  return modifiers.disabled ? React.createElement("span", {
-    className: "dot"
-  }) : day.getDate();
-};
-
-var thisYear = /*#__PURE__*/new Date().getFullYear();
-var years = [];
+const thisYear = /*#__PURE__*/new Date().getFullYear();
+const years = [];
 
-for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
+for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
   years.push(i);
 }
 
-var Navbar = /*#__PURE__*/React.memo(function (_ref) {
-  var onMonthChange = _ref.onMonthChange,
-      onNextClick = _ref.onNextClick,
-      onPreviousClick = _ref.onPreviousClick,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? new Date() : _ref$value;
-
-  var _useLocalization = useLocalization(),
-      _useLocalization$text = _useLocalization.texts.calendar,
-      actions = _useLocalization$text.actions,
-      months = _useLocalization$text.months;
+const Navbar = /*#__PURE__*/React.memo(({
+  onMonthChange,
+  onNextClick,
+  onPreviousClick,
+  value = new Date()
+}) => {
+  const {
+    texts: {
+      calendar: {
+        actions,
+        months
+      }
+    }
+  } = useLocalization();
 
-  var handleChange = function handleChange(event) {
-    var _event$target$form = event.target.form,
-        year = _event$target$form.year,
-        month = _event$target$form.month;
+  const handleChange = function handleChange(event) {
+    const {
+      year,
+      month
+    } = event.target.form;
     onMonthChange(new Date(year.value, month.value));
   };
 
@@ -4020,59 +3988,49 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map(function (month, i) {
-    return React.createElement("option", {
-      key: month,
-      value: i
-    }, month);
-  })), React.createElement("select", {
+  }, months.map((month, i) => React.createElement("option", {
+    key: month,
+    value: i
+  }, month))), React.createElement("select", {
     className: "h-8 px-2",
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(function (year) {
-    return React.createElement("option", {
-      key: year,
-      value: year
-    }, String(year));
-  }))), React.createElement("div", null, React.createElement(IconButton, {
+  }, years.map(year => React.createElement("option", {
+    key: year,
+    value: year
+  }, String(year))))), React.createElement("div", null, React.createElement(IconButton, {
     appearance: "discrete",
     icon: "chevron-left",
     "aria-label": actions.previousMonth,
-    onClick: function onClick() {
-      return onPreviousClick();
-    },
+    onClick: () => onPreviousClick(),
     rounded: true
   }), React.createElement(IconButton, {
     appearance: "discrete",
     icon: "chevron-right",
     "aria-label": actions.nextMonth,
-    onClick: function onClick() {
-      return onNextClick();
-    },
+    onClick: () => onNextClick(),
     rounded: true
   })));
 });
-var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
-  var handleChange = props.onChange,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-
-  var _useLocalization2 = useLocalization(),
-      locale = _useLocalization2.locale,
-      texts = _useLocalization2.texts;
-
-  var _React$useState = React.useState(value !== null && value !== void 0 ? value : new Date()),
-      visibleMonth = _React$useState[0],
-      setVisibleMonth = _React$useState[1];
-
-  React.useEffect(function () {
+const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
+  const {
+    onChange: handleChange,
+    value,
+    ...otherProps
+  } = props;
+  const {
+    locale,
+    texts
+  } = useLocalization();
+  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
+  React.useEffect(() => {
     if (visibleMonth !== value) {
       setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
     }
   }, [value]);
 
-  var handleDayClick = function handleDayClick(date, modifiers, event) {
+  const handleDayClick = (date, modifiers, event) => {
     if (modifiers.outside || modifiers.disabled) {
       return;
     }
@@ -4080,8 +4038,8 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     handleChange(date, event);
   };
 
-  var handleCalendarClickToday = function handleCalendarClickToday() {
-    var today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
+  const handleCalendarClickToday = () => {
+    const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
 
     today.setHours(12);
     today.setMinutes(0);
@@ -4089,7 +4047,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     handleChange(today);
   };
 
-  var className = cn('flex bg-white text-xs p-4', otherProps.className);
+  const className = cn('flex bg-white text-xs p-4', otherProps.className);
   return React.createElement("div", {
     "data-taco": "calendar"
   }, React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
@@ -4100,18 +4058,14 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     firstDayOfWeek: 1,
     months: texts.calendar.months,
     weekdaysShort: texts.calendar.weekdaysShort,
-    navbarElement: function navbarElement(navProps) {
-      return React.createElement(Navbar, Object.assign({}, navProps, {
-        onMonthChange: setVisibleMonth,
-        value: visibleMonth
-      }));
-    },
+    navbarElement: navProps => React.createElement(Navbar, Object.assign({}, navProps, {
+      onMonthChange: setVisibleMonth,
+      value: visibleMonth
+    })),
     onDayClick: handleDayClick,
     onMonthChange: setVisibleMonth,
     onTodayButtonClick: handleCalendarClickToday,
-    captionElement: function captionElement() {
-      return null;
-    },
+    captionElement: () => null,
     todayButton: texts.calendar.actions.today,
     showOutsideDays: true,
     renderDay: renderDay,
@@ -4120,32 +4074,30 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   })));
 });
 
-var _excluded$4 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
-var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
-  var checked = props.checked,
-      highlighted = props.highlighted,
-      indeterminate = props.indeterminate,
-      invalid = props.invalid,
-      label = props.label,
-      onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
-
-  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
+const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
+  const {
+    checked,
+    highlighted,
+    indeterminate,
+    invalid,
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
     'mr-2': !!label,
     'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
     'border-grey text-blue-light cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
     'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
   });
-  var handleChange;
+  let handleChange;
 
   if (onChange) {
-    handleChange = function handleChange(checked) {
-      return onChange(checked === 'indeterminate' ? false : checked);
-    };
+    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
   }
 
-  var element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
+  const element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
@@ -4159,7 +4111,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   })));
 
   if (label) {
-    var labelClassName = cn('flex items-center cursor-pointer', {
+    const labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     }, props.className);
     return React.createElement("label", {
@@ -5045,27 +4997,26 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-var _excluded$5 = ["className", "dialog", "style"];
-var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
-  var externalClassName = props.className,
-      dialog = props.dialog,
-      style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
-
-  var _useCombobox = useCombobox(otherProps, ref),
-      combobox = _useCombobox.combobox,
-      button = _useCombobox.button,
-      input = _useCombobox.input,
-      popover = _useCombobox.popover,
-      list = _useCombobox.list;
-
-  var internalRef = React.useRef(null);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var selectDimensions = useBoundingClientRectListener(internalRef);
-  var className = cn('inline-flex relative', {
+const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
+  const {
+    className: externalClassName,
+    dialog,
+    style,
+    ...otherProps
+  } = props;
+  const {
+    combobox,
+    button,
+    input,
+    popover,
+    list
+  } = useCombobox(otherProps, ref);
+  const internalRef = React.useRef(null);
+  const {
+    texts
+  } = useLocalization();
+  const selectDimensions = useBoundingClientRectListener(internalRef);
+  const className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
   return React.createElement("span", {
@@ -5084,7 +5035,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
       appearance: "discrete",
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',
-      onClick: function onClick() {
+      onClick: () => {
         var _input$ref$current;
 
         popover.onOpenChange(true);
@@ -5095,7 +5046,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
       dialog: dialog,
-      onFocus: function onFocus(event) {
+      onFocus: event => {
         var _input$ref$current2;
 
         // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
@@ -5108,7 +5059,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     }) : undefined
   })))), React.createElement(PopoverPrimitive.Content, {
     align: "start",
-    onOpenAutoFocus: function onOpenAutoFocus(event) {
+    onOpenAutoFocus: event => {
       event.preventDefault();
     },
     sideOffset: 4
@@ -5719,14 +5670,12 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
 });
 Extra.displayName = 'DialogExtra';
 
-var _excluded$6 = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
-
-var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
-  return React.useMemo(function () {
-    var children = [];
-    var drawer;
-    var extra;
-    React.Children.toArray(initialChildren).forEach(function (child) {
+const useSeparatedChildren = initialChildren => {
+  return React.useMemo(() => {
+    const children = [];
+    let drawer;
+    let extra;
+    React.Children.toArray(initialChildren).forEach(child => {
       var _child$type, _child$type2;
 
       if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
@@ -5741,55 +5690,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   }, [initialChildren]);
 };
 
-var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
-  var initialChildren = props.children,
-      _props$closeOnEscape = props.closeOnEscape,
-      closeOnEscape = _props$closeOnEscape === void 0 ? true : _props$closeOnEscape,
-      defaultOpen = props.defaultOpen,
-      _props$draggable = props.draggable,
-      draggable = _props$draggable === void 0 ? false : _props$draggable,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      open = props.open,
-      _props$showCloseButto = props.showCloseButton,
-      showCloseButton = _props$showCloseButto === void 0 ? true : _props$showCloseButto,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'sm' : _props$size,
-      trigger = props.trigger,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
-
-  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
-      children = _useSeparatedChildren[0],
-      drawer = _useSeparatedChildren[1],
-      extra = _useSeparatedChildren[2];
-
-  var _React$useState = React.useState(false),
-      drawerOpen = _React$useState[0],
-      setDrawerOpen = _React$useState[1];
-
-  var context = React.useMemo(function () {
-    return {
-      closeOnEscape: closeOnEscape,
-      draggable: draggable,
-      drawer: {
-        open: drawerOpen,
-        toggle: function toggle() {
-          return setDrawerOpen(function (isDrawerOpen) {
-            return !isDrawerOpen;
-          });
-        }
-      },
-      elements: {
-        drawer: drawer,
-        extra: extra
-      },
-      onClose: onClose,
-      props: otherProps,
-      showCloseButton: showCloseButton,
-      size: size,
-      ref: ref
-    };
-  }, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
+const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
+  const {
+    children: initialChildren,
+    closeOnEscape = true,
+    defaultOpen,
+    draggable = false,
+    onChange,
+    onClose,
+    open,
+    showCloseButton = true,
+    size = 'sm',
+    trigger,
+    ...otherProps
+  } = props;
+  const [children, drawer, extra] = useSeparatedChildren(initialChildren);
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const context = React.useMemo(() => ({
+    closeOnEscape,
+    draggable,
+    drawer: {
+      open: drawerOpen,
+      toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
+    },
+    elements: {
+      drawer,
+      extra
+    },
+    onClose,
+    props: otherProps,
+    showCloseButton,
+    size,
+    ref
+  }), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
   return React.createElement(DialogContext.Provider, {
     value: context
   }, React.createElement(DialogPrimitive.Root, {
@@ -5806,19 +5739,18 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$7 = ["disabled", "children", "invalid", "message"];
-var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  var disabled = props.disabled,
-      children = props.children,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
-      message = props.message,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
-
-  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
+  const {
+    disabled,
+    children,
+    invalid = false,
+    message,
+    ...otherProps
+  } = props;
+  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
   }, props.className);
-  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
     'text-grey-darkest': !invalid,
     'text-red': invalid,
     'opacity-50': disabled
@@ -6386,20 +6318,20 @@ const Icon$1 = ({
 const getAppearanceClasses$2 = appearance => {
   switch (appearance) {
     case 'primary':
-      return 'wcag-blue aria-disabled:text-blue-dark focus:wcag-blue-light';
+      return 'wcag-blue aria-disabled:text-blue-dark hover:wcag-blue-light focus:wcag-blue-light';
 
     case 'danger':
-      return 'wcag-red aria-disabled:text-red-dark focus:wcag-red-light';
+      return 'wcag-red aria-disabled:text-red-dark hover:wcag-red-light focus:wcag-red-light';
 
     case 'ghost':
-      return 'text-blue aria-disabled:text-grey focus:wcag-blue';
+      return 'text-blue aria-disabled:text-grey hover:wcag-blue focus:wcag-blue';
 
     case 'discrete':
-      return 'text-black aria-disabled:text-grey focus:wcag-blue-lightest';
+      return 'text-black aria-disabled:text-grey hover:wcag-blue-lightest focus:wcag-blue-lightest';
 
     case 'default':
     default:
-      return 'wcag-grey-light aria-disabled:text-grey-darker focus:wcag-grey-dark';
+      return 'wcag-grey-light aria-disabled:text-grey-darker hover:wcag-grey-dark focus:wcag-grey-dark';
   }
 };