@toptal/picasso 17.3.2 → 18.0.0

package/OverviewBlock/OverviewBlock.d.ts

@@ -0,0 +1,25 @@
+import React, { ElementType, HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { OverridableComponent, ColorType, BaseProps, TextLabelProps } from '@toptal/picasso-shared';
+declare type VariantColorType = Extract<ColorType, 'red' | 'green' | 'yellow'>;
+declare type Variant = `value-${VariantColorType}` | `label-${VariantColorType}`;
+export declare type Props = BaseProps & TextLabelProps & HTMLAttributes<HTMLButtonElement> & {
+    /** Counter value  */
+    value: ReactNode;
+    /** Counter title  */
+    label: string;
+    /** The color variant  */
+    variant?: Variant;
+    /** Component used for the root node. Either a string to use a DOM element or a component. */
+    as?: ElementType;
+    /** Callback invoked when component is clicked */
+    onClick?: (event: MouseEvent) => void;
+};
+export declare const OverviewBlock: OverridableComponent<Props>;
+declare const _default: OverridableComponent<Props> & {
+    Group: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement> & {
+        align?: import("../OverviewBlockGroup/settings").Alignment | undefined;
+        blockWidth?: import("../OverviewBlockGroup/settings").BlockWidth | undefined;
+    }>;
+    Row: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>>;
+};
+export default _default;

package/OverviewBlock/OverviewBlock.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
+import { useTitleCase } from '@toptal/picasso-shared';
+import styles from './styles';
+import { useOverviewBlockGroupContext } from '../OverviewBlockGroup/OverviewBlockGroupContext';
+import OverviewBlockGroup from '../OverviewBlockGroup';
+import OverviewBlockRow from '../OverviewBlockRow';
+import Container from '../Container';
+import Typography from '../Typography';
+import { toTitleCase } from '../utils';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoOverviewBlock'
+});
+export const OverviewBlock = forwardRef(function OverviewBlock(props, ref) {
+    const { value, label, variant, as, className, onClick, titleCase: propsTitleCase } = props, rest = __rest(props, ["value", "label", "variant", "as", "className", "onClick", "titleCase"]);
+    const classes = useStyles();
+    const { align, blockWidth } = useOverviewBlockGroupContext();
+    const color = {
+        value: 'black',
+        label: 'dark-grey'
+    };
+    if (variant) {
+        const [partName, colorName] = variant.split('-');
+        color[partName] = colorName;
+    }
+    const isClickable = Boolean(onClick) || typeof as !== 'string';
+    const Component = isClickable && as ? as : 'div';
+    const titleCase = useTitleCase(propsTitleCase);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cx({ [classes.clickable]: isClickable }, { [classes.disableOutline]: !isClickable }, classes[`${align}Align`], classes[`${blockWidth}Width`], classes.root, className), onClick: onClick }),
+        React.createElement(Container, { align: 'left' },
+            React.createElement(Typography, { size: 'xxsmall', weight: 'semibold', color: color.label }, titleCase ? toTitleCase(label) : label),
+            React.createElement(Typography, { size: 'large', weight: 'semibold', color: color.value }, value))));
+});
+OverviewBlock.defaultProps = {
+    as: 'button'
+};
+OverviewBlock.displayName = 'OverviewBlock';
+export default Object.assign(OverviewBlock, {
+    Group: OverviewBlockGroup,
+    Row: OverviewBlockRow
+});
+//# sourceMappingURL=OverviewBlock.js.map

package/OverviewBlock/OverviewBlock.js.map

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

package/OverviewBlock/index.d.ts

@@ -0,0 +1,4 @@
+import { OmitInternalProps } from '@toptal/picasso-shared';
+import { Props } from './OverviewBlock';
+export { default } from './OverviewBlock';
+export declare type OverviewBlockProps = OmitInternalProps<Props>;

package/OverviewBlock/index.js

@@ -0,0 +1,2 @@
+export { default } from './OverviewBlock';
+//# sourceMappingURL=index.js.map

package/OverviewBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/OverviewBlock/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA"}

