@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/build/esm/Button/ButtonGroup.js

@@ -1,32 +1,130 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "variant", "direction"];
 import { forwardRef, useMemo } from 'react';
 import { ButtonGroupContext } from './context';
+import { Box } from '../Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(props, forwardedRef) {
-  var _props$as = props.as,
-      Comp = _props$as === void 0 ? 'div' : _props$as,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? 'text' : _props$variant,
-      _props$direction = props.direction,
-      direction = _props$direction === void 0 ? 'row' : _props$direction,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var value = useMemo(function () {
-    return {
-      direction: direction,
-      variant: variant
-    };
-  }, [direction, variant]);
+function getButtonGroupVariant(variant) {
+  if (variant !== 'standard' && variant !== 'connected' && variant !== 'split') {
+    console.warn(`Invalid ButtonGroup variant: ${variant}. Expected 'standard', 'connected', or 'split'. Defaulting to 'standard'.`);
+    return 'standard';
+  }
+  return variant;
+}
+export const ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(props, forwardedRef) {
+  const {
+    as = 'div',
+    buttonVariant = 'filled',
+    variant: variantProp = 'standard',
+    direction = 'row',
+    connected = false,
+    ...otherProps
+  } = props;
+  const variant = getButtonGroupVariant(variantProp);
+  const value = useMemo(() => ({
+    direction,
+    variant,
+    buttonVariant,
+    connected
+  }), [direction, variant, buttonVariant, connected]);
   return /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
     value: value,
-    children: /*#__PURE__*/_jsx(Comp, _extends({
+    children: /*#__PURE__*/_jsx(Box, {
+      as: as,
       ref: forwardedRef,
       role: "group",
+      __css: {
+        display: 'flex',
+        flexDirection: direction,
+        gap: variant === 'standard' ? 2 : "0.125rem",
+        ...(variant === 'standard' ? {
+          '[data-button-grouped=""]': {
+            '--btn-inner-radius': 'var(--btn-standard-inner-radius)',
+            borderRadius: 'var(--btn-pill-radius)'
+          },
+          '[data-button-grouped=""][data-button-shape="square"], [data-button-grouped=""][aria-pressed="true"]': {
+            borderRadius: 'var(--btn-inner-radius)'
+          },
+          '[data-button-grouped=""][data-button-shape="square"][aria-pressed="true"]': {
+            borderRadius: 'var(--btn-pill-radius)'
+          }
+        } : {
+          '[data-button-grouped=""]': {
+            '--btn-inner-radius': variant === 'connected' ? 'var(--btn-connected-inner-radius)' : 'var(--btn-split-inner-radius)',
+            borderRadius: 'var(--btn-inner-radius)'
+          },
+          '[data-button-grouped=""]:first-of-type': {
+            borderTopLeftRadius: 'var(--btn-pill-radius)',
+            borderBottomLeftRadius: 'var(--btn-pill-radius)'
+          },
+          '[data-button-grouped=""]:last-of-type': {
+            borderTopRightRadius: 'var(--btn-pill-radius)',
+            borderBottomRightRadius: 'var(--btn-pill-radius)'
+          },
+          '[data-button-grouped=""][data-button-shape="square"]': {
+            borderRadius: 'var(--btn-inner-radius)'
+          },
+          '[data-button-grouped=""][aria-pressed="true"]': {
+            borderRadius: 'var(--btn-pill-radius)'
+          },
+          '[data-split-menu-button=""]': {
+            '&[data-button-size="xs"], &[data-button-size="sm"]': {
+              pl: "0.75rem",
+              pr: "0.875rem",
+              '&[aria-expanded="true"]': {
+                px: "0.8125rem"
+              },
+              '& svg': {
+                width: "1.375rem",
+                height: "1.375rem"
+              }
+            },
+            '&[data-button-size="md"]': {
+              pl: "0.8125rem",
+              pr: "1.0625rem",
+              '&[aria-expanded="true"]': {
+                px: "0.9375rem"
+              },
+              '& svg': {
+                width: "1.625rem",
+                height: "1.625rem"
+              }
+            },
+            '&[data-button-size="lg"]': {
+              pl: "1.625rem",
+              pr: "2rem",
+              '&[aria-expanded="true"]': {
+                px: "1.8125rem"
+              },
+              '& svg': {
+                width: "2.375rem",
+                height: "2.375rem"
+              }
+            },
+            '&[data-button-size="xl"]': {
+              pl: "2.3125rem",
+              pr: "3.125rem",
+              '&[aria-expanded="true"]': {
+                px: "2.6875rem"
+              },
+              '& svg': {
+                width: "3.0625rem",
+                height: "3.0625rem"
+              }
+            },
+            '&[aria-expanded="true"]': {
+              borderRadius: 'var(--btn-pill-radius)'
+            },
+            '&[aria-expanded="true"] > svg': {
+              transform: 'rotate(180deg)',
+              transition: 'transform 200ms'
+            }
+          }
+        })
+      },
       "data-button-group": "",
-      "data-button-group-direction": direction
-    }, otherProps))
+      "data-button-group-direction": direction,
+      "data-button-group-variant": variant,
+      ...otherProps
+    })
   });
 });
 //# sourceMappingURL=ButtonGroup.js.map

