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

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

@@ -1 +1 @@
-{"version":3,"file":"OutlinedButton.js","names":["css","alpha","TransparentButton","OutlinedButton","borderStyle","borderWidth","borderColor","boxShadow","color","cursor","isGroupedButton","borderTopRightRadius","borderBottomRightRadius","borderRadius","borderRightWidth","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","borderLeftStyle","borderRightStyle"],"sources":["../../../src/Button/OutlinedButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { css } from '@styled-system/css';\nimport { rem } from 'polished';\n\nimport { alpha } from '../color';\nimport { TransparentButton } from './TransparentButton';\n\nexport const OutlinedButton = styled(TransparentButton)(\n  css({\n    borderStyle: 'solid',\n    borderWidth: rem(1),\n    borderColor: 'outline',\n    boxShadow: 0,\n    '&:focus,:&active,:&hover': { boxShadow: 0 },\n    '&:focus-visible,&:active': {\n      borderColor: 'currentColor',\n    },\n    '&:disabled': {\n      color: alpha('on.surface', 0.38),\n      borderColor: alpha('outline', 0.12),\n      cursor: 'default',\n    },\n  }),\n  ({ isGroupedButton = false }) =>\n    isGroupedButton && {\n      '[data-button-group=\"\"] &': {\n        ':first-of-type': {\n          borderTopRightRadius: 0,\n          borderBottomRightRadius: 0,\n        },\n        ':not(:first-of-type):not(:last-of-type)': {\n          borderRadius: 0,\n          borderRightWidth: 0,\n          borderLeftWidth: 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"],"mappings":";AACA,SAASA,GAAT,QAAoB,oBAApB;AAGA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,iBAAT,QAAkC,qBAAlC;AAEA,OAAO,IAAMC,cAAc,GAAG,qBAAOD,iBAAP;EAAA;AAAA;EAAA;EAAA;AAAA,GAC5BF,GAAG,CAAC;EACFI,WAAW,EAAE,OADX;EAEFC,WAAW,aAFT;EAGFC,WAAW,EAAE,SAHX;EAIFC,SAAS,EAAE,CAJT;EAKF,4BAA4B;IAAEA,SAAS,EAAE;EAAb,CAL1B;EAMF,4BAA4B;IAC1BD,WAAW,EAAE;EADa,CAN1B;EASF,cAAc;IACZE,KAAK,EAAEP,KAAK,CAAC,YAAD,EAAe,IAAf,CADA;IAEZK,WAAW,EAAEL,KAAK,CAAC,SAAD,EAAY,IAAZ,CAFN;IAGZQ,MAAM,EAAE;EAHI;AATZ,CAAD,CADyB,EAgB5B;EAAA,gCAAGC,eAAH;EAAA,IAAGA,eAAH,qCAAqB,KAArB;EAAA,OACEA,eAAe,IAAI;IACjB,4BAA4B;MAC1B,kBAAkB;QAChBC,oBAAoB,EAAE,CADN;QAEhBC,uBAAuB,EAAE;MAFT,CADQ;MAK1B,2CAA2C;QACzCC,YAAY,EAAE,CAD2B;QAEzCC,gBAAgB,EAAE,CAFuB;QAGzCC,eAAe,EAAE;MAHwB,CALjB;MAU1B,iBAAiB;QACfC,mBAAmB,EAAE,CADN;QAEfC,sBAAsB,EAAE,CAFT;QAGfC,eAAe,EAAE,OAHF;QAIfH,eAAe;MAJA,CAVS;MAgB1B;MACA,oCAAoC;QAClCD,gBAAgB,aADkB;QAElCK,gBAAgB,EAAE;MAFgB,CAjBV;MAqB1B,+BAA+B;QAC7BJ,eAAe,aADc;QAE7BG,eAAe,EAAE;MAFY,CArBL;MAyB1B,+BAA+B;QAC7BH,eAAe;MADc,CAzBL;MA4B1B,oCAAoC;QAClCD,gBAAgB;MADkB,CA5BV;MA+B1B,gCAAgC;QAC9BC,eAAe;MADe;IA/BN;EADX,CADrB;AAAA,CAhB4B,yuFAAvB"}
+{"version":3,"file":"OutlinedButton.js","names":["css","alpha","TransparentButton","OutlinedButton","_styled","process","env","NODE_ENV","target","label","borderStyle","borderWidth","borderColor","boxShadow","color","cursor"],"sources":["../../../src/Button/OutlinedButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { css } from '@styled-system/css';\n\nimport { alpha } from '../color';\nimport { TransparentButton } from './TransparentButton';\n\nexport const OutlinedButton = styled(TransparentButton)(\n  css({\n    borderStyle: 'solid',\n    borderWidth: '1px',\n    borderColor: 'outline',\n    boxShadow: 0,\n    '&:focus,:&active,:&hover': { boxShadow: 0 },\n    '&:focus-visible,&:active': {\n      borderColor: 'currentColor',\n    },\n    '&:disabled': {\n      color: alpha('on.surface', 0.38),\n      borderColor: alpha('outline', 0.12),\n      cursor: 'default',\n    },\n  })\n);\n"],"mappings":";AACA,SAASA,GAAG,QAAQ,oBAAoB;AAExC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,OAAO,MAAMC,cAAc,gBAAGC,OAAA,CAAOF,iBAAiB,EAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CACrDT,GAAG,CAAC;EACFU,WAAW,EAAE,OAAO;EACpBC,WAAW,EAAE,KAAK;EAClBC,WAAW,EAAE,SAAS;EACtBC,SAAS,EAAE,CAAC;EACZ,0BAA0B,EAAE;IAAEA,SAAS,EAAE;EAAE,CAAC;EAC5C,0BAA0B,EAAE;IAC1BD,WAAW,EAAE;EACf,CAAC;EACD,YAAY,EAAE;IACZE,KAAK,EAAEb,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC;IAChCW,WAAW,EAAEX,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC;IACnCc,MAAM,EAAE;EACV;AACF,CAAC,CAAC,EAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA,8nCACJ,CAAC","ignoreList":[]}

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