package/OverviewBlock/styles.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@material-ui/core/styles';
+declare const _default: ({ palette, sizes }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "clickable" | "disableOutline" | "defaultAlign" | "centerAlign" | "narrowWidth" | "regularWidth" | "wideWidth">;
+export default _default;

package/OverviewBlock/styles.js

@@ -0,0 +1,42 @@
+import { createStyles } from '@material-ui/core/styles';
+import { rem } from '@toptal/picasso-shared';
+export default ({ palette, sizes }) => createStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: palette.common.white,
+        margin: 0,
+        minWidth: rem('150px'),
+        border: 'none',
+        textDecoration: 'none',
+        '&:not(:first-child)': {
+            borderLeft: `${sizes.borderWidth} solid ${palette.grey.light2}`
+        }
+    },
+    clickable: {
+        cursor: 'pointer',
+        outline: 'none',
+        '&:hover': {
+            backgroundColor: palette.blue.lighter
+        }
+    },
+    disableOutline: {
+        outline: 'none'
+    },
+    defaultAlign: {
+        alignItems: 'flex-start'
+    },
+    centerAlign: {
+        alignItems: 'center'
+    },
+    narrowWidth: {
+        padding: '0.75rem 1rem'
+    },
+    regularWidth: {
+        padding: '0.75rem 1.5rem'
+    },
+    wideWidth: {
+        padding: '0.75rem 2rem'
+    }
+});
+//# sourceMappingURL=styles.js.map

package/OverviewBlock/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/OverviewBlock/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAS,EAAE,EAAE,CAC3C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;QACtB,MAAM,EAAE,MAAM;QACd,cAAc,EAAE,MAAM;QACtB,qBAAqB,EAAE;YACrB,UAAU,EAAE,GAAG,KAAK,CAAC,WAAW,UAAU,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;SAChE;KACF;IACD,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;SACtC;KACF;IACD,cAAc,EAAE;QACd,OAAO,EAAE,MAAM;KAChB;IAED,YAAY,EAAE;QACZ,UAAU,EAAE,YAAY;KACzB;IACD,WAAW,EAAE;QACX,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,OAAO,EAAE,cAAc;KACxB;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gBAAgB;KAC1B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,cAAc;KACxB;CACF,CAAC,CAAA"}

package/OverviewBlockGroup/OverviewBlockGroup.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent, HTMLAttributes } from 'react';
+import { Alignment, BlockWidth } from './settings';
+declare type Props = HTMLAttributes<HTMLDivElement> & {
+    /** Value and label alignment for blocks. By default content is aligned to the left. */
+    align?: Alignment;
+    /** The block width variant */
+    blockWidth?: BlockWidth;
+};
+declare const OverviewBlockGroup: FunctionComponent<Props>;
+export default OverviewBlockGroup;

package/OverviewBlockGroup/OverviewBlockGroup.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { OverviewBlockGroupContext } from './OverviewBlockGroupContext';
+import OverviewBlockRow from '../OverviewBlockRow';
+// We need to inject a single row if there is none provided.
+// It allows to skip `OverviewBlock.Row` component for a single-row groups.
+const shouldInjectRow = (children) => {
+    if (!children) {
+        return false;
+    }
+    return !React.Children.toArray(children)
+        .filter((el) => React.isValidElement(el))
+        .some(el => el.type.displayName === OverviewBlockRow.displayName);
+};
+const OverviewBlockGroup = props => {
+    const { children, align = 'default', blockWidth = 'regular' } = props, rest = __rest(props, ["children", "align", "blockWidth"]);
+    return (React.createElement("section", Object.assign({}, rest),
+        React.createElement(OverviewBlockGroupContext.Provider, { value: { align, blockWidth } }, shouldInjectRow(children) ? (React.createElement(OverviewBlockRow, null, children)) : (children))));
+};
+OverviewBlockGroup.displayName = 'OverviewBlockGroup';
+OverviewBlockGroup.defaultProps = {
+    align: 'default',
+    blockWidth: 'regular'
+};
+export default OverviewBlockGroup;
+//# sourceMappingURL=OverviewBlockGroup.js.map