package/build/esm/Button/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":["forwardRef","useMemo","ButtonGroupContext","ButtonGroup","props","forwardedRef","as","Comp","variant","direction","otherProps","value"],"sources":["../../../src/Button/ButtonGroup.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\n\nimport type { ButtonProps } from './Button';\nimport type { ButtonGroupContextProps } from './context';\nimport { ButtonGroupContext } from './context';\n\nexport type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(props, forwardedRef) {\n    const {\n      as: Comp = 'div',\n      variant = 'text',\n      direction = 'row',\n      ...otherProps\n    } = props;\n\n    const value: ButtonGroupContextProps = useMemo(\n      () => ({ direction, variant }),\n      [direction, variant]\n    );\n\n    return (\n      <ButtonGroupContext.Provider value={value}>\n        <Comp\n          ref={forwardedRef}\n          role=\"group\"\n          data-button-group=\"\"\n          data-button-group-direction={direction}\n          {...otherProps}\n        />\n      </ButtonGroupContext.Provider>\n    );\n  }\n);\n"],"mappings":";;;AAAA,SAASA,UAAT,EAAqBC,OAArB,QAAoC,OAApC;AAIA,SAASC,kBAAT,QAAmC,WAAnC;;AAIA,OAAO,IAAMC,WAAW,gBAAGH,UAAU,CACnC,SAASG,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;EACxC,gBAKID,KALJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,KADb;EAAA,qBAKIH,KALJ,CAEEI,OAFF;EAAA,IAEEA,OAFF,+BAEY,MAFZ;EAAA,uBAKIJ,KALJ,CAGEK,SAHF;EAAA,IAGEA,SAHF,iCAGc,KAHd;EAAA,IAIKC,UAJL,4BAKIN,KALJ;;EAOA,IAAMO,KAA8B,GAAGV,OAAO,CAC5C;IAAA,OAAO;MAAEQ,SAAS,EAATA,SAAF;MAAaD,OAAO,EAAPA;IAAb,CAAP;EAAA,CAD4C,EAE5C,CAACC,SAAD,EAAYD,OAAZ,CAF4C,CAA9C;EAKA,oBACE,KAAC,kBAAD,CAAoB,QAApB;IAA6B,KAAK,EAAEG,KAApC;IAAA,uBACE,KAAC,IAAD;MACE,GAAG,EAAEN,YADP;MAEE,IAAI,EAAC,OAFP;MAGE,qBAAkB,EAHpB;MAIE,+BAA6BI;IAJ/B,GAKMC,UALN;EADF,EADF;AAWD,CAzBkC,CAA9B"}
+{"version":3,"file":"ButtonGroup.js","names":["forwardRef","useMemo","ButtonGroupContext","Box","jsx","_jsx","getButtonGroupVariant","variant","console","warn","ButtonGroup","props","forwardedRef","as","buttonVariant","variantProp","direction","connected","otherProps","value","Provider","children","ref","role","__css","display","flexDirection","gap","borderRadius","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","pl","pr","px","width","height","transform","transition"],"sources":["../../../src/Button/ButtonGroup.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { rem } from 'polished';\n\nimport type { ButtonGroupContextProps } from './context';\nimport { ButtonGroupContext } from './context';\nimport { Box, type BoxProps } from '../Box';\n\nexport type ButtonGroupProps = BoxProps & ButtonGroupContextProps;\n\nfunction getButtonGroupVariant(variant: ButtonGroupProps['variant']) {\n  if (\n    variant !== 'standard' &&\n    variant !== 'connected' &&\n    variant !== 'split'\n  ) {\n    console.warn(\n      `Invalid ButtonGroup variant: ${variant}. Expected 'standard', 'connected', or 'split'. Defaulting to 'standard'.`\n    );\n    return 'standard';\n  }\n  return variant;\n}\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(props, forwardedRef) {\n    const {\n      as = 'div',\n      buttonVariant = 'filled',\n      variant: variantProp = 'standard',\n      direction = 'row',\n      connected = false,\n      ...otherProps\n    } = props;\n    const variant = getButtonGroupVariant(variantProp);\n\n    const value: ButtonGroupContextProps = useMemo(\n      () => ({ direction, variant, buttonVariant, connected }),\n      [direction, variant, buttonVariant, connected]\n    );\n\n    return (\n      <ButtonGroupContext.Provider value={value}>\n        <Box\n          as={as}\n          ref={forwardedRef}\n          role=\"group\"\n          __css={{\n            display: 'flex',\n            flexDirection: direction,\n            gap: variant === 'standard' ? 2 : rem(2),\n            ...(variant === 'standard'\n              ? {\n                  '[data-button-grouped=\"\"]': {\n                    '--btn-inner-radius': 'var(--btn-standard-inner-radius)',\n                    borderRadius: 'var(--btn-pill-radius)',\n                  },\n                  '[data-button-grouped=\"\"][data-button-shape=\"square\"], [data-button-grouped=\"\"][aria-pressed=\"true\"]':\n                    {\n                      borderRadius: 'var(--btn-inner-radius)',\n                    },\n                  '[data-button-grouped=\"\"][data-button-shape=\"square\"][aria-pressed=\"true\"]':\n                    {\n                      borderRadius: 'var(--btn-pill-radius)',\n                    },\n                }\n              : {\n                  '[data-button-grouped=\"\"]': {\n                    '--btn-inner-radius':\n                      variant === 'connected'\n                        ? 'var(--btn-connected-inner-radius)'\n                        : 'var(--btn-split-inner-radius)',\n                    borderRadius: 'var(--btn-inner-radius)',\n                  },\n                  '[data-button-grouped=\"\"]:first-of-type': {\n                    borderTopLeftRadius: 'var(--btn-pill-radius)',\n                    borderBottomLeftRadius: 'var(--btn-pill-radius)',\n                  },\n                  '[data-button-grouped=\"\"]:last-of-type': {\n                    borderTopRightRadius: 'var(--btn-pill-radius)',\n                    borderBottomRightRadius: 'var(--btn-pill-radius)',\n                  },\n                  '[data-button-grouped=\"\"][data-button-shape=\"square\"]': {\n                    borderRadius: 'var(--btn-inner-radius)',\n                  },\n                  '[data-button-grouped=\"\"][aria-pressed=\"true\"]': {\n                    borderRadius: 'var(--btn-pill-radius)',\n                  },\n                  '[data-split-menu-button=\"\"]': {\n                    '&[data-button-size=\"xs\"], &[data-button-size=\"sm\"]': {\n                      pl: rem(12),\n                      pr: rem(14),\n                      '&[aria-expanded=\"true\"]': { px: rem(13) },\n                      '& svg': { width: rem(22), height: rem(22) },\n                    },\n                    '&[data-button-size=\"md\"]': {\n                      pl: rem(13),\n                      pr: rem(17),\n                      '&[aria-expanded=\"true\"]': { px: rem(15) },\n                      '& svg': { width: rem(26), height: rem(26) },\n                    },\n                    '&[data-button-size=\"lg\"]': {\n                      pl: rem(26),\n                      pr: rem(32),\n                      '&[aria-expanded=\"true\"]': { px: rem(29) },\n                      '& svg': { width: rem(38), height: rem(38) },\n                    },\n                    '&[data-button-size=\"xl\"]': {\n                      pl: rem(37),\n                      pr: rem(50),\n                      '&[aria-expanded=\"true\"]': { px: rem(43) },\n                      '& svg': { width: rem(49), height: rem(49) },\n                    },\n                    '&[aria-expanded=\"true\"]': {\n                      borderRadius: 'var(--btn-pill-radius)',\n                    },\n                    '&[aria-expanded=\"true\"] > svg': {\n                      transform: 'rotate(180deg)',\n                      transition: 'transform 200ms',\n                    },\n                  },\n                }),\n          }}\n          data-button-group=\"\"\n          data-button-group-direction={direction}\n          data-button-group-variant={variant}\n          {...otherProps}\n        />\n      </ButtonGroupContext.Provider>\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}

package/build/esm/Button/FilledButton.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import type { Theme } from '../theme';
-export declare const FilledButton: import("@emotion/styled").StyledComponent<Pick<import("./BaseButton").BaseButtonProps, "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "form" | "slot" | "style" | "title" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "size" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation" | "isGroupedButton" | "key"> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare function getRippleProperties(theme: Theme): {
-    hoverOpacity: any;
-    focusOpacity: any;
-    pressedOpacity: any;
-    rippleEnabled: boolean;
-};
+import type { Theme } from '../theme';
+export declare const FilledButton: import("@emotion/styled").StyledComponent<Omit<import("./BaseButton").BaseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare function getRippleProperties(theme: Theme): {
+    hoverOpacity: any;
+    focusOpacity: any;
+    pressedOpacity: any;
+    rippleEnabled: boolean;
+};

package/build/esm/Button/FilledButton.js

@@ -3,87 +3,45 @@ import { readableColor } from 'polished';
 import { get, css } from '@styled-system/css';
 import { BaseButton } from './BaseButton';
 import { alpha, mixColor } from '../color';
-export var FilledButton = /*#__PURE__*/_styled(BaseButton, process.env.NODE_ENV === "production" ? {
+export const FilledButton = /*#__PURE__*/_styled(BaseButton, process.env.NODE_ENV === "production" ? {
   target: "ex8w9nt0"
 } : {
   target: "ex8w9nt0",
   label: "FilledButton"
-})(function (_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      theme = _ref.theme;
+})(_ref => {
+  let {
+    color = 'primary',
+    theme
+  } = _ref;
   return css({
-    backgroundColor: get(theme, "colors.".concat(String(color))) || color,
-    color: get(theme, "colors.on.".concat(String(color))) || (typeof color === 'string' ? readableColor(color) : undefined),
+    backgroundColor: get(theme, `colors.${String(color)}`) || color,
+    color: get(theme, `colors.on.${String(color)}`) || (typeof color === 'string' ? readableColor(color) : undefined),
     '&:disabled': {
       color: alpha('on.surface', 0.38),
-      background: "linear-gradient(".concat(get(theme, 'colors.surface'), ", ").concat(get(theme, 'colors.surface'), "), ").concat(alpha('on.surface', 0.12)(theme)),
+      background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(theme, 'colors.surface')}), ${alpha('on.surface', 0.12)(theme)}`,
       backgroundBlendMode: 'overlay',
       cursor: 'default'
     },
     '&:focus-visible': {
-      outlineColor: get(theme, "colors.".concat(String(color))) || color,
+      outlineColor: get(theme, `colors.${String(color)}`) || color,
       outlineWidth: 2,
       outlineStyle: 'auto',
       outlineOffset: '2px'
     }
   });
-}, function (_ref2) {
-  var _ref2$color = _ref2.color,
-      color = _ref2$color === void 0 ? 'primary' : _ref2$color;
+}, _ref2 => {
+  let {
+    color = 'primary'
+  } = _ref2;
   return color === 'surface' && css({
     background: mixColor('surface', 'primary', 0.05)
   });
-}, function (_ref3) {
-  var _ref3$color = _ref3.color,
-      color = _ref3$color === void 0 ? 'primary' : _ref3$color,
-      theme = _ref3.theme,
-      _ref3$isGroupedButton = _ref3.isGroupedButton,
-      isGroupedButton = _ref3$isGroupedButton === void 0 ? false : _ref3$isGroupedButton;
-  return isGroupedButton && {
-    '[data-button-group=""] &': {
-      borderColor: get(theme, "colors.on.".concat(String(color))) || (typeof color === 'string' ? readableColor(color) : undefined),
-      ':first-of-type': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-        borderRightStyle: 'solid',
-        borderRightWidth: "0.0625rem"
-      },
-      ':not(:first-of-type):not(:last-of-type)': {
-        borderRadius: 0
-      },
-      ':last-of-type': {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        borderLeftStyle: 'solid',
-        borderLeftWidth: "0.0625rem"
-      },
-      // Handling the border between enabled/disabled buttons
-      ':not(:disabled):has(+ :disabled)': {
-        borderRightWidth: "0.0625rem",
-        borderRightStyle: 'solid'
-      },
-      ':disabled + :not(:disabled)': {
-        borderLeftWidth: "0.0625rem",
-        borderLeftStyle: 'solid'
-      },
-      ':not(:disabled) + :disabled': {
-        borderLeftWidth: "0rem"
-      },
-      ':disabled:has(+ :not(:disabled))': {
-        borderRightWidth: "0rem"
-      },
-      ':last-of-type:nth-of-type(2)': {
-        borderLeftWidth: "0rem"
-      }
-    }
-  };
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CdXR0b24vRmlsbGVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRNEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0J1dHRvbi9GaWxsZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgcmVhZGFibGVDb2xvciwgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHsgZ2V0LCBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuXG5pbXBvcnQgeyBCYXNlQnV0dG9uIH0gZnJvbSAnLi9CYXNlQnV0dG9uJztcbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyBhbHBoYSwgbWl4Q29sb3IgfSBmcm9tICcuLi9jb2xvcic7XG5cbmV4cG9ydCBjb25zdCBGaWxsZWRCdXR0b24gPSBzdHlsZWQoQmFzZUJ1dHRvbikoXG4gICh7IGNvbG9yID0gJ3ByaW1hcnknLCB0aGVtZSB9KSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldCh0aGVtZSwgYGNvbG9ycy4ke1N0cmluZyhjb2xvcil9YCkgfHwgY29sb3IsXG4gICAgICBjb2xvcjpcbiAgICAgICAgZ2V0KHRoZW1lLCBgY29sb3JzLm9uLiR7U3RyaW5nKGNvbG9yKX1gKSB8fFxuICAgICAgICAodHlwZW9mIGNvbG9yID09PSAnc3RyaW5nJyA/IHJlYWRhYmxlQ29sb3IoY29sb3IpIDogdW5kZWZpbmVkKSxcbiAgICAgICcmOmRpc2FibGVkJzoge1xuICAgICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjM4KSxcbiAgICAgICAgYmFja2dyb3VuZDogYGxpbmVhci1ncmFkaWVudCgke2dldCh0aGVtZSwgJ2NvbG9ycy5zdXJmYWNlJyl9LCAke2dldChcbiAgICAgICAgICB0aGVtZSxcbiAgICAgICAgICAnY29sb3JzLnN1cmZhY2UnXG4gICAgICAgICl9KSwgJHthbHBoYSgnb24uc3VyZmFjZScsIDAuMTIpKHRoZW1lKX1gLFxuICAgICAgICBiYWNrZ3JvdW5kQmxlbmRNb2RlOiAnb3ZlcmxheScsXG4gICAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgICAgfSxcbiAgICAgICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgICAgIG91dGxpbmVDb2xvcjogZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fCBjb2xvcixcbiAgICAgICAgb3V0bGluZVdpZHRoOiAyLFxuICAgICAgICBvdXRsaW5lU3R5bGU6ICdhdXRvJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJzJweCcsXG4gICAgICB9LFxuICAgIH0pLFxuICAoeyBjb2xvciA9ICdwcmltYXJ5JyB9KSA9PlxuICAgIGNvbG9yID09PSAnc3VyZmFjZScgJiZcbiAgICBjc3MoeyBiYWNrZ3JvdW5kOiBtaXhDb2xvcignc3VyZmFjZScsICdwcmltYXJ5JywgMC4wNSkgfSksXG4gICh7IGNvbG9yID0gJ3ByaW1hcnknLCB0aGVtZSwgaXNHcm91cGVkQnV0dG9uID0gZmFsc2UgfSkgPT5cbiAgICBpc0dyb3VwZWRCdXR0b24gJiYge1xuICAgICAgJ1tkYXRhLWJ1dHRvbi1ncm91cD1cIlwiXSAmJzoge1xuICAgICAgICBib3JkZXJDb2xvcjpcbiAgICAgICAgICBnZXQodGhlbWUsIGBjb2xvcnMub24uJHtTdHJpbmcoY29sb3IpfWApIHx8XG4gICAgICAgICAgKHR5cGVvZiBjb2xvciA9PT0gJ3N0cmluZycgPyByZWFkYWJsZUNvbG9yKGNvbG9yKSA6IHVuZGVmaW5lZCksXG4gICAgICAgICc6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJSaWdodFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmZpcnN0LW9mLXR5cGUpOm5vdCg6bGFzdC1vZi10eXBlKSc6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgIC8vIEhhbmRsaW5nIHRoZSBib3JkZXIgYmV0d2VlbiBlbmFibGVkL2Rpc2FibGVkIGJ1dHRvbnNcbiAgICAgICAgJzpub3QoOmRpc2FibGVkKTpoYXMoKyA6ZGlzYWJsZWQpJzoge1xuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgICBib3JkZXJSaWdodFN0eWxlOiAnc29saWQnLFxuICAgICAgICB9LFxuICAgICAgICAnOmRpc2FibGVkICsgOm5vdCg6ZGlzYWJsZWQpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICAgIGJvcmRlckxlZnRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmRpc2FibGVkKSArIDpkaXNhYmxlZCc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgwKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpkaXNhYmxlZDpoYXMoKyA6bm90KDpkaXNhYmxlZCkpJzoge1xuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgwKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpsYXN0LW9mLXR5cGU6bnRoLW9mLXR5cGUoMiknOiB7XG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMCksXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH1cbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuaG92ZXIub3BhY2l0eWApLFxuICAgIGZvY3VzT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuZm9jdXMub3BhY2l0eWApLFxuICAgIHByZXNzZWRPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgICByaXBwbGVFbmFibGVkOiBmYWxzZSxcbiAgfTtcbn1cbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CdXR0b24vRmlsbGVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRNEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0J1dHRvbi9GaWxsZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgcmVhZGFibGVDb2xvciB9IGZyb20gJ3BvbGlzaGVkJztcbmltcG9ydCB7IGdldCwgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuaW1wb3J0IHsgQmFzZUJ1dHRvbiB9IGZyb20gJy4vQmFzZUJ1dHRvbic7XG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuaW1wb3J0IHsgYWxwaGEsIG1peENvbG9yIH0gZnJvbSAnLi4vY29sb3InO1xuXG5leHBvcnQgY29uc3QgRmlsbGVkQnV0dG9uID0gc3R5bGVkKEJhc2VCdXR0b24pKFxuICAoeyBjb2xvciA9ICdwcmltYXJ5JywgdGhlbWUgfSkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZENvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgY29sb3I6XG4gICAgICAgIGdldCh0aGVtZSwgYGNvbG9ycy5vbi4ke1N0cmluZyhjb2xvcil9YCkgfHxcbiAgICAgICAgKHR5cGVvZiBjb2xvciA9PT0gJ3N0cmluZycgPyByZWFkYWJsZUNvbG9yKGNvbG9yKSA6IHVuZGVmaW5lZCksXG4gICAgICAnJjpkaXNhYmxlZCc6IHtcbiAgICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICAgIGJhY2tncm91bmQ6IGBsaW5lYXItZ3JhZGllbnQoJHtnZXQodGhlbWUsICdjb2xvcnMuc3VyZmFjZScpfSwgJHtnZXQoXG4gICAgICAgICAgdGhlbWUsXG4gICAgICAgICAgJ2NvbG9ycy5zdXJmYWNlJ1xuICAgICAgICApfSksICR7YWxwaGEoJ29uLnN1cmZhY2UnLCAwLjEyKSh0aGVtZSl9YCxcbiAgICAgICAgYmFja2dyb3VuZEJsZW5kTW9kZTogJ292ZXJsYXknLFxuICAgICAgICBjdXJzb3I6ICdkZWZhdWx0JyxcbiAgICAgIH0sXG4gICAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgICBvdXRsaW5lQ29sb3I6IGdldCh0aGVtZSwgYGNvbG9ycy4ke1N0cmluZyhjb2xvcil9YCkgfHwgY29sb3IsXG4gICAgICAgIG91dGxpbmVXaWR0aDogMixcbiAgICAgICAgb3V0bGluZVN0eWxlOiAnYXV0bycsXG4gICAgICAgIG91dGxpbmVPZmZzZXQ6ICcycHgnLFxuICAgICAgfSxcbiAgICB9KSxcbiAgKHsgY29sb3IgPSAncHJpbWFyeScgfSkgPT5cbiAgICBjb2xvciA9PT0gJ3N1cmZhY2UnICYmXG4gICAgY3NzKHsgYmFja2dyb3VuZDogbWl4Q29sb3IoJ3N1cmZhY2UnLCAncHJpbWFyeScsIDAuMDUpIH0pXG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0UmlwcGxlUHJvcGVydGllcyh0aGVtZTogVGhlbWUpIHtcbiAgcmV0dXJuIHtcbiAgICBob3Zlck9wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMuZmlsbGVkLmhvdmVyLm9wYWNpdHlgKSxcbiAgICBmb2N1c09wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMuZmlsbGVkLmZvY3VzLm9wYWNpdHlgKSxcbiAgICBwcmVzc2VkT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQucHJlc3NlZC5vcGFjaXR5YCksXG4gICAgcmlwcGxlRW5hYmxlZDogZmFsc2UsXG4gIH07XG59XG4iXX0= */");
 export function getRippleProperties(theme) {
   return {
-    hoverOpacity: get(theme, "buttons.overlays.filled.hover.opacity"),
-    focusOpacity: get(theme, "buttons.overlays.filled.focus.opacity"),
-    pressedOpacity: get(theme, "buttons.overlays.filled.pressed.opacity"),
+    hoverOpacity: get(theme, `buttons.overlays.filled.hover.opacity`),
+    focusOpacity: get(theme, `buttons.overlays.filled.focus.opacity`),
+    pressedOpacity: get(theme, `buttons.overlays.filled.pressed.opacity`),
     rippleEnabled: false
   };
 }

package/build/esm/Button/FilledButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilledButton.js","names":["readableColor","get","css","BaseButton","alpha","mixColor","FilledButton","color","theme","backgroundColor","String","undefined","background","backgroundBlendMode","cursor","outlineColor","outlineWidth","outlineStyle","outlineOffset","isGroupedButton","borderColor","borderTopRightRadius","borderBottomRightRadius","borderRightStyle","borderRightWidth","borderRadius","borderTopLeftRadius","borderBottomLeftRadius","borderLeftStyle","borderLeftWidth","getRippleProperties","hoverOpacity","focusOpacity","pressedOpacity","rippleEnabled"],"sources":["../../../src/Button/FilledButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { readableColor, rem } from 'polished';\nimport { get, css } from '@styled-system/css';\n\nimport { BaseButton } from './BaseButton';\nimport type { Theme } from '../theme';\nimport { alpha, mixColor } from '../color';\n\nexport const FilledButton = styled(BaseButton)(\n  ({ color = 'primary', theme }) =>\n    css({\n      backgroundColor: get(theme, `colors.${String(color)}`) || color,\n      color:\n        get(theme, `colors.on.${String(color)}`) ||\n        (typeof color === 'string' ? readableColor(color) : undefined),\n      '&:disabled': {\n        color: alpha('on.surface', 0.38),\n        background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(\n          theme,\n          'colors.surface'\n        )}), ${alpha('on.surface', 0.12)(theme)}`,\n        backgroundBlendMode: 'overlay',\n        cursor: 'default',\n      },\n      '&:focus-visible': {\n        outlineColor: get(theme, `colors.${String(color)}`) || color,\n        outlineWidth: 2,\n        outlineStyle: 'auto',\n        outlineOffset: '2px',\n      },\n    }),\n  ({ color = 'primary' }) =>\n    color === 'surface' &&\n    css({ background: mixColor('surface', 'primary', 0.05) }),\n  ({ color = 'primary', theme, isGroupedButton = false }) =>\n    isGroupedButton && {\n      '[data-button-group=\"\"] &': {\n        borderColor:\n          get(theme, `colors.on.${String(color)}`) ||\n          (typeof color === 'string' ? readableColor(color) : undefined),\n        ':first-of-type': {\n          borderTopRightRadius: 0,\n          borderBottomRightRadius: 0,\n          borderRightStyle: 'solid',\n          borderRightWidth: rem(1),\n        },\n        ':not(:first-of-type):not(:last-of-type)': {\n          borderRadius: 0,\n        },\n        ':last-of-type': {\n          borderTopLeftRadius: 0,\n          borderBottomLeftRadius: 0,\n          borderLeftStyle: 'solid',\n          borderLeftWidth: rem(1),\n        },\n        // Handling the border between enabled/disabled buttons\n        ':not(:disabled):has(+ :disabled)': {\n          borderRightWidth: rem(1),\n          borderRightStyle: 'solid',\n        },\n        ':disabled + :not(:disabled)': {\n          borderLeftWidth: rem(1),\n          borderLeftStyle: 'solid',\n        },\n        ':not(:disabled) + :disabled': {\n          borderLeftWidth: rem(0),\n        },\n        ':disabled:has(+ :not(:disabled))': {\n          borderRightWidth: rem(0),\n        },\n        ':last-of-type:nth-of-type(2)': {\n          borderLeftWidth: rem(0),\n        },\n      },\n    }\n);\n\nexport function getRippleProperties(theme: Theme) {\n  return {\n    hoverOpacity: get(theme, `buttons.overlays.filled.hover.opacity`),\n    focusOpacity: get(theme, `buttons.overlays.filled.focus.opacity`),\n    pressedOpacity: get(theme, `buttons.overlays.filled.pressed.opacity`),\n    rippleEnabled: false,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"FilledButton.js","names":["readableColor","get","css","BaseButton","alpha","mixColor","FilledButton","_styled","process","env","NODE_ENV","target","label","_ref","color","theme","backgroundColor","String","undefined","background","backgroundBlendMode","cursor","outlineColor","outlineWidth","outlineStyle","outlineOffset","_ref2","getRippleProperties","hoverOpacity","focusOpacity","pressedOpacity","rippleEnabled"],"sources":["../../../src/Button/FilledButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { readableColor } from 'polished';\nimport { get, css } from '@styled-system/css';\n\nimport { BaseButton } from './BaseButton';\nimport type { Theme } from '../theme';\nimport { alpha, mixColor } from '../color';\n\nexport const FilledButton = styled(BaseButton)(\n  ({ color = 'primary', theme }) =>\n    css({\n      backgroundColor: get(theme, `colors.${String(color)}`) || color,\n      color:\n        get(theme, `colors.on.${String(color)}`) ||\n        (typeof color === 'string' ? readableColor(color) : undefined),\n      '&:disabled': {\n        color: alpha('on.surface', 0.38),\n        background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(\n          theme,\n          'colors.surface'\n        )}), ${alpha('on.surface', 0.12)(theme)}`,\n        backgroundBlendMode: 'overlay',\n        cursor: 'default',\n      },\n      '&:focus-visible': {\n        outlineColor: get(theme, `colors.${String(color)}`) || color,\n        outlineWidth: 2,\n        outlineStyle: 'auto',\n        outlineOffset: '2px',\n      },\n    }),\n  ({ color = 'primary' }) =>\n    color === 'surface' &&\n    css({ background: mixColor('surface', 'primary', 0.05) })\n);\n\nexport function getRippleProperties(theme: Theme) {\n  return {\n    hoverOpacity: get(theme, `buttons.overlays.filled.hover.opacity`),\n    focusOpacity: get(theme, `buttons.overlays.filled.focus.opacity`),\n    pressedOpacity: get(theme, `buttons.overlays.filled.pressed.opacity`),\n    rippleEnabled: false,\n  };\n}\n"],"mappings":";AACA,SAASA,aAAa,QAAQ,UAAU;AACxC,SAASC,GAAG,EAAEC,GAAG,QAAQ,oBAAoB;AAE7C,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,KAAK,EAAEC,QAAQ,QAAQ,UAAU;AAE1C,OAAO,MAAMC,YAAY,gBAAGC,OAAA,CAAOJ,UAAU,EAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAC5CC,IAAA;EAAA,IAAC;IAAEC,KAAK,GAAG,SAAS;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OAC3BX,GAAG,CAAC;IACFc,eAAe,EAAEf,GAAG,CAACc,KAAK,EAAE,UAAUE,MAAM,CAACH,KAAK,CAAC,EAAE,CAAC,IAAIA,KAAK;IAC/DA,KAAK,EACHb,GAAG,CAACc,KAAK,EAAE,aAAaE,MAAM,CAACH,KAAK,CAAC,EAAE,CAAC,KACvC,OAAOA,KAAK,KAAK,QAAQ,GAAGd,aAAa,CAACc,KAAK,CAAC,GAAGI,SAAS,CAAC;IAChE,YAAY,EAAE;MACZJ,KAAK,EAAEV,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC;MAChCe,UAAU,EAAE,mBAAmBlB,GAAG,CAACc,KAAK,EAAE,gBAAgB,CAAC,KAAKd,GAAG,CACjEc,KAAK,EACL,gBACF,CAAC,MAAMX,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,CAACW,KAAK,CAAC,EAAE;MACzCK,mBAAmB,EAAE,SAAS;MAC9BC,MAAM,EAAE;IACV,CAAC;IACD,iBAAiB,EAAE;MACjBC,YAAY,EAAErB,GAAG,CAACc,KAAK,EAAE,UAAUE,MAAM,CAACH,KAAK,CAAC,EAAE,CAAC,IAAIA,KAAK;MAC5DS,YAAY,EAAE,CAAC;MACfC,YAAY,EAAE,MAAM;MACpBC,aAAa,EAAE;IACjB;EACF,CAAC,CAAC;AAAA,GACJC,KAAA;EAAA,IAAC;IAAEZ,KAAK,GAAG;EAAU,CAAC,GAAAY,KAAA;EAAA,OACpBZ,KAAK,KAAK,SAAS,IACnBZ,GAAG,CAAC;IAAEiB,UAAU,EAAEd,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI;EAAE,CAAC,CAAC;AAAA,GAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,s0EAC7D,CAAC;AAED,OAAO,SAASiB,mBAAmBA,CAACZ,KAAY,EAAE;EAChD,OAAO;IACLa,YAAY,EAAE3B,GAAG,CAACc,KAAK,EAAE,uCAAuC,CAAC;IACjEc,YAAY,EAAE5B,GAAG,CAACc,KAAK,EAAE,uCAAuC,CAAC;IACjEe,cAAc,EAAE7B,GAAG,CAACc,KAAK,EAAE,yCAAyC,CAAC;IACrEgB,aAAa,EAAE;EACjB,CAAC;AACH","ignoreList":[]}

package/build/esm/Button/FloatingActionButton.d.ts

@@ -1,7 +1,9 @@
-import type { Theme } from '../theme';
-export declare function getRippleProperties(theme: Theme): {
-    rippleEnabled: boolean;
-    hoverOpacity: any;
-    focusOpacity: any;
-    pressedOpacity: any;
-};
+import { FilledButton } from './FilledButton';
+import type { Theme } from '../theme';
+export declare const FloatingActionButton: typeof FilledButton;
+export declare function getRippleProperties(theme: Theme): {
+    rippleEnabled: boolean;
+    hoverOpacity: any;
+    focusOpacity: any;
+    pressedOpacity: any;
+};

package/build/esm/Button/FloatingActionButton.js

@@ -1,8 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
-import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
+import { FilledButton, getRippleProperties as filledButtonGetProperties } from './FilledButton';
+export const FloatingActionButton = FilledButton;
 export function getRippleProperties(theme) {
-  return _extends(_extends({}, filledButtonGetProperties(theme)), {}, {
+  return {
+    ...filledButtonGetProperties(theme),
     rippleEnabled: true
-  });
+  };
 }
 //# sourceMappingURL=FloatingActionButton.js.map

package/build/esm/Button/FloatingActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingActionButton.js","names":["getRippleProperties","filledButtonGetProperties","theme","rippleEnabled"],"sources":["../../../src/Button/FloatingActionButton.tsx"],"sourcesContent":["import { getRippleProperties as filledButtonGetProperties } from './FilledButton';\r\nimport type { Theme } from '../theme';\r\n\r\nexport function getRippleProperties(theme: Theme) {\r\n  return {\r\n    ...filledButtonGetProperties(theme),\r\n    rippleEnabled: true,\r\n  };\r\n}\r\n"],"mappings":";AAAA,SAASA,mBAAmB,IAAIC,yBAAhC,QAAiE,gBAAjE;AAGA,OAAO,SAASD,mBAAT,CAA6BE,KAA7B,EAA2C;EAChD,6BACKD,yBAAyB,CAACC,KAAD,CAD9B;IAEEC,aAAa,EAAE;EAFjB;AAID"}
+{"version":3,"file":"FloatingActionButton.js","names":["FilledButton","getRippleProperties","filledButtonGetProperties","FloatingActionButton","theme","rippleEnabled"],"sources":["../../../src/Button/FloatingActionButton.tsx"],"sourcesContent":["import {\n  FilledButton,\n  getRippleProperties as filledButtonGetProperties,\n} from './FilledButton';\nimport type { Theme } from '../theme';\n\nexport const FloatingActionButton = FilledButton as typeof FilledButton;\n\nexport function getRippleProperties(theme: Theme) {\n  return {\n    ...filledButtonGetProperties(theme),\n    rippleEnabled: true,\n  };\n}\n"],"mappings":"AAAA,SACEA,YAAY,EACZC,mBAAmB,IAAIC,yBAAyB,QAC3C,gBAAgB;AAGvB,OAAO,MAAMC,oBAAoB,GAAGH,YAAmC;AAEvE,OAAO,SAASC,mBAAmBA,CAACG,KAAY,EAAE;EAChD,OAAO;IACL,GAAGF,yBAAyB,CAACE,KAAK,CAAC;IACnCC,aAAa,EAAE;EACjB,CAAC;AACH","ignoreList":[]}

package/build/esm/Button/IconButton.d.ts

@@ -1,8 +1,8 @@
-import type { Theme } from '../theme';
-export declare function getRippleProperties(theme: Theme): {
-    center: boolean;
-    rippleEnabled: boolean;
-    hoverOpacity: any;
-    focusOpacity: any;
-    pressedOpacity: any;
-};
+import type { Theme } from '../theme';
+export declare function getRippleProperties(theme: Theme): {
+    center: boolean;
+    rippleEnabled: boolean;
+    hoverOpacity: any;
+    focusOpacity: any;
+    pressedOpacity: any;
+};

package/build/esm/Button/IconButton.js

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
 export function getRippleProperties(theme) {
-  return _extends(_extends({}, filledButtonGetProperties(theme)), {}, {
+  return {
+    ...filledButtonGetProperties(theme),
     center: true,
     rippleEnabled: true
-  });
+  };
 }
 //# sourceMappingURL=IconButton.js.map

package/build/esm/Button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["getRippleProperties","filledButtonGetProperties","theme","center","rippleEnabled"],"sources":["../../../src/Button/IconButton.tsx"],"sourcesContent":["import { getRippleProperties as filledButtonGetProperties } from './FilledButton';\nimport type { Theme } from '../theme';\n\nexport function getRippleProperties(theme: Theme) {\n  return {\n    ...filledButtonGetProperties(theme),\n    center: true,\n    rippleEnabled: true,\n  };\n}\n"],"mappings":";AAAA,SAASA,mBAAmB,IAAIC,yBAAhC,QAAiE,gBAAjE;AAGA,OAAO,SAASD,mBAAT,CAA6BE,KAA7B,EAA2C;EAChD,6BACKD,yBAAyB,CAACC,KAAD,CAD9B;IAEEC,MAAM,EAAE,IAFV;IAGEC,aAAa,EAAE;EAHjB;AAKD"}
+{"version":3,"file":"IconButton.js","names":["getRippleProperties","filledButtonGetProperties","theme","center","rippleEnabled"],"sources":["../../../src/Button/IconButton.tsx"],"sourcesContent":["import { getRippleProperties as filledButtonGetProperties } from './FilledButton';\nimport type { Theme } from '../theme';\n\nexport function getRippleProperties(theme: Theme) {\n  return {\n    ...filledButtonGetProperties(theme),\n    center: true,\n    rippleEnabled: true,\n  };\n}\n"],"mappings":"AAAA,SAASA,mBAAmB,IAAIC,yBAAyB,QAAQ,gBAAgB;AAGjF,OAAO,SAASD,mBAAmBA,CAACE,KAAY,EAAE;EAChD,OAAO;IACL,GAAGD,yBAAyB,CAACC,KAAK,CAAC;IACnCC,MAAM,EAAE,IAAI;IACZC,aAAa,EAAE;EACjB,CAAC;AACH","ignoreList":[]}

package/build/esm/Button/IconFilledButton.d.ts

@@ -0,0 +1,2 @@
+import { FilledButton } from './FilledButton';
+export declare const IconFilledButton: typeof FilledButton;

package/build/esm/Button/IconFilledButton.js

@@ -0,0 +1,3 @@
+import { FilledButton } from './FilledButton';
+export const IconFilledButton = FilledButton;
+//# sourceMappingURL=IconFilledButton.js.map

package/build/esm/Button/IconFilledButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconFilledButton.js","names":["FilledButton","IconFilledButton"],"sources":["../../../src/Button/IconFilledButton.tsx"],"sourcesContent":["import { FilledButton } from './FilledButton';\n\nexport const IconFilledButton = FilledButton as typeof FilledButton;\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAE7C,OAAO,MAAMC,gBAAgB,GAAGD,YAAmC","ignoreList":[]}

package/build/esm/Button/IconOutlinedButton.d.ts

@@ -0,0 +1,2 @@
+import { OutlinedButton } from './OutlinedButton';
+export declare const IconOutlinedButton: typeof OutlinedButton;

package/build/esm/Button/IconOutlinedButton.js

@@ -0,0 +1,3 @@
+import { OutlinedButton } from './OutlinedButton';
+export const IconOutlinedButton = OutlinedButton;
+//# sourceMappingURL=IconOutlinedButton.js.map

package/build/esm/Button/IconOutlinedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconOutlinedButton.js","names":["OutlinedButton","IconOutlinedButton"],"sources":["../../../src/Button/IconOutlinedButton.tsx"],"sourcesContent":["import { OutlinedButton } from './OutlinedButton';\n\nexport const IconOutlinedButton = OutlinedButton as typeof OutlinedButton;\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,kBAAkB;AAEjD,OAAO,MAAMC,kBAAkB,GAAGD,cAAuC","ignoreList":[]}

package/build/esm/Button/OutlinedButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-export declare const OutlinedButton: import("@emotion/styled").StyledComponent<Pick<import("./BaseButton").BaseButtonProps, "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "form" | "slot" | "style" | "title" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "size" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation" | "isGroupedButton" | "key"> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+export declare const OutlinedButton: import("@emotion/styled").StyledComponent<Omit<import("./BaseButton").BaseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/build/esm/Button/OutlinedButton.js

@@ -2,14 +2,14 @@ import _styled from "@emotion/styled/base";
 import { css } from '@styled-system/css';
 import { alpha } from '../color';
 import { TransparentButton } from './TransparentButton';
-export var OutlinedButton = /*#__PURE__*/_styled(TransparentButton, process.env.NODE_ENV === "production" ? {
+export const OutlinedButton = /*#__PURE__*/_styled(TransparentButton, process.env.NODE_ENV === "production" ? {
   target: "eo0fwlz0"
 } : {
   target: "eo0fwlz0",
   label: "OutlinedButton"
 })(css({
   borderStyle: 'solid',
-  borderWidth: "0.0625rem",
+  borderWidth: '1px',
   borderColor: 'outline',
   boxShadow: 0,
   '&:focus,:&active,:&hover': {
@@ -23,45 +23,5 @@ export var OutlinedButton = /*#__PURE__*/_styled(TransparentButton, process.env.
     borderColor: alpha('outline', 0.12),
     cursor: 'default'
   }
-}), function (_ref) {
-  var _ref$isGroupedButton = _ref.isGroupedButton,
-      isGroupedButton = _ref$isGroupedButton === void 0 ? false : _ref$isGroupedButton;
-  return isGroupedButton && {
-    '[data-button-group=""] &': {
-      ':first-of-type': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0
-      },
-      ':not(:first-of-type):not(:last-of-type)': {
-        borderRadius: 0,
-        borderRightWidth: 0,
-        borderLeftWidth: 0
-      },
-      ':last-of-type': {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        borderLeftStyle: 'solid',
-        borderLeftWidth: "0.0625rem"
-      },
-      // Handling the border between enabled/disabled buttons
-      ':not(:disabled):has(+ :disabled)': {
-        borderRightWidth: "0.0625rem",
-        borderRightStyle: 'solid'
-      },
-      ':disabled + :not(:disabled)': {
-        borderLeftWidth: "0.0625rem",
-        borderLeftStyle: 'solid'
-      },
-      ':not(:disabled) + :disabled': {
-        borderLeftWidth: "0rem"
-      },
-      ':disabled:has(+ :not(:disabled))': {
-        borderRightWidth: "0rem"
-      },
-      ':last-of-type:nth-of-type(2)': {
-        borderLeftWidth: "0rem"
-      }
-    }
-  };
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CdXR0b24vT3V0bGluZWRCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU84QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQnV0dG9uL091dGxpbmVkQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmltcG9ydCB7IGFscGhhIH0gZnJvbSAnLi4vY29sb3InO1xuaW1wb3J0IHsgVHJhbnNwYXJlbnRCdXR0b24gfSBmcm9tICcuL1RyYW5zcGFyZW50QnV0dG9uJztcblxuZXhwb3J0IGNvbnN0IE91dGxpbmVkQnV0dG9uID0gc3R5bGVkKFRyYW5zcGFyZW50QnV0dG9uKShcbiAgY3NzKHtcbiAgICBib3JkZXJTdHlsZTogJ3NvbGlkJyxcbiAgICBib3JkZXJXaWR0aDogcmVtKDEpLFxuICAgIGJvcmRlckNvbG9yOiAnb3V0bGluZScsXG4gICAgYm94U2hhZG93OiAwLFxuICAgICcmOmZvY3VzLDomYWN0aXZlLDomaG92ZXInOiB7IGJveFNoYWRvdzogMCB9LFxuICAgICcmOmZvY3VzLXZpc2libGUsJjphY3RpdmUnOiB7XG4gICAgICBib3JkZXJDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG4gICAgfSxcbiAgICAnJjpkaXNhYmxlZCc6IHtcbiAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgYm9yZGVyQ29sb3I6IGFscGhhKCdvdXRsaW5lJywgMC4xMiksXG4gICAgICBjdXJzb3I6ICdkZWZhdWx0JyxcbiAgICB9LFxuICB9KSxcbiAgKHsgaXNHcm91cGVkQnV0dG9uID0gZmFsc2UgfSkgPT5cbiAgICBpc0dyb3VwZWRCdXR0b24gJiYge1xuICAgICAgJ1tkYXRhLWJ1dHRvbi1ncm91cD1cIlwiXSAmJzoge1xuICAgICAgICAnOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bm90KDpmaXJzdC1vZi10eXBlKTpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IDAsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiAwLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyTGVmdFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICB9LFxuICAgICAgICAvLyBIYW5kbGluZyB0aGUgYm9yZGVyIGJldHdlZW4gZW5hYmxlZC9kaXNhYmxlZCBidXR0b25zXG4gICAgICAgICc6bm90KDpkaXNhYmxlZCk6aGFzKCsgOmRpc2FibGVkKSc6IHtcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiByZW0oMSksXG4gICAgICAgICAgYm9yZGVyUmlnaHRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgfSxcbiAgICAgICAgJzpkaXNhYmxlZCArIDpub3QoOmRpc2FibGVkKSc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgIH0sXG4gICAgICAgICc6bm90KDpkaXNhYmxlZCkgKyA6ZGlzYWJsZWQnOiB7XG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMCksXG4gICAgICAgIH0sXG4gICAgICAgICc6ZGlzYWJsZWQ6aGFzKCsgOm5vdCg6ZGlzYWJsZWQpKSc6IHtcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiByZW0oMCksXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlOm50aC1vZi10eXBlKDIpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDApLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9XG4pO1xuIl19 */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CdXR0b24vT3V0bGluZWRCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU04QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQnV0dG9uL091dGxpbmVkQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5cbmltcG9ydCB7IGFscGhhIH0gZnJvbSAnLi4vY29sb3InO1xuaW1wb3J0IHsgVHJhbnNwYXJlbnRCdXR0b24gfSBmcm9tICcuL1RyYW5zcGFyZW50QnV0dG9uJztcblxuZXhwb3J0IGNvbnN0IE91dGxpbmVkQnV0dG9uID0gc3R5bGVkKFRyYW5zcGFyZW50QnV0dG9uKShcbiAgY3NzKHtcbiAgICBib3JkZXJTdHlsZTogJ3NvbGlkJyxcbiAgICBib3JkZXJXaWR0aDogJzFweCcsXG4gICAgYm9yZGVyQ29sb3I6ICdvdXRsaW5lJyxcbiAgICBib3hTaGFkb3c6IDAsXG4gICAgJyY6Zm9jdXMsOiZhY3RpdmUsOiZob3Zlcic6IHsgYm94U2hhZG93OiAwIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSwmOmFjdGl2ZSc6IHtcbiAgICAgIGJvcmRlckNvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgICB9LFxuICAgICcmOmRpc2FibGVkJzoge1xuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ291dGxpbmUnLCAwLjEyKSxcbiAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgIH0sXG4gIH0pXG4pO1xuIl19 */");
 //# sourceMappingURL=OutlinedButton.js.map