@toptal/picasso-button 4.0.6-alpha-FX-NULL-fix-options-rendering-dfe170a27.1 → 4.0.6

package/dist-package/src/ButtonBase/styles.js

@@ -15,7 +15,7 @@ export const createCoreClassNames = ({ disabled, loading, }) => {
         'ease-out',
         'shrink-0',
         'outline-none',
-        '[&+&]:ml-4',
+        '[[data-component-type="button"]+&]:ml-4',
     ];
     if (!disabled && !loading) {
         classNames.push('cursor-pointer');

package/dist-package/src/ButtonBase/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonBase/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,GAKR,EAAY,EAAE;IACb,MAAM,UAAU,GAAG;QACjB,SAAS;QACT,aAAa;QACb,cAAc;QACd,gBAAgB;QAChB,aAAa;QACb,iBAAiB;QACjB,KAAK;QACL,UAAU;QACV,aAAa;QACb,cAAc;QACd,mBAAmB;QACnB,cAAc;QACd,UAAU;QACV,UAAU;QACV,cAAc;QACd,YAAY;KACb,CAAA;IAED,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE;QACzB,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KAClC;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACjC,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;KACvC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonBase/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,GAKR,EAAY,EAAE;IACb,MAAM,UAAU,GAAG;QACjB,SAAS;QACT,aAAa;QACb,cAAc;QACd,gBAAgB;QAChB,aAAa;QACb,iBAAiB;QACjB,KAAK;QACL,UAAU;QACV,aAAa;QACb,cAAc;QACd,mBAAmB;QACnB,cAAc;QACd,UAAU;QACV,UAAU;QACV,cAAc;QACd,yCAAyC;KAC1C,CAAA;IAED,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE;QACzB,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KAClC;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACjC,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;KACvC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}

package/dist-package/src/ButtonGroup/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,4EAA4E;IAC5E,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,8EAYvB,CAAA;;;;AAMD,wBAAoE"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,4EAA4E;IAC5E,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,8EAkBvB,CAAA;;;;AAMD,wBAAoE"}

package/dist-package/src/ButtonGroup/ButtonGroup.js

@@ -16,7 +16,7 @@ import { createRootClassNames } from './styles';
 export const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
     const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
     const finalClassName = twMerge(createRootClassNames(), className);
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: finalClassName, style: style }), children));
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, "data-component-type": 'button', className: finalClassName, style: style }), children));
 });
 ButtonGroup.defaultProps = {};
 ButtonGroup.displayName = 'ButtonGroup';

