@razorpay/blade 11.7.0 → 11.8.0

package/build/lib/web/development/components/ButtonGroup/ButtonGroup.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.web.js","sources":["../../../../../../src/components/ButtonGroup/ButtonGroup.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport styled from 'styled-components';\nimport type { ButtonGroupProps } from './types';\nimport { StyledButtonGroup } from './StyledButtonGroup';\nimport { ButtonGroupProvider } from './ButtonGroupContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeBorderSize } from '~utils';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport getIn from '~utils/lodashButBetter/get';\nimport { getBackgroundColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { Theme } from '~components/BladeProvider';\nimport { throwBladeError } from '~utils/logger';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\n\nconst getDividerColorToken = ({\n  color,\n  variant,\n  isDisabled,\n}: Pick<ButtonGroupProps, 'color' | 'isDisabled' | 'variant'>): DotNotationToken<\n  Theme['colors']\n> => {\n  if (variant === 'primary') {\n    return 'surface.border.gray.subtle';\n  }\n\n  if (variant === 'secondary') {\n    return getBackgroundColorToken({\n      property: 'border',\n      variant,\n      color,\n      state: isDisabled ? 'disabled' : 'default',\n    });\n  }\n\n  return 'surface.border.gray.muted';\n};\n\nconst StyledDivider = styled(BaseBox)<Pick<ButtonGroupProps, 'color' | 'isDisabled' | 'variant'>>(\n  ({ theme, color, variant, isDisabled }) => {\n    return {\n      borderWidth: 0,\n      borderLeftStyle: 'solid',\n      borderLeftWidth: makeBorderSize(theme.border.width.thin),\n      alignSelf: 'stretch',\n      color: getIn(theme.colors, getDividerColorToken({ color, variant, isDisabled })),\n    };\n  },\n);\n\nconst _ButtonGroup = ({\n  children,\n  isDisabled = false,\n  size = 'medium',\n  color = 'primary',\n  variant = 'primary',\n  isFullWidth = false,\n  testID,\n  ...styledProps\n}: ButtonGroupProps): React.ReactElement => {\n  const contextValue = {\n    isDisabled,\n    size,\n    color,\n    variant,\n    isFullWidth,\n  };\n\n  return (\n    <ButtonGroupProvider value={contextValue}>\n      <StyledButtonGroup\n        color={color}\n        variant={variant}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        {...metaAttribute({ name: MetaConstants.ButtonGroup, testID })}\n        {...getStyledProps(styledProps)}\n        role=\"group\"\n      >\n        {React.Children.map(children, (child, index) => {\n          if (__DEV__) {\n            // throw error if child is not a button or dropdown with button trigger\n            /* eslint-disable no-restricted-properties */\n            if (\n              !isValidAllowedChildren(child, 'Button') &&\n              !(\n                isValidAllowedChildren(child, 'Dropdown') &&\n                (child as ReactElement).props.children.some((c: ReactElement) =>\n                  isValidAllowedChildren(c, 'DropdownButton'),\n                )\n              )\n            ) {\n              throwBladeError({\n                moduleName: 'ButtonGroup',\n                message: `Only \"Button\" or \"Dropdown\" component with Button trigger are allowed as children.`,\n              });\n            }\n            /* eslint-enable no-restricted-properties */\n          }\n\n          return (\n            <>\n              {child}\n              {React.Children.count(children) - 1 !== index && (\n                <StyledDivider variant={variant} color={color} isDisabled={isDisabled} />\n              )}\n            </>\n          );\n        })}\n      </StyledButtonGroup>\n    </ButtonGroupProvider>\n  );\n};\n\n/**\n * ### ButtonGroup Component\n * \n * The ButtonGroup component is used to group related buttons together.\n * \n * ---\n * \n * #### Usage\n * \n * ```jsx\n  const App = () => {\n    return (\n      <ButtonGroup>\n        <Button icon={RefreshIcon}>Sync</Button>\n        <Button icon={ShareIcon}>Share</Button>\n        <Button icon={DownloadIcon}>Download</Button>\n      </ButtonGroup>\n    );\n  }\n * ```\n *\n *  ---\n *\n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-buttongroup FileUpload Documentation}\n * \n */\nconst ButtonGroup = assignWithoutSideEffects(_ButtonGroup, {\n  displayName: 'ButtonGroup',\n  componentId: 'ButtonGroup',\n});\n\nexport { ButtonGroup };\nexport type { ButtonGroupProps };\n"],"names":["getDividerColorToken","_ref","color","variant","isDisabled","getBackgroundColorToken","property","state","StyledDivider","styled","BaseBox","withConfig","displayName","componentId","_ref2","theme","borderWidth","borderLeftStyle","borderLeftWidth","makeBorderSize","border","width","thin","alignSelf","getIn","colors","_ButtonGroup","_ref3","children","_ref3$isDisabled","_ref3$size","size","_ref3$color","_ref3$variant","_ref3$isFullWidth","isFullWidth","testID","styledProps","_objectWithoutProperties","_excluded","contextValue","_jsx","ButtonGroupProvider","value","StyledButtonGroup","_objectSpread","metaAttribute","name","MetaConstants","ButtonGroup","getStyledProps","role","React","Children","map","child","index","isValidAllowedChildren","props","some","c","throwBladeError","moduleName","message","_jsxs","_Fragment","count","assignWithoutSideEffects"],"mappings":"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"}

