@toptal/picasso-section 2.0.7 → 2.0.8-alpha-fx-4618-migrate-section-52ccd6635.6

package/LICENSE

@@ -0,0 +1,20 @@
+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/Section/Section.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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"}

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

@@ -9,22 +9,41 @@ 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 styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoSection',
-});
+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'],
+};
 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;
@@ -32,23 +51,17 @@ 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, className: classes.actions },
+    const renderActions = () => hasActions ? (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.actions, flex: true, className: 'ml-auto' },
         actions,
         renderCollapse())) : null;
     const hasHeader = title || subtitle || hasActions;
-    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,
-            }) },
+    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]) },
             renderTitle(),
             renderSubtitle(),
             renderActions())),
         React.createElement(Collapse, { in: !collapsed, unmountOnExit: true },
-            React.createElement(Container, { className: classes[`${variant}SectionContent`] }, children))));
+            React.createElement(Container, { className: twMerge(variant === 'withHeaderBar' && 'p-6') }, 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/package.json

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

package/src/Section/Section.tsx

@@ -1,17 +1,13 @@
-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 styles from './styles'
+import { twMerge } from 'tailwind-merge'
+import { Collapse } from '@toptal/picasso-collapse'
 
 type VariantType = 'bordered' | 'default' | 'withHeaderBar'
 
@@ -40,9 +36,33 @@ export interface Props extends BaseProps {
   titleSize?: SizeType<'small' | 'medium'>
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoSection',
-})
+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'],
+}
 
 export const Section = forwardRef<HTMLDivElement, Props>(function Section(
   props,
@@ -62,7 +82,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
     titleSize = 'medium',
     ...rest
   } = props
-  const classes = useStyles()
+
   const [collapsed, setCollapsed] = useState(
     collapsible ? defaultCollapsed : false
   )
@@ -112,7 +132,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
   const hasActions = actions || collapsible
   const renderActions = () =>
     hasActions ? (
-      <Container data-testid={testIds?.actions} className={classes.actions}>
+      <Container data-testid={testIds?.actions} flex className='ml-auto'>
         {actions}
         {renderCollapse()}
       </Container>
@@ -123,27 +143,25 @@ 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={cx({
-            [classes[`${variant}Header`]]: true,
-            [classes[`${variant}CollapsedHeader`]]: collapsed,
-          })}
+          className={twMerge(
+            headerMapping[variant],
+            collapsed && collapsedHeaderMapping[variant]
+          )}
         >
           {renderTitle()}
           {renderSubtitle()}
@@ -151,7 +169,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
         </Container>
       )}
       <Collapse in={!collapsed} unmountOnExit>
-        <Container className={classes[`${variant}SectionContent`]}>
+        <Container className={twMerge(variant === 'withHeaderBar' && 'p-6')}>
           {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="PicassoSection-default PicassoSection-collapsed PicassoSection-root"
+      class="pt-8 [&>_:last-child:not(:first-child)]:mt-6 pb-8"
     >
       <div
-        class="PicassoSection-defaultHeader PicassoSection-defaultCollapsedHeader"
+        class="flex pb-0"
         data-testid="header"
       >
         <div
-          class="PicassoSection-actions"
+          class="PicassoContainer-flex ml-auto"
           data-testid="actions"
         >
           <button
@@ -52,14 +52,14 @@ exports[`Section renders collapsible initially expanded 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoSection-default PicassoSection-root"
+      class="pt-8 [&>_:last-child:not(:first-child)]:mt-6"
     >
       <div
-        class="PicassoSection-defaultHeader"
+        class="flex"
         data-testid="header"
       >
         <div
-          class="PicassoSection-actions"
+          class="PicassoContainer-flex ml-auto"
           data-testid="actions"
         >
           <button
@@ -88,23 +88,14 @@ exports[`Section renders collapsible initially expanded 1`] = `
         </div>
       </div>
       <div
-        class="MuiCollapse-root MuiCollapse-entered"
-        style="min-height: 0px;"
+        class="flex"
       >
         <div
-          class="MuiCollapse-wrapper"
+          class=""
         >
           <div
-            class="MuiCollapse-wrapperInner"
-          >
-            <div
-              class="PicassoSection-defaultSectionContent"
-            >
-              <div
-                data-testid="content"
-              />
-            </div>
-          </div>
+            data-testid="content"
+          />
         </div>
       </div>
     </div>
@@ -118,10 +109,10 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoSection-default PicassoSection-root"
+      class="pt-8 [&>_:last-child:not(:first-child)]:mt-6"
     >
       <div
-        class="PicassoSection-defaultHeader"
+        class="flex"
         data-testid="header"
       >
         <h3
@@ -137,30 +128,21 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
           Subtitle
         </p>
         <div
-          class="PicassoSection-actions"
+          class="PicassoContainer-flex ml-auto"
           data-testid="actions"
         >
           Actions
         </div>
       </div>
       <div
-        class="MuiCollapse-root MuiCollapse-entered"
-        style="min-height: 0px;"
+        class="flex"
       >
         <div
-          class="MuiCollapse-wrapper"
+          class=""
         >
           <div
-            class="MuiCollapse-wrapperInner"
-          >
-            <div
-              class="PicassoSection-defaultSectionContent"
-            >
-              <div
-                data-testid="content"
-              />
-            </div>
-          </div>
+            data-testid="content"
+          />
         </div>
       </div>
     </div>
@@ -174,26 +156,17 @@ exports[`Section renders without header 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoSection-default PicassoSection-root"
+      class="pt-8 [&>_:last-child:not(:first-child)]:mt-6"
     >
       <div
-        class="MuiCollapse-root MuiCollapse-entered"
-        style="min-height: 0px;"
+        class="flex"
       >
         <div
-          class="MuiCollapse-wrapper"
+          class=""
         >
           <div
-            class="MuiCollapse-wrapperInner"
-          >
-            <div
-              class="PicassoSection-defaultSectionContent"
-            >
-              <div
-                data-testid="content"
-              />
-            </div>
-          </div>
+            data-testid="content"
+          />
         </div>
       </div>
     </div>

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

@@ -1,4 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,64 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/src/Section/styles.ts

@@ -1,77 +0,0 @@
-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',
-    },
-  })