package/OverviewBlockGroup/OverviewBlockGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewBlockGroup.js","sourceRoot":"","sources":["../../src/OverviewBlockGroup/OverviewBlockGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAKN,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AACvE,OAAO,gBAAgB,MAAM,qBAAqB,CAAA;AASlD,4DAA4D;AAC5D,2EAA2E;AAC3E,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IAC/C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,KAAK,CAAA;KACb;IAED,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;SACrC,MAAM,CAAC,CAAC,EAAE,EAAwD,EAAE,CACnE,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,CACzB;SACA,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,gBAAgB,CAAC,WAAW,CAAC,CAAA;AACrE,CAAC,CAAA;AAED,MAAM,kBAAkB,GAA6B,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAE,UAAU,GAAG,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAxE,mCAAgE,CAAQ,CAAA;IAE9E,OAAO,CACL,iDAAa,IAAI;QACf,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAC7D,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAC3B,oBAAC,gBAAgB,QAAE,QAAQ,CAAoB,CAChD,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACkC,CAC7B,CACX,CAAA;AACH,CAAC,CAAA;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA;AAErD,kBAAkB,CAAC,YAAY,GAAG;IAChC,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,SAAS;CACtB,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/OverviewBlockGroup/OverviewBlockGroupContext.d.ts

@@ -0,0 +1,8 @@
+import { Alignment, BlockWidth } from './settings';
+interface OverviewBlockGroupSettings {
+    align: Alignment;
+    blockWidth: BlockWidth;
+}
+export declare const OverviewBlockGroupContext: import("react").Context<OverviewBlockGroupSettings>;
+export declare const useOverviewBlockGroupContext: () => OverviewBlockGroupSettings;
+export {};

package/OverviewBlockGroup/OverviewBlockGroupContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+const defaultSettings = {
+    align: 'default',
+    blockWidth: 'regular'
+};
+export const OverviewBlockGroupContext = createContext(defaultSettings);
+export const useOverviewBlockGroupContext = () => {
+    return useContext(OverviewBlockGroupContext);
+};
+//# sourceMappingURL=OverviewBlockGroupContext.js.map

package/OverviewBlockGroup/OverviewBlockGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewBlockGroupContext.js","sourceRoot":"","sources":["../../src/OverviewBlockGroup/OverviewBlockGroupContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASjD,MAAM,eAAe,GAAG;IACtB,KAAK,EAAE,SAAkB;IACzB,UAAU,EAAE,SAAkB;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,aAAa,CACpD,eAAe,CAChB,CAAA;AAED,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,OAAO,UAAU,CAAC,yBAAyB,CAAC,CAAA;AAC9C,CAAC,CAAA"}

package/OverviewBlockGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './OverviewBlockGroup';

package/OverviewBlockGroup/index.js

@@ -0,0 +1,2 @@
+export { default } from './OverviewBlockGroup';
+//# sourceMappingURL=index.js.map

package/OverviewBlockGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/OverviewBlockGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}

package/OverviewBlockGroup/settings.d.ts

@@ -0,0 +1,2 @@
+export declare type Alignment = 'default' | 'center';
+export declare type BlockWidth = 'narrow' | 'regular' | 'wide';

package/OverviewBlockGroup/settings.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=settings.js.map

package/OverviewBlockGroup/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","sourceRoot":"","sources":["../../src/OverviewBlockGroup/settings.ts"],"names":[],"mappings":""}

package/OverviewBlockRow/OverviewBlockRow.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent, HTMLAttributes } from 'react';
+declare type Props = HTMLAttributes<HTMLDivElement>;
+declare const OverviewBlockRow: FunctionComponent<Props>;
+export default OverviewBlockRow;

