@toptal/picasso-button 4.0.6-alpha-fx-null-button-overridable-a6bdbbaa2.0 → 4.0.7

package/src/ButtonBase/ButtonBase.tsx

@@ -5,6 +5,7 @@ import { twMerge } from '@toptal/picasso-tailwind-merge'
 import type {
   StandardProps,
   ButtonOrAnchorProps,
+  OverridableComponent,
   TextLabelProps,
 } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
@@ -30,7 +31,7 @@ export interface Props
   /** ClassName for the content */
   contentClassName?: string
   /** Add an `<Icon />` along Button's children */
-  icon?: ReactElement | null
+  icon?: ReactElement
   /** Icon can be positioned on the left or right */
   iconPosition?: IconPositionType
   /** Shows a loading indicator and disables click events */
@@ -68,88 +69,86 @@ const RootElement = forwardRef(
   }
 )
 
-export const ButtonBase = forwardRef<HTMLButtonElement, Props>(
-  function ButtonBase(props, ref) {
-    const {
-      icon,
-      iconPosition,
-      loading,
-      children,
-      className,
-      contentClassName,
-      style,
-      disabled,
-      onClick,
-      title,
-      value,
-      type,
-      as = 'button',
-      titleCase: propsTitleCase,
-      ...rest
-    } = props
-
-    const titleCase = useTitleCase(propsTitleCase)
-    const finalChildren = [titleCase ? toTitleCase(children) : children]
-    const finalRootElementName = typeof as === 'string' ? as : 'a'
-
-    if (icon) {
-      const iconComponent = getIcon({ icon })
-
-      if (iconPosition === 'left') {
-        finalChildren.unshift(iconComponent)
-      } else {
-        finalChildren.push(iconComponent)
-      }
+export const ButtonBase: OverridableComponent<Props> = forwardRef<
+  HTMLButtonElement,
+  Props
+>(function ButtonBase(props, ref) {
+  const {
+    icon,
+    iconPosition,
+    loading,
+    children,
+    className,
+    contentClassName,
+    style,
+    disabled,
+    onClick,
+    title,
+    value,
+    type,
+    as = 'button',
+    titleCase: propsTitleCase,
+    ...rest
+  } = props
+
+  const titleCase = useTitleCase(propsTitleCase)
+  const finalChildren = [titleCase ? toTitleCase(children) : children]
+  const finalRootElementName = typeof as === 'string' ? as : 'a'
+
+  if (icon) {
+    const iconComponent = getIcon({ icon })
+
+    if (iconPosition === 'left') {
+      finalChildren.unshift(iconComponent)
+    } else {
+      finalChildren.push(iconComponent)
     }
+  }
 
-    const finalClassName = twMerge(
-      createCoreClassNames({ disabled }),
-      className
-    )
-
-    return (
-      <MUIButtonBase
-        {...rest}
-        ref={ref}
-        onClick={getClickHandler(loading, onClick)}
-        className={finalClassName}
-        style={style}
-        aria-disabled={disabled}
-        disabled={disabled}
-        title={title}
-        value={value}
-        type={type}
-        data-component-type='button'
-        tabIndex={rest.tabIndex ?? disabled ? -1 : 0}
-        role={rest.role ?? 'button'}
-        rootElementName={finalRootElementName as keyof HTMLElementTagNameMap}
-        slots={{ root: RootElement }}
-        // @ts-ignore
-        slotProps={{ root: { as } }}
+  const finalClassName = twMerge(createCoreClassNames({ disabled }), className)
+
+  return (
+    <MUIButtonBase
+      {...rest}
+      ref={ref}
+      onClick={getClickHandler(loading, onClick)}
+      className={finalClassName}
+      style={style}
+      aria-disabled={disabled}
+      disabled={disabled}
+      title={title}
+      value={value}
+      type={type}
+      data-component-type='button'
+      tabIndex={rest.tabIndex ?? disabled ? -1 : 0}
+      role={rest.role ?? 'button'}
+      rootElementName={finalRootElementName as keyof HTMLElementTagNameMap}
+      slots={{ root: RootElement }}
+      // @ts-ignore
+      slotProps={{ root: { as } }}
+    >
+      <Container
+        as='span'
+        inline
+        flex
+        direction='row'
+        alignItems='center'
+        className={contentClassName}
       >
-        <Container
-          as='span'
+        {finalChildren}
+      </Container>
+
+      {loading && (
+        <Loader
+          variant='inherit'
+          className='absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]'
           inline
-          flex
-          direction='row'
-          alignItems='center'
-          className={contentClassName}
-        >
-          {finalChildren}
-        </Container>
-
-        {loading && (
-          <Loader
-            variant='inherit'
-            className='absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]'
-            inline
-            size='small'
-          />
-        )}
-      </MUIButtonBase>
-    )
-  }
-)
+          size='small'
+        />
+      )}
+    </MUIButtonBase>
+  )
+})
 
 ButtonBase.defaultProps = {
   as: 'button',

package/src/ButtonBase/__snapshots__/test.tsx.snap

@@ -7,7 +7,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
   >
     <span
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       href="/"
       role="button"
@@ -31,7 +31,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
   >
     <span
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -55,7 +55,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   >
     <a
       aria-disabled="false"
-      class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       href="URL"
       role="button"
@@ -79,7 +79,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   >
     <a
       aria-disabled="true"
-      class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events"
+      class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
       data-component-type="button"
       href="URL"
       role="button"
@@ -103,7 +103,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   >
     <a
       aria-disabled="false"
-      class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       href=""
       role="button"
@@ -127,7 +127,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "a" renders B
   >
     <a
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       href="/"
       role="button"
@@ -151,7 +151,7 @@ exports[`ButtonBase when "disabled" prop is false renders Button and does not tr
   >
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -174,7 +174,7 @@ exports[`ButtonBase when "disabled" prop is true renders Button and does not tri
   >
     <button
       aria-disabled="true"
-      class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events"
+      class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
       data-component-type="button"
       disabled=""
       role="button"
@@ -198,7 +198,7 @@ exports[`ButtonBase when "loading" prop is true renders Button with loading stat
   >
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -248,7 +248,7 @@ exports[`ButtonBase when "role" prop is passed renders Button with a custom role
   >
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       role="custom"
       tabindex="0"
@@ -271,7 +271,7 @@ exports[`ButtonBase when "titleCase" prop is true renders Button with transforme
   >
     <button
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
       data-component-type="button"
       role="button"
       tabindex="0"

package/src/ButtonBase/styles.ts

@@ -22,7 +22,7 @@ export const createCoreClassNames = ({
     'ease-out',
     'shrink-0',
     'outline-none',
-    '[&+&]:ml-4',
+    '[[data-component-type="button"]+&]:ml-4',
   ]
 
   if (!disabled && !loading) {

package/src/ButtonCheckbox/__snapshots__/test.tsx.snap

@@ -7,7 +7,7 @@ exports[`ButtonCheckbox renders 1`] = `
   >
     <label
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
       data-component-type="button"
       role="button"
       tabindex="0"

package/src/ButtonCircular/ButtonCircular.tsx

@@ -1,7 +1,11 @@
 import type { ReactElement, MouseEvent, ElementType } from 'react'
 import React, { forwardRef } from 'react'
 import cx from 'classnames'
-import type { BaseProps, ButtonOrAnchorProps } from '@toptal/picasso-shared'
+import type {
+  BaseProps,
+  ButtonOrAnchorProps,
+  OverridableComponent,
+} from '@toptal/picasso-shared'
 
 import { ButtonBase } from '../ButtonBase'
 import { createRootClassNames, createVariantClassNames } from './styles'
@@ -33,50 +37,51 @@ export interface Props extends BaseProps, ButtonOrAnchorProps {
   responsive?: boolean
 }
 
-export const ButtonCircular = forwardRef<HTMLButtonElement, Props>(
-  function ButtonCircular(props, ref) {
-    const {
-      className,
-      variant = 'primary',
-      active,
-      focused,
-      hovered,
-      disabled,
-      responsive,
-      loading,
-      ...rest
-    } = props
-    const variantClassNames = createVariantClassNames(variant, {
-      disabled,
-      focused,
-      hovered,
-      active,
-    })
+export const ButtonCircular: OverridableComponent<Props> = forwardRef<
+  HTMLButtonElement,
+  Props
+>(function ButtonCircular(props, ref) {
+  const {
+    className,
+    variant = 'primary',
+    active,
+    focused,
+    hovered,
+    disabled,
+    responsive,
+    loading,
+    ...rest
+  } = props
+  const variantClassNames = createVariantClassNames(variant, {
+    disabled,
+    focused,
+    hovered,
+    active,
+  })
 
-    const finalClassName = cx(
-      createRootClassNames({ responsive, active, disabled, focused, hovered }),
-      variantClassNames,
-      className
-    )
+  const finalClassName = cx(
+    createRootClassNames({ responsive, active, disabled, focused, hovered }),
+    variantClassNames,
+    className
+  )
 
-    const contentClassName = cx(
-      'font-semibold whitespace-nowrap',
-      'text-button-small',
-      loading ? 'opacity-0' : ''
-    )
+  const contentClassName = cx(
+    'font-semibold whitespace-nowrap',
+    'text-button-small',
+    loading ? 'opacity-0' : ''
+  )
 
-    return (
-      <ButtonBase
-        {...rest}
-        ref={ref}
-        loading={loading}
-        className={finalClassName}
-        contentClassName={contentClassName}
-        disabled={disabled}
-      />
-    )
-  }
-)
+  return (
+    <ButtonBase
+      {...rest}
+      ref={ref}
+      loading={loading}
+      className={finalClassName}
+      contentClassName={contentClassName}
+      disabled={disabled}
+    />
+  )
+})
 
 ButtonCircular.defaultProps = {
   variant: 'primary',

package/src/ButtonCompound/index.ts

@@ -6,16 +6,7 @@ import { ButtonSplit } from '../ButtonSplit'
 import { ButtonCheckbox } from '../ButtonCheckbox'
 import { ButtonRadio } from '../ButtonRadio'
 
-type ButtonCompoundType = typeof Button & {
-  Group: typeof ButtonGroup
-  Circular: typeof ButtonCircular
-  Action: typeof ButtonAction
-  Split: typeof ButtonSplit
-  Checkbox: typeof ButtonCheckbox
-  Radio: typeof ButtonRadio
-}
-
-export const ButtonCompound: ButtonCompoundType = Object.assign(Button, {
+export const ButtonCompound = Object.assign(Button, {
   Group: ButtonGroup,
   Circular: ButtonCircular,
   Action: ButtonAction,

package/src/ButtonControlLabel/ButtonControlLabel.tsx

@@ -50,33 +50,23 @@ const ButtonControlLabel = ({
   const contentLeftSpacing = size === 'large' ? 1 : 0.5
 
   return (
-    <label htmlFor={id} aria-disabled={disabled}>
-      <Button
-        {...props}
-        className={twMerge(
-          'text-center',
-          createSizeClassNames(size),
-          className
-        )}
-        variant='secondary'
-        size={size}
-        disabled={disabled}
+    <Button
+      {...props}
+      className={twMerge('text-center', createSizeClassNames(size), className)}
+      variant='secondary'
+      size={size}
+      as='label'
+      htmlFor={id}
+      disabled={disabled}
+    >
+      {React.cloneElement(control, { id, checked, value, onChange, disabled })}
+      <Container
+        className={createContentSizeClassNames(size)}
+        left={contentLeftSpacing}
       >
-        {React.cloneElement(control, {
-          id,
-          checked,
-          value,
-          onChange,
-          disabled,
-        })}
-        <Container
-          className={createContentSizeClassNames(size)}
-          left={contentLeftSpacing}
-        >
-          {children}
-        </Container>
-      </Button>
-    </label>
+        {children}
+      </Container>
+    </Button>
   )
 }
 

package/src/ButtonGroup/ButtonGroup.tsx

@@ -18,7 +18,13 @@ export const ButtonGroup = forwardRef<HTMLDivElement, Props>(
     const finalClassName = twMerge(createRootClassNames(), className)
 
     return (
-      <div {...rest} ref={ref} className={finalClassName} style={style}>
+      <div
+        {...rest}
+        ref={ref}
+        data-component-type='button'
+        className={finalClassName}
+        style={style}
+      >
         {children}
       </div>
     )

package/src/ButtonGroup/__snapshots__/test.tsx.snap

@@ -6,11 +6,12 @@ exports[`ButtonGroup render 1`] = `
     class="Picasso-root"
   >
     <div
-      class="flex justify-start [&>[data-component-type="button"]:hover]:z [&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r [&>[data-component-type="button"]:first-child:not(:last-child)]:ml [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[ [&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l [&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[ [&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r [&_:first-child:not(:last-child)_[data-component-type="button"]]:ml [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[ [&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l [&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-["
+      class="flex justify-start items-start [[data-component-type="button"]+&]:ml [&>[data-component-type="button"]:hover]:z [&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r [&>[data-component-type="button"]:first-child:not(:last-child)]:ml [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[ [&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l [&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[ [&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r [&_:first-child:not(:last-child)_[data-component-type="button"]]:ml [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[ [&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l [&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-["
+      data-component-type="button"
     >
       <button
         aria-disabled="false"
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -24,7 +25,7 @@ exports[`ButtonGroup render 1`] = `
       </button>
       <button
         aria-disabled="false"
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black bg-graphite border-graphite text-white shadow-none"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black bg-graphite border-graphite text-white shadow-none"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -38,7 +39,7 @@ exports[`ButtonGroup render 1`] = `
       </button>
       <button
         aria-disabled="false"
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
         data-component-type="button"
         role="button"
         tabindex="0"

package/src/ButtonGroup/styles.ts

@@ -2,6 +2,8 @@ export const createRootClassNames = () => {
   const classNames: string[] = [
     'flex',
     'justify-start',
+    'items-start',
+    '[[data-component-type="button"]+&]:ml-4',
 
     '[&>[data-component-type="button"]:hover]:z-[1]',
 

package/src/ButtonRadio/__snapshots__/test.tsx.snap

@@ -7,7 +7,7 @@ exports[`ButtonRadio renders 1`] = `
   >
     <label
       aria-disabled="false"
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
       data-component-type="button"
       role="button"
       tabindex="0"

package/src/ButtonSplit/ButtonSplit.tsx

@@ -131,7 +131,7 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
     )
 
     const dropdownClassName = twMerge(
-      'block cursor-pointer',
+      'inline-flex cursor-pointer',
       disabled && '[&>div]:cursor-auto'
     )
 

package/src/ButtonSplit/__snapshots__/test.tsx.snap

@@ -18,11 +18,12 @@ exports[`ButtonSplit default render 1`] = `
     class="Picasso-root"
   >
     <div
-      class="flex justify-start [&>[data-component-type="button"]:hover]:z [&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r [&>[data-component-type="button"]:first-child:not(:last-child)]:ml [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[ [&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l [&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[ [&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r [&_:first-child:not(:last-child)_[data-component-type="button"]]:ml [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[ [&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l [&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-["
+      class="flex justify-start items-start [[data-component-type="button"]+&]:ml [&>[data-component-type="button"]:hover]:z [&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r [&>[data-component-type="button"]:first-child:not(:last-child)]:ml [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[ [&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l [&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[ [&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r [&_:first-child:not(:last-child)_[data-component-type="button"]]:ml [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[ [&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l [&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-["
+      data-component-type="button"
     >
       <button
         aria-disabled="false"
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4 active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] transition-[color,background] border-r border-l border-y border-solid border-blue"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4 active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] transition-[color,background] border-r border-l border-y border-solid border-blue"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -35,14 +36,14 @@ exports[`ButtonSplit default render 1`] = `
         </span>
       </button>
       <div
-        class="items-center block cursor-pointer"
+        class="items-center inline-flex cursor-pointer"
       >
         <div
           class="inline-flex items-center cursor-pointer"
         >
           <button
             aria-disabled="false"
-            class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue h-8 py-0 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] min-w px-[0.5em] border-l border-r border-y border-solid border-blue"
+            class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue h-8 py-0 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] min-w px-[0.5em] border-l border-r border-y border-solid border-blue"
             data-component-type="button"
             role="button"
             tabindex="0"

package/src/ButtonSplit/story/Sizes.example.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Button, Menu, Container } from '@toptal/picasso'
-import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => {
   const handleClick = () => console.info('Item is clicked')
@@ -14,7 +13,7 @@ const Example = () => {
   )
 
   return (
-    <Container flex gap={SPACING_4}>
+    <Container flex>
       <Button.Split size='small' menu={menu}>
         Button
       </Button.Split>