@toptal/picasso-section 2.0.8-alpha-fx-4618-migrate-section-bdcbfe499.7 → 2.0.8

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

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AASjE,aAAK,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAA;AAE3D,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,mCAAmC;IACnC,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAA;CACzC;AA8BD,eAAO,MAAM,OAAO,8EA+GlB,CAAA;AASF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/Section/Section.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAA;AAInD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AASjE,aAAK,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAA;AAE3D,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,mCAAmC;IACnC,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAA;CACzC;AAMD,eAAO,MAAM,OAAO,8EAiHlB,CAAA;AASF,eAAe,OAAO,CAAA"}

package/dist-package/src/Section/Section.js

@@ -9,41 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import cx from 'classnames';
 import React, { forwardRef, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Collapse } from '@material-ui/core';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
 import { isString, Rotate180 } from '@toptal/picasso-utils';
 import { ArrowDownMinor16 } from '@toptal/picasso-icons';
-import { twMerge } from 'tailwind-merge';
-import { Collapse } from '@toptal/picasso-collapse';
-const variantMapping = {
-    default: '[&>_:last-child:not(:first-child)]:mt-6',
-    bordered: [
-        '[&>_:last-child:not(:first-child)]:mt-6',
-        'border rounded-md border-solid border-gray-300',
-        'p-8 [&_>_:last-child]:pb-0',
-    ],
-    withHeaderBar: 'p-0 rounded-md border border-solid border-gray-400',
-};
-const headerMapping = {
-    default: 'flex',
-    bordered: 'flex',
-    withHeaderBar: [
-        'flex',
-        'pt-3 pb-3 pl-4 pr-4',
-        'rounded-tl-md rounded-tr-md rounded-br-0 rounded-bl-0',
-        'border-solid border-l-0 border-r-0 border-t-0 border-b border-gray-400',
-        'bg-gray-100',
-    ],
-};
-const collapsedHeaderMapping = {
-    default: 'pb-0',
-    bordered: 'pb-0',
-    withHeaderBar: ['border-b-0 rounded-md', 'transition delay-300'],
-};
+import styles from './styles';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoSection',
+});
 export const Section = forwardRef(function Section(props, ref) {
     const { className, style, title, subtitle, actions, children, testIds, collapsible = false, defaultCollapsed = true, variant = 'default', titleSize = 'medium' } = props, rest = __rest(props, ["className", "style", "title", "subtitle", "actions", "children", "testIds", "collapsible", "defaultCollapsed", "variant", "titleSize"]);
+    const classes = useStyles();
     const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
     const toggleCollapse = () => setCollapsed(!collapsed);
     const renderTitle = () => title ? (React.createElement(Typography, { as: isString(title) ? undefined : 'div', className: '!mr-4 min-w-0', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.title, variant: 'heading', size: titleSize }, title)) : null;
@@ -51,17 +32,23 @@ export const Section = forwardRef(function Section(props, ref) {
     const renderCollapse = () => collapsible ? (React.createElement(ButtonCircular, { onClick: toggleCollapse, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.collapse, variant: 'flat', icon: React.createElement(Rotate180, { on: !collapsed },
             React.createElement(ArrowDownMinor16, null)) })) : null;
     const hasActions = actions || collapsible;
-    const renderActions = () => hasActions ? (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.actions, flex: true, className: 'ml-auto' },
+    const renderActions = () => hasActions ? (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.actions, className: classes.actions },
         actions,
         renderCollapse())) : null;
     const hasHeader = title || subtitle || hasActions;
-    return (React.createElement(Container, Object.assign({ ref: ref, variant: ['bordered', 'withHeaderBar'].includes(variant) ? 'white' : undefined, style: style }, rest, { className: twMerge('pt-8', variantMapping[variant], variant === 'default' && collapsed && 'pb-8', className) }),
-        hasHeader && (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header, className: twMerge(headerMapping[variant], collapsed && collapsedHeaderMapping[variant]) },
+    return (React.createElement(Container, Object.assign({ ref: ref, className: cx({
+            [classes[variant]]: true,
+            [classes.collapsed]: variant === 'default' && collapsed,
+        }, classes.root, className), variant: ['bordered', 'withHeaderBar'].includes(variant) ? 'white' : undefined, style: style }, rest),
+        hasHeader && (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header, className: cx({
+                [classes[`${variant}Header`]]: true,
+                [classes[`${variant}CollapsedHeader`]]: collapsed,
+            }) },
             renderTitle(),
             renderSubtitle(),
             renderActions())),
         React.createElement(Collapse, { in: !collapsed, unmountOnExit: true },
-            React.createElement(Container, { className: twMerge(variant === 'withHeaderBar' && 'p-6') }, children))));
+            React.createElement(Container, { className: classes[`${variant}SectionContent`] }, children))));
 });
 Section.displayName = 'Section';
 Section.defaultProps = {

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

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

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

@@ -0,0 +1,4 @@
+import type { Theme } from '@material-ui/core';
+declare const _default: ({ sizes, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "default" | "title" | "subtitle" | "actions" | "collapsed" | "bordered" | "withHeaderBar" | "defaultHeader" | "borderedHeader" | "withHeaderBarHeader" | "defaultCollapsedHeader" | "borderedCollapsedHeader" | "withHeaderBarCollapsedHeader" | "defaultSectionContent" | "borderedSectionContent" | "withHeaderBarSectionContent">;
+export default _default;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Section/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;6CAiBV,KAAK;AAAzC,wBA2DI"}

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

@@ -0,0 +1,64 @@
+import { createStyles } from '@material-ui/core';
+const defaultHeader = {
+    display: 'flex',
+};
+const defaultCollapsedHeader = {
+    paddingBottom: '0',
+};
+const defaultSection = {
+    '& > :last-child:not(:first-child)': {
+        marginTop: '1.5rem',
+    },
+};
+export default ({ sizes, palette }) => createStyles({
+    root: {
+        paddingTop: '2rem',
+    },
+    title: {
+        marginRight: '1rem',
+        minWidth: 0,
+    },
+    subtitle: {
+        alignSelf: 'center',
+        marginRight: '1rem',
+        minWidth: 0,
+    },
+    actions: {
+        display: 'flex',
+        marginLeft: 'auto',
+    },
+    collapsed: {
+        paddingBottom: '2rem',
+    },
+    default: defaultSection,
+    bordered: Object.assign(Object.assign({}, defaultSection), { borderRadius: sizes.borderRadius.medium, border: `solid ${sizes.borderWidth} ${palette.grey.light}`, padding: '2rem', '& > :last-child': {
+            paddingBottom: '0',
+        } }),
+    withHeaderBar: {
+        padding: 0,
+        borderRadius: sizes.borderRadius.medium,
+        border: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
+    },
+    defaultHeader,
+    borderedHeader: defaultHeader,
+    withHeaderBarHeader: {
+        display: 'flex',
+        padding: '0.75rem 1rem',
+        borderRadius: `${sizes.borderRadius.medium} ${sizes.borderRadius.medium} 0 0`,
+        borderBottom: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
+        backgroundColor: palette.grey.lighter,
+    },
+    defaultCollapsedHeader,
+    borderedCollapsedHeader: defaultCollapsedHeader,
+    withHeaderBarCollapsedHeader: {
+        borderBottomWidth: '0px',
+        borderRadius: sizes.borderRadius.medium,
+        transitionDelay: '300ms',
+    },
+    defaultSectionContent: {},
+    borderedSectionContent: {},
+    withHeaderBarSectionContent: {
+        padding: '1.5rem',
+    },
+});
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Section/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,sBAAsB,GAAG;IAC7B,aAAa,EAAE,GAAG;CACnB,CAAA;AAED,MAAM,cAAc,GAAG;IACrB,mCAAmC,EAAE;QACnC,SAAS,EAAE,QAAQ;KACpB;CACF,CAAA;AAED,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAS,EAAE,EAAE,CAC3C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM;KACnB;IACD,KAAK,EAAE;QACL,WAAW,EAAE,MAAM;QACnB,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,QAAQ;QACnB,WAAW,EAAE,MAAM;QACnB,QAAQ,EAAE,CAAC;KACZ;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,MAAM;KACnB;IAED,SAAS,EAAE;QACT,aAAa,EAAE,MAAM;KACtB;IACD,OAAO,EAAE,cAAc;IACvB,QAAQ,kCACH,cAAc,KACjB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,EACvC,MAAM,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,EAC1D,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE;YACjB,aAAa,EAAE,GAAG;SACnB,GACF;IACD,aAAa,EAAE;QACb,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;QACvC,MAAM,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;KAC5D;IACD,aAAa;IACb,cAAc,EAAE,aAAa;IAC7B,mBAAmB,EAAE;QACnB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,cAAc;QACvB,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,MAAM;QAC7E,YAAY,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QACjE,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KACtC;IAED,sBAAsB;IACtB,uBAAuB,EAAE,sBAAsB;IAC/C,4BAA4B,EAAE;QAC5B,iBAAiB,EAAE,KAAK;QACxB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;QACvC,eAAe,EAAE,OAAO;KACzB;IACD,qBAAqB,EAAE,EAAE;IACzB,sBAAsB,EAAE,EAAE;IAC1B,2BAA2B,EAAE;QAC3B,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-section",
-  "version": "2.0.8-alpha-fx-4618-migrate-section-bdcbfe499.7+bdcbfe499",
+  "version": "2.0.8",
   "description": "Toptal UI components library - Section",
   "publishConfig": {
     "access": "public"
@@ -22,32 +22,31 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "2.0.2-alpha-fx-4618-migrate-section-bdcbfe499.7+bdcbfe499",
-    "@toptal/picasso-collapse": "1.0.3-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499",
-    "@toptal/picasso-container": "1.0.4-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499",
-    "@toptal/picasso-icons": "1.1.2-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499",
-    "@toptal/picasso-typography": "2.0.2-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499",
-    "@toptal/picasso-utils": "1.0.4-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499",
-    "tailwind-merge": "^2.2.2"
+    "@toptal/picasso-button": "2.0.2",
+    "@toptal/picasso-container": "1.0.3",
+    "@toptal/picasso-icons": "1.1.1",
+    "@toptal/picasso-typography": "2.0.1",
+    "@toptal/picasso-utils": "1.0.3",
+    "classnames": "^2.5.1"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@toptal/picasso-tailwind": "^2.5.0",
+    "@material-ui/core": "4.12.4",
+    "tailwindcss": ">=3",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499"
+    "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
-  ],
-  "gitHead": "bdcbfe4990a9041d6effc060e31f96d3d21e346f"
+  ]
 }

package/src/Section/Section.tsx

@@ -1,13 +1,17 @@
+import cx from 'classnames'
 import type { ReactNode } from 'react'
 import React, { forwardRef, useState } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import { Collapse } from '@material-ui/core'
 import type { SizeType, BaseProps } from '@toptal/picasso-shared'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 import { isString, Rotate180 } from '@toptal/picasso-utils'
 import { ArrowDownMinor16 } from '@toptal/picasso-icons'
-import { twMerge } from 'tailwind-merge'
-import { Collapse } from '@toptal/picasso-collapse'
+
+import styles from './styles'
 
 type VariantType = 'bordered' | 'default' | 'withHeaderBar'
 
@@ -36,33 +40,9 @@ export interface Props extends BaseProps {
   titleSize?: SizeType<'small' | 'medium'>
 }
 
-const variantMapping: { [K in VariantType]: string | string[] } = {
-  default: '[&>_:last-child:not(:first-child)]:mt-6',
-  bordered: [
-    '[&>_:last-child:not(:first-child)]:mt-6',
-    'border rounded-md border-solid border-gray-300',
-    'p-8 [&_>_:last-child]:pb-0',
-  ],
-  withHeaderBar: 'p-0 rounded-md border border-solid border-gray-400',
-}
-
-const headerMapping: { [K in VariantType]: string | string[] } = {
-  default: 'flex',
-  bordered: 'flex',
-  withHeaderBar: [
-    'flex',
-    'pt-3 pb-3 pl-4 pr-4',
-    'rounded-tl-md rounded-tr-md rounded-br-0 rounded-bl-0',
-    'border-solid border-l-0 border-r-0 border-t-0 border-b border-gray-400',
-    'bg-gray-100',
-  ],
-}
-
-const collapsedHeaderMapping: { [K in VariantType]: string | string[] } = {
-  default: 'pb-0',
-  bordered: 'pb-0',
-  withHeaderBar: ['border-b-0 rounded-md', 'transition delay-300'],
-}
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoSection',
+})
 
 export const Section = forwardRef<HTMLDivElement, Props>(function Section(
   props,
@@ -82,7 +62,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
     titleSize = 'medium',
     ...rest
   } = props
-
+  const classes = useStyles()
   const [collapsed, setCollapsed] = useState(
     collapsible ? defaultCollapsed : false
   )
@@ -132,7 +112,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
   const hasActions = actions || collapsible
   const renderActions = () =>
     hasActions ? (
-      <Container data-testid={testIds?.actions} flex className='ml-auto'>
+      <Container data-testid={testIds?.actions} className={classes.actions}>
         {actions}
         {renderCollapse()}
       </Container>
@@ -143,25 +123,27 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
   return (
     <Container
       ref={ref}
+      className={cx(
+        {
+          [classes[variant]]: true,
+          [classes.collapsed]: variant === 'default' && collapsed,
+        },
+        classes.root,
+        className
+      )}
       variant={
         ['bordered', 'withHeaderBar'].includes(variant) ? 'white' : undefined
       }
       style={style}
       {...rest}
-      className={twMerge(
-        'pt-8',
-        variantMapping[variant],
-        variant === 'default' && collapsed && 'pb-8',
-        className
-      )}
     >
       {hasHeader && (
         <Container
           data-testid={testIds?.header}
-          className={twMerge(
-            headerMapping[variant],
-            collapsed && collapsedHeaderMapping[variant]
-          )}
+          className={cx({
+            [classes[`${variant}Header`]]: true,
+            [classes[`${variant}CollapsedHeader`]]: collapsed,
+          })}
         >
           {renderTitle()}
           {renderSubtitle()}
@@ -169,7 +151,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
         </Container>
       )}
       <Collapse in={!collapsed} unmountOnExit>
-        <Container className={twMerge(variant === 'withHeaderBar' && 'p-6')}>
+        <Container className={classes[`${variant}SectionContent`]}>
           {children}
         </Container>
       </Collapse>

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

@@ -6,14 +6,14 @@ exports[`Section renders collapsible initially collapsed 1`] = `
     class="Picasso-root"
   >
     <div
-      class="pt-8 [&>_:last-child:not(:first-child)]:mt-6 pb-8"
+      class="PicassoSection-default PicassoSection-collapsed PicassoSection-root"
     >
       <div
-        class="flex pb-0"
+        class="PicassoSection-defaultHeader PicassoSection-defaultCollapsedHeader"
         data-testid="header"
       >
         <div
-          class="PicassoContainer-flex ml-auto"
+          class="PicassoSection-actions"
           data-testid="actions"
         >
           <button
@@ -52,14 +52,14 @@ exports[`Section renders collapsible initially expanded 1`] = `
     class="Picasso-root"
   >
     <div
-      class="pt-8 [&>_:last-child:not(:first-child)]:mt-6"
+      class="PicassoSection-default PicassoSection-root"
     >
       <div
-        class="flex"
+        class="PicassoSection-defaultHeader"
         data-testid="header"
       >
         <div
-          class="PicassoContainer-flex ml-auto"
+          class="PicassoSection-actions"
           data-testid="actions"
         >
           <button
@@ -88,17 +88,22 @@ exports[`Section renders collapsible initially expanded 1`] = `
         </div>
       </div>
       <div
-        class="flex"
+        class="MuiCollapse-root MuiCollapse-entered"
+        style="min-height: 0px;"
       >
         <div
-          class="w-full"
+          class="MuiCollapse-wrapper"
         >
           <div
-            class=""
+            class="MuiCollapse-wrapperInner"
           >
             <div
-              data-testid="content"
-            />
+              class="PicassoSection-defaultSectionContent"
+            >
+              <div
+                data-testid="content"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -113,10 +118,10 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
     class="Picasso-root"
   >
     <div
-      class="pt-8 [&>_:last-child:not(:first-child)]:mt-6"
+      class="PicassoSection-default PicassoSection-root"
     >
       <div
-        class="flex"
+        class="PicassoSection-defaultHeader"
         data-testid="header"
       >
         <h3
@@ -132,24 +137,29 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
           Subtitle
         </p>
         <div
-          class="PicassoContainer-flex ml-auto"
+          class="PicassoSection-actions"
           data-testid="actions"
         >
           Actions
         </div>
       </div>
       <div
-        class="flex"
+        class="MuiCollapse-root MuiCollapse-entered"
+        style="min-height: 0px;"
       >
         <div
-          class="w-full"
+          class="MuiCollapse-wrapper"
         >
           <div
-            class=""
+            class="MuiCollapse-wrapperInner"
           >
             <div
-              data-testid="content"
-            />
+              class="PicassoSection-defaultSectionContent"
+            >
+              <div
+                data-testid="content"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -164,20 +174,25 @@ exports[`Section renders without header 1`] = `
     class="Picasso-root"
   >
     <div
-      class="pt-8 [&>_:last-child:not(:first-child)]:mt-6"
+      class="PicassoSection-default PicassoSection-root"
     >
       <div
-        class="flex"
+        class="MuiCollapse-root MuiCollapse-entered"
+        style="min-height: 0px;"
       >
         <div
-          class="w-full"
+          class="MuiCollapse-wrapper"
         >
           <div
-            class=""
+            class="MuiCollapse-wrapperInner"
           >
             <div
-              data-testid="content"
-            />
+              class="PicassoSection-defaultSectionContent"
+            >
+              <div
+                data-testid="content"
+              />
+            </div>
           </div>
         </div>
       </div>

package/src/Section/styles.ts

@@ -0,0 +1,77 @@
+import type { Theme } from '@material-ui/core'
+import { createStyles } from '@material-ui/core'
+
+const defaultHeader = {
+  display: 'flex',
+}
+
+const defaultCollapsedHeader = {
+  paddingBottom: '0',
+}
+
+const defaultSection = {
+  '& > :last-child:not(:first-child)': {
+    marginTop: '1.5rem',
+  },
+}
+
+export default ({ sizes, palette }: Theme) =>
+  createStyles({
+    root: {
+      paddingTop: '2rem',
+    },
+    title: {
+      marginRight: '1rem',
+      minWidth: 0,
+    },
+    subtitle: {
+      alignSelf: 'center',
+      marginRight: '1rem',
+      minWidth: 0,
+    },
+    actions: {
+      display: 'flex',
+      marginLeft: 'auto',
+    },
+
+    collapsed: {
+      paddingBottom: '2rem',
+    },
+    default: defaultSection,
+    bordered: {
+      ...defaultSection,
+      borderRadius: sizes.borderRadius.medium,
+      border: `solid ${sizes.borderWidth} ${palette.grey.light}`,
+      padding: '2rem',
+      '& > :last-child': {
+        paddingBottom: '0',
+      },
+    },
+    withHeaderBar: {
+      padding: 0,
+      borderRadius: sizes.borderRadius.medium,
+      border: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
+    },
+    defaultHeader,
+    borderedHeader: defaultHeader,
+    withHeaderBarHeader: {
+      display: 'flex',
+      padding: '0.75rem 1rem',
+      borderRadius: `${sizes.borderRadius.medium} ${sizes.borderRadius.medium} 0 0`,
+      borderBottom: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
+      backgroundColor: palette.grey.lighter,
+    },
+
+    defaultCollapsedHeader,
+    borderedCollapsedHeader: defaultCollapsedHeader,
+    withHeaderBarCollapsedHeader: {
+      borderBottomWidth: '0px',
+      borderRadius: sizes.borderRadius.medium,
+      transitionDelay: '300ms',
+    },
+    defaultSectionContent: {},
+    borderedSectionContent: {},
+    withHeaderBarSectionContent: {
+      padding: '1.5rem',
+    },
+  })

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.