package/OverviewBlockRow/OverviewBlockRow.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
+import styles from './styles';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoOverviewBlockRow'
+});
+const OverviewBlockRow = props => {
+    const { className } = props, rest = __rest(props, ["className"]);
+    const classes = useStyles();
+    return React.createElement("div", Object.assign({}, rest, { className: cx(classes.root, className) }));
+};
+OverviewBlockRow.displayName = 'OverviewBlockRow';
+export default OverviewBlockRow;
+//# sourceMappingURL=OverviewBlockRow.js.map

package/OverviewBlockRow/OverviewBlockRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewBlockRow.js","sourceRoot":"","sources":["../../src/OverviewBlockRow/OverviewBlockRow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAChE,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAI7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,yBAAyB;CAChC,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAA6B,KAAK,CAAC,EAAE;IACzD,MAAM,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9B,aAAsB,CAAQ,CAAA;IACpC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,6CAAS,IAAI,IAAE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAA;AAClE,CAAC,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}

package/OverviewBlockRow/index.d.ts

@@ -0,0 +1 @@
+export { default } from './OverviewBlockRow';

package/OverviewBlockRow/index.js

@@ -0,0 +1,2 @@
+export { default } from './OverviewBlockRow';
+//# sourceMappingURL=index.js.map

package/OverviewBlockRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/OverviewBlockRow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA"}

package/OverviewBlockRow/styles.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@material-ui/core/styles';
+declare const _default: ({ palette, sizes }: Theme) => import("@material-ui/styles").StyleRules<{}, "root">;
+export default _default;

package/OverviewBlockRow/styles.js

@@ -0,0 +1,26 @@
+import { createStyles } from '@material-ui/core/styles';
+export default ({ palette, sizes }) => createStyles({
+    root: {
+        display: 'flex',
+        borderRadius: sizes.borderRadius.medium,
+        padding: '1rem 0',
+        border: `${sizes.borderWidth} solid ${palette.grey.lighter2}`,
+        backgroundColor: palette.common.white,
+        justifyContent: 'flex-start',
+        '& > *': {
+            flex: '1 0'
+        },
+        '&:not(:first-child)': {
+            borderTop: 0,
+            borderTopLeftRadius: 0,
+            borderTopRightRadius: 0
+        },
+        '&:not(:last-child)': {
+            borderBottom: 0,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            paddingBottom: 0
+        }
+    }
+});
+//# sourceMappingURL=styles.js.map

package/OverviewBlockRow/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/OverviewBlockRow/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAS,EAAE,EAAE,CAC3C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;QACvC,OAAO,EAAE,QAAQ;QACjB,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,UAAU,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC7D,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,cAAc,EAAE,YAAY;QAC5B,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;SACZ;QACD,qBAAqB,EAAE;YACrB,SAAS,EAAE,CAAC;YACZ,mBAAmB,EAAE,CAAC;YACtB,oBAAoB,EAAE,CAAC;SACxB;QACD,oBAAoB,EAAE;YACpB,YAAY,EAAE,CAAC;YACf,sBAAsB,EAAE,CAAC;YACzB,uBAAuB,EAAE,CAAC;YAC1B,aAAa,EAAE,CAAC;SACjB;KACF;CACF,CAAC,CAAA"}

package/PageFooter/PageFooter.d.ts

@@ -1,6 +1,8 @@
 import React, { ReactNode, HTMLAttributes } from 'react';
 import { BaseProps } from '@toptal/picasso-shared';
 export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
+    /** Content for copyright. You can override default if needed. */
+    copyrightContent?: ReactNode;
     /** Content for the right side of the `Footer`  */
     rightContent?: ReactNode;
 }

package/PageFooter/PageFooter.js

@@ -14,12 +14,11 @@ import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
 import { PageContext } from '../Page';
 import styles from './styles';