package/build/lib/web/development/components/ButtonGroup/ButtonGroupContext.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+var ButtonGroupContext = /*#__PURE__*/React__default.createContext({});
+var ButtonGroupProvider = ButtonGroupContext.Provider;
+var useButtonGroupContext = function useButtonGroupContext() {
+  var context = React__default.useContext(ButtonGroupContext);
+  return context;
+};
+
+export { ButtonGroupProvider, useButtonGroupContext };
+//# sourceMappingURL=ButtonGroupContext.js.map

package/build/lib/web/development/components/ButtonGroup/ButtonGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroupContext.js","sources":["../../../../../../src/components/ButtonGroup/ButtonGroupContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { ButtonGroupContextType } from './types';\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextType>({});\nconst ButtonGroupProvider = ButtonGroupContext.Provider;\n\nconst useButtonGroupContext = (): ButtonGroupContextType => {\n  const context = React.useContext(ButtonGroupContext);\n  return context;\n};\n\nexport { useButtonGroupContext, ButtonGroupProvider };\n"],"names":["ButtonGroupContext","React","createContext","ButtonGroupProvider","Provider","useButtonGroupContext","context","useContext"],"mappings":";;AAGA,IAAMA,kBAAkB,gBAAGC,cAAK,CAACC,aAAa,CAAyB,EAAE,CAAC,CAAA;AAC1E,IAAMC,mBAAmB,GAAGH,kBAAkB,CAACI,SAAQ;AAEvD,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,GAAiC;AAC1D,EAAA,IAAMC,OAAO,GAAGL,cAAK,CAACM,UAAU,CAACP,kBAAkB,CAAC,CAAA;AACpD,EAAA,OAAOM,OAAO,CAAA;AAChB;;;;"}

package/build/lib/web/development/components/ButtonGroup/StyledButtonGroup.js

@@ -0,0 +1,47 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import styled from 'styled-components';
+import '../Box/BaseBox/index.js';
+import '../../utils/index.js';
+import { getBackgroundColorToken } from '../Button/BaseButton/BaseButton.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledButtonGroup = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "StyledButtonGroup",
+  componentId: "gr4xbj-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    isDisabled = _ref.isDisabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    color = _ref.color,
+    isFullWidth = _ref.isFullWidth;
+  return _objectSpread(_objectSpread({
+    display: 'flex',
+    width: isFullWidth ? '100%' : 'fit-content',
+    overflow: 'hidden',
+    borderRadius: makeBorderSize(theme.border.radius.medium)
+  }, variant === 'secondary' && {
+    borderColor: getIn(theme.colors, getBackgroundColorToken({
+      property: 'border',
+      variant: variant,
+      color: color,
+      state: isDisabled ? 'disabled' : 'default'
+    })),
+    borderStyle: 'solid',
+    borderWidth: makeBorderSize(theme.border.width.thin)
+  }), {}, {
+    'button[role="button"]': {
+      borderRadius: 0,
+      border: 'none',
+      width: 'max-content',
+      flex: isFullWidth ? 1 : 'auto'
+    }
+  });
+});
+
+export { StyledButtonGroup };
+//# sourceMappingURL=StyledButtonGroup.js.map

