@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/components/v2/ButtonBase/ButtonBase.js

@@ -0,0 +1,117 @@
+import "core-js/modules/es.array.includes.js";
+import React, { forwardRef } from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
+import Ripple from "./Ripple";
+import { usePressRipple } from "./hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const supportedButtonTypes = ['button', 'submit', 'reset'];
+
+/**
+ * The ButtonBase component serves as a foundational button element that can be extended with
+ * additional styles and functionality. It handles basic button behavior, including disabled
+ * state and type validation.
+ */
+const ButtonBase = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    disabled = false,
+    disableRipple: disableRippleProp = false,
+    type = 'button',
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
+    onPointerCancel,
+    className,
+    children,
+    ...other
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles(undefined, {
+    props: {
+      classes: props.classes
+    }
+  });
+  const {
+    ripples,
+    start,
+    end
+  } = usePressRipple();
+  const reduceMotion = useReduceMotion();
+  const disableRipple = disableRippleProp || reduceMotion;
+  const handlePointerDown = event => {
+    if (!disabled && !disableRipple) {
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+      start(event);
+    }
+    onPointerDown?.(event);
+  };
+  const handlePointerUp = event => {
+    if (!disableRipple) {
+      end(event.pointerId);
+    }
+    onPointerUp?.(event);
+  };
+  const handlePointerCancel = event => {
+    if (!disableRipple) {
+      end(event.pointerId);
+    }
+    onPointerCancel?.(event);
+  };
+  const handlePointerLeave = event => {
+    if (!disableRipple && event.buttons === 1) {
+      end(event.pointerId);
+    }
+    onPointerLeave?.(event);
+  };
+  return /*#__PURE__*/_jsxs("button", {
+    ref: ref,
+    className: cx(classes.root, className),
+    disabled: disabled,
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    onPointerLeave: handlePointerLeave
+    // eslint-disable-next-line react/button-has-type
+    ,
+    type: supportedButtonTypes.includes(type) ? type : 'button',
+    ...other,
+    children: [children, !disableRipple && /*#__PURE__*/_jsx(Ripple, {
+      ripples: ripples
+    })]
+  });
+});
+const useStyles = makeStyles({
+  name: 'ButtonBase'
+})({
+  root: {
+    display: 'inline-flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+    outline: 0,
+    border: 0,
+    margin: 0,
+    borderRadius: 0,
+    padding: 0,
+    cursor: 'pointer',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    MozAppearance: 'none',
+    WebkitAppearance: 'none',
+    textDecoration: 'none',
+    color: 'inherit',
+    '&::-moz-focus-inner': {
+      borderStyle: 'none'
+    },
+    '&:disabled': {
+      pointerEvents: 'none',
+      cursor: 'default'
+    }
+  }
+});
+export default ButtonBase;

package/components/v2/ButtonBase/Ripple.d.ts

@@ -0,0 +1,10 @@
+import type { RippleItem as RippleModel } from './hooks';
+interface RippleProps {
+    ripples: RippleModel[];
+}
+/**
+ * The Ripple component renders the ripple effect for button interactions.
+ */
+declare function Ripple({ ripples }: RippleProps): import("react/jsx-runtime").JSX.Element;
+export default Ripple;
+//# sourceMappingURL=Ripple.d.ts.map

package/components/v2/ButtonBase/Ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/Ripple.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AAqDzD,UAAU,WAAW;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,WAAW,2CAiBvC;AAwDD,eAAe,MAAM,CAAC"}

package/components/v2/ButtonBase/Ripple.js