-const currentYear = new Date().getFullYear();
 const useStyles = makeStyles(styles, {
     name: 'PicassoPageFooter'
 });
 export const PageFooter = forwardRef(function PageFooter(props, ref) {
-    const { className, style, rightContent } = props, rest = __rest(props, ["className", "style", "rightContent"]);
+    const { className, style, rightContent, copyrightContent } = props, rest = __rest(props, ["className", "style", "rightContent", "copyrightContent"]);
     const classes = useStyles();
     const { width, fullWidth } = useContext(PageContext);
     const contentClassnames = cx({
@@ -28,11 +27,13 @@ export const PageFooter = forwardRef(function PageFooter(props, ref) {
     }, classes.content);
     return (React.createElement("footer", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }),
         React.createElement("div", { className: contentClassnames },
-            React.createElement("div", { className: classes.left }, `© Copyright 2010 – ${currentYear} Toptal, LLC`),
+            React.createElement("div", { className: classes.left }, copyrightContent),
             React.createElement("div", { className: classes.right }, rightContent))));
 });
+const CopyrightContent = () => (React.createElement(React.Fragment, null, `© Copyright 2010 – ${new Date().getFullYear()} Toptal, LLC`));
 PageFooter.defaultProps = {
-    rightContent: null
+    rightContent: null,
+    copyrightContent: React.createElement(CopyrightContent, null)
 };
 PageFooter.displayName = 'PageFooter';
 export default PageFooter;