package/build/lib/web/development/components/ButtonGroup/StyledButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledButtonGroup.js","sources":["../../../../../../src/components/ButtonGroup/StyledButtonGroup.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledButtonGroupProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize } from '~utils';\nimport { getBackgroundColorToken } from '~components/Button/BaseButton/BaseButton';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst StyledButtonGroup = styled(BaseBox)<StyledButtonGroupProps>(\n  ({ theme, isDisabled, variant = 'primary', color, isFullWidth }) => {\n    return {\n      display: 'flex',\n      width: isFullWidth ? '100%' : 'fit-content',\n      overflow: 'hidden',\n      borderRadius: makeBorderSize(theme.border.radius.medium),\n\n      ...(variant === 'secondary' && {\n        borderColor: getIn(\n          theme.colors,\n          getBackgroundColorToken({\n            property: 'border',\n            variant,\n            color,\n            state: isDisabled ? 'disabled' : 'default',\n          }),\n        ),\n        borderStyle: 'solid',\n        borderWidth: makeBorderSize(theme.border.width.thin),\n      }),\n\n      'button[role=\"button\"]': {\n        borderRadius: 0,\n        border: 'none',\n        width: 'max-content',\n        flex: isFullWidth ? 1 : 'auto',\n      },\n    };\n  },\n);\n\nexport { StyledButtonGroup };\n"],"names":["StyledButtonGroup","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","isDisabled","_ref$variant","variant","color","isFullWidth","_objectSpread","display","width","overflow","borderRadius","makeBorderSize","border","radius","medium","borderColor","getIn","colors","getBackgroundColorToken","property","state","borderStyle","borderWidth","thin","flex"],"mappings":";;;;;;;;;;;AAOA,IAAMA,iBAAiB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mBAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CACvC,CAAA,CAAA,UAAAC,IAAA,EAAoE;AAAA,EAAA,IAAjEC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAAC,YAAA,GAAAH,IAAA,CAAEI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,YAAA;IAAEE,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAEC,WAAW,GAAAN,IAAA,CAAXM,WAAW,CAAA;EAC3D,OAAAC,aAAA,CAAAA,aAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,KAAK,EAAEH,WAAW,GAAG,MAAM,GAAG,aAAa;AAC3CI,IAAAA,QAAQ,EAAE,QAAQ;IAClBC,YAAY,EAAEC,cAAc,CAACX,KAAK,CAACY,MAAM,CAACC,MAAM,CAACC,MAAM,CAAA;GAEnDX,EAAAA,OAAO,KAAK,WAAW,IAAI;IAC7BY,WAAW,EAAEC,KAAK,CAChBhB,KAAK,CAACiB,MAAM,EACZC,uBAAuB,CAAC;AACtBC,MAAAA,QAAQ,EAAE,QAAQ;AAClBhB,MAAAA,OAAO,EAAPA,OAAO;AACPC,MAAAA,KAAK,EAALA,KAAK;AACLgB,MAAAA,KAAK,EAAEnB,UAAU,GAAG,UAAU,GAAG,SAAA;AACnC,KAAC,CACH,CAAC;AACDoB,IAAAA,WAAW,EAAE,OAAO;IACpBC,WAAW,EAAEX,cAAc,CAACX,KAAK,CAACY,MAAM,CAACJ,KAAK,CAACe,IAAI,CAAA;GACpD,CAAA,EAAA,EAAA,EAAA;AAED,IAAA,uBAAuB,EAAE;AACvBb,MAAAA,YAAY,EAAE,CAAC;AACfE,MAAAA,MAAM,EAAE,MAAM;AACdJ,MAAAA,KAAK,EAAE,aAAa;AACpBgB,MAAAA,IAAI,EAAEnB,WAAW,GAAG,CAAC,GAAG,MAAA;AAC1B,KAAA;AAAC,GAAA,CAAA,CAAA;AAEL,CAAC;;;;"}

package/build/lib/web/development/components/ButtonGroup/index.js

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/development/components/ButtonGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/development/components/index.js

@@ -9,6 +9,7 @@ import './Breadcrumb/index.js';
 import './Box/index.js';
 import './Button/index.js';
 import './Button/IconButton/index.js';
+import './ButtonGroup/index.js';
 import './Card/index.js';
 import './Carousel/index.js';
 import './Checkbox/index.js';
@@ -67,6 +68,7 @@ export { BreadcrumbItem } from './Breadcrumb/BreadcrumbItem.web.js';
 export { Box } from './Box/Box.js';
 export { default as Button } from './Button/Button/Button.js';
 export { IconButton } from './Button/IconButton/IconButton.js';
+export { ButtonGroup } from './ButtonGroup/ButtonGroup.web.js';
 export { Card, CardBody, ComponentIds } from './Card/Card.js';
 export { CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing } from './Card/CardHeader.js';
 export { CardFooter, CardFooterLeading, CardFooterTrailing } from './Card/CardFooter.js';

package/build/lib/web/development/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/web/development/utils/metaAttribute/metaConstants.js

