@toptal/picasso-page 3.0.3 → 3.0.4

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

@@ -1 +1 @@
-{"version":3,"file":"PageTopBarMenu.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAiC,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAcvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,cAAc,8EAuG1B,CAAA;AAMD,eAAe,cAAc,CAAA"}
+{"version":3,"file":"PageTopBarMenu.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAiC,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAevD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,cAAc,8EA0G1B,CAAA;AAMD,eAAe,cAAc,CAAA"}

package/dist-package/src/PageTopBarMenu/PageTopBarMenu.js

@@ -17,6 +17,7 @@ import { UserBadge } from '@toptal/picasso-user-badge';
 import { Avatar } from '@toptal/picasso-avatar';
 import { Typography } from '@toptal/picasso-typography';
 import { DropdownCompound as Dropdown } from '@toptal/picasso-dropdown';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 import styles from './styles';
 import { PageTopBarContext } from '../PageTopBar';
 const useStyles = makeStyles(styles, {
@@ -48,7 +49,7 @@ export const PageTopBarMenu = forwardRef(function PageTopBarMenu(props, ref) {
             },
         } }),
         trigger,
-        React.createElement(Dropdown.Arrow, { className: cx(classes.arrow, { [classes.invert]: invert }) })));
+        React.createElement(Dropdown.Arrow, { className: twJoin('xs:max-lg:ml-2', invert ? 'text-graphite-700' : 'text-white') })));
 });
 PageTopBarMenu.defaultProps = {};
 PageTopBarMenu.displayName = 'PageTopBarMenu';

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

