@toptal/picasso-button 4.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21 → 4.0.2-alpha-fx-5880-page-head-2-99d1c9975.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist-package/src/ButtonBase/styles.js +1 -1
  2. package/dist-package/src/ButtonBase/styles.js.map +1 -1
  3. package/dist-package/src/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  4. package/dist-package/src/ButtonGroup/ButtonGroup.js +1 -1
  5. package/dist-package/src/ButtonGroup/ButtonGroup.js.map +1 -1
  6. package/dist-package/src/ButtonGroup/styles.d.ts.map +1 -1
  7. package/dist-package/src/ButtonGroup/styles.js +2 -0
  8. package/dist-package/src/ButtonGroup/styles.js.map +1 -1
  9. package/dist-package/src/ButtonSplit/ButtonSplit.js +1 -1
  10. package/dist-package/src/ButtonSplit/ButtonSplit.js.map +1 -1
  11. package/package.json +14 -14
  12. package/src/Button/__snapshots__/test.tsx.snap +2 -2
  13. package/src/ButtonBase/__snapshots__/test.tsx.snap +11 -11
  14. package/src/ButtonBase/styles.ts +1 -1
  15. package/src/ButtonCheckbox/__snapshots__/test.tsx.snap +1 -1
  16. package/src/ButtonGroup/ButtonGroup.tsx +7 -1
  17. package/src/ButtonGroup/__snapshots__/test.tsx.snap +5 -4
  18. package/src/ButtonGroup/styles.ts +2 -0
  19. package/src/ButtonRadio/__snapshots__/test.tsx.snap +1 -1
  20. package/src/ButtonSplit/ButtonSplit.tsx +1 -1
  21. package/src/ButtonSplit/__snapshots__/test.tsx.snap +5 -4
package/dist-package/src/ButtonBase/styles.js CHANGED
@@ -15,7 +15,7 @@ export const createCoreClassNames = ({ disabled, loading, }) => {
15
15
  'ease-out',
16
16
  'shrink-0',
17
17
  'outline-none',
18
- '[&+&]:ml-4',
18
+ '[[data-component-type="button"]+&]:ml-4',
19
19
  ];
20
20
  if (!disabled && !loading) {
21
21
  classNames.push('cursor-pointer');
package/dist-package/src/ButtonBase/styles.js.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -1 +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"}
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,8EAkBvB,CAAA;;;;AAMD,wBAAoE"}
package/dist-package/src/ButtonGroup/ButtonGroup.js CHANGED
@@ -16,7 +16,7 @@ import { createRootClassNames } from './styles';
16
16
  export const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
17
17
  const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
18
18
  const finalClassName = twMerge(createRootClassNames(), className);
19
- return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: finalClassName, style: style }), children));
19
+ return (React.createElement("div", Object.assign({}, rest, { ref: ref, "data-component-type": 'button', className: finalClassName, style: style }), children));
20
20
  });
21
21
  ButtonGroup.defaultProps = {};
22
22
  ButtonGroup.displayName = 'ButtonGroup';