@@ -15,6 +15,7 @@ var MetaConstants = {
   BaseBox: 'base-box',
   BaseText: 'base-text',
   Button: 'button',
+  ButtonGroup: 'button-group',
   Breadcrumb: 'breadcrumb',
   BreadcrumbItem: 'breadcrumb-item',
   Carousel: 'carousel',

package/build/lib/web/development/utils/metaAttribute/metaConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"metaConstants.js","sources":["../../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n  Accordion: 'accordion',\n  AccordionButton: 'accordion-button',\n  AccordionItem: 'accordion-item',\n  AccordionItemHeader: 'accordion-item-header',\n  AccordionItemBody: 'accordion-item-body',\n  ActionList: 'action-list',\n  ActionListItem: 'action-list-item',\n  ActionListSection: 'action-list-section',\n  Alert: 'alert',\n  Amount: 'amount',\n  AutoComplete: 'autocomplete',\n  Badge: 'badge',\n  Box: 'box',\n  BaseBox: 'base-box',\n  BaseText: 'base-text',\n  Button: 'button',\n  Breadcrumb: 'breadcrumb',\n  BreadcrumbItem: 'breadcrumb-item',\n  Carousel: 'carousel',\n  Checkbox: 'checkbox',\n  CheckboxGroup: 'checkbox-group',\n  CheckboxLabel: 'checkbox-label',\n  Chip: 'chip',\n  ChipGroup: 'chip-group',\n  ChipLabel: 'chip-label',\n  Code: 'code',\n  Component: 'blade-component',\n  Counter: 'counter',\n  Display: 'display',\n  Divider: 'divider',\n  Drawer: 'drawer',\n  Dropdown: 'dropdown',\n  DropdownOverlay: 'dropdown-overlay',\n  DropdownFooter: 'dropdown-footer',\n  DropdownHeader: 'dropdown-header',\n  FileUpload: 'file-upload',\n  FileUploadItem: 'file-upload-item',\n  FileUploadLabel: 'file-upload-label',\n  Icon: 'icon',\n  IconButton: 'icon-button',\n  Indicator: 'indicator',\n  Link: 'link',\n  List: 'list',\n  ListItem: 'list-item',\n  ListItemCode: 'list-item-code',\n  ListItemLink: 'list-item-link',\n  ListItemText: 'list-item-text',\n  OTPInput: 'otp-input',\n  PasswordInput: 'password-input',\n  TextArea: 'textarea',\n  TextInput: 'textinput',\n  Toast: 'toast',\n  ToastContainer: 'toast-container',\n  ProgressBar: 'progress-bar',\n  Radio: 'radio',\n  RadioGroup: 'radio-group',\n  RadioLabel: 'radio-label',\n  SkipNav: 'skipnav',\n  Spinner: 'spinner',\n  SelectInput: 'select-input',\n  Tag: 'tag',\n  Tooltip: 'tooltip',\n  TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n  Tabs: 'tabs',\n  TabList: 'tab-list',\n  TabItem: 'tab-item',\n  TabPanel: 'tab-panel',\n  TabIndicator: 'tab-indicator',\n  Table: 'table',\n  TableBody: 'table-body',\n  TableRow: 'table-row',\n  TableCell: 'table-cell',\n  TableHeader: 'table-header',\n  TableHeaderRow: 'table-header-row',\n  TableHeaderCell: 'table-header-cell',\n  TableFooter: 'table-footer',\n  TableFooterRow: 'table-footer-row',\n  TableFooterCell: 'table-footer-cell',\n  TableElement: 'table-element',\n  TourPopover: 'tour-popover',\n  TourMask: 'tour-mask',\n  Popover: 'popover',\n  PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n  BottomSheet: 'bottom-sheet',\n  BottomSheetBody: 'bottom-sheet-body',\n  BottomSheetHeader: 'bottom-sheet-header',\n  BottomSheetFooter: 'bottom-sheet-footer',\n  BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n  Card: 'card',\n  CardBody: 'card-body',\n  CardHeader: 'card-header',\n  CardFooter: 'card-footer',\n  Collapsible: 'collapsible',\n  CollapsibleBody: 'collapsible-body',\n  CollapsibleButton: 'collapsible-button',\n  CollapsibleLink: 'collapsible-link',\n  Modal: 'modal',\n  ModalBody: 'modal-body',\n  ModalHeader: 'modal-header',\n  ModalFooter: 'modal-footer',\n  ModalBackdrop: 'modal-backdrop',\n  ModalScrollOverlay: 'modal-scroll-overlay',\n  VisuallyHidden: 'visually-hidden',\n  FormLabel: 'form-label',\n  Switch: 'switch',\n  SwitchLabel: 'switch-label',\n  StyledBaseInput: 'styled-base-input',\n  Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","AccordionItemHeader","AccordionItemBody","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","Breadcrumb","BreadcrumbItem","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Drawer","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","FileUpload","FileUploadItem","FileUploadLabel","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"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"}
+{"version":3,"file":"metaConstants.js","sources":["../../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n  Accordion: 'accordion',\n  AccordionButton: 'accordion-button',\n  AccordionItem: 'accordion-item',\n  AccordionItemHeader: 'accordion-item-header',\n  AccordionItemBody: 'accordion-item-body',\n  ActionList: 'action-list',\n  ActionListItem: 'action-list-item',\n  ActionListSection: 'action-list-section',\n  Alert: 'alert',\n  Amount: 'amount',\n  AutoComplete: 'autocomplete',\n  Badge: 'badge',\n  Box: 'box',\n  BaseBox: 'base-box',\n  BaseText: 'base-text',\n  Button: 'button',\n  ButtonGroup: 'button-group',\n  Breadcrumb: 'breadcrumb',\n  BreadcrumbItem: 'breadcrumb-item',\n  Carousel: 'carousel',\n  Checkbox: 'checkbox',\n  CheckboxGroup: 'checkbox-group',\n  CheckboxLabel: 'checkbox-label',\n  Chip: 'chip',\n  ChipGroup: 'chip-group',\n  ChipLabel: 'chip-label',\n  Code: 'code',\n  Component: 'blade-component',\n  Counter: 'counter',\n  Display: 'display',\n  Divider: 'divider',\n  Drawer: 'drawer',\n  Dropdown: 'dropdown',\n  DropdownOverlay: 'dropdown-overlay',\n  DropdownFooter: 'dropdown-footer',\n  DropdownHeader: 'dropdown-header',\n  FileUpload: 'file-upload',\n  FileUploadItem: 'file-upload-item',\n  FileUploadLabel: 'file-upload-label',\n  Icon: 'icon',\n  IconButton: 'icon-button',\n  Indicator: 'indicator',\n  Link: 'link',\n  List: 'list',\n  ListItem: 'list-item',\n  ListItemCode: 'list-item-code',\n  ListItemLink: 'list-item-link',\n  ListItemText: 'list-item-text',\n  OTPInput: 'otp-input',\n  PasswordInput: 'password-input',\n  TextArea: 'textarea',\n  TextInput: 'textinput',\n  Toast: 'toast',\n  ToastContainer: 'toast-container',\n  ProgressBar: 'progress-bar',\n  Radio: 'radio',\n  RadioGroup: 'radio-group',\n  RadioLabel: 'radio-label',\n  SkipNav: 'skipnav',\n  Spinner: 'spinner',\n  SelectInput: 'select-input',\n  Tag: 'tag',\n  Tooltip: 'tooltip',\n  TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n  Tabs: 'tabs',\n  TabList: 'tab-list',\n  TabItem: 'tab-item',\n  TabPanel: 'tab-panel',\n  TabIndicator: 'tab-indicator',\n  Table: 'table',\n  TableBody: 'table-body',\n  TableRow: 'table-row',\n  TableCell: 'table-cell',\n  TableHeader: 'table-header',\n  TableHeaderRow: 'table-header-row',\n  TableHeaderCell: 'table-header-cell',\n  TableFooter: 'table-footer',\n  TableFooterRow: 'table-footer-row',\n  TableFooterCell: 'table-footer-cell',\n  TableElement: 'table-element',\n  TourPopover: 'tour-popover',\n  TourMask: 'tour-mask',\n  Popover: 'popover',\n  PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n  BottomSheet: 'bottom-sheet',\n  BottomSheetBody: 'bottom-sheet-body',\n  BottomSheetHeader: 'bottom-sheet-header',\n  BottomSheetFooter: 'bottom-sheet-footer',\n  BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n  Card: 'card',\n  CardBody: 'card-body',\n  CardHeader: 'card-header',\n  CardFooter: 'card-footer',\n  Collapsible: 'collapsible',\n  CollapsibleBody: 'collapsible-body',\n  CollapsibleButton: 'collapsible-button',\n  CollapsibleLink: 'collapsible-link',\n  Modal: 'modal',\n  ModalBody: 'modal-body',\n  ModalHeader: 'modal-header',\n  ModalFooter: 'modal-footer',\n  ModalBackdrop: 'modal-backdrop',\n  ModalScrollOverlay: 'modal-scroll-overlay',\n  VisuallyHidden: 'visually-hidden',\n  FormLabel: 'form-label',\n  Switch: 'switch',\n  SwitchLabel: 'switch-label',\n  StyledBaseInput: 'styled-base-input',\n  Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","AccordionItemHeader","AccordionItemBody","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","ButtonGroup","Breadcrumb","BreadcrumbItem","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Drawer","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","FileUpload","FileUploadItem","FileUploadLabel","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"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"}

package/build/lib/web/production/components/Button/BaseButton/AnimatedButtonContent.web.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import getIn from '../../../utils/lodashButBetter/get.js';
+import '../../Box/BaseBox/index.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+
+var AnimatedButtonContent = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "AnimatedButtonContentweb__AnimatedButtonContent",
+  componentId: "sc-1fkx0t6-0"
+})(function (props) {
+  return {
+    transform: "scale(".concat(props.isPressed ? '0.95' : '1', ")"),
+    transitionDuration: getIn(props.theme.motion, props.motionEasing),
+    transitionTimingFunction: getIn(props.theme.motion, props.motionDuration)
+  };
+});
+
+export { AnimatedButtonContent as default };
+//# sourceMappingURL=AnimatedButtonContent.web.js.map

package/build/lib/web/production/components/Button/BaseButton/AnimatedButtonContent.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedButtonContent.web.js","sources":["../../../../../../../src/components/Button/BaseButton/AnimatedButtonContent.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { AnimatedButtonContentProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst AnimatedButtonContent = styled(BaseBox)<AnimatedButtonContentProps>((props) => {\n  return {\n    transform: `scale(${props.isPressed ? '0.95' : '1'})`,\n    transitionDuration: getIn(props.theme.motion, props.motionEasing),\n    transitionTimingFunction: getIn(props.theme.motion, props.motionDuration),\n  };\n});\n\nexport default AnimatedButtonContent;\n"],"names":["AnimatedButtonContent","styled","BaseBox","withConfig","displayName","componentId","props","transform","concat","isPressed","transitionDuration","getIn","theme","motion","motionEasing","transitionTimingFunction","motionDuration"],"mappings":";;;;;AAKA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iDAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAA6B,CAAA,CAAA,UAACC,KAAK,EAAK;EACnF,OAAO;IACLC,SAAS,EAAA,QAAA,CAAAC,MAAA,CAAWF,KAAK,CAACG,SAAS,GAAG,MAAM,GAAG,GAAG,EAAG,GAAA,CAAA;AACrDC,IAAAA,kBAAkB,EAAEC,KAAK,CAACL,KAAK,CAACM,KAAK,CAACC,MAAM,EAAEP,KAAK,CAACQ,YAAY,CAAC;IACjEC,wBAAwB,EAAEJ,KAAK,CAACL,KAAK,CAACM,KAAK,CAACC,MAAM,EAAEP,KAAK,CAACU,cAAc,CAAA;GACzE,CAAA;AACH,CAAC;;;;"}

package/build/lib/web/production/components/Button/BaseButton/BaseButton.js

@@ -1,11 +1,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import styled from 'styled-components';
 import StyledBaseButton from './StyledBaseButton.web.js';
 import { backgroundColor, textColor, buttonIconOnlySizeToIconSizeMap, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, buttonIconPadding, buttonIconOnlyPadding, buttonPadding, typography } from './buttonTokens.js';
+import AnimatedButtonContent from './AnimatedButtonContent.web.js';
 import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/index.js';
+import { useButtonGroupContext } from '../../ButtonGroup/ButtonGroupContext.js';
 import '../../Box/styledProps/index.js';
 import '../../Typography/BaseText/index.js';
 import '../../BladeProvider/index.js';
@@ -21,7 +24,7 @@ import '../../../utils/makeSpace/index.js';
 import '../../../utils/metaAttribute/index.js';
 import '../../../utils/getStringChildren/index.js';
 import '../../../utils/logger/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
 import { throwBladeError } from '../../../utils/logger/logger.js';
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
@@ -101,7 +104,7 @@ var getProps = function getProps(_ref3) {
   if (variant === 'tertiary' && color !== 'primary' && color !== 'white') {
     throwBladeError({
       moduleName: 'BaseButton',
-      message: "Tertiary variant can only be used with color: \"default\" or \"white\" but received \"".concat(color, "\"")
+      message: "Tertiary variant can only be used with color: \"primary\" or \"white\" but received \"".concat(color, "\"")
     });
   }
   var isIconOnly = hasIcon && (!children || (children === null || children === void 0 ? void 0 : children.trim().length) === 0);
@@ -215,6 +218,7 @@ var ButtonContent = /*#__PURE__*/styled(BaseBox).withConfig({
   };
 });
 var _BaseButton = function _BaseButton(_ref5, ref) {
+  var _buttonGroupProps$isD, _buttonGroupProps$siz, _buttonGroupProps$var, _buttonGroupProps$col, _buttonGroupProps$isF;
   var href = _ref5.href,
     target = _ref5.target,
     rel = _ref5.rel,
@@ -235,7 +239,7 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
     isLoading = _ref5$isLoading === void 0 ? false : _ref5$isLoading,
     onClick = _ref5.onClick,
     onBlur = _ref5.onBlur,
-    onKeyDown = _ref5.onKeyDown,
+    _onKeyDown = _ref5.onKeyDown,
     _ref5$type = _ref5.type,
     type = _ref5$type === void 0 ? 'button' : _ref5$type,
     children = _ref5.children,
@@ -246,15 +250,20 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
     onPointerDown = _ref5.onPointerDown,
     onPointerEnter = _ref5.onPointerEnter,
     accessibilityProps = _ref5.accessibilityProps,
-    onTouchEnd = _ref5.onTouchEnd,
-    onTouchStart = _ref5.onTouchStart,
+    _onTouchEnd = _ref5.onTouchEnd,
+    _onTouchStart = _ref5.onTouchStart,
     rest = _objectWithoutProperties(_ref5, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
+  var buttonGroupProps = useButtonGroupContext();
+  var _React$useState = React__default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isPressed = _React$useState2[0],
+    setIsPressed = _React$useState2[1];
   var isLink = Boolean(href);
   var childrenString = getStringFromReactText(children);
   // Button cannot be disabled when its rendered as Link
-  var disabled = isLoading || isDisabled && !isLink;
+  var disabled = (_buttonGroupProps$isD = buttonGroupProps.isDisabled) !== null && _buttonGroupProps$isD !== void 0 ? _buttonGroupProps$isD : isLoading || isDisabled && !isLink;
   if (false) {
     if (!Icon && !(childrenString !== null && childrenString !== void 0 && childrenString.trim())) {
       throwBladeError({
@@ -272,10 +281,10 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
       buttonTypographyTokens: typography,
       children: childrenString,
       isDisabled: disabled,
-      size: size,
-      variant: variant,
+      size: (_buttonGroupProps$siz = buttonGroupProps.size) !== null && _buttonGroupProps$siz !== void 0 ? _buttonGroupProps$siz : size,
+      variant: (_buttonGroupProps$var = buttonGroupProps.variant) !== null && _buttonGroupProps$var !== void 0 ? _buttonGroupProps$var : variant,
       theme: theme,
-      color: color,
+      color: (_buttonGroupProps$col = buttonGroupProps.color) !== null && _buttonGroupProps$col !== void 0 ? _buttonGroupProps$col : color,
       hasIcon: Boolean(Icon)
     }),
     defaultBorderColor = _getProps.defaultBorderColor,
@@ -306,7 +315,27 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
     return getRenderElement(href);
   }, [href]);
   var defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
-  return /*#__PURE__*/jsxs(StyledBaseButton, _objectSpread(_objectSpread(_objectSpread({
+  var handlePointerPressedIn = React__default.useCallback(function () {
+    if (disabled) return;
+    setIsPressed(true);
+  }, [disabled]);
+  var handlePointerPressedOut = React__default.useCallback(function () {
+    if (disabled) return;
+    setIsPressed(false);
+  }, [disabled]);
+  var handleKeyboardPressedIn = React__default.useCallback(function (e) {
+    if (disabled) return;
+    if (e.key === ' ' || e.key === 'Enter') {
+      setIsPressed(true);
+    }
+  }, [disabled]);
+  var handleKeyboardPressedOut = React__default.useCallback(function (e) {
+    if (disabled) return;
+    if (e.key === ' ' || e.key === 'Enter') {
+      setIsPressed(false);
+    }
+  }, [disabled]);
+  return /*#__PURE__*/jsx(StyledBaseButton, _objectSpread(_objectSpread(_objectSpread({
     ref: ref
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
     // @ts-ignore: On React Native it will always be undefined but TS doesn't understand that
@@ -333,86 +362,107 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
     focusRingColor: focusRingColor,
     hoverBorderColor: hoverBorderColor,
     hoverBackgroundColor: hoverBackgroundColor,
-    isFullWidth: isFullWidth,
+    isFullWidth: (_buttonGroupProps$isF = buttonGroupProps.isFullWidth) !== null && _buttonGroupProps$isF !== void 0 ? _buttonGroupProps$isF : isFullWidth,
     onClick: onClick,
     onBlur: onBlur,
     onFocus: onFocus,
     onMouseLeave: onMouseLeave,
     onMouseMove: onMouseMove,
     onPointerDown: onPointerDown,
-    onPointerEnter: onPointerEnter,
-    onKeyDown: onKeyDown,
-    onTouchStart: onTouchStart,
-    onTouchEnd: onTouchEnd,
+    onPointerEnter: onPointerEnter
+    // Setting type for web fails it on native typecheck and vice versa
+    ,
+    onKeyDown: function onKeyDown(event) {
+      handleKeyboardPressedIn(event);
+      _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
+    },
+    onTouchStart: function onTouchStart(event) {
+      handlePointerPressedIn();
+      _onTouchStart === null || _onTouchStart === void 0 ? void 0 : _onTouchStart(event);
+    },
+    onTouchEnd: function onTouchEnd(event) {
+      handlePointerPressedOut();
+      _onTouchEnd === null || _onTouchEnd === void 0 ? void 0 : _onTouchEnd(event);
+    },
     type: type,
     borderWidth: borderWidth,
     borderRadius: borderRadius,
     motionDuration: motionDuration,
-    motionEasing: motionEasing
+    motionEasing: motionEasing,
+    isPressed: isPressed,
+    onMouseDown: handlePointerPressedIn,
+    onMouseUp: handlePointerPressedOut,
+    onMouseOut: handlePointerPressedOut,
+    onKeyUp: handleKeyboardPressedOut
   }, metaAttribute({
     name: MetaConstants.Button,
     testID: testID
   })), getStyledProps(rest)), {}, {
-    children: [isLoading ? /*#__PURE__*/jsx(BaseBox, {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "absolute",
-      top: "0px",
-      left: "0px",
-      bottom: "0px",
-      right: "0px",
-      zIndex: 1,
-      children: /*#__PURE__*/jsx(BaseSpinner, {
-        accessibilityLabel: "Loading",
-        size: spinnerSize,
-        color: color
-      })
-    }) : null, /*#__PURE__*/jsxs(ButtonContent, {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      flex: 1,
-      isHidden: isLoading,
-      zIndex: 1,
-      children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(BaseBox, {
-        paddingRight: iconPadding,
+    children: /*#__PURE__*/jsxs(AnimatedButtonContent, {
+      motionDuration: motionDuration,
+      motionEasing: motionEasing,
+      isPressed: isPressed,
+      children: [isLoading ? /*#__PURE__*/jsx(BaseBox, {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        children: /*#__PURE__*/jsx(Icon, {
-          size: iconSize,
-          color: iconColor
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        bottom: "0px",
+        right: "0px",
+        zIndex: 1,
+        children: /*#__PURE__*/jsx(BaseSpinner, {
+          accessibilityLabel: "Loading",
+          size: spinnerSize,
+          color: color
         })
-      }) : null, text ? /*#__PURE__*/jsx(BaseText, {
-        lineHeight: lineHeight,
-        fontSize: fontSize
-        // figma and web have different font-smoothing properties
-        // which causes web version of button text to look much bolder
-        // than figma version. To fix this we are changing font-weight from 600 to 500
-        // https://forum.figma.com/t/why-does-a-font-weight-in-figma-seem-lighter-than-the-same-weight-in-the-browser/2207
-        ,
-        fontWeight: "medium",
-        textAlign: "center",
-        color: textColor,
-        children: text
-      }) : null, Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(BaseBox, {
-        paddingLeft: iconPadding,
+      }) : null, /*#__PURE__*/jsxs(ButtonContent, {
         display: "flex",
-        justifyContent: "center",
+        flexDirection: "row",
         alignItems: "center",
-        children: /*#__PURE__*/jsx(Icon, {
-          size: iconSize,
-          color: iconColor
-        })
-      }) : null]
-    })]
+        justifyContent: "center",
+        flex: 1,
+        isHidden: isLoading,
+        zIndex: 1,
+        children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(BaseBox, {
+          paddingRight: iconPadding,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          children: /*#__PURE__*/jsx(Icon, {
+            size: iconSize,
+            color: iconColor
+          })
+        }) : null, text ? /*#__PURE__*/jsx(BaseText, {
+          lineHeight: lineHeight,
+          fontSize: fontSize
+          // figma and web have different font-smoothing properties
+          // which causes web version of button text to look much bolder
+          // than figma version. To fix this we are changing font-weight from 600 to 500
+          // https://forum.figma.com/t/why-does-a-font-weight-in-figma-seem-lighter-than-the-same-weight-in-the-browser/2207
+          ,
+          fontWeight: "medium",
+          textAlign: "center",
+          color: textColor,
+          children: text
+        }) : null, Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(BaseBox, {
+          paddingLeft: iconPadding,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          children: /*#__PURE__*/jsx(Icon, {
+            size: iconSize,
+            color: iconColor
+          })
+        }) : null]
+      })]
+    })
   }));
 };
 var BaseButton = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_BaseButton), {
   displayName: 'BaseButton'
 });
 
-export { BaseButton as default };
+export { BaseButton as default, getBackgroundColorToken };
 //# sourceMappingURL=BaseButton.js.map