package/dist-package/src/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,MAAM,cAAc,GAAG,OAAO,CAAC,oBAAoB,EAAE,EAAE,SAAS,CAAC,CAAA;IAEjE,OAAO,CACL,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAC7D,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG,EAAE,CAAA;AAE7B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAA"}
+{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,MAAM,cAAc,GAAG,OAAO,CAAC,oBAAoB,EAAE,EAAE,SAAS,CAAC,CAAA;IAEjE,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,yBACY,QAAQ,EAC5B,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,KAAK,KAEX,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG,EAAE,CAAA;AAE7B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAA"}

package/dist-package/src/ButtonGroup/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,gBA4BhC,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,gBA8BhC,CAAA"}

package/dist-package/src/ButtonGroup/styles.js

@@ -2,6 +2,8 @@ export const createRootClassNames = () => {
     const classNames = [
         'flex',
         'justify-start',
+        'items-start',
+        '[[data-component-type="button"]+&]:ml-4',
         '[&>[data-component-type="button"]:hover]:z-[1]',
         '[&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r-none',
         '[&>[data-component-type="button"]:first-child:not(:last-child)]:ml-0',

package/dist-package/src/ButtonGroup/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,UAAU,GAAa;QAC3B,MAAM;QACN,eAAe;QAEf,gDAAgD;QAEhD,gFAAgF;QAChF,sEAAsE;QAEtE,oFAAoF;QACpF,iFAAiF;QAEjF,gFAAgF;QAChF,2EAA2E;QAE3E,iBAAiB;QACjB,iFAAiF;QACjF,uEAAuE;QAEvE,qFAAqF;QACrF,kFAAkF;QAElF,iFAAiF;QACjF,4EAA4E;KAC7E,CAAA;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,UAAU,GAAa;QAC3B,MAAM;QACN,eAAe;QACf,aAAa;QACb,yCAAyC;QAEzC,gDAAgD;QAEhD,gFAAgF;QAChF,sEAAsE;QAEtE,oFAAoF;QACpF,iFAAiF;QAEjF,gFAAgF;QAChF,2EAA2E;QAE3E,iBAAiB;QACjB,iFAAiF;QACjF,uEAAuE;QAEvE,qFAAqF;QACrF,kFAAkF;QAElF,iFAAiF;QACjF,4EAA4E;KAC7E,CAAA;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}

package/dist-package/src/ButtonSplit/ButtonSplit.js

@@ -55,7 +55,7 @@ export const ButtonSplit = forwardRef(function ButtonSplit(props, ref) {
     }), createActionButtonClassNames({
         variant,
     }), actionButtonProps === null || actionButtonProps === void 0 ? void 0 : actionButtonProps.className);
-    const dropdownClassName = twMerge('block cursor-pointer', disabled && '[&>div]:cursor-auto');
+    const dropdownClassName = twMerge('inline-flex cursor-pointer', disabled && '[&>div]:cursor-auto');
     return (React.createElement(ButtonGroup, Object.assign({}, rest, { ref: ref, style: style, className: className }),
         React.createElement(Button, Object.assign({}, actionButtonProps, { className: actionButtonClassName, size: size, variant: variant, disabled: disabled, onClick: onClick, "data-testid": testIds.actionButton }), children),
         React.createElement(Dropdown, { content: menu, className: dropdownClassName }, ({ isOpen }) => renderMenuButton({ isOpen }))));

package/dist-package/src/ButtonSplit/ButtonSplit.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSplit.js","sourceRoot":"","sources":["../../../src/ButtonSplit/ButtonSplit.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ButtonSplit.js","sourceRoot":"","sources":["../../../src/ButtonSplit/ButtonSplit.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-button",
-  "version": "4.0.6-alpha-FX-NULL-fix-options-rendering-dfe170a27.1+dfe170a27",
+  "version": "4.0.6",
   "description": "Toptal UI components library - Button",
   "publishConfig": {
     "access": "public"
@@ -22,17 +22,17 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@mui/base": "5.0.0-beta.40",
-    "@toptal/picasso-checkbox": "5.0.3-alpha-FX-NULL-fix-options-rendering-dfe170a27.1+dfe170a27",
-    "@toptal/picasso-container": "3.1.1-alpha-FX-NULL-fix-options-rendering-dfe170a27.8+dfe170a27",
-    "@toptal/picasso-dropdown": "4.1.2-alpha-FX-NULL-fix-options-rendering-dfe170a27.15+dfe170a27",
-    "@toptal/picasso-icons": "1.6.2-alpha-FX-NULL-fix-options-rendering-dfe170a27.15+dfe170a27",
-    "@toptal/picasso-link": "3.0.3-alpha-FX-NULL-fix-options-rendering-dfe170a27.5+dfe170a27",
-    "@toptal/picasso-loader": "3.0.2-alpha-FX-NULL-fix-options-rendering-dfe170a27.15+dfe170a27",
-    "@toptal/picasso-radio": "5.0.3-alpha-FX-NULL-fix-options-rendering-dfe170a27.1+dfe170a27",
-    "@toptal/picasso-shared": "15.0.1-alpha-FX-NULL-fix-options-rendering-dfe170a27.209+dfe170a27",
-    "@toptal/picasso-utils": "2.0.1-alpha-FX-NULL-fix-options-rendering-dfe170a27.15+dfe170a27",
+    "@toptal/picasso-checkbox": "5.0.2",
+    "@toptal/picasso-container": "3.1.0",
+    "@toptal/picasso-dropdown": "4.1.1",
+    "@toptal/picasso-icons": "1.6.1",
+    "@toptal/picasso-loader": "3.0.1",
+    "@toptal/picasso-radio": "5.0.2",
+    "@toptal/picasso-shared": "15.0.0",
+    "@toptal/picasso-utils": "2.0.0",
+    "@toptal/picasso-link": "3.0.2",
     "ap-style-title-case": "^1.1.2",
+    "@mui/base": "5.0.0-beta.40",
     "classnames": "^2.5.1"
   },
   "sideEffects": [
@@ -40,23 +40,22 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@toptal/picasso-provider": "*",
-    "@toptal/picasso-tailwind": ">=2.7",
     "@toptal/picasso-tailwind-merge": "^2.0.0",
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-provider": "*",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.1-alpha-FX-NULL-fix-options-rendering-dfe170a27.130+dfe170a27",
-    "@toptal/picasso-tailwind-merge": "2.0.2-alpha-FX-NULL-fix-options-rendering-dfe170a27.15+dfe170a27",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-FX-NULL-fix-options-rendering-dfe170a27.209+dfe170a27"
+    "@toptal/picasso-tailwind-merge": "2.0.1",
+    "@toptal/picasso-provider": "5.0.0",
+    "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
-  ],
-  "gitHead": "dfe170a273a7bce59d9ccd64bef91d470d398548"
+  ]
 }

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

