@toptal/picasso-checkbox 2.0.7-alpha-fx-5525-container-4ebd3caa7.47 → 3.0.0

package/dist-package/src/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import type { FormGroupProps } from '@material-ui/core';
+import type { HTMLAttributes } from 'react';
 import type { GridSizeProps, GridProps } from '@toptal/picasso-grid';
 declare type GridSpacing = GridProps['spacing'];
-export interface Props extends FormGroupProps, GridSizeProps {
+export interface Props extends HTMLAttributes<HTMLDivElement>, GridSizeProps {
     /** Align checkboxes horizontally  */
     horizontal?: boolean;
     /** Defines amount of space between checkbox components (in px) */

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAKvD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAKpE,aAAK,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAA;AAEvC,MAAM,WAAW,KAAM,SAAQ,cAAc,EAAE,aAAa;IAC1D,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kEAAkE;IAClE,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAMD,QAAA,MAAM,aAAa;YAAW,KAAK;;;;CAsClC,CAAA;AAMD,eAAe,aAAa,CAAA"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAIpE,aAAK,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAA;AAEvC,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,aAAa;IAC1E,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kEAAkE;IAClE,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAID,QAAA,MAAM,aAAa;YAAW,KAAK;;;;CAsClC,CAAA;AAMD,eAAe,aAAa,CAAA"}

package/dist-package/src/CheckboxGroup/CheckboxGroup.js

@@ -9,25 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/* eslint-disable react/no-array-index-key */
 import React from 'react';
-import { FormGroup } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { GridCompound as Grid } from '@toptal/picasso-grid';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoCheckboxGroup',
-});
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+const HORIZONTAL_SPACING = 16;
 const CheckboxGroup = (props) => {
     const { horizontal, spacing, xs, sm, md, lg, xl, className } = props, rest = __rest(props, ["horizontal", "spacing", "xs", "sm", "md", "lg", "xl", "className"]);
-    const classes = useStyles();
-    const { spacing: themeSpacing } = useTheme();
     const direction = horizontal ? 'row' : 'column';
-    const gridSpacing = (spacing !== null && spacing !== void 0 ? spacing : horizontal) ? themeSpacing(2) : 0;
+    const gridSpacing = (spacing !== null && spacing !== void 0 ? spacing : horizontal) ? HORIZONTAL_SPACING : 0;
     const children = React.Children.toArray(rest.children);
-    return (React.createElement(FormGroup, Object.assign({}, rest, { classes: classes, className: cx(classes.root, className) }),
-        React.createElement(Grid, { direction: direction, spacing: gridSpacing, className: 'mt-0 mb-0' }, children.map((child, index) => (React.createElement(Grid.Item, { key: index, className: 'leading-none [&&]:pt-0 [&&]:pb-0', xs: xs, sm: sm, md: md, lg: lg, xl: xl }, child))))));
+    return (React.createElement("div", Object.assign({}, rest, { className: twMerge('flex flex-col flex-wrap -mr-[0.5em] -mb-[0.5em]', horizontal && 'flex-row', className) }),
+        React.createElement(Grid, { direction: direction, spacing: gridSpacing, className: 'mt-0 mb-0' }, children.map((child, index) => (React.createElement(Grid.Item, { key: index, className: 'leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]', xs: xs, sm: sm, md: md, lg: lg, xl: xl }, child))))));
 };
 CheckboxGroup.defaultProps = {
     horizontal: false,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,6CAA6C;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3D,OAAO,MAAM,MAAM,UAAU,CAAA;AAW7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvE,oEAA+D,CAAQ,CAAA;IAE7E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE5C,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAA;IAC/C,MAAM,WAAW,GAAG,CAAA,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,UAAU,EAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE/D,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAEtD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;QAEtC,oBAAC,IAAI,IACH,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,WAA0B,EACnC,SAAS,EAAC,WAAW,IAEpB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,IAAI,CAAC,IAAI,IACR,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,kCAAkC,EAC5C,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,IAEL,KAAK,CACI,CACb,CAAC,CACG,CACG,CACb,CAAA;AACH,CAAC,CAAA;AAED,aAAa,CAAC,YAAY,GAAG;IAC3B,UAAU,EAAE,KAAK;CAClB,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAE7B,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvE,oEAA+D,CAAQ,CAAA;IAE7E,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAA;IAC/C,MAAM,WAAW,GAAG,CAAA,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,UAAU,EAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAA;IAElE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAEtD,OAAO,CACL,6CACM,IAAI,IACR,SAAS,EAAE,OAAO,CAChB,iDAAiD,EACjD,UAAU,IAAI,UAAU,EACxB,SAAS,CACV;QAED,oBAAC,IAAI,IACH,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,WAA0B,EACnC,SAAS,EAAC,WAAW,IAEpB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,IAAI,CAAC,IAAI,IACR,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,yDAAyD,EACnE,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,IAEL,KAAK,CACI,CACb,CAAC,CACG,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,aAAa,CAAC,YAAY,GAAG;IAC3B,UAAU,EAAE,KAAK;CAClB,CAAA;AAED,eAAe,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-checkbox",
-  "version": "2.0.7-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
+  "version": "3.0.0",
   "description": "Toptal UI components library - Checkbox",
   "publishConfig": {
     "access": "public"
@@ -22,14 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "1.0.4-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
-    "@toptal/picasso-form": "3.0.7-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
-    "@toptal/picasso-grid": "3.0.6-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
-    "@toptal/picasso-shared": "15.0.1-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
-    "@toptal/picasso-utils": "1.0.4-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
+    "@toptal/picasso-container": "2.0.0",
+    "@toptal/picasso-form": "4.0.0",
+    "@toptal/picasso-grid": "4.0.0",
+    "@toptal/picasso-shared": "15.0.0",
+    "@toptal/picasso-utils": "1.0.3",
     "ap-style-title-case": "^1.1.2",
-    "classnames": "^2.5.1",
-    "tailwind-merge": "^2.2.2"
+    "classnames": "^2.5.1"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -38,12 +37,14 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "@toptal/picasso-tailwind": ">=2.4.0",
-    "react": ">=16.12.0 < 19.0.0"
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
+    "react": ">=16.12.0 < 19.0.0",
+    "@toptal/picasso-tailwind": ">=2.7"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.2-alpha-fx-5525-container-4ebd3caa7.89+4ebd3caa7",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
+    "@toptal/picasso-provider": "5.0.0",
+    "@toptal/picasso-tailwind-merge": "1.2.0",
+    "@toptal/picasso-test-utils": "1.1.1",
     "styled-components": "^6.1.1"
   },
   "exports": {
@@ -53,6 +54,5 @@
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
-  ],
-  "gitHead": "4ebd3caa763220e28d7bfe67e6a63a05ea37599a"
+  ]
 }

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