@@ -0,0 +1,9 @@
+import type { MenuButtonProps as MenuButtonPropsCore } from '@basic-ui/core';
+import { type ButtonProps } from './Button';
+import { type ButtonGroupProps } from './ButtonGroup';
+export type SplitButtonGroupProps = ButtonGroupProps;
+export declare const SplitButtonGroup: import("react").ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SplitButtonProps = ButtonProps;
+export declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type SplitMenuButtonProps = ButtonProps & MenuButtonPropsCore;
+export declare const SplitMenuButton: import("react").ForwardRefExoticComponent<Omit<SplitMenuButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/build/esm/Button/SplitButton.js

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { MenuButton as MenuButtonCore } from '@basic-ui/core';
+import { Button } from './Button';
+import { ButtonGroup } from './ButtonGroup';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SplitButtonGroup = /*#__PURE__*/forwardRef(function SplitButtonGroup(props, ref) {
+  return /*#__PURE__*/_jsx(ButtonGroup, {
+    ref: ref,
+    variant: "split",
+    ...props
+  });
+});
+export const SplitButton = /*#__PURE__*/forwardRef(function SplitButton(props, ref) {
+  return /*#__PURE__*/_jsx(Button, {
+    ref: ref,
+    ...props
+  });
+});
+export const SplitMenuButton = /*#__PURE__*/forwardRef(function SplitMenuButton(_ref, ref) {
+  let {
+    as = 'button',
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(MenuButtonCore, {
+    as: Button,
+    innerAs: as,
+    ref: ref,
+    "data-split-menu-button": "",
+    ...props
+  });
+});
+//# sourceMappingURL=SplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","names":["forwardRef","MenuButton","MenuButtonCore","Button","ButtonGroup","jsx","_jsx","SplitButtonGroup","props","ref","variant","SplitButton","SplitMenuButton","_ref","as","innerAs"],"sources":["../../../src/Button/SplitButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { MenuButton as MenuButtonCore } from '@basic-ui/core';\nimport type { MenuButtonProps as MenuButtonPropsCore } from '@basic-ui/core';\n\nimport { Button, type ButtonProps } from './Button';\nimport { ButtonGroup, type ButtonGroupProps } from './ButtonGroup';\n\nexport type SplitButtonGroupProps = ButtonGroupProps;\n\nexport const SplitButtonGroup = forwardRef<\n  HTMLDivElement,\n  SplitButtonGroupProps\n>(function SplitButtonGroup(props, ref) {\n  return <ButtonGroup ref={ref} variant=\"split\" {...props} />;\n});\n\nexport type SplitButtonProps = ButtonProps;\n\nexport const SplitButton = forwardRef<HTMLButtonElement, SplitButtonProps>(\n  function SplitButton(props, ref) {\n    return <Button ref={ref} {...props} />;\n  }\n);\n\nexport type SplitMenuButtonProps = ButtonProps & MenuButtonPropsCore;\n\nexport const SplitMenuButton = forwardRef<\n  HTMLButtonElement,\n  SplitMenuButtonProps\n>(function SplitMenuButton({ as = 'button', ...props }, ref) {\n  return (\n    <MenuButtonCore\n      as={Button}\n      innerAs={as}\n      ref={ref}\n      data-split-menu-button=\"\"\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,UAAU,IAAIC,cAAc,QAAQ,gBAAgB;AAG7D,SAASC,MAAM,QAA0B,UAAU;AACnD,SAASC,WAAW,QAA+B,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAInE,OAAO,MAAMC,gBAAgB,gBAAGP,UAAU,CAGxC,SAASO,gBAAgBA,CAACC,KAAK,EAAEC,GAAG,EAAE;EACtC,oBAAOH,IAAA,CAACF,WAAW;IAACK,GAAG,EAAEA,GAAI;IAACC,OAAO,EAAC,OAAO;IAAA,GAAKF;EAAK,CAAG,CAAC;AAC7D,CAAC,CAAC;AAIF,OAAO,MAAMG,WAAW,gBAAGX,UAAU,CACnC,SAASW,WAAWA,CAACH,KAAK,EAAEC,GAAG,EAAE;EAC/B,oBAAOH,IAAA,CAACH,MAAM;IAACM,GAAG,EAAEA,GAAI;IAAA,GAAKD;EAAK,CAAG,CAAC;AACxC,CACF,CAAC;AAID,OAAO,MAAMI,eAAe,gBAAGZ,UAAU,CAGvC,SAASY,eAAeA,CAAAC,IAAA,EAA8BJ,GAAG,EAAE;EAAA,IAAlC;IAAEK,EAAE,GAAG,QAAQ;IAAE,GAAGN;EAAM,CAAC,GAAAK,IAAA;EACpD,oBACEP,IAAA,CAACJ,cAAc;IACbY,EAAE,EAAEX,MAAO;IACXY,OAAO,EAAED,EAAG;IACZL,GAAG,EAAEA,GAAI;IACT,0BAAuB,EAAE;IAAA,GACrBD;EAAK,CACV,CAAC;AAEN,CAAC,CAAC","ignoreList":[]}

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import type { Theme } from '../theme';
-export declare const TransparentButton: 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 TransparentButton: 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/TransparentButton.js

@@ -2,18 +2,19 @@ import _styled from "@emotion/styled/base";
 import { get, css } from '@styled-system/css';
 import { BaseButton } from './BaseButton';
 import { alpha } from '../color';
-export var TransparentButton = /*#__PURE__*/_styled(BaseButton, process.env.NODE_ENV === "production" ? {
+export const TransparentButton = /*#__PURE__*/_styled(BaseButton, process.env.NODE_ENV === "production" ? {
   target: "e18rm4q20"
 } : {
   target: "e18rm4q20",
   label: "TransparentButton"
-})(function (_ref) {
-  var theme = _ref.theme,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color;
+})(_ref => {
+  let {
+    theme,
+    color = 'primary'
+  } = _ref;
   return css({
     backgroundColor: 'transparent',
-    color: get(theme, "colors.".concat(String(color))) || color,
+    color: get(theme, `colors.${String(color)}`) || color,
     '&:disabled': {
       color: alpha('on.surface', 0.38),
       cursor: 'default'
@@ -22,56 +23,12 @@ export var TransparentButton = /*#__PURE__*/_styled(BaseButton, process.env.NODE
       outline: 'none'
     }
   });
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      _ref2$color = _ref2.color,
-      color = _ref2$color === void 0 ? 'primary' : _ref2$color,
-      _ref2$isGroupedButton = _ref2.isGroupedButton,
-      isGroupedButton = _ref2$isGroupedButton === void 0 ? false : _ref2$isGroupedButton;
-  return isGroupedButton && {
-    '[data-button-group=""] &': {
-      borderColor: get(theme, "colors.".concat(String(color))) || (typeof color === 'string' ? 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CdXR0b24vVHJhbnNwYXJlbnRCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFpQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQnV0dG9uL1RyYW5zcGFyZW50QnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGdldCwgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuaW1wb3J0IHsgQmFzZUJ1dHRvbiB9IGZyb20gJy4vQmFzZUJ1dHRvbic7XG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5cbmV4cG9ydCBjb25zdCBUcmFuc3BhcmVudEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgdGhlbWUsIGNvbG9yID0gJ3ByaW1hcnknIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogJ3RyYW5zcGFyZW50JyxcbiAgICAgIGNvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBjdXJzb3I6ICdkZWZhdWx0JyxcbiAgICAgIH0sXG4gICAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgICB9LFxuICAgIH0pLFxuICAoeyB0aGVtZSwgY29sb3IgPSAncHJpbWFyeScsIGlzR3JvdXBlZEJ1dHRvbiA9IGZhbHNlIH0pID0+XG4gICAgaXNHcm91cGVkQnV0dG9uICYmIHtcbiAgICAgICdbZGF0YS1idXR0b24tZ3JvdXA9XCJcIl0gJic6IHtcbiAgICAgICAgYm9yZGVyQ29sb3I6XG4gICAgICAgICAgZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fFxuICAgICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gY29sb3IgOiB1bmRlZmluZWQpLFxuICAgICAgICAnOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyUmlnaHRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgICc6bm90KDpmaXJzdC1vZi10eXBlKTpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyTGVmdFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICB9LFxuICAgICAgICAvLyBIYW5kbGluZyB0aGUgYm9yZGVyIGJldHdlZW4gZW5hYmxlZC9kaXNhYmxlZCBidXR0b25zXG4gICAgICAgICc6bm90KDpkaXNhYmxlZCk6aGFzKCsgOmRpc2FibGVkKSc6IHtcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiByZW0oMSksXG4gICAgICAgICAgYm9yZGVyUmlnaHRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgfSxcbiAgICAgICAgJzpkaXNhYmxlZCArIDpub3QoOmRpc2FibGVkKSc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgIH0sXG4gICAgICAgICc6bm90KDpkaXNhYmxlZCkgKyA6ZGlzYWJsZWQnOiB7XG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMCksXG4gICAgICAgIH0sXG4gICAgICAgICc6ZGlzYWJsZWQ6aGFzKCsgOm5vdCg6ZGlzYWJsZWQpKSc6IHtcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiByZW0oMCksXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlOm50aC1vZi10eXBlKDIpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDApLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9XG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0UmlwcGxlUHJvcGVydGllcyh0aGVtZTogVGhlbWUpIHtcbiAgcmV0dXJuIHtcbiAgICBob3Zlck9wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMudHJhbnNwYXJlbnQuaG92ZXIub3BhY2l0eWApLFxuICAgIGZvY3VzT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5mb2N1cy5vcGFjaXR5YCksXG4gICAgcHJlc3NlZE9wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMudHJhbnNwYXJlbnQucHJlc3NlZC5vcGFjaXR5YCksXG4gICAgcmlwcGxlRW5hYmxlZDogZmFsc2UsXG4gIH07XG59XG4iXX0= */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CdXR0b24vVHJhbnNwYXJlbnRCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9pQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQnV0dG9uL1RyYW5zcGFyZW50QnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGdldCwgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuaW1wb3J0IHsgQmFzZUJ1dHRvbiB9IGZyb20gJy4vQmFzZUJ1dHRvbic7XG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5cbmV4cG9ydCBjb25zdCBUcmFuc3BhcmVudEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgdGhlbWUsIGNvbG9yID0gJ3ByaW1hcnknIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogJ3RyYW5zcGFyZW50JyxcbiAgICAgIGNvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBjdXJzb3I6ICdkZWZhdWx0JyxcbiAgICAgIH0sXG4gICAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgICB9LFxuICAgIH0pXG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0UmlwcGxlUHJvcGVydGllcyh0aGVtZTogVGhlbWUpIHtcbiAgcmV0dXJuIHtcbiAgICBob3Zlck9wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMudHJhbnNwYXJlbnQuaG92ZXIub3BhY2l0eWApLFxuICAgIGZvY3VzT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5mb2N1cy5vcGFjaXR5YCksXG4gICAgcHJlc3NlZE9wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMudHJhbnNwYXJlbnQucHJlc3NlZC5vcGFjaXR5YCksXG4gICAgcmlwcGxlRW5hYmxlZDogZmFsc2UsXG4gIH07XG59XG4iXX0= */");
 export function getRippleProperties(theme) {
   return {
-    hoverOpacity: get(theme, "buttons.overlays.transparent.hover.opacity"),
-    focusOpacity: get(theme, "buttons.overlays.transparent.focus.opacity"),
-    pressedOpacity: get(theme, "buttons.overlays.transparent.pressed.opacity"),
+    hoverOpacity: get(theme, `buttons.overlays.transparent.hover.opacity`),
+    focusOpacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
+    pressedOpacity: get(theme, `buttons.overlays.transparent.pressed.opacity`),
     rippleEnabled: false
   };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TransparentButton.js","names":["get","css","BaseButton","alpha","TransparentButton","theme","color","backgroundColor","String","cursor","outline","isGroupedButton","borderColor","undefined","borderTopRightRadius","borderBottomRightRadius","borderRightStyle","borderRightWidth","borderRadius","borderTopLeftRadius","borderBottomLeftRadius","borderLeftStyle","borderLeftWidth","getRippleProperties","hoverOpacity","focusOpacity","pressedOpacity","rippleEnabled"],"sources":["../../../src/Button/TransparentButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { get, css } from '@styled-system/css';\nimport { rem } from 'polished';\n\nimport { BaseButton } from './BaseButton';\nimport type { Theme } from '../theme';\nimport { alpha } from '../color';\n\nexport const TransparentButton = styled(BaseButton)(\n  ({ theme, color = 'primary' }) =>\n    css({\n      backgroundColor: 'transparent',\n      color: get(theme, `colors.${String(color)}`) || color,\n      '&:disabled': {\n        color: alpha('on.surface', 0.38),\n        cursor: 'default',\n      },\n      '&:focus-visible': {\n        outline: 'none',\n      },\n    }),\n  ({ theme, color = 'primary', isGroupedButton = false }) =>\n    isGroupedButton && {\n      '[data-button-group=\"\"] &': {\n        borderColor:\n          get(theme, `colors.${String(color)}`) ||\n          (typeof color === 'string' ? 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.transparent.hover.opacity`),\n    focusOpacity: get(theme, `buttons.overlays.transparent.focus.opacity`),\n    pressedOpacity: get(theme, `buttons.overlays.transparent.pressed.opacity`),\n    rippleEnabled: false,\n  };\n}\n"],"mappings":";AACA,SAASA,GAAT,EAAcC,GAAd,QAAyB,oBAAzB;AAGA,SAASC,UAAT,QAA2B,cAA3B;AAEA,SAASC,KAAT,QAAsB,UAAtB;AAEA,OAAO,IAAMC,iBAAiB,GAAG,qBAAOF,UAAP;EAAA;AAAA;EAAA;EAAA;AAAA,GAC/B;EAAA,IAAGG,KAAH,QAAGA,KAAH;EAAA,sBAAUC,KAAV;EAAA,IAAUA,KAAV,2BAAkB,SAAlB;EAAA,OACEL,GAAG,CAAC;IACFM,eAAe,EAAE,aADf;IAEFD,KAAK,EAAEN,GAAG,CAACK,KAAD,mBAAkBG,MAAM,CAACF,KAAD,CAAxB,EAAH,IAAyCA,KAF9C;IAGF,cAAc;MACZA,KAAK,EAAEH,KAAK,CAAC,YAAD,EAAe,IAAf,CADA;MAEZM,MAAM,EAAE;IAFI,CAHZ;IAOF,mBAAmB;MACjBC,OAAO,EAAE;IADQ;EAPjB,CAAD,CADL;AAAA,CAD+B,EAa/B;EAAA,IAAGL,KAAH,SAAGA,KAAH;EAAA,wBAAUC,KAAV;EAAA,IAAUA,KAAV,4BAAkB,SAAlB;EAAA,kCAA6BK,eAA7B;EAAA,IAA6BA,eAA7B,sCAA+C,KAA/C;EAAA,OACEA,eAAe,IAAI;IACjB,4BAA4B;MAC1BC,WAAW,EACTZ,GAAG,CAACK,KAAD,mBAAkBG,MAAM,CAACF,KAAD,CAAxB,EAAH,KACC,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCO,SADrC,CAFwB;MAI1B,kBAAkB;QAChBC,oBAAoB,EAAE,CADN;QAEhBC,uBAAuB,EAAE,CAFT;QAGhBC,gBAAgB,EAAE,OAHF;QAIhBC,gBAAgB;MAJA,CAJQ;MAU1B,2CAA2C;QACzCC,YAAY,EAAE;MAD2B,CAVjB;MAa1B,iBAAiB;QACfC,mBAAmB,EAAE,CADN;QAEfC,sBAAsB,EAAE,CAFT;QAGfC,eAAe,EAAE,OAHF;QAIfC,eAAe;MAJA,CAbS;MAmB1B;MACA,oCAAoC;QAClCL,gBAAgB,aADkB;QAElCD,gBAAgB,EAAE;MAFgB,CApBV;MAwB1B,+BAA+B;QAC7BM,eAAe,aADc;QAE7BD,eAAe,EAAE;MAFY,CAxBL;MA4B1B,+BAA+B;QAC7BC,eAAe;MADc,CA5BL;MA+B1B,oCAAoC;QAClCL,gBAAgB;MADkB,CA/BV;MAkC1B,gCAAgC;QAC9BK,eAAe;MADe;IAlCN;EADX,CADrB;AAAA,CAb+B,62GAA1B;AAwDP,OAAO,SAASC,mBAAT,CAA6BlB,KAA7B,EAA2C;EAChD,OAAO;IACLmB,YAAY,EAAExB,GAAG,CAACK,KAAD,+CADZ;IAELoB,YAAY,EAAEzB,GAAG,CAACK,KAAD,+CAFZ;IAGLqB,cAAc,EAAE1B,GAAG,CAACK,KAAD,iDAHd;IAILsB,aAAa,EAAE;EAJV,CAAP;AAMD"}
+{"version":3,"file":"TransparentButton.js","names":["get","css","BaseButton","alpha","TransparentButton","_styled","process","env","NODE_ENV","target","label","_ref","theme","color","backgroundColor","String","cursor","outline","getRippleProperties","hoverOpacity","focusOpacity","pressedOpacity","rippleEnabled"],"sources":["../../../src/Button/TransparentButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { get, css } from '@styled-system/css';\n\nimport { BaseButton } from './BaseButton';\nimport type { Theme } from '../theme';\nimport { alpha } from '../color';\n\nexport const TransparentButton = styled(BaseButton)(\n  ({ theme, color = 'primary' }) =>\n    css({\n      backgroundColor: 'transparent',\n      color: get(theme, `colors.${String(color)}`) || color,\n      '&:disabled': {\n        color: alpha('on.surface', 0.38),\n        cursor: 'default',\n      },\n      '&:focus-visible': {\n        outline: 'none',\n      },\n    })\n);\n\nexport function getRippleProperties(theme: Theme) {\n  return {\n    hoverOpacity: get(theme, `buttons.overlays.transparent.hover.opacity`),\n    focusOpacity: get(theme, `buttons.overlays.transparent.focus.opacity`),\n    pressedOpacity: get(theme, `buttons.overlays.transparent.pressed.opacity`),\n    rippleEnabled: false,\n  };\n}\n"],"mappings":";AACA,SAASA,GAAG,EAAEC,GAAG,QAAQ,oBAAoB;AAE7C,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,KAAK,QAAQ,UAAU;AAEhC,OAAO,MAAMC,iBAAiB,gBAAGC,OAAA,CAAOH,UAAU,EAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CACjDC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC,KAAK,GAAG;EAAU,CAAC,GAAAF,IAAA;EAAA,OAC3BV,GAAG,CAAC;IACFa,eAAe,EAAE,aAAa;IAC9BD,KAAK,EAAEb,GAAG,CAACY,KAAK,EAAE,UAAUG,MAAM,CAACF,KAAK,CAAC,EAAE,CAAC,IAAIA,KAAK;IACrD,YAAY,EAAE;MACZA,KAAK,EAAEV,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC;MAChCa,MAAM,EAAE;IACV,CAAC;IACD,iBAAiB,EAAE;MACjBC,OAAO,EAAE;IACX;EACF,CAAC,CAAC;AAAA,GAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA,8hDACN,CAAC;AAED,OAAO,SAASU,mBAAmBA,CAACN,KAAY,EAAE;EAChD,OAAO;IACLO,YAAY,EAAEnB,GAAG,CAACY,KAAK,EAAE,4CAA4C,CAAC;IACtEQ,YAAY,EAAEpB,GAAG,CAACY,KAAK,EAAE,4CAA4C,CAAC;IACtES,cAAc,EAAErB,GAAG,CAACY,KAAK,EAAE,8CAA8C,CAAC;IAC1EU,aAAa,EAAE;EACjB,CAAC;AACH","ignoreList":[]}

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

@@ -1,8 +1,9 @@
-/// <reference types="react" />
-import type { ButtonProps } from './Button';
-export declare type ButtonGroupContextProps = {
-    variant?: ButtonProps['variant'];
-    direction?: 'row' | 'column';
-};
-export declare const ButtonGroupContext: import("react").Context<ButtonGroupContextProps | null>;
-export declare const useButtonGroupContext: () => ButtonGroupContextProps | null;
+import type { ButtonVariants } from './Button';
+export type ButtonGroupContextProps = {
+    variant?: 'standard' | 'connected' | 'split';
+    buttonVariant?: ButtonVariants;
+    direction?: 'row' | 'column';
+    connected?: boolean;
+};
+export declare const ButtonGroupContext: import("react").Context<ButtonGroupContextProps | null>;
+export declare const useButtonGroupContext: () => ButtonGroupContextProps | null;

package/build/esm/Button/context.js

@@ -1,7 +1,8 @@
 import { createContext, useContext } from 'react';
-export var ButtonGroupContext = /*#__PURE__*/createContext(null);
+
+// ButtonGroup Component
+
+export const ButtonGroupContext = /*#__PURE__*/createContext(null);
 ButtonGroupContext.displayName = 'ButtonGroupContext';
-export var useButtonGroupContext = function useButtonGroupContext() {
-  return useContext(ButtonGroupContext);
-};
+export const useButtonGroupContext = () => useContext(ButtonGroupContext);
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["createContext","useContext","ButtonGroupContext","displayName","useButtonGroupContext"],"sources":["../../../src/Button/context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\r\n\r\nimport type { ButtonProps } from './Button';\r\n\r\n// ButtonGroup Component\r\nexport type ButtonGroupContextProps = {\r\n  variant?: ButtonProps['variant'];\r\n  direction?: 'row' | 'column';\r\n};\r\n\r\nexport const ButtonGroupContext = createContext<ButtonGroupContextProps | null>(\r\n  null\r\n);\r\nButtonGroupContext.displayName = 'ButtonGroupContext';\r\n\r\nexport const useButtonGroupContext = (): ButtonGroupContextProps | null =>\r\n  useContext(ButtonGroupContext);\r\n"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAUA,OAAO,IAAMC,kBAAkB,gBAAGF,aAAa,CAC7C,IAD6C,CAAxC;AAGPE,kBAAkB,CAACC,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB;EAAA,OACnCH,UAAU,CAACC,kBAAD,CADyB;AAAA,CAA9B"}
+{"version":3,"file":"context.js","names":["createContext","useContext","ButtonGroupContext","displayName","useButtonGroupContext"],"sources":["../../../src/Button/context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ButtonVariants } from './Button';\n\n// ButtonGroup Component\nexport type ButtonGroupContextProps = {\n  variant?: 'standard' | 'connected' | 'split';\n  buttonVariant?: ButtonVariants;\n  direction?: 'row' | 'column';\n  connected?: boolean;\n};\n\nexport const ButtonGroupContext = createContext<ButtonGroupContextProps | null>(\n  null\n);\nButtonGroupContext.displayName = 'ButtonGroupContext';\n\nexport const useButtonGroupContext = (): ButtonGroupContextProps | null =>\n  useContext(ButtonGroupContext);\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAIjD;;AAQA,OAAO,MAAMC,kBAAkB,gBAAGF,aAAa,CAC7C,IACF,CAAC;AACDE,kBAAkB,CAACC,WAAW,GAAG,oBAAoB;AAErD,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KACnCH,UAAU,CAACC,kBAAkB,CAAC","ignoreList":[]}

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

@@ -1,2 +1,3 @@
-export * from './Button';
-export * from './ButtonGroup';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './SplitButton';

package/build/esm/Button/index.js

@@ -1,3 +1,4 @@
 export * from './Button';
 export * from './ButtonGroup';
+export * from './SplitButton';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/Button/index.ts"],"sourcesContent":["export * from './Button';\r\nexport * from './ButtonGroup';\r\n"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,eAAd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Button/index.ts"],"sourcesContent":["export * from './Button';\nexport * from './ButtonGroup';\nexport * from './SplitButton';\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,eAAe","ignoreList":[]}

package/build/esm/CheckBox/CheckBox.d.ts

@@ -1,13 +1,13 @@
-import type { ElementType, InputHTMLAttributes, ReactElement } from 'react';
-import type { BoxProps } from '../Box';
-export interface CheckBoxProps extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
-    as?: ElementType<any>;
-    checked?: boolean;
-    indeterminate?: boolean;
-    disabled?: boolean;
-    icon?: ReactElement<{
-        checked?: boolean;
-        disabled?: boolean;
-    }>;
-}
-export declare const CheckBox: import("react").ForwardRefExoticComponent<Pick<CheckBoxProps, "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" | "pattern" | "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" | "key" | "icon" | "multiple" | "list" | "alt" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "src" | "step" | "crossOrigin" | "enterKeyHint" | "max" | "min" | "readOnly" | "required" | "indeterminate"> & import("react").RefAttributes<HTMLInputElement>>;
+import type { ElementType, InputHTMLAttributes, ReactElement } from 'react';
+import type { BoxProps } from '../Box';
+export interface CheckBoxProps extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+    as?: ElementType<any>;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    icon?: ReactElement<{
+        checked?: boolean;
+        disabled?: boolean;
+    }>;
+}
+export declare const CheckBox: import("react").ForwardRefExoticComponent<Omit<CheckBoxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/build/esm/CheckBox/CheckBox.js

@@ -1,9 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "disabled", "checked", "indeterminate", "onChange", "icon", "__css"],
-    _excluded2 = ["as", "icon", "disabled", "children"];
 import { forwardRef, cloneElement } from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
 import { RippleBox } from '../Ripple';
@@ -11,49 +5,35 @@ import { Box } from '../Box';
 import { useTheme } from '../theme';
 import { CheckBoxIcon } from './CheckBoxIcon';
 import { SelectionControlLabel, SelectionControlText } from '../SelectionControl';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var CheckBoxCore = _CheckBoxCore;
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CheckBoxCore = _CheckBoxCore;
 function getColors(disabled, checked) {
   if (checked && disabled) {
     return ['on.surface', 'transparent', 0.38];
   } else if (checked) {
     return ['primary', 'primary', 1];
   }
-
   return ['transparent', 'on.surface', disabled ? 0.38 : 0.54];
 }
-
-var CheckBoxInner = /*#__PURE__*/forwardRef(function CheckBoxInner(props, forwardedRef) {
-  var _cloneElement;
-
-  var _props$as = props.as,
-      Comp = _props$as === void 0 ? 'input' : _props$as,
-      disabled = props.disabled,
-      checked = props.checked,
-      _props$indeterminate = props.indeterminate,
-      indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
-      onChange = props.onChange,
-      _props$icon = props.icon,
-      icon = _props$icon === void 0 ? /*#__PURE__*/_jsx(CheckBoxIcon, {}) : _props$icon,
-      __css = props.__css,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var color = checked ? 'primary' : 'on.surface';
-  var theme = useTheme();
-
-  var _getColors = getColors(disabled, checked),
-      _getColors2 = _slicedToArray(_getColors, 3),
-      backgroundColor = _getColors2[0],
-      borderColor = _getColors2[1],
-      opacity = _getColors2[2];
-
+const CheckBoxInner = /*#__PURE__*/forwardRef(function CheckBoxInner(props, forwardedRef) {
+  const {
+    as: Comp = 'input',
+    disabled,
+    checked,
+    indeterminate = false,
+    onChange,
+    icon = /*#__PURE__*/_jsx(CheckBoxIcon, {}),
+    __css,
+    ...otherProps
+  } = props;
+  const color = checked ? 'primary' : 'on.surface';
+  const theme = useTheme();
+  const [backgroundColor, borderColor, opacity] = getColors(disabled, checked);
   return /*#__PURE__*/_jsxs(Box, {
     position: "relative",
     display: "inline-block",
     minWidth: "auto",
-    children: [/*#__PURE__*/_jsx(RippleBox, _extends(_extends({
+    children: [/*#__PURE__*/_jsx(RippleBox, {
       as: Comp,
       type: "checkbox",
       checked: checked,
@@ -67,9 +47,9 @@ var CheckBoxInner = /*#__PURE__*/forwardRef(function CheckBoxInner(props, forwar
       center: true,
       disabled: disabled,
       "aria-checked": indeterminate ? checked ? 'mixed' : 'false' : checked ? 'true' : 'false',
-      "data-indeterminate": indeterminate ? '' : undefined
-    }, otherProps), {}, {
-      __css: _extends({
+      "data-indeterminate": indeterminate ? '' : undefined,
+      ...otherProps,
+      __css: {
         top: 0,
         left: 0,
         width: "2.5rem",
@@ -81,9 +61,10 @@ var CheckBoxInner = /*#__PURE__*/forwardRef(function CheckBoxInner(props, forwar
         border: 'none',
         borderRadius: 'full',
         zIndex: 1,
-        position: 'absolute'
-      }, __css)
-    })), /*#__PURE__*/_jsx(Box, {
+        position: 'absolute',
+        ...__css
+      }
+    }), /*#__PURE__*/_jsx(Box, {
       __css: {
         position: 'relative',
         top: 0,
@@ -96,34 +77,37 @@ var CheckBoxInner = /*#__PURE__*/forwardRef(function CheckBoxInner(props, forwar
       },
       role: "presentation",
       "aria-hidden": "true",
-      children: /*#__PURE__*/cloneElement(icon, (_cloneElement = {
-        checked: checked,
-        indeterminate: indeterminate
-      }, _defineProperty(_cloneElement, 'data-checkbox-icon', ''), _defineProperty(_cloneElement, "disabled", disabled), _defineProperty(_cloneElement, "backgroundColor", backgroundColor), _defineProperty(_cloneElement, "borderColor", borderColor), _defineProperty(_cloneElement, "opacity", opacity), _cloneElement))
+      children: /*#__PURE__*/cloneElement(icon, {
+        checked,
+        indeterminate,
+        ['data-checkbox-icon']: '',
+        disabled,
+        backgroundColor,
+        borderColor,
+        opacity
+      })
     })]
   });
 });
-export var CheckBox = /*#__PURE__*/forwardRef(function CheckBox(props, forwardedRef) {
-  var _props$as2 = props.as,
-      as = _props$as2 === void 0 ? 'input' : _props$as2,
-      _props$icon2 = props.icon,
-      icon = _props$icon2 === void 0 ? /*#__PURE__*/_jsx(CheckBoxIcon, {}) : _props$icon2,
-      disabled = props.disabled,
-      children = props.children,
-      otherProps = _objectWithoutProperties(props, _excluded2);
-
-  var inner = /*#__PURE__*/_jsx(CheckBoxCore, _extends({
+export const CheckBox = /*#__PURE__*/forwardRef(function CheckBox(props, forwardedRef) {
+  const {
+    as = 'input',
+    icon = /*#__PURE__*/_jsx(CheckBoxIcon, {}),
+    disabled,
+    children,
+    ...otherProps
+  } = props;
+  const inner = /*#__PURE__*/_jsx(CheckBoxCore, {
     as: CheckBoxInner,
     innerAs: as,
     ref: forwardedRef,
     icon: icon,
-    disabled: disabled
-  }, otherProps));
-
+    disabled: disabled,
+    ...otherProps
+  });
   if (!children) {
     return inner;
   }
-
   return /*#__PURE__*/_jsxs(SelectionControlLabel, {
     children: [inner, /*#__PURE__*/_jsx(SelectionControlText, {
       disabled: disabled,

package/build/esm/CheckBox/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","names":["forwardRef","cloneElement","CheckBox","_CheckBoxCore","RippleBox","Box","useTheme","CheckBoxIcon","SelectionControlLabel","SelectionControlText","CheckBoxCore","getColors","disabled","checked","CheckBoxInner","props","forwardedRef","as","Comp","indeterminate","onChange","icon","__css","otherProps","color","theme","backgroundColor","borderColor","opacity","undefined","top","left","width","height","appearance","outline","border","borderRadius","zIndex","position","display","alignItems","justifyContent","children","inner"],"sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';\r\nimport { forwardRef, cloneElement } from 'react';\r\nimport { rem } from 'polished';\r\nimport { CheckBox as _CheckBoxCore } from '@basic-ui/core';\r\n\r\nimport type { RippleBoxProps } from '../Ripple';\r\nimport { RippleBox } from '../Ripple';\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\nimport { useTheme } from '../theme';\r\nimport { CheckBoxIcon } from './CheckBoxIcon';\r\nimport {\r\n  SelectionControlLabel,\r\n  SelectionControlText,\r\n} from '../SelectionControl';\r\n\r\nexport interface CheckBoxProps\r\n  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {\r\n  as?: ElementType<any>;\r\n  checked?: boolean;\r\n  indeterminate?: boolean;\r\n  disabled?: boolean;\r\n  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;\r\n}\r\n\r\nconst CheckBoxCore: FC<\r\n  CheckBoxProps & {\r\n    innerAs?: ElementType<any>;\r\n  }\r\n> = _CheckBoxCore as any;\r\n\r\nfunction getColors(disabled?: boolean, checked?: boolean) {\r\n  if (checked && disabled) {\r\n    return ['on.surface', 'transparent', 0.38];\r\n  } else if (checked) {\r\n    return ['primary', 'primary', 1];\r\n  }\r\n  return ['transparent', 'on.surface', disabled ? 0.38 : 0.54];\r\n}\r\n\r\nconst CheckBoxInner = forwardRef<HTMLInputElement, CheckBoxProps>(\r\n  function CheckBoxInner(props, forwardedRef) {\r\n    const {\r\n      as: Comp = 'input',\r\n      disabled,\r\n      checked,\r\n      indeterminate = false,\r\n      onChange,\r\n      icon = <CheckBoxIcon />,\r\n      __css,\r\n      ...otherProps\r\n    } = props;\r\n    const color = checked ? 'primary' : 'on.surface';\r\n    const theme = useTheme();\r\n    const [backgroundColor, borderColor, opacity] = getColors(\r\n      disabled,\r\n      checked\r\n    );\r\n\r\n    return (\r\n      <Box position=\"relative\" display=\"inline-block\" minWidth=\"auto\">\r\n        <RippleBox<\r\n          RippleBoxProps<\r\n            HTMLInputElement,\r\n            InputHTMLAttributes<HTMLInputElement>\r\n          >\r\n        >\r\n          as={Comp}\r\n          type=\"checkbox\"\r\n          checked={checked}\r\n          onChange={onChange}\r\n          theme={theme}\r\n          ref={forwardedRef}\r\n          rippleColor={color}\r\n          baseOpacity={0}\r\n          hoverOpacity={checked ? 0.16 : 0.12}\r\n          focusOpacity={checked ? 0.24 : 0.16}\r\n          center={true}\r\n          disabled={disabled}\r\n          aria-checked={\r\n            indeterminate\r\n              ? checked\r\n                ? 'mixed'\r\n                : 'false'\r\n              : checked\r\n              ? 'true'\r\n              : 'false'\r\n          }\r\n          data-indeterminate={indeterminate ? '' : undefined}\r\n          {...otherProps}\r\n          __css={{\r\n            top: 0,\r\n            left: 0,\r\n            width: rem(40),\r\n            height: rem(40),\r\n            appearance: 'none',\r\n            ':focus': {\r\n              outline: 'none',\r\n            },\r\n            border: 'none',\r\n            borderRadius: 'full',\r\n            zIndex: 1,\r\n            position: 'absolute',\r\n            ...__css,\r\n          }}\r\n        />\r\n        <Box\r\n          __css={{\r\n            position: 'relative',\r\n            top: 0,\r\n            left: 0,\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            height: rem(40),\r\n            width: rem(40),\r\n          }}\r\n          role=\"presentation\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          {cloneElement(icon, {\r\n            checked,\r\n            indeterminate,\r\n            ['data-checkbox-icon']: '',\r\n            disabled,\r\n            backgroundColor,\r\n            borderColor,\r\n            opacity,\r\n          })}\r\n        </Box>\r\n      </Box>\r\n    );\r\n  }\r\n);\r\n\r\nexport const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(\r\n  function CheckBox(props, forwardedRef) {\r\n    const {\r\n      as = 'input',\r\n      icon = <CheckBoxIcon />,\r\n      disabled,\r\n      children,\r\n      ...otherProps\r\n    } = props;\r\n\r\n    const inner = (\r\n      <CheckBoxCore\r\n        as={CheckBoxInner}\r\n        innerAs={as}\r\n        ref={forwardedRef}\r\n        icon={icon}\r\n        disabled={disabled}\r\n        {...otherProps}\r\n      />\r\n    );\r\n\r\n    if (!children) {\r\n      return inner;\r\n    }\r\n\r\n    return (\r\n      <SelectionControlLabel>\r\n        {inner}\r\n        <SelectionControlText disabled={disabled}>\r\n          {children}\r\n        </SelectionControlText>\r\n      </SelectionControlLabel>\r\n    );\r\n  }\r\n);\r\n"],"mappings":"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"}
+{"version":3,"file":"CheckBox.js","names":["forwardRef","cloneElement","CheckBox","_CheckBoxCore","RippleBox","Box","useTheme","CheckBoxIcon","SelectionControlLabel","SelectionControlText","jsx","_jsx","jsxs","_jsxs","CheckBoxCore","getColors","disabled","checked","CheckBoxInner","props","forwardedRef","as","Comp","indeterminate","onChange","icon","__css","otherProps","color","theme","backgroundColor","borderColor","opacity","position","display","minWidth","children","type","ref","rippleColor","baseOpacity","hoverOpacity","focusOpacity","center","undefined","top","left","width","height","appearance","outline","border","borderRadius","zIndex","alignItems","justifyContent","role","inner","innerAs"],"sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';\nimport { forwardRef, cloneElement } from 'react';\nimport { rem } from 'polished';\nimport { CheckBox as _CheckBoxCore } from '@basic-ui/core';\n\nimport type { RippleBoxProps } from '../Ripple';\nimport { RippleBox } from '../Ripple';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTheme } from '../theme';\nimport { CheckBoxIcon } from './CheckBoxIcon';\nimport {\n  SelectionControlLabel,\n  SelectionControlText,\n} from '../SelectionControl';\n\nexport interface CheckBoxProps\n  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {\n  as?: ElementType<any>;\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;\n}\n\nconst CheckBoxCore: FC<\n  CheckBoxProps & {\n    innerAs?: ElementType<any>;\n  }\n> = _CheckBoxCore as any;\n\nfunction getColors(disabled?: boolean, checked?: boolean) {\n  if (checked && disabled) {\n    return ['on.surface', 'transparent', 0.38];\n  } else if (checked) {\n    return ['primary', 'primary', 1];\n  }\n  return ['transparent', 'on.surface', disabled ? 0.38 : 0.54];\n}\n\nconst CheckBoxInner = forwardRef<HTMLInputElement, CheckBoxProps>(\n  function CheckBoxInner(props, forwardedRef) {\n    const {\n      as: Comp = 'input',\n      disabled,\n      checked,\n      indeterminate = false,\n      onChange,\n      icon = <CheckBoxIcon />,\n      __css,\n      ...otherProps\n    } = props;\n    const color = checked ? 'primary' : 'on.surface';\n    const theme = useTheme();\n    const [backgroundColor, borderColor, opacity] = getColors(\n      disabled,\n      checked\n    );\n\n    return (\n      <Box position=\"relative\" display=\"inline-block\" minWidth=\"auto\">\n        <RippleBox<\n          RippleBoxProps<\n            HTMLInputElement,\n            InputHTMLAttributes<HTMLInputElement>\n          >\n        >\n          as={Comp}\n          type=\"checkbox\"\n          checked={checked}\n          onChange={onChange}\n          theme={theme}\n          ref={forwardedRef}\n          rippleColor={color}\n          baseOpacity={0}\n          hoverOpacity={checked ? 0.16 : 0.12}\n          focusOpacity={checked ? 0.24 : 0.16}\n          center={true}\n          disabled={disabled}\n          aria-checked={\n            indeterminate\n              ? checked\n                ? 'mixed'\n                : 'false'\n              : checked\n              ? 'true'\n              : 'false'\n          }\n          data-indeterminate={indeterminate ? '' : undefined}\n          {...otherProps}\n          __css={{\n            top: 0,\n            left: 0,\n            width: rem(40),\n            height: rem(40),\n            appearance: 'none',\n            ':focus': {\n              outline: 'none',\n            },\n            border: 'none',\n            borderRadius: 'full',\n            zIndex: 1,\n            position: 'absolute',\n            ...__css,\n          }}\n        />\n        <Box\n          __css={{\n            position: 'relative',\n            top: 0,\n            left: 0,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            height: rem(40),\n            width: rem(40),\n          }}\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        >\n          {cloneElement(icon, {\n            checked,\n            indeterminate,\n            ['data-checkbox-icon']: '',\n            disabled,\n            backgroundColor,\n            borderColor,\n            opacity,\n          })}\n        </Box>\n      </Box>\n    );\n  }\n);\n\nexport const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(\n  function CheckBox(props, forwardedRef) {\n    const {\n      as = 'input',\n      icon = <CheckBoxIcon />,\n      disabled,\n      children,\n      ...otherProps\n    } = props;\n\n    const inner = (\n      <CheckBoxCore\n        as={CheckBoxInner}\n        innerAs={as}\n        ref={forwardedRef}\n        icon={icon}\n        disabled={disabled}\n        {...otherProps}\n      />\n    );\n\n    if (!children) {\n      return inner;\n    }\n\n    return (\n      <SelectionControlLabel>\n        {inner}\n        <SelectionControlText disabled={disabled}>\n          {children}\n        </SelectionControlText>\n      </SelectionControlLabel>\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}