@toptal/picasso 26.15.0 → 26.15.2

package/Tab/Tab.js

@@ -9,20 +9,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, } from 'react';
+import React, { forwardRef, useContext, } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import MUITab from '@material-ui/core/Tab';
 import { useTitleCase } from '@toptal/picasso-shared';
 import Typography from '../Typography';
 import styles from './styles';
 import toTitleCase from '../utils/to-title-case';
+import { TabsOrientationContext } from '../Tabs/Tabs';
 const useStyles = makeStyles(styles, { name: 'PicassoTab' });
 export const Tab = forwardRef(function Tab(props, ref) {
     const { disabled, value, label, icon, selected, onChange, onClick, titleCase: propsTitleCase } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "selected", "onChange", "onClick", "titleCase"]);
     const classes = useStyles();
     const titleCase = useTitleCase(propsTitleCase);
     const labelComponent = (React.createElement(Typography, { as: 'div', size: 'small', weight: 'semibold', color: 'inherit' }, titleCase ? toTitleCase(label) : label));
-    return (React.createElement(MUITab, Object.assign({}, rest, { ref: ref, tabIndex: 0, disabled: disabled, label: labelComponent, icon: icon, value: value, selected: selected, onChange: onChange, onClick: onClick, classes: classes })));
+    const orientation = useContext(TabsOrientationContext);
+    return (React.createElement(MUITab, Object.assign({}, rest, { ref: ref, tabIndex: 0, disabled: disabled, label: labelComponent, icon: icon, value: value, selected: selected, onChange: onChange, onClick: onClick, classes: {
+            root: classes[orientation],
+            selected: classes.selected,
+            wrapper: classes.wrapper,
+        } })));
 });
 Tab.defaultProps = {};
 Tab.displayName = 'Tab';

package/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,GAIX,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,MAAoB,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAA6B,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,WAAW,MAAM,wBAAwB,CAAA;AA4BhD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAwB,SAAS,GAAG,CAAC,KAAK,EAAE,GAAG;IAC1E,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EAAE,cAAc,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,sFAUL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,cAAc,GAAG,CACrB,oBAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,SAAS,IAChE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAC5B,CACd,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,IAChB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,GAAG,CAAC,YAAY,GAAG,EAAE,CAAA;AAErB,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA;AAEvB,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EAIV,UAAU,GACX,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,MAAoB,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAA6B,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,WAAW,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AA4BrD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAwB,SAAS,GAAG,CAAC,KAAK,EAAE,GAAG;IAC1E,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EAAE,cAAc,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,sFAUL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,cAAc,GAAG,CACrB,oBAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,SAAS,IAChE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAC5B,CACd,CAAA;IACD,MAAM,WAAW,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAEtD,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;YACP,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC;YAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;SACzB,IACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,GAAG,CAAC,YAAY,GAAG,EAAE,CAAA;AAErB,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA;AAEvB,eAAe,GAAG,CAAA"}

package/Tab/styles.d.ts

@@ -1,2 +1,3 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, never>;
+import { Theme } from '@material-ui/core/styles';
+declare const _default: ({ sizes, palette, shadows }: Theme) => import("@material-ui/styles").StyleRules<{}, "horizontal" | "vertical" | "selected" | "wrapper">;
 export default _default;

package/Tab/styles.js

@@ -14,9 +14,6 @@ PicassoProvider.override(({ breakpoints, palette }) => ({
                 padding: undefined,
             },
             color: palette.grey.dark,
-            '&:not(:last-child)': {
-                marginRight: '2em',
-            },
             [breakpoints.up('md')]: {
                 minWidth: 'auto',
                 fontSize: '1rem',
@@ -41,10 +38,47 @@ PicassoProvider.override(({ breakpoints, palette }) => ({
             },
         },
         disabled: {},
-        wrapper: {
-            width: 'auto',
-        },
     },
 }));