@@ -6,13 +6,13 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiFormGroup-root PicassoCheckboxGroup-root PicassoCheckboxGroup-root"
+      class="flex flex-wrap -mr -mb flex-row"
     >
       <div
         class="box-border flex flex-row flex-wrap items-start justify-start w-[calc(100%+16px)] -m mt-0 mb-0"
       >
         <div
-          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
+          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
             class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
@@ -51,7 +51,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           </label>
         </div>
         <div
-          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
+          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
             class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
@@ -90,7 +90,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           </label>
         </div>
         <div
-          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
+          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
             class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
@@ -129,7 +129,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           </label>
         </div>
         <div
-          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
+          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
             class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
@@ -168,7 +168,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           </label>
         </div>
         <div
-          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
+          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
             class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
@@ -207,7 +207,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           </label>
         </div>
         <div
-          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
+          class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
         >
           <label
             class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"

package/src/CheckboxGroup/CheckboxGroup.tsx

@@ -1,44 +1,37 @@
 /* eslint-disable react/no-array-index-key */
+import type { HTMLAttributes } from 'react'
 import React from 'react'
-import type { FormGroupProps } from '@material-ui/core'
-import { FormGroup } from '@material-ui/core'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles, useTheme } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { GridSizeProps, GridProps } from '@toptal/picasso-grid'
 import { GridCompound as Grid } from '@toptal/picasso-grid'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 type GridSpacing = GridProps['spacing']
 
-export interface Props extends FormGroupProps, GridSizeProps {
+export interface Props extends HTMLAttributes<HTMLDivElement>, GridSizeProps {
   /** Align checkboxes horizontally  */
   horizontal?: boolean
   /** Defines amount of space between checkbox components (in px) */
   spacing?: GridSpacing
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoCheckboxGroup',
-})
+const HORIZONTAL_SPACING = 16
 
 const CheckboxGroup = (props: Props) => {
   const { horizontal, spacing, xs, sm, md, lg, xl, className, ...rest } = props
 
-  const classes = useStyles()
-  const { spacing: themeSpacing } = useTheme()
-
   const direction = horizontal ? 'row' : 'column'
-  const gridSpacing = spacing ?? horizontal ? themeSpacing(2) : 0
+  const gridSpacing = spacing ?? horizontal ? HORIZONTAL_SPACING : 0
 
   const children = React.Children.toArray(rest.children)
 
   return (
-    <FormGroup
+    <div
       {...rest}
-      classes={classes}
-      className={cx(classes.root, className)}
+      className={twMerge(
+        'flex flex-col flex-wrap -mr-[0.5em] -mb-[0.5em]',
+        horizontal && 'flex-row',
+        className
+      )}
     >
       <Grid
         direction={direction}
@@ -48,7 +41,7 @@ const CheckboxGroup = (props: Props) => {
         {children.map((child, index) => (
           <Grid.Item
             key={index}
-            className='leading-none [&&]:pt-0 [&&]:pb-0'
+            className='leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]'
             xs={xs}
             sm={sm}
             md={md}
@@ -59,7 +52,7 @@ const CheckboxGroup = (props: Props) => {
           </Grid.Item>
         ))}
       </Grid>
-    </FormGroup>
+    </div>
   )
 }
 

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.

package/dist-package/src/CheckboxGroup/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/CheckboxGroup/styles.ts"],"names":[],"mappings":";AAEA,wBAUI"}

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

@@ -1,11 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        marginRight: '-0.5em',
-        marginBottom: '-0.5em',
-        '& .picasso-checkbox': {
-            marginBottom: '0.5em',
-        },
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/CheckboxGroup/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,QAAQ;QAEtB,qBAAqB,EAAE;YACrB,YAAY,EAAE,OAAO;SACtB;KACF;CACF,CAAC,CAAA"}

package/src/CheckboxGroup/styles.ts

@@ -1,13 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      marginRight: '-0.5em',
-      marginBottom: '-0.5em',
-
-      '& .picasso-checkbox': {
-        marginBottom: '0.5em',
-      },
-    },
-  })