@@ -7,7 +7,7 @@ exports[`Button disabled button as link renders disabled version 1`] = `
   >
     <a
       aria-disabled="true"
-      class="font-inherit focus:outline-none 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 no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
+      class="font-inherit focus:outline-none 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 no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
       data-component-type="button"
       href="URL"
       role="button"
@@ -31,7 +31,7 @@ exports[`Button disabled button renders disabled version 1`] = `
   >
     <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 no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
+      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 no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
       data-component-type="button"
       disabled=""
       role="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/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>

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

@@ -16,19 +16,16 @@ const Example = () => {
     </Menu>
   )
 
-  const customStyles = { marginRight: '1em' }
-
   const renderStates = ({
     variant = 'primary',
   }: { variant?: ButtonSplitProps['variant'] } = {}) => {
     return (
       <>
-        <Button.Split style={customStyles} variant={variant} menu={menu}>
+        <Button.Split variant={variant} menu={menu}>
           Normal
         </Button.Split>
 
         <Button.Split
-          style={customStyles}
           variant={variant}
           menu={menu}
           actionButtonProps={{ hovered: true }}
@@ -36,7 +33,6 @@ const Example = () => {
           Action Hovered
         </Button.Split>
         <Button.Split
-          style={customStyles}
           variant={variant}
           menu={menu}
           menuButtonProps={{ hovered: true }}
@@ -45,7 +41,6 @@ const Example = () => {
         </Button.Split>
 
         <Button.Split
-          style={customStyles}
           variant={variant}
           menu={menu}
           actionButtonProps={{ focused: true }}
@@ -54,7 +49,6 @@ const Example = () => {
         </Button.Split>
 
         <Button.Split
-          style={customStyles}
           variant={variant}
           menu={menu}
           menuButtonProps={{ focused: true }}
@@ -63,7 +57,6 @@ const Example = () => {
         </Button.Split>
 
         <Button.Split
-          style={customStyles}
           variant={variant}
           menu={menu}
           actionButtonProps={{ active: true }}
@@ -72,7 +65,6 @@ const Example = () => {
         </Button.Split>
 
         <Button.Split
-          style={customStyles}
           variant={variant}
           menu={menu}
           menuButtonProps={{ active: true }}

package/src/ButtonSplit/story/Variants.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 menu={menu} variant='primary'>
         Primary
       </Button.Split>

package/LICENSE

@@ -1,20 +0,0 @@
-MIT License
-
-Copyright (c) 2021-2022 Toptal, LLC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the “Software”), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.