@@ -0,0 +1,118 @@
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { TransitionGroup } from 'react-transition-group';
+import { makeStyles, keyframes } from '@shopgate/engage/styles';
+import { RIPPLE_PRESS_MS, RIPPLE_RELEASE_MS } from "./constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+function RippleNode({
+  rippleX,
+  rippleY,
+  rippleSize,
+  in: inProp = true,
+  onExited
+}) {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [leaving, setLeaving] = useState(false);
+  useLayoutEffect(() => {
+    if (!inProp) {
+      setLeaving(true);
+    }
+  }, [inProp]);
+  useEffect(() => {
+    if (!inProp && onExited) {
+      const timeoutId = window.setTimeout(onExited, RIPPLE_RELEASE_MS);
+      return () => {
+        window.clearTimeout(timeoutId);
+      };
+    }
+    return undefined;
+  }, [inProp, onExited]);
+  return /*#__PURE__*/_jsx("span", {
+    className: cx(classes.ripple, classes.rippleVisible),
+    style: {
+      width: rippleSize,
+      height: rippleSize,
+      top: -(rippleSize / 2) + rippleY,
+      left: -(rippleSize / 2) + rippleX
+    },
+    children: /*#__PURE__*/_jsx("span", {
+      className: cx(classes.child, leaving && classes.childLeaving)
+    })
+  });
+}
+/**
+ * The Ripple component renders the ripple effect for button interactions.
+ */
+function Ripple({
+  ripples
+}) {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("span", {
+    className: classes.container,
+    children: /*#__PURE__*/_jsx(TransitionGroup, {
+      component: null,
+      exit: true,
+      children: ripples.map(ripple => /*#__PURE__*/_jsx(RippleNode, {
+        rippleX: ripple.x,
+        rippleY: ripple.y,
+        rippleSize: ripple.size
+      }, ripple.key))
+    })
+  });
+}
+const enterKeyframe = keyframes({
+  '0%': {
+    transform: 'scale(0)',
+    opacity: 0.1
+  },
+  '100%': {
+    transform: 'scale(1)',
+    opacity: 0.3
+  }
+});
+const exitKeyframe = keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0
+  }
+});
+const useStyles = makeStyles({
+  name: 'ButtonBaseRipple'
+})(() => ({
+  container: {
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 0,
+    inset: 0,
+    borderRadius: 'inherit'
+  },
+  ripple: {
+    opacity: 0,
+    position: 'absolute'
+  },
+  rippleVisible: {
+    opacity: 0.3,
+    transform: 'scale(1)',
+    animation: `${enterKeyframe} ${RIPPLE_PRESS_MS}ms ease-in-out`
+  },
+  child: {
+    opacity: 1,
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    borderRadius: '50%',
+    backgroundColor: 'currentColor'
+  },
+  childLeaving: {
+    opacity: 0,
+    animation: `${exitKeyframe} ${RIPPLE_RELEASE_MS}ms ease-in-out`
+  }
+}));
+export default Ripple;

package/components/v2/ButtonBase/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const RIPPLE_PRESS_MS = 350;
+export declare const RIPPLE_RELEASE_MS = 250;
+export declare const RIPPLE_MIN_VISIBLE_MS = 150;
+//# sourceMappingURL=constants.d.ts.map

package/components/v2/ButtonBase/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,qBAAqB,MAAM,CAAC"}

package/components/v2/ButtonBase/constants.js

@@ -0,0 +1,3 @@
+export const RIPPLE_PRESS_MS = 350;
+export const RIPPLE_RELEASE_MS = 250;
+export const RIPPLE_MIN_VISIBLE_MS = 150;

package/components/v2/ButtonBase/hooks.d.ts