-export default () => createStyles({});
+export default ({ sizes, palette, shadows }) => createStyles({
+    horizontal: {
+        '&:not(:last-child)': {
+            marginRight: '2em',
+        },
+    },
+    vertical: {
+        borderRadius: `${sizes.borderRadius.medium} 0 0 ${sizes.borderRadius.medium}`,
+        margin: '0.5em 0',
+        overflow: 'hidden',
+        padding: '0.5625em 0 0.5625em',
+        '&:first-child': {
+            marginTop: '0.125em',
+        },
+        '&:last-child': {
+            marginBottom: '0.125em',
+        },
+        '&:hover:not($selected)': {
+            backgroundColor: palette.grey.lighter2,
+        },
+        '& $wrapper': {
+            marginLeft: '1em',
+            marginRight: '2em',
+        },
+    },
+    selected: {
+        '&$vertical': {
+            boxShadow: shadows[1],
+            '&::before': {
+                content: '""',
+                background: palette.blue.main,
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                bottom: 0,
+                width: '3px',
+            },
+        },
+    },
+    wrapper: {},
+});
 //# sourceMappingURL=styles.js.map

package/Tab/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,SAAS,EAAE,CAAC;YACZ,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,EAAE;YACxC,QAAQ,EAAE,SAAS;YAEnB,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;gBACtB,OAAO,EAAE,SAAS;aACnB;YAED,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAExB,oBAAoB,EAAE;gBACpB,WAAW,EAAE,KAAK;aACnB;YAED,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;gBACtB,QAAQ,EAAE,MAAM;gBAChB,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,SAAS,EAAE;YACT,SAAS,EAAE,CAAC;YACZ,YAAY,EAAE,QAAQ;YACtB,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;YACtB,4BAA4B,EAAE;gBAC5B,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,CAAC;gBACR,YAAY,EAAE,CAAC;aAChB;SACF;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,gBAAgB,EAAE;YAChB,YAAY,EAAE;gBACZ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;aACzB;SACF;QACD,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE;YACP,KAAK,EAAE,MAAM;SACd;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,SAAS,EAAE,CAAC;YACZ,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,EAAE;YACxC,QAAQ,EAAE,SAAS;YAEnB,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;gBACtB,OAAO,EAAE,SAAS;aACnB;YAED,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAExB,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;gBACtB,QAAQ,EAAE,MAAM;gBAChB,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,SAAS,EAAE;YACT,SAAS,EAAE,CAAC;YACZ,YAAY,EAAE,QAAQ;YACtB,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;YACtB,4BAA4B,EAAE;gBAC5B,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,CAAC;gBACR,YAAY,EAAE,CAAC;aAChB;SACF;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,gBAAgB,EAAE;YAChB,YAAY,EAAE;gBACZ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;aACzB;SACF;QACD,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAS,EAAE,EAAE,CACpD,YAAY,CAAC;IACX,UAAU,EAAE;QACV,oBAAoB,EAAE;YACpB,WAAW,EAAE,KAAK;SACnB;KACF;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,QAAQ,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE;QAC7E,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,qBAAqB;QAE9B,eAAe,EAAE;YACf,SAAS,EAAE,SAAS;SACrB;QAED,cAAc,EAAE;YACd,YAAY,EAAE,SAAS;SACxB;QAED,wBAAwB,EAAE;YACxB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;SACvC;QAED,YAAY,EAAE;YACZ,UAAU,EAAE,KAAK;YACjB,WAAW,EAAE,KAAK;SACnB;KACF;IACD,QAAQ,EAAE;QACR,YAAY,EAAE;YACZ,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;YAErB,WAAW,EAAE;gBACX,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;gBAC7B,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,CAAC;gBACN,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,KAAK;aACb;SACF;KACF;IACD,OAAO,EAAE,EAAE;CACZ,CAAC,CAAA"}

package/Tabs/Tabs.d.ts

