@carbon/react 1.0.0-rc.0 → 1.0.2

package/es/components/Tile/next/Tile.js

@@ -22,8 +22,8 @@ import { Enter, Space } from '../../../internal/keyboard/keys.js';
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 
 var _excluded = ["children", "className", "light"],
-    _excluded2 = ["children", "className", "clicked", "handleClick", "handleKeyDown", "href", "light", "onClick", "onKeyDown"],
-    _excluded3 = ["children", "className", "disabled", "handleClick", "handleKeyDown", "iconDescription", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
+    _excluded2 = ["children", "className", "clicked", "href", "light", "onClick", "onKeyDown"],
+    _excluded3 = ["children", "className", "disabled", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
     _excluded4 = ["tabIndex", "className", "children", "expanded", "tileMaxHeight", "tilePadding", "onClick", "onKeyUp", "tileCollapsedIconText", "tileExpandedIconText", "tileCollapsedLabel", "tileExpandedLabel", "light"];
 var Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
   var children = _ref.children,
@@ -64,11 +64,8 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
       className = _ref2.className,
       _ref2$clicked = _ref2.clicked,
       clicked = _ref2$clicked === void 0 ? false : _ref2$clicked,
-      handleClick = _ref2.handleClick,
-      handleKeyDown = _ref2.handleKeyDown,
       href = _ref2.href,
-      _ref2$light = _ref2.light,
-      light = _ref2$light === void 0 ? false : _ref2$light,
+      light = _ref2.light,
       _ref2$onClick = _ref2.onClick,
       onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
       _ref2$onKeyDown = _ref2.onKeyDown,
@@ -81,17 +78,12 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
   var _useState = useState(clicked),
       _useState2 = _slicedToArray(_useState, 2),
       isSelected = _useState2[0],
-      setIsSelected = _useState2[1]; // TODO: replace with onClick when handleClick prop is deprecated
-
-
-  var clickHandler = handleClick || onClick; // TODO: replace with onClick when handleClick prop is deprecated
-
-  var keyDownHandler = handleKeyDown || onKeyDown;
+      setIsSelected = _useState2[1];
 
   function handleOnClick(evt) {
     evt.persist();
     setIsSelected(!isSelected);
-    clickHandler(evt);
+    onClick(evt);
   }
 
   function handleOnKeyDown(evt) {
@@ -100,10 +92,10 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
-      keyDownHandler(evt);
+      onKeyDown(evt);
     }
 
-    keyDownHandler(evt);
+    onKeyDown(evt);
   }
 
   return /*#__PURE__*/React__default.createElement(Link, _extends({
@@ -131,16 +123,6 @@ ClickableTile.propTypes = {
    */
   clicked: PropTypes.bool,
 
-  /**
-   * Deprecated in v11. Use 'onClick' instead.
-   */
-  handleClick: deprecate(PropTypes.func, 'The handleClick prop for ClickableTile has been deprecated in favor of onClick. It will be removed in the next major release.'),
-
-  /**
-   * Specify the function to run when the ClickableTile is interacted with via a keyboard
-   */
-  handleKeyDown: deprecate(PropTypes.func, 'The handleKeyDown prop for ClickableTile has been deprecated in favor of onKeyDown. It will be removed in the next major release.'),
-
   /**
    * The href for the link.
    */
@@ -173,12 +155,8 @@ var SelectableTile = /*#__PURE__*/React__default.forwardRef(function SelectableT
   var children = _ref3.children,
       className = _ref3.className,
       disabled = _ref3.disabled,
-      handleClick = _ref3.handleClick,
-      handleKeyDown = _ref3.handleKeyDown;
-      _ref3.iconDescription;
-      var id = _ref3.id,
-      _ref3$light = _ref3.light,
-      light = _ref3$light === void 0 ? false : _ref3$light,
+      id = _ref3.id,
+      light = _ref3.light,
       name = _ref3.name,
       _ref3$onClick = _ref3.onClick,
       onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick,
@@ -196,11 +174,9 @@ var SelectableTile = /*#__PURE__*/React__default.forwardRef(function SelectableT
       value = _ref3$value === void 0 ? 'value' : _ref3$value,
       rest = _objectWithoutProperties(_ref3, _excluded3);
 
-  var prefix = usePrefix(); // TODO: replace with onClick when handleClick prop is deprecated
-
-  var clickHandler = handleClick || onClick; // TODO: replace with onKeyDown when handleKeyDown prop is deprecated
-
-  var keyDownHandler = handleKeyDown || onKeyDown;
+  var prefix = usePrefix();
+  var clickHandler = onClick;
+  var keyDownHandler = onKeyDown;
 
   var _useState3 = useState(selected),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -288,21 +264,6 @@ SelectableTile.propTypes = {
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Specify the function to run when the SelectableTile is clicked
-   */
-  handleClick: deprecate(PropTypes.func, 'The `handleClick` prop for `SelectableTile` has been deprecated in favor of `onClick`. It will be removed in the next major release.'),
-
-  /**
-   * Specify the function to run when the SelectableTile is interacted with via a keyboard
-   */
-  handleKeyDown: deprecate(PropTypes.func, 'The `handleKeyDown` prop for `SelectableTile` has been deprecated in favor of `onKeyDown`. It will be removed in the next major release.'),
-
-  /**
-   * The description of the checkmark icon.
-   */
-  iconDescription: deprecate(PropTypes.string, 'The `iconDescription` prop for `SelectableTile` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-
   /**
    * The ID of the `<input>`.
    */

package/es/components/TileGroup/index.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { createClassWrapper } from '../../internal/createClassWrapper.js';
+import TileGroup from './TileGroup.js';
+
+var index = createClassWrapper(TileGroup);
+
+export { index as default };

package/es/components/TimePickerSelect/next/TimePickerSelect.js

@@ -11,7 +11,6 @@ import React__default from 'react';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '../../../internal/usePrefix.js';
-import deprecate from '../../../prop-types/deprecate.js';
 
 var _excluded = ["aria-label", "children", "id", "disabled", "className"];
 var TimePickerSelect = /*#__PURE__*/React__default.forwardRef(function TimePickerSelect(_ref, ref) {
@@ -62,11 +61,6 @@ TimePickerSelect.propTypes = {
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Provide a description for the twistie icon that can be read by screen readers
-   */
-  iconDescription: deprecate(PropTypes.string, 'The `iconDescription` prop for `TimePickerSelect` is no longer needed and has ' + 'been deprecated. It will be moved in the next major release. Use "aria-label" instead'),
-
   /**
    * Specify a custom `id` for the `<select>`
    */

package/es/components/Toggletip/index.js

@@ -0,0 +1,252 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useRef, useState, useContext } from 'react';
+import { Popover, PopoverContent } from '../Popover/index.js';
+import { useWindowEvent } from '../../internal/useEvent.js';
+import { useId } from '../../internal/useId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+
+/**
+ * Used to render the label for a Toggletip
+ */
+
+function ToggletipLabel(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'span' : _ref$as,
+      children = _ref.children,
+      customClassName = _ref.className;
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--toggletip-label"), customClassName);
+  return /*#__PURE__*/React__default.createElement(BaseComponent, {
+    className: className
+  }, children);
+}
+
+ToggletipLabel.propTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string
+}; // Used to coordinate accessibility props between button and content along with
+// the actions to open and close the toggletip
+
+var ToggletipContext = /*#__PURE__*/React__default.createContext();
+
+function useToggletip() {
+  return useContext(ToggletipContext);
+}
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+
+
+function Toggletip(_ref2) {
+  var align = _ref2.align,
+      as = _ref2.as,
+      customClassName = _ref2.className,
+      children = _ref2.children,
+      _ref2$defaultOpen = _ref2.defaultOpen,
+      defaultOpen = _ref2$defaultOpen === void 0 ? false : _ref2$defaultOpen;
+  var ref = useRef();
+
+  var _useState = useState(defaultOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var prefix = usePrefix();
+  var id = useId();
+  var className = cx("".concat(prefix, "--toggletip"), customClassName, _defineProperty({}, "".concat(prefix, "--toggletip--open"), open));
+  var actions = {
+    toggle: function toggle() {
+      setOpen(!open);
+    },
+    close: function close() {
+      setOpen(false);
+    }
+  };
+  var value = {
+    buttonProps: {
+      'aria-expanded': open,
+      'aria-controls': id,
+      onClick: actions.toggle
+    },
+    contentProps: {
+      id: id
+    }
+  };
+
+  function onKeyDown(event) {
+    if (open && match(event, Escape)) {
+      actions.close();
+    }
+  }
+
+  useWindowEvent('click', function (event) {
+    if (open && !ref.current.contains(event.target)) {
+      actions.close();
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(ToggletipContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(Popover, {
+    align: align,
+    as: as,
+    caret: true,
+    className: className,
+    dropShadow: false,
+    highContrast: true,
+    open: open,
+    onKeyDown: onKeyDown,
+    ref: ref
+  }, children));
+}
+
+Toggletip.propTypes = {
+  /**
+   * Specify how the toggletip should align with the button
+   */
+  align: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if the toggletip should be open by default
+   */
+  defaultOpen: PropTypes.bool
+};
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+
+function ToggletipButton(_ref3) {
+  var children = _ref3.children,
+      customClassName = _ref3.className,
+      _ref3$label = _ref3.label,
+      label = _ref3$label === void 0 ? 'Show information' : _ref3$label;
+  var toggletip = useToggletip();
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--toggletip-button"), customClassName);
+  return /*#__PURE__*/React__default.createElement("button", _extends({}, toggletip.buttonProps, {
+    "aria-label": label,
+    type: "button",
+    className: className
+  }), children);
+}
+
+ToggletipButton.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide an accessible label for this button
+   */
+  label: PropTypes.string
+};
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+
+function ToggletipContent(_ref4) {
+  var children = _ref4.children,
+      customClassName = _ref4.className;
+  var toggletip = useToggletip();
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(PopoverContent, _extends({
+    className: customClassName
+  }, toggletip.contentProps), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--toggletip-content")
+  }, children));
+}
+
+ToggletipContent.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string
+};
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+
+function ToggletipActions(_ref5) {
+  var children = _ref5.children,
+      customClassName = _ref5.className;
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--toggletip-actions"), customClassName);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, children);
+}
+
+ToggletipActions.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string
+};
+
+export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel };

package/es/components/Tooltip/next/DefinitionTooltip.js

@@ -107,7 +107,7 @@ DefinitionTooltip.propTypes = {
   id: PropTypes.string,
 
   /**
-   * [Deprecated] Please use the `definition` prop instead.
+   * [Deprecated in v11] Please use the `definition` prop instead.
    *
    * Provide the text that will be displayed in the tooltip when it is rendered.
    */

package/es/index.js

@@ -18,7 +18,7 @@ export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSni
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
 export { default as ComboBox } from './components/ComboBox/ComboBox.js';
 export { ModalFooter, ModalHeader } from './components/ComposedModal/index.js';
-export { default as ContentSwitcher } from './components/ContentSwitcher/ContentSwitcher.js';
+export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
@@ -74,16 +74,11 @@ export { default as TextArea } from './components/TextArea/TextArea.js';
 import './components/TextInput/index.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/index.js';
 export { default as RadioTile } from './components/RadioTile/RadioTile.js';
-export { default as TileGroup } from './components/TileGroup/TileGroup.js';
+export { default as TileGroup } from './components/TileGroup/index.js';
 export { default as TimePicker } from './components/TimePicker/index.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/index.js';
 export { default as Toggle } from './components/Toggle/index.js';
-export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
-export { default as ToggleSmall } from './components/ToggleSmall/ToggleSmall.js';
-export { default as Toolbar, ToolbarDivider, ToolbarItem, ToolbarOption, ToolbarTitle } from './components/Toolbar/Toolbar.js';
-export { default as ToolbarSearch } from './components/ToolbarSearch/ToolbarSearch.js';
-export { default as TooltipDefinition } from './components/TooltipDefinition/TooltipDefinition.js';
-export { default as TooltipIcon } from './components/TooltipIcon/TooltipIcon.js';
+export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
@@ -99,6 +94,7 @@ export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.j
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
+export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
 export { HeaderNavigation, SideNavMenu } from './components/UIShell/index.js';
@@ -161,8 +157,8 @@ export { default as TableToolbarMenu } from './components/DataTable/TableToolbar
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary.js';
 export { ErrorBoundaryContext } from './components/ErrorBoundary/ErrorBoundaryContext.js';
 export { Grid } from './components/Grid/Grid.js';
-export { ColumnHang as unstable_ColumnHang } from './components/Grid/ColumnHang.js';
-export { FlexGrid as unstable_FlexGrid } from './components/Grid/FlexGrid.js';
+export { ColumnHang } from './components/Grid/ColumnHang.js';
+export { FlexGrid } from './components/Grid/FlexGrid.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';

package/es/internal/useEvent.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useRef, useEffect } from 'react';
+
+function useWindowEvent(eventName, callback) {
+  var savedCallback = useRef(null);
+  useEffect(function () {
+    savedCallback.current = callback;
+  });
+  useEffect(function () {
+    function handler(event) {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    }
+
+    window.addEventListener(eventName, handler);
+    return function () {
+      window.removeEventListener(eventName, handler);
+    };
+  }, [eventName]);
+}
+
+export { useWindowEvent };

package/icons/package.json

@@ -1,4 +1,5 @@
 {
   "main": "lib/index.js",
-  "module": "es/index.js"
+  "module": "es/index.js",
+  "sideEffects": false
 }

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -15,7 +15,6 @@ var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var SkeletonText = require('../SkeletonText/SkeletonText.js');
-var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -84,12 +83,7 @@ AccordionSkeleton.propTypes = {
   /**
    * `false` to not display the first item opened
    */
-  open: PropTypes__default["default"].bool,
-
-  /**
-   * Set unique identifier to generate unique item keys
-   */
-  uid: deprecate["default"](PropTypes__default["default"].any)
+  open: PropTypes__default["default"].bool
 };
 AccordionSkeleton.defaultProps = {
   open: true,

package/lib/components/Accordion/AccordionItem.js

@@ -150,11 +150,6 @@ AccordionItem.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
-  /**
-   * The description of the expand icon.
-   */
-  iconDescription: deprecate["default"](PropTypes__default["default"].string, 'The `iconDescription` prop has been deprecated as it is no longer ' + 'required. Feel free to remove this prop from <AccordionItem>. This ' + 'prop will be removed in the next major release of ' + '`carbon-components-react`'),
-
   /**
    * The handler of the massaged `click` event.
    */

package/lib/components/Button/Button.Skeleton.js

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
 
@@ -55,9 +54,8 @@ var ButtonSkeleton = function ButtonSkeleton(_ref) {
       size = _ref$size === void 0 ? FeatureFlags__namespace.enabled('enable-v11-release') ? 'lg' : 'default' : _ref$size,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
-  var enabled = index.useFeatureFlag('enable-v11-release');
   var prefix = usePrefix.usePrefix();
-  var buttonClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--sm"), small || size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--lg"), enabled ? size === 'xl' : size === 'lg'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--xl"), enabled ? size === '2xl' : size === 'xl'), _cx));
+  var buttonClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--sm"), small || size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--xl"), size === 'xl'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--2xl"), size === '2xl'), _cx));
 
   var commonProps = _rollupPluginBabelHelpers.objectSpread2({
     className: buttonClasses