package/PageFooter/PageFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageFooter.js","sourceRoot":"","sources":["../../src/PageFooter/PageFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAA;AAE5C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqB,SAAS,UAAU,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAnD,sCAA2C,CAAQ,CAAA;IACzD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IAEtE,MAAM,iBAAiB,GAAG,EAAE,CAC1B;QACE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,SAAS,IAAI,KAAK,KAAK,MAAM;QAClD,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;KACjC,EACD,OAAO,CAAC,OAAO,CAChB,CAAA;IAED,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK;QAEZ,6BAAK,SAAS,EAAE,iBAAiB;YAC/B,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI,IACzB,sBAAsB,WAAW,cAAc,CAC5C;YAEN,6BAAK,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,YAAY,CAAO,CAC/C,CACC,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,YAAY,EAAE,IAAI;CACnB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
+{"version":3,"file":"PageFooter.js","sourceRoot":"","sources":["../../src/PageFooter/PageFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,MAAM,MAAM,UAAU,CAAA;AAS7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqB,SAAS,UAAU,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,gBAAgB,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArE,0DAA6D,CAAQ,CAAA;IAC3E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IAEtE,MAAM,iBAAiB,GAAG,EAAE,CAC1B;QACE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,SAAS,IAAI,KAAK,KAAK,MAAM;QAClD,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;KACjC,EACD,OAAO,CAAC,OAAO,CAChB,CAAA;IAED,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK;QAEZ,6BAAK,SAAS,EAAE,iBAAiB;YAC/B,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI,IAAG,gBAAgB,CAAO;YAEtD,6BAAK,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,YAAY,CAAO,CAC/C,CACC,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,0CAAG,sBAAsB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,cAAc,CAAI,CACpE,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,YAAY,EAAE,IAAI;IAClB,gBAAgB,EAAE,oBAAC,gBAAgB,OAAG;CACvC,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/ScrollMenu/ScrollMenu.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useLayoutEffect, useRef } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
 import Menu from '../Menu';
 import styles from './styles';
 const useStyles = makeStyles(styles, {
@@ -38,13 +39,13 @@ export const scrollToSelection = (menuRef, selectedIndex) => {
     }
 };
 const ScrollMenu = props => {
-    const { selectedIndex, onBlur, children, style, fixedHeader, fixedFooter, role = 'menu' } = props, rest = __rest(props, ["selectedIndex", "onBlur", "children", "style", "fixedHeader", "fixedFooter", "role"]);
+    const { selectedIndex, onBlur, children, style, fixedHeader, fixedFooter, className, role } = props, rest = __rest(props, ["selectedIndex", "onBlur", "children", "style", "fixedHeader", "fixedFooter", "className", "role"]);
     const classes = useStyles();
     const menuRef = useRef(null);
     useLayoutEffect(() => scrollToSelection(menuRef, selectedIndex), [
         selectedIndex
     ]);
-    return (React.createElement(Menu, Object.assign({ className: classes.menu, style: style, role: role }, rest, { onMouseDown: e => {
+    return (React.createElement(Menu, Object.assign({ className: cx(classes.menu, className), style: style, role: role }, rest, { onMouseDown: e => {
             // ScrollMenu is used in dropdowns. Prevents blur --> dropdown close when scrolled.
             e.preventDefault();
         } }),
@@ -52,5 +53,9 @@ const ScrollMenu = props => {
         React.createElement("div", { ref: menuRef, className: classes.scrollView, onBlur: onBlur }, children),
         fixedFooter));
 };
+ScrollMenu.defaultProps = {
+    role: 'menu'
+};
+ScrollMenu.displayName = 'ScrollMenu';
 export default ScrollMenu;
 //# sourceMappingURL=ScrollMenu.js.map

package/ScrollMenu/ScrollMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollMenu.js","sourceRoot":"","sources":["../../src/ScrollMenu/ScrollMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAIZ,eAAe,EACf,MAAM,EACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAG5D,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAA;AAU7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,CAC1B,OAAkC,EAClC,aAA6B,EAC7B,EAAE;;IACF,OAAA,OAAO,aAAa,KAAK,QAAQ;QAC/B,CAAC,CAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,QAAQ,CAAC,aAAa,CAAC;QAC1C,CAAC,CAAC,SAAS,CAAA;CAAA,CAAA;AAEf,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAAkC,EAClC,aAA6B,EAC7B,EAAE;IACF,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAA;IAChC,MAAM,YAAY,GAAG,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;IAEhE,IAAI,CAAC,QAAQ,IAAI,CAAC,YAAY,EAAE;QAC9B,OAAM;KACP;IAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAA;IACjD,MAAM,YAAY,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAA;IAEzD,IAAI,YAAY,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,GAAG,GAAG,YAAY,CAAC,GAAG,CAAA;KACtD;SAAM,IAAI,YAAY,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;QAChD,QAAQ,CAAC,SAAS,IAAI,YAAY,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAA;KAC5D;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAA6B,KAAK,CAAC,EAAE;IACnD,MAAM,EACJ,aAAa,EACb,MAAM,EACN,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,IAAI,GAAG,MAAM,KAEX,KAAK,EADJ,IAAI,UACL,KAAK,EATH,sFASL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5C,eAAe,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE;QAC/D,aAAa;KACd,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,IAEN,IAAI,IACR,WAAW,EAAE,CAAC,CAAC,EAAE;YACf,mFAAmF;YACnF,CAAC,CAAC,cAAc,EAAE,CAAA;QACpB,CAAC;QAEA,WAAW;QACZ,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,IAC7D,QAAQ,CACL;QACL,WAAW,CACP,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ScrollMenu.js","sourceRoot":"","sources":["../../src/ScrollMenu/ScrollMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAIZ,eAAe,EACf,MAAM,EACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAA;AAU7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,CAC1B,OAAkC,EAClC,aAA6B,EAC7B,EAAE;;IACF,OAAA,OAAO,aAAa,KAAK,QAAQ;QAC/B,CAAC,CAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,QAAQ,CAAC,aAAa,CAAC;QAC1C,CAAC,CAAC,SAAS,CAAA;CAAA,CAAA;AAEf,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAAkC,EAClC,aAA6B,EAC7B,EAAE;IACF,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAA;IAChC,MAAM,YAAY,GAAG,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;IAEhE,IAAI,CAAC,QAAQ,IAAI,CAAC,YAAY,EAAE;QAC9B,OAAM;KACP;IAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAA;IACjD,MAAM,YAAY,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAA;IAEzD,IAAI,YAAY,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,GAAG,GAAG,YAAY,CAAC,GAAG,CAAA;KACtD;SAAM,IAAI,YAAY,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;QAChD,QAAQ,CAAC,SAAS,IAAI,YAAY,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAA;KAC5D;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAA6B,KAAK,CAAC,EAAE;IACnD,MAAM,EACJ,aAAa,EACb,MAAM,EACN,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,IAAI,KAEF,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,mGAUL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5C,eAAe,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE;QAC/D,aAAa;KACd,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,IAEN,IAAI,IACR,WAAW,EAAE,CAAC,CAAC,EAAE;YACf,mFAAmF;YACnF,CAAC,CAAC,cAAc,EAAE,CAAA;QACpB,CAAC;QAEA,WAAW;QACZ,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,IAC7D,QAAQ,CACL;QACL,WAAW,CACP,CACR,CAAA;AACH,CAAC,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,IAAI,EAAE,MAAM;CACb,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/Section/Section.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import { SizeType, BaseProps } from '@toptal/picasso-shared';
+declare type VariantType = 'bordered' | 'default' | 'withHeaderBar';
+export interface Props extends BaseProps {
+    /** Title of the Section */
+    title?: ReactNode;
+    /** Subtitle of the Section */
+    subtitle?: ReactNode;
+    /** Additional actions of the Section */
+    actions?: ReactNode;
+    /** Main content of the Section */
+    children?: ReactNode;
+    /** Whether section can be collapsed */
+    collapsible?: boolean;
+    /** Default collapsed value **(applied if `collapsible: true`)** */
+    defaultCollapsed?: boolean;
+    testIds?: {
+        header?: string;
+        title?: string;
+        subtitle?: string;
+        actions?: string;
+        collapse?: string;
+    };
+    variant?: VariantType;
+    /** Title size of the inner text */
+    titleSize?: SizeType<'small' | 'medium'>;
+}
+export declare const Section: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Section;

package/Section/Section.js

@@ -0,0 +1,60 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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 styles from './styles';
+import Button from '../Button';
+import Container from '../Container';
+import Typography from '../Typography';
+import { isString } from '../utils';
+import { Rotate180 } from '../utils/Transitions';
+import { ArrowDownMinor16 } from '../Icon';
+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: classes.title, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.title, variant: 'heading', size: titleSize }, title)) : null;
+    const renderSubtitle = () => subtitle ? (React.createElement(Typography, { as: isString(title) ? undefined : 'div', className: classes.subtitle, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.subtitle, size: 'medium', color: 'dark-grey' }, subtitle)) : null;
+    const renderCollapse = () => collapsible ? (React.createElement(Button.Circular, { 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 },
+        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
+            }) },
+            renderTitle(),
+            renderSubtitle(),
+            renderActions())),
+        React.createElement(Collapse, { in: !collapsed, unmountOnExit: true }, children)));
+});
+Section.displayName = 'Section';
+Section.defaultProps = {
+    collapsible: false,
+    defaultCollapsed: true,
+    titleSize: 'medium'
+};
+export default Section;
+//# sourceMappingURL=Section.js.map