@@ -0,0 +1,23 @@
+export interface RippleItem {
+    key: number;
+    pointerId: number;
+    x: number;
+    y: number;
+    size: number;
+}
+/**
+ * Manages the active ripple queue.
+ *
+ * A ripple is added on pointer down and removed on pointer up/cancel/leave.
+ * Removal is delayed so very quick taps still show the full press animation.
+ *
+ * The actual exit animation is handled by react-transition-group in the Ripple component.
+ * @returns An object containing the active ripples and functions to start and end ripples.
+ */
+export declare function usePressRipple(): {
+    ripples: RippleItem[];
+    start: (event: React.PointerEvent<HTMLElement>) => void;
+    end: (pointerId: number) => void;
+    clearAll: () => void;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/components/v2/ButtonBase/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/hooks.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc;;mBAKM,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC;qBA2B7B,MAAM;;EA0B3C"}

package/components/v2/ButtonBase/hooks.js

@@ -0,0 +1,56 @@
+import { useCallback, useRef, useState } from 'react';
+import { RIPPLE_MIN_VISIBLE_MS } from "./constants";
+/**
+ * Manages the active ripple queue.
+ *
+ * A ripple is added on pointer down and removed on pointer up/cancel/leave.
+ * Removal is delayed so very quick taps still show the full press animation.
+ *
+ * The actual exit animation is handled by react-transition-group in the Ripple component.
+ * @returns An object containing the active ripples and functions to start and end ripples.
+ */
+export function usePressRipple() {
+  const [ripples, setRipples] = useState([]);
+  const nextKey = useRef(0);
+  const startedAtByPointer = useRef(new Map());
+  const start = useCallback(event => {
+    const element = event.currentTarget;
+    const rect = element.getBoundingClientRect();
+    const rippleX = Math.round(event.clientX - rect.left);
+    const rippleY = Math.round(event.clientY - rect.top);
+    const sizeX = Math.max(element.clientWidth - rippleX, rippleX) * 2 + 2;
+    const sizeY = Math.max(element.clientHeight - rippleY, rippleY) * 2 + 2;
+    const rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
+    startedAtByPointer.current.set(event.pointerId, performance.now());
+    nextKey.current += 1;
+    setRipples(prev => [].concat(prev, [{
+      key: nextKey.current,
+      pointerId: event.pointerId,
+      x: rippleX,
+      y: rippleY,
+      size: rippleSize
+    }]));
+  }, []);
+  const end = useCallback(pointerId => {
+    const startedAt = startedAtByPointer.current.get(pointerId);
+    if (startedAt == null) {
+      return;
+    }
+    const elapsed = performance.now() - startedAt;
+    const delay = Math.max(0, RIPPLE_MIN_VISIBLE_MS - elapsed);
+    window.setTimeout(() => {
+      setRipples(prev => prev.filter(ripple => ripple.pointerId !== pointerId));
+      startedAtByPointer.current.delete(pointerId);
+    }, delay);
+  }, []);
+  const clearAll = useCallback(() => {
+    startedAtByPointer.current.clear();
+    setRipples([]);
+  }, []);
+  return {
+    ripples,
+    start,
+    end,
+    clearAll
+  };
+}

package/components/v2/ButtonBase/index.d.ts

@@ -0,0 +1,3 @@
+export type { ButtonBaseOwnProps, ButtonBaseProps } from './ButtonBase';
+export { default } from './ButtonBase';
+//# sourceMappingURL=index.d.ts.map

package/components/v2/ButtonBase/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/components/v2/ButtonBase/index.js

@@ -0,0 +1 @@
+export { default } from "./ButtonBase";

package/components/v2/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { PaletteColorsWithMain } from '@shopgate/engage/styles';
+/**
+ * The ButtonGroup component can be used to group related buttons.
+ */
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupOwnProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const useStyles: (params: Omit<ButtonGroupOwnProps, "children">, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"root" | "disabled" | "contained" | "disableElevation" | "fullWidth" | "vertical" | "grouped" | "groupedHorizontal" | "groupedVertical" | "groupedContained" | "groupedContainedHorizontal" | "groupedContainedVertical" | "groupedOutlined" | "groupedOutlinedHorizontal" | "groupedOutlinedVertical" | "groupedText" | "groupedTextHorizontal" | "groupedTextVertical", string>;
+    theme: import("@shopgate/engage/styles").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export interface ButtonGroupOwnProps {
+    /**
+     * The variant to use.
+     * @default 'contained'
+     */
+    variant?: 'contained' | 'outlined' | 'text';
+    /**
+     * The size of the component.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The orientation of the buttons in the group.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * If true, no elevation is used for contained buttons.
+     * @default false
+     */
+    disableElevation?: boolean;
+    /**
+     * The color of the component.
+     * @default 'inherit'
+     */
+    color?: PaletteColorsWithMain | 'inherit';
+    /**
+     * If true, the buttons will take up the full width of their container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the ripple effect will be disabled.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * If true, the buttons will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    className?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ReturnType<typeof useStyles>['classes']>;
+    children: React.ReactNode;
+}
+export type ButtonGroupProps = ButtonGroupOwnProps & React.HTMLAttributes<HTMLDivElement>;
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/components/v2/ButtonGroup/ButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE;;GAEG;AACH,QAAA,MAAM,WAAW,mIA4Df,CAAC;AAEH,QAAA,MAAM,SAAS;;cAoDM,CAAA;;;;;;CAmFnB,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEzF,eAAe,WAAW,CAAC"}

package/components/v2/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,195 @@
+import React, { forwardRef } from 'react';
+import capitalize from 'lodash/capitalize';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The ButtonGroup component can be used to group related buttons.
+ */
+const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    variant = 'contained',
+    size = 'medium',
+    orientation = 'horizontal',
+    disableElevation = false,
+    fullWidth = false,
+    disableRipple = false,
+    disabled = false,
+    color = 'inherit',
+    className,
+    children,
+    ...other
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles({
+    color,
+    variant
+  }, {
+    props: {
+      classes: props.classes
+    }
+  });
+  const buttonClassName = cx(classes.grouped, classes[`grouped${capitalize(orientation)}`], classes[`grouped${capitalize(variant)}`], classes[`grouped${capitalize(variant)}${capitalize(orientation)}`], {
+    [classes.disabled]: disabled
+  });
+  return /*#__PURE__*/_jsx("div", {
+    role: "group",
+    className: cx(classes.root, {
+      [classes.contained]: variant === 'contained',
+      [classes.vertical]: orientation === 'vertical',
+      [classes.fullWidth]: fullWidth,
+      [classes.disableElevation]: disableElevation
+    }, className),
+    ref: ref,
+    ...other,
+    children: React.Children.map(children, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return null;
+      }
+      return /*#__PURE__*/React.cloneElement(child, {
+        className: cx(buttonClassName, child.props.className),
+        color: child.props.color || color,
+        disabled: child.props.disabled || disabled,
+        disableElevation: child.props.disableElevation || disableElevation,
+        disableRipple,
+        fullWidth,
+        size: child.props.size || size,
+        variant: child.props.variant || variant
+      });
+    })
+  });
+});
+const useStyles = makeStyles({
+  name: 'ButtonGroup'
+})((theme, props) => {
+  const {
+    color,
+    variant
+  } = props;
+  let cssColor = '';
+  if (color !== 'inherit') {
+    cssColor = color && theme.palette?.[color]?.main ? theme.palette[color].main : theme.palette.primary.main;
+  } else if (variant === 'contained') {
+    // eslint-disable-next-line prefer-destructuring
+    cssColor = theme.palette.grey[200];
+  } else {
+    cssColor = 'currentColor';
+  }
+  return {
+    root: {
+      '--button-group-color': `var(${theme.vars.components.button.color}, ${cssColor})`,
+      '--disabledColor': theme.palette.action.disabled,
+      display: 'inline-flex',
+      borderRadius: `var(${theme.vars.components.button.borderRadius}, ${theme.shape.borderRadius})`
+    },
+    contained: {
+      boxShadow: theme.shadows[2]
+    },
+    disabled: {},
+    disableElevation: {
+      boxShadow: 'none'
+    },
+    fullWidth: {
+      width: '100%'
+    },
+    vertical: {
+      flexDirection: 'column'
+    },
+    grouped: {
+      minWidth: 40
+    },
+    /* eslint-disable tss-unused-classes/unused-classes */
+    groupedHorizontal: {
+      '&:not(:first-of-type)': {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      },
+      '&:not(:last-of-type)': {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      }
+    },
+    groupedVertical: {
+      '&:not(:first-of-type)': {
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0
+      },
+      '&:not(:last-of-type)': {
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
+      }
+    },
+    groupedContained: {
+      boxShadow: 'none !important'
+    },
+    groupedContainedHorizontal: {
+      '&:not(:last-of-type)': {
+        borderRightWidth: 1,
+        borderRightStyle: 'solid',
+        borderRightColor: theme.darken('var(--button-group-color)'),
+        '&:disabled': {
+          borderRightColor: 'var(--disabledColor)'
+        }
+      }
+    },
+    groupedContainedVertical: {
+      '&:not(:last-of-type)': {
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: theme.darken('var(--button-group-color)'),
+        '&:disabled': {
+          borderBottomColor: 'var(--disabledColor)'
+        }
+      }
+    },
+    groupedOutlined: {
+      borderColor: `${theme.lighten('var(--button-group-color)', 0.5)} !important`,
+      '&:hover': {
+        borderColor: 'var(--button-group-color)'
+      },
+      '&:disabled': {
+        borderColor: 'var(--disabledColor) !important'
+      }
+    },
+    groupedOutlinedHorizontal: {
+      '&:not(:first-of-type)': {
+        marginLeft: -1
+      },
+      '&:not(:last-of-type)': {
+        borderRightColor: 'transparent !important'
+      }
+    },
+    groupedOutlinedVertical: {
+      '&:not(:first-of-type)': {
+        marginTop: -1
+      },
+      '&:not(:last-of-type)': {
+        borderBottomColor: 'transparent !important'
+      }
+    },
+    groupedText: {},
+    groupedTextHorizontal: {
+      '&&:not(:last-of-type)': {
+        borderRightWidth: 1,
+        borderRightStyle: 'solid',
+        borderRightColor: `${theme.lighten('var(--button-group-color)', 0.5)}`,
+        '&:disabled': {
+          borderRightColor: 'var(--disabledColor)'
+        }
+      }
+    },
+    groupedTextVertical: {
+      '&&:not(:last-of-type)': {
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: `${theme.lighten('var(--button-group-color)', 0.5)}`,
+        '&:disabled': {
+          borderBottomColor: 'var(--disabledColor)'
+        }
+      }
+    }
+    /* eslint-enable tss-unused-classes/unused-classes */
+  };
+});
+export default ButtonGroup;

package/components/v2/ButtonGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './ButtonGroup';
+export type { ButtonGroupOwnProps, ButtonGroupProps } from './ButtonGroup';
+//# sourceMappingURL=index.d.ts.map

package/components/v2/ButtonGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/components/v2/ButtonGroup/index.js

@@ -0,0 +1 @@
+export { default } from "./ButtonGroup";