@@ -8,6 +8,9 @@ export interface Props extends BaseProps, Omit<ButtonOrAnchorProps, 'onChange'>
     onChange?: (event: React.ChangeEvent<{}>, value: number) => void;
     /** The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to false. */
     value: TabsProps['value'];
+    /** The tabs orientation (layout flow direction). */
+    orientation?: 'horizontal' | 'vertical';
 }
+export declare const TabsOrientationContext: React.Context<"horizontal" | "vertical">;
 export declare const Tabs: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default Tabs;

package/Tabs/Tabs.js

@@ -18,13 +18,18 @@ import useTabAction from './use-tab-action';
 const useStyles = makeStyles(styles, {
     name: 'Tabs',
 });
+export const TabsOrientationContext = React.createContext('horizontal');
 // eslint-disable-next-line react/display-name
 export const Tabs = forwardRef(function Tabs(props, ref) {
-    const { children, onChange, value } = props, rest = __rest(props, ["children", "onChange", "value"]);
-    const classes = useStyles();
+    const { children, orientation, onChange, value } = props, rest = __rest(props, ["children", "orientation", "onChange", "value"]);
+    const classes = useStyles(props);
     const action = useTabAction();
-    return (React.createElement(MUITabs, Object.assign({}, rest, { classes: classes, ref: ref, onChange: onChange, value: value, variant: 'scrollable', action: action, scrollButtons: 'auto', ScrollButtonComponent: TabScrollButton }), children));
+    return (React.createElement(TabsOrientationContext.Provider, { value: orientation },
+        React.createElement(MUITabs, Object.assign({}, rest, { classes: { root: classes[orientation] }, ref: ref, onChange: onChange, value: value, variant: 'scrollable', action: action, scrollButtons: 'auto', ScrollButtonComponent: TabScrollButton, orientation: orientation }), children)));
 });
 Tabs.displayName = 'Tabs';
+Tabs.defaultProps = {
+    orientation: 'horizontal',
+};
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,OAAsB,MAAM,wBAAwB,CAAA;AAG3D,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,YAAY,MAAM,kBAAkB,CAAA;AAe3C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,MAAM;CACb,CAAC,CAAA;AAEF,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CACpE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9C,iCAAsC,CAAQ,CAAA;IACpD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,MAAM,GAAG,YAAY,EAAE,CAAA;IAE7B,OAAO,CACL,oBAAC,OAAO,oBACF,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,YAAY,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAC,MAAM,EACpB,qBAAqB,EAAE,eAAe,KAErC,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,OAAsB,MAAM,wBAAwB,CAAA;AAG3D,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,YAAY,MAAM,kBAAkB,CAAA;AAkB3C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,MAAM;CACb,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAEvD,YAAY,CAAC,CAAA;AAEf,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CACpE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA3D,gDAAmD,CAAQ,CAAA;IACjE,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,MAAM,GAAG,YAAY,EAAE,CAAA;IAE7B,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAY;QAClD,oBAAC,OAAO,oBACF,IAAI,IACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,WAAY,CAAC,EAAE,EACxC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,YAAY,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAC,MAAM,EACpB,qBAAqB,EAAE,eAAe,EACtC,WAAW,EAAE,WAAW,KAEvB,QAAQ,CACD,CACsB,CACnC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AACzB,IAAI,CAAC,YAAY,GAAG;IAClB,WAAW,EAAE,YAAY;CAC1B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/Tabs/styles.d.ts

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

package/Tabs/styles.js