package/Section/Section.js.map

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

package/Section/index.d.ts

@@ -0,0 +1,4 @@
+import { OmitInternalProps } from '@toptal/picasso-shared';
+import { Props } from './Section';
+export { default } from './Section';
+export declare type SectionProps = OmitInternalProps<Props>;

package/Section/index.js

@@ -0,0 +1,2 @@
+export { default } from './Section';
+//# sourceMappingURL=index.js.map

package/Section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Section/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/Section/styles.d.ts

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

package/Section/styles.js

@@ -0,0 +1,62 @@
+import { createStyles } from '@material-ui/core';
+const defaultHeader = {
+    display: 'flex',
+    paddingBottom: '1.5rem'
+};
+const defaultCollapsedHeader = {
+    paddingBottom: '0'
+};
+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: {},
+    bordered: {
+        borderRadius: sizes.borderRadius.medium,
+        border: `solid ${sizes.borderWidth} ${palette.grey.light}`,
+        padding: '2rem',
+        '& > :last-child': {
+            paddingBottom: '0'
+        }
+    },
+    withHeaderBar: {
+        padding: 0,
+        '& > :last-child:not(:first-child)': {
+            padding: '1.5rem'
+        },
+        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: {
+        borderBottom: 'none',
+        borderRadius: sizes.borderRadius.medium
+    }
+});
+//# sourceMappingURL=styles.js.map