@@ -1 +1 @@
-{"version":3,"file":"PageTopBarMenu.js","sourceRoot":"","sources":["../../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,gBAAgB,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEvE,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEjD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAaF,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,cAAc,EAAE,WAAW,KAEzB,KAAK,EADJ,IAAI,UACL,KAAK,EATH,4EASL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACjD,MAAM,MAAM,GAAG,OAAO,KAAK,OAAO,CAAA;IAElC,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAEzD,MAAM,WAAW,GACf,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,YAAY,EAC/B,MAAM,EAAE,CAAC,eAAe,IAAI,CAAC,MAAM,EACnC,IAAI,EAAC,QAAQ,kBACC,WAAW,IAExB,IAAI,CACM,CACd,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAA;IAEH,MAAM,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,CAChC;QACE,oBAAC,SAAS,IACR,MAAM,QACN,IAAI,EAAC,SAAS,kBACA,WAAW,EACzB,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO,CAAC,gBAAgB;gBAC9B,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,IAAI,EAAE,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,YAAY,CAAC;aAC9C,EACD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,IAEb,IAAI,IAAI,WAAW,CACV;QACX,QAAQ,CACR,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAA;IAED,MAAM,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,CAChC,oBAAC,MAAM,IACL,IAAI,EAAC,SAAS,kBACA,WAAW,EACzB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,MAAM,GACX,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IACR,MAAM,EAAE,CAAC,MAAM,EACf,MAAM,QACN,IAAI,EAAC,SAAS,EACd,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,YAAY,CAAC;SAC9C,EACD,IAAI,EAAE,IAAI,kBACI,WAAW,EACzB,MAAM,EAAE,MAAM,IAEb,IAAI,IAAI,WAAW,CACV,CACb,CAAA;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,EACrC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EACjD,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF;QAEA,OAAO;QACR,oBAAC,QAAQ,CAAC,KAAK,IACb,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,GAC1D,CACO,CACZ,CAAA;AACH,CAAC,CACF,CAAA;AAED,cAAc,CAAC,YAAY,GAAG,EAAE,CAAA;AAEhC,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}
+{"version":3,"file":"PageTopBarMenu.js","sourceRoot":"","sources":["../../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ screens, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "invert" | "name" | "arrow" | "avatar" | "contentUserBadge" | "truncateText" | "paper">;
+declare const _default: ({ screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "name" | "avatar" | "contentUserBadge" | "truncateText" | "paper">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarMenu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;+CAGf,KAAK;AAA3C,wBA6CI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarMenu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAmCI"}

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

@@ -1,5 +1,5 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ screens, palette }) => createStyles({
+export default ({ screens }) => createStyles({
     avatar: {
         fontSize: '0.9rem',
     },
@@ -28,15 +28,6 @@ export default ({ screens, palette }) => createStyles({
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
-    arrow: {
-        color: 'white',
-        [screens('xs', 'sm', 'md')]: {
-            marginLeft: '0.5rem',
-        },
-    },
-    invert: {
-        color: palette.text.primary,
-    },
     paper: {
         [screens('xs', 'sm', 'md')]: {
             top: '2.5em !important',

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageTopBarMenu/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAS,EAAE,EAAE,CAC7C,YAAY,CAAC;IACX,MAAM,EAAE;QACN,QAAQ,EAAE,QAAQ;KACnB;IACD,gBAAgB,EAAE;QAChB,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO;YACxB,QAAQ,EAAE,UAAU;SACrB;KACF;IACD,OAAO,EAAE;QACP,SAAS,EAAE,4CAA4C;QACvD,KAAK,EAAE,MAAM;QACb,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,KAAK,EAAE,OAAO;SACf;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,OAAO;KACjB;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KACzB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QAEd,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,UAAU,EAAE,QAAQ;SACrB;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KAC5B;IACD,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,GAAG,EAAE,kBAAkB;SACxB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageTopBarMenu/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,MAAM,EAAE;QACN,QAAQ,EAAE,QAAQ;KACnB;IACD,gBAAgB,EAAE;QAChB,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO;YACxB,QAAQ,EAAE,UAAU;SACrB;KACF;IACD,OAAO,EAAE;QACP,SAAS,EAAE,4CAA4C;QACvD,KAAK,EAAE,MAAM;QACb,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,KAAK,EAAE,OAAO;SACf;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,OAAO;KACjB;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KACzB;IACD,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,GAAG,EAAE,kBAAkB;SACxB;KACF;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -22,17 +22,17 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-accordion": "2.0.3",
-    "@toptal/picasso-autocomplete": "2.0.3",
+    "@toptal/picasso-accordion": "2.0.4",
+    "@toptal/picasso-autocomplete": "2.0.4",
     "@toptal/picasso-avatar": "5.0.1",
     "@toptal/picasso-badge": "2.0.0",
-    "@toptal/picasso-button": "3.0.3",
+    "@toptal/picasso-button": "3.0.4",
     "@toptal/picasso-container": "2.0.0",
-    "@toptal/picasso-dropdown": "2.0.4",
+    "@toptal/picasso-dropdown": "3.0.0",
     "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-logo": "1.0.9",
     "@toptal/picasso-menu": "2.0.1",
-    "@toptal/picasso-notification": "3.0.3",
+    "@toptal/picasso-notification": "3.0.4",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-tag": "3.0.1",
     "@toptal/picasso-tooltip": "1.1.4",

package/src/PageTopBarMenu/PageTopBarMenu.tsx

@@ -10,6 +10,7 @@ import { UserBadge } from '@toptal/picasso-user-badge'
 import { Avatar } from '@toptal/picasso-avatar'
 import { Typography } from '@toptal/picasso-typography'
 import { DropdownCompound as Dropdown } from '@toptal/picasso-dropdown'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import styles from './styles'
 import { PageTopBarContext } from '../PageTopBar'
@@ -127,7 +128,10 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
       >
         {trigger}
         <Dropdown.Arrow
-          className={cx(classes.arrow, { [classes.invert]: invert })}
+          className={twJoin(
+            'xs:max-lg:ml-2',
+            invert ? 'text-graphite-700' : 'text-white'
+          )}
         />
       </Dropdown>
     )

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

@@ -42,8 +42,17 @@ exports[`PageTopBarMenu renders 1`] = `
           </div>
         </div>
         <span
-          class="PicassoDropdownArrow-root PicassoTopBarMenu-arrow PicassoDropdownArrow-medium"
-        />
+          class="flex"
+        >
+          <svg
+            class="fill-current ml-[0.7em] min-w xs:max-lg:ml-2 text-white"
+            viewBox="3 3 11 11"
+          >
+            <path
+              d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
+            />
+          </svg>
+        </span>
       </div>
     </div>
   </div>

package/src/PageTopBarMenu/styles.ts

@@ -1,7 +1,7 @@
 import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
 
-export default ({ screens, palette }: Theme) =>
+export default ({ screens }: Theme) =>
   createStyles({
     avatar: {
       fontSize: '0.9rem',
@@ -31,16 +31,6 @@ export default ({ screens, palette }: Theme) =>
       overflow: 'hidden',
       textOverflow: 'ellipsis',
     },
-    arrow: {
-      color: 'white',
-
-      [screens('xs', 'sm', 'md')]: {
-        marginLeft: '0.5rem',
-      },
-    },
-    invert: {
-      color: palette.text.primary,
-    },
     paper: {
       [screens('xs', 'sm', 'md')]: {
         top: '2.5em !important',