package/dist-package/src/ButtonGroup/ButtonGroup.js.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonGroup/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,gBA4BhC,CAAA"}
1
+ {"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 CHANGED
@@ -2,6 +2,8 @@ export const createRootClassNames = () => {
2
2
  const classNames = [
3
3
  'flex',
4
4
  'justify-start',
5
+ 'items-start',
6
+ '[[data-component-type="button"]+&]:ml-4',
5
7
  '[&>[data-component-type="button"]:hover]:z-[1]',
6
8
  '[&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r-none',
7
9
  '[&>[data-component-type="button"]:first-child:not(:last-child)]:ml-0',
package/dist-package/src/ButtonGroup/styles.js.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -55,7 +55,7 @@ export const ButtonSplit = forwardRef(function ButtonSplit(props, ref) {
55
55
  }), createActionButtonClassNames({
56
56
  variant,
57
57
  }), actionButtonProps === null || actionButtonProps === void 0 ? void 0 : actionButtonProps.className);
58
- const dropdownClassName = twMerge('block cursor-pointer', disabled && '[&>div]:cursor-auto');
58
+ const dropdownClassName = twMerge('inline-flex cursor-pointer', disabled && '[&>div]:cursor-auto');
59
59
  return (React.createElement(ButtonGroup, Object.assign({}, rest, { ref: ref, style: style, className: className }),
60
60
  React.createElement(Button, Object.assign({}, actionButtonProps, { className: actionButtonClassName, size: size, variant: variant, disabled: disabled, onClick: onClick, "data-testid": testIds.actionButton }), children),
61
61
  React.createElement(Dropdown, { content: menu, className: dropdownClassName }, ({ isOpen }) => renderMenuButton({ isOpen }))));
package/dist-package/src/ButtonSplit/ButtonSplit.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonSplit.js","sourceRoot":"","sources":["../../../src/ButtonSplit/ButtonSplit.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAC3E,OAAO,EACL,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,UAAU,CAAA;AA0BjB,MAAM,YAAY,GAAG,CAAC,EACpB,IAAI,EACJ,SAAS,GAIV,EAAE,EAAE;IACH,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,oBAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,GAAI,CAAA;KAClD;IAED,OAAO,oBAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,GAAI,CAAA;AACnD,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IACrE,MAAM,WAAW,GAAG,CAClB,KAAwD,EACxD,EAAE;QACF,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC,CAAA;IAED,OAAO,8BAAM,OAAO,EAAE,WAAW,IAAG,QAAQ,CAAQ,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EACJ,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,OAAO,GAAG,EAAE,KAEV,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,uIAaL,CAAQ,CAAA;IAET,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,EAAE,EAAE;QAC3D,MAAM,mBAAmB,GAAG,OAAO,CACjC,+BAA+B,CAAC;YAC9B,MAAM,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM;YAC/B,OAAO,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO;YACjC,QAAQ,EAAE,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,KAAI,QAAQ;YAC/C,OAAO,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO;SAClC,CAAC,EACF,0BAA0B,CAAC;YACzB,OAAO;YACP,IAAI;YACJ,QAAQ,EAAE,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,KAAI,QAAQ;SAChD,CAAC,EACF,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,SAAS,CAC3B,CAAA;QAED,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;QAEhD,MAAM,UAAU,GAAG,CACjB,oBAAC,MAAM,oBACD,eAAe,IACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,iBACL,OAAO,CAAC,UAAU;YAE/B,oBAAC,YAAY,IAAC,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,GAAI,CAC/C,CACV,CAAA;QAED,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,oBAAC,oBAAoB,QAAE,UAAU,CAAwB,CAC1D,CAAC,CAAC,CAAC,CACF,UAAU,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,OAAO,CACnC,+BAA+B,CAAC;QAC9B,MAAM,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM;QACjC,OAAO,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,OAAO;QACnC,QAAQ,EAAE,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,QAAQ,KAAI,QAAQ;QACjD,OAAO,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,OAAO;KACpC,CAAC,EACF,4BAA4B,CAAC;QAC3B,OAAO;KACR,CAAC,EACF,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,SAAS,CAC7B,CAAA;IAED,MAAM,iBAAiB,GAAG,OAAO,CAC/B,sBAAsB,EACtB,QAAQ,IAAI,qBAAqB,CAClC,CAAA;IAED,OAAO,CACL,oBAAC,WAAW,oBAAK,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;QACjE,oBAAC,MAAM,oBACD,iBAAiB,IACrB,SAAS,EAAE,qBAAqB,EAChC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,iBACH,OAAO,CAAC,YAAY,KAEhC,QAAQ,CACF;QACT,oBAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,IAClD,CAAC,EAAE,MAAM,EAAuB,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC,CACzD,CACC,CACf,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}
1
+ {"version":3,"file":"ButtonSplit.js","sourceRoot":"","sources":["../../../src/ButtonSplit/ButtonSplit.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-button",
3
- "version": "4.0.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b",
3
+ "version": "4.0.2-alpha-fx-5880-page-head-2-99d1c9975.32+99d1c9975",
4
4
  "description": "Toptal UI components library - Button",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -23,15 +23,15 @@
23
23
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
24
24
  "dependencies": {
25
25
  "@mui/base": "5.0.0-beta.40",
26
- "@toptal/picasso-checkbox": "4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b",
27
- "@toptal/picasso-container": "3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b",
28
- "@toptal/picasso-dropdown": "4.1.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.21+d506eff5b",
29
- "@toptal/picasso-icons": "1.6.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.101+d506eff5b",
30
- "@toptal/picasso-link": "3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b",
31
- "@toptal/picasso-loader": "3.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b",
32
- "@toptal/picasso-radio": "4.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b",
33
- "@toptal/picasso-shared": "15.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.194+d506eff5b",
34
- "@toptal/picasso-utils": "1.0.4-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.194+d506eff5b",
26
+ "@toptal/picasso-checkbox": "4.0.1-alpha-fx-5880-page-head-2-99d1c9975.43+99d1c9975",
27
+ "@toptal/picasso-container": "3.0.1-alpha-fx-5880-page-head-2-99d1c9975.43+99d1c9975",
28
+ "@toptal/picasso-dropdown": "4.1.1-alpha-fx-5880-page-head-2-99d1c9975.32+99d1c9975",
29
+ "@toptal/picasso-icons": "1.6.1-alpha-fx-5880-page-head-2-99d1c9975.112+99d1c9975",
30
+ "@toptal/picasso-link": "3.0.1-alpha-fx-5880-page-head-2-99d1c9975.43+99d1c9975",
31
+ "@toptal/picasso-loader": "3.0.1-alpha-fx-5880-page-head-2-99d1c9975.43+99d1c9975",
32
+ "@toptal/picasso-radio": "4.0.1-alpha-fx-5880-page-head-2-99d1c9975.43+99d1c9975",
33
+ "@toptal/picasso-shared": "15.0.1-alpha-fx-5880-page-head-2-99d1c9975.205+99d1c9975",
34
+ "@toptal/picasso-utils": "1.0.4-alpha-fx-5880-page-head-2-99d1c9975.205+99d1c9975",
35
35
  "ap-style-title-case": "^1.1.2",
36
36
  "classnames": "^2.5.1"
37
37
  },
@@ -49,14 +49,14 @@
49
49
  ".": "./dist-package/src/index.js"
50
50
  },
51
51
  "devDependencies": {
52
- "@toptal/picasso-provider": "5.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.115+d506eff5b",
53
- "@toptal/picasso-tailwind-merge": "2.0.1-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.32+d506eff5b",
54
- "@toptal/picasso-test-utils": "1.1.2-alpha-fx-5837-disable-autocomplete-in-tag-selector-d506eff5b.194+d506eff5b"
52
+ "@toptal/picasso-provider": "5.0.1-alpha-fx-5880-page-head-2-99d1c9975.126+99d1c9975",
53
+ "@toptal/picasso-tailwind-merge": "2.0.1-alpha-fx-5880-page-head-2-99d1c9975.43+99d1c9975",
54
+ "@toptal/picasso-test-utils": "1.1.2-alpha-fx-5880-page-head-2-99d1c9975.205+99d1c9975"
55
55
  },
56
56
  "files": [
57
57
  "dist-package/**",
58
58
  "!dist-package/tsconfig.tsbuildinfo",
59
59
  "src"
60
60
  ],
61
- "gitHead": "d506eff5bfac7ece9fc580b464c5e374002efcb5"
61
+ "gitHead": "99d1c997587a3e9541c8b24ddea9590708e07cef"
62
62
  }
package/src/Button/__snapshots__/test.tsx.snap CHANGED
@@ -7,7 +7,7 @@ exports[`Button disabled button as link renders disabled version 1`] = `
7
7
  >
8
8
  <a
9
9
  aria-disabled="true"
10
- 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"
10
+ 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"
11
11
  data-component-type="button"
12
12
  href="URL"
13
13
  role="button"
@@ -31,7 +31,7 @@ exports[`Button disabled button renders disabled version 1`] = `
31
31
  >
32
32
  <button
33
33
  aria-disabled="true"
34
- 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"
34
+ 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"
35
35
  data-component-type="button"
36
36
  disabled=""
37
37
  role="button"
package/src/ButtonBase/__snapshots__/test.tsx.snap CHANGED
@@ -7,7 +7,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
7
7
  >
8
8
  <span
9
9
  aria-disabled="false"
10
- 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"
10
+ 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"
11
11
  data-component-type="button"
12
12
  href="/"
13
13
  role="button"
@@ -31,7 +31,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
31
31
  >
32
32
  <span
33
33
  aria-disabled="false"
34
- 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"
34
+ 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"
35
35
  data-component-type="button"
36
36
  role="button"
37
37
  tabindex="0"
@@ -55,7 +55,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
55
55
  >
56
56
  <a
57
57
  aria-disabled="false"
58
- 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"
58
+ 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"
59
59
  data-component-type="button"
60
60
  href="URL"
61
61
  role="button"
@@ -79,7 +79,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
79
79
  >
80
80
  <a
81
81
  aria-disabled="true"
82
- 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"
82
+ 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"
83
83
  data-component-type="button"
84
84
  href="URL"
85
85
  role="button"
@@ -103,7 +103,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
103
103
  >
104
104
  <a
105
105
  aria-disabled="false"
106
- 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"
106
+ 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"
107
107
  data-component-type="button"
108
108
  href=""
109
109
  role="button"
@@ -127,7 +127,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "a" renders B
127
127
  >
128
128
  <a
129
129
  aria-disabled="false"
130
- 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"
130
+ 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"
131
131
  data-component-type="button"
132
132
  href="/"
133
133
  role="button"
@@ -151,7 +151,7 @@ exports[`ButtonBase when "disabled" prop is false renders Button and does not tr
151
151
  >
152
152
  <button
153
153
  aria-disabled="false"
154
- 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"
154
+ 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"
155
155
  data-component-type="button"
156
156
  role="button"
157
157
  tabindex="0"
@@ -174,7 +174,7 @@ exports[`ButtonBase when "disabled" prop is true renders Button and does not tri
174
174
  >
175
175
  <button
176
176
  aria-disabled="true"
177
- 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"
177
+ 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"
178
178
  data-component-type="button"
179
179
  disabled=""
180
180
  role="button"
@@ -198,7 +198,7 @@ exports[`ButtonBase when "loading" prop is true renders Button with loading stat
198
198
  >
199
199
  <button
200
200
  aria-disabled="false"
201
- 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"
201
+ 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"
202
202
  data-component-type="button"
203
203
  role="button"
204
204
  tabindex="0"
@@ -248,7 +248,7 @@ exports[`ButtonBase when "role" prop is passed renders Button with a custom role
248
248
  >
249
249
  <button
250
250
  aria-disabled="false"
251
- 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"
251
+ 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"
252
252
  data-component-type="button"
253
253
  role="custom"
254
254
  tabindex="0"
@@ -271,7 +271,7 @@ exports[`ButtonBase when "titleCase" prop is true renders Button with transforme
271
271
  >
272
272
  <button
273
273
  aria-disabled="false"
274
- 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"
274
+ 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"
275
275
  data-component-type="button"
276
276
  role="button"
277
277
  tabindex="0"
package/src/ButtonBase/styles.ts CHANGED
@@ -22,7 +22,7 @@ export const createCoreClassNames = ({
22
22
  'ease-out',
23
23
  'shrink-0',
24
24
  'outline-none',
25
- '[&+&]:ml-4',
25
+ '[[data-component-type="button"]+&]:ml-4',
26
26
  ]
27
27
 
28
28
  if (!disabled && !loading) {
package/src/ButtonCheckbox/__snapshots__/test.tsx.snap CHANGED
@@ -7,7 +7,7 @@ exports[`ButtonCheckbox renders 1`] = `
7
7
  >
8
8
  <label
9
9
  aria-disabled="false"
10
- 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"
10
+ 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"
11
11
  data-component-type="button"
12
12
  role="button"
13
13
  tabindex="0"
package/src/ButtonGroup/ButtonGroup.tsx CHANGED
@@ -18,7 +18,13 @@ export const ButtonGroup = forwardRef<HTMLDivElement, Props>(
18
18
  const finalClassName = twMerge(createRootClassNames(), className)
19
19
 
20
20
  return (
21
- <div {...rest} ref={ref} className={finalClassName} style={style}>
21
+ <div
22
+ {...rest}
23
+ ref={ref}
24
+ data-component-type='button'
25
+ className={finalClassName}
26
+ style={style}
27
+ >
22
28
  {children}
23
29
  </div>
24
30
  )
package/src/ButtonGroup/__snapshots__/test.tsx.snap CHANGED
@@ -6,11 +6,12 @@ exports[`ButtonGroup render 1`] = `
6
6
  class="Picasso-root"
7
7
  >
8
8
  <div
9
- 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-["
9
+ 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-["
10
+ data-component-type="button"
10
11
  >
11
12
  <button
12
13
  aria-disabled="false"
13
- 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"
14
+ 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"
14
15
  data-component-type="button"
15
16
  role="button"
16
17
  tabindex="0"
@@ -24,7 +25,7 @@ exports[`ButtonGroup render 1`] = `
24
25
  </button>
25
26
  <button
26
27
  aria-disabled="false"
27
- 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"
28
+ 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"
28
29
  data-component-type="button"
29
30
  role="button"
30
31
  tabindex="0"
@@ -38,7 +39,7 @@ exports[`ButtonGroup render 1`] = `
38
39
  </button>
39
40
  <button
40
41
  aria-disabled="false"
41
- 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"
42
+ 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"
42
43
  data-component-type="button"
43
44
  role="button"
44
45
  tabindex="0"
package/src/ButtonGroup/styles.ts CHANGED
@@ -2,6 +2,8 @@ export const createRootClassNames = () => {
2
2
  const classNames: string[] = [
3
3
  'flex',
4
4
  'justify-start',
5
+ 'items-start',
6
+ '[[data-component-type="button"]+&]:ml-4',
5
7
 
6
8
  '[&>[data-component-type="button"]:hover]:z-[1]',
7
9
 
package/src/ButtonRadio/__snapshots__/test.tsx.snap CHANGED
@@ -7,7 +7,7 @@ exports[`ButtonRadio renders 1`] = `
7
7
  >
8
8
  <label
9
9
  aria-disabled="false"
10
- 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"
10
+ 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"
11
11
  data-component-type="button"
12
12
  role="button"
13
13
  tabindex="0"
package/src/ButtonSplit/ButtonSplit.tsx CHANGED
@@ -131,7 +131,7 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
131
131
  )
132
132
 
133
133
  const dropdownClassName = twMerge(
134
- 'block cursor-pointer',
134
+ 'inline-flex cursor-pointer',
135
135
  disabled && '[&>div]:cursor-auto'
136
136
  )
137
137
 
package/src/ButtonSplit/__snapshots__/test.tsx.snap CHANGED
@@ -18,11 +18,12 @@ exports[`ButtonSplit default render 1`] = `
18
18
  class="Picasso-root"
19
19
  >
20
20
  <div
21
- 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-["
21
+ 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-["
22
+ data-component-type="button"
22
23
  >
23
24
  <button
24
25
  aria-disabled="false"
25
- 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"
26
+ 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"
26
27
  data-component-type="button"
27
28
  role="button"
28
29
  tabindex="0"
@@ -35,14 +36,14 @@ exports[`ButtonSplit default render 1`] = `
35
36
  </span>
36
37
  </button>
37
38
  <div
38
- class="items-center block cursor-pointer"
39
+ class="items-center inline-flex cursor-pointer"
39
40
  >
40
41
  <div
41
42
  class="inline-flex items-center cursor-pointer"
42
43
  >
43
44
  <button
44
45
  aria-disabled="false"
45
- 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"
46
+ 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"
46
47
  data-component-type="button"
47
48
  role="button"
48
49
  tabindex="0"