@@ -5,15 +5,10 @@ PicassoProvider.override(({ palette }) => ({
         root: {
             position: 'relative',
             minHeight: 0,
-            '&::after': {
-                position: 'absolute',
-                content: '""',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                height: 1,
-                backgroundColor: palette.grey.main,
-                zIndex: 0,
+        },
+        vertical: {
+            '& $indicator': {
+                display: 'none',
             },
         },
         indicator: {
@@ -22,5 +17,19 @@ PicassoProvider.override(({ palette }) => ({
         },
     },
 }));
-export default () => createStyles({});
+export default ({ palette }) => createStyles({
+    horizontal: {
+        '&::after': {
+            position: 'absolute',
+            content: '""',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 1,
+            backgroundColor: palette.grey.main,
+            zIndex: 0,
+        },
+    },
+    vertical: {},
+});
 //# sourceMappingURL=styles.js.map

package/Tabs/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,CAAC;YAEZ,UAAU,EAAE;gBACV,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE,CAAC;gBACT,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;gBAClC,MAAM,EAAE,CAAC;aACV;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,CAAC;SACb;QACD,QAAQ,EAAE;YACR,cAAc,EAAE;gBACd,OAAO,EAAE,MAAM;aAChB;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,UAAU,EAAE;QACV,UAAU,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;IACD,QAAQ,EAAE,EAAE;CACb,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "26.15.0",
+  "version": "26.15.2",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",

package/utils/__tests__/html-to-hast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/__tests__/html-to-hast.test.js

@@ -0,0 +1,94 @@
+import { htmlToHast } from '..';
+describe('html-to-hast', () => {
+    describe('valid HTML string', () => {
+        it('returns valid Picasso components', () => {
+            const html = '<h3>heading</h3><p>normal</p>';
+            const result = htmlToHast(html);
+            expect(result).toEqual({
+                type: 'root',
+                children: [
+                    {
+                        type: 'element',
+                        tagName: 'h3',
+                        properties: {},
+                        children: [{ type: 'text', value: 'heading' }],
+                    },
+                    {
+                        type: 'element',
+                        tagName: 'p',
+                        properties: {},
+                        children: [{ type: 'text', value: 'normal' }],
+                    },
+                ],
+            });
+        });
+        it('strips script tags', () => {
+            const html = `
+        <script>alert(2)</script>
+        <p><em>Foo</em></p>`;
+            const ast = htmlToHast(html);
+            expect(ast).toEqual({
+                type: 'root',
+                children: [
+                    {
+                        type: 'element',
+                        tagName: 'p',
+                        properties: {},
+                        children: [
+                            {
+                                type: 'element',
+                                tagName: 'em',
+                                properties: {},
+                                children: [{ type: 'text', value: 'Foo' }],
+                            },
+                        ],
+                    },
+                ],
+            });
+        });
+    });
+    describe('when parsing HTML with a single container', () => {
+        it('returns an single starting node AST for a single paragraph', () => {
+            const html = '<p>Container</p>';
+            expect(htmlToHast(html)).toEqual({
+                type: 'root',
+                children: [
+                    {
+                        type: 'element',
+                        tagName: 'p',
+                        properties: {},
+                        children: [{ type: 'text', value: 'Container' }],
+                    },
+                ],
+            });
+        });
+        it('returns an single starting node AST for lists', () => {
+            const html = '<ul><li>Item 1</li><li>Item 2</li></ul>';
+            expect(htmlToHast(html)).toEqual({
+                type: 'root',
+                children: [
+                    {
+                        type: 'element',
+                        tagName: 'ul',
+                        properties: {},
+                        children: [
+                            {
+                                type: 'element',
+                                tagName: 'li',
+                                properties: {},
+                                children: [{ type: 'text', value: 'Item 1' }],
+                            },
+                            {
+                                type: 'element',
+                                tagName: 'li',
+                                properties: {},
+                                children: [{ type: 'text', value: 'Item 2' }],
+                            },
+                        ],
+                    },
+                ],
+            });
+        });
+    });
+});
+//# sourceMappingURL=html-to-hast.test.js.map

package/utils/__tests__/html-to-hast.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-to-hast.test.js","sourceRoot":"","sources":["../../../src/utils/__tests__/html-to-hast.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAA;AAE/B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;QACjC,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;YAC1C,MAAM,IAAI,GAAG,+BAA+B,CAAA;YAC5C,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;YAE/B,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;gBACrB,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,IAAI;wBACb,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;qBAC/C;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,GAAG;wBACZ,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;qBAC9C;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;YAC5B,MAAM,IAAI,GAAG;;4BAES,CAAA;YACtB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;YAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,GAAG;wBACZ,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE;4BACR;gCACE,IAAI,EAAE,SAAS;gCACf,OAAO,EAAE,IAAI;gCACb,UAAU,EAAE,EAAE;gCACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;6BAC3C;yBACF;qBACF;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACzD,EAAE,CAAC,4DAA4D,EAAE,GAAG,EAAE;YACpE,MAAM,IAAI,GAAG,kBAAkB,CAAA;YAE/B,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;gBAC/B,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,GAAG;wBACZ,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;qBACjD;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;YACvD,MAAM,IAAI,GAAG,yCAAyC,CAAA;YAEtD,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;gBAC/B,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,IAAI;wBACb,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE;4BACR;gCACE,IAAI,EAAE,SAAS;gCACf,OAAO,EAAE,IAAI;gCACb,UAAU,EAAE,EAAE;gCACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;6BAC9C;4BACD;gCACE,IAAI,EAAE,SAAS;gCACf,OAAO,EAAE,IAAI;gCACb,UAAU,EAAE,EAAE;gCACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;6BAC9C;yBACF;qBACF;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/utils/html-to-hast.js

@@ -18,7 +18,7 @@ const htmlToAst = (html) => {
     const domHast = hastSanitize(hastFromDom(dom.body), hastSanitizeSchema);
     const ast = {
         type: 'root',
-        children: domHast.children,
+        children: domHast.type === 'root' ? domHast.children : [domHast],
     };
     return ast;
 };

package/utils/html-to-hast.js.map

@@ -1 +1 @@
-{"version":3,"file":"html-to-hast.js","sourceRoot":"","sources":["../../src/utils/html-to-hast.ts"],"names":[],"mappings":"AAAA,OAAO,YAAwB,MAAM,oBAAoB,CAAA;AACzD,OAAO,WAAW,MAAM,oBAAoB,CAAA;AAI5C,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,aAAa,EAAE,KAAK;IACpB,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE;QACT,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;KACjB;IACD,UAAU,EAAE;QACV,GAAG,EAAE,EAAE;QACP,CAAC,EAAE,CAAC,MAAM,CAAC;KACZ;IACD,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC;IAClE,KAAK,EAAE,CAAC,QAAQ,CAAC;CAClB,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,EAAE;IACjC,MAAM,GAAG,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;IAC9D,MAAM,OAAO,GAAG,YAAY,CAC1B,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EACrB,kBAAkB,CACJ,CAAA;IAEhB,MAAM,GAAG,GAAY;QACnB,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,OAAO,CAAC,QAAQ;KAC3B,CAAA;IAED,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"html-to-hast.js","sourceRoot":"","sources":["../../src/utils/html-to-hast.ts"],"names":[],"mappings":"AAAA,OAAO,YAAwB,MAAM,oBAAoB,CAAA;AACzD,OAAO,WAAW,MAAM,oBAAoB,CAAA;AAI5C,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,aAAa,EAAE,KAAK;IACpB,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE;QACT,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;KACjB;IACD,UAAU,EAAE;QACV,GAAG,EAAE,EAAE;QACP,CAAC,EAAE,CAAC,MAAM,CAAC;KACZ;IACD,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC;IAClE,KAAK,EAAE,CAAC,QAAQ,CAAC;CAClB,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,EAAE;IACjC,MAAM,GAAG,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;IAC9D,MAAM,OAAO,GAAG,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAEtD,CAAA;IAEhB,MAAM,GAAG,GAAY;QACnB,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;KACjE,CAAA;IAED,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}