@toptal/picasso-page 4.0.2 → 4.0.4

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/styles.ts"],"names":[],"mappings":";AAIA,wBAiBC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/styles.ts"],"names":[],"mappings":";AAIA,wBAmBC"}

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

@@ -4,7 +4,8 @@ export default () => {
     return createStyles({
         root: {
             [headerBreakingPointXL]: {
-                display: 'none',
+                //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
+                display: 'none !important',
             },
         },
         popper: {
@@ -14,7 +15,8 @@ export default () => {
             pointerEvents: 'none',
         },
         hidden: {
-            display: 'none',
+            //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
+            display: 'none !important',
         },
     });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageHamburger/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,GAAG,EAAE;IAClB,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,CAAC,qBAAqB,CAAC,EAAE;gBACvB,OAAO,EAAE,MAAM;aAChB;SACF;QACD,MAAM,EAAE;YACN,SAAS,EAAE,MAAM;SAClB;QACD,SAAS,EAAE;YACT,aAAa,EAAE,MAAM;SACtB;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;SAChB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageHamburger/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,GAAG,EAAE;IAClB,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,CAAC,qBAAqB,CAAC,EAAE;gBACvB,4LAA4L;gBAC5L,OAAO,EAAE,iBAAiB;aAC3B;SACF;QACD,MAAM,EAAE;YACN,SAAS,EAAE,MAAM;SAClB;QACD,SAAS,EAAE;YACT,aAAa,EAAE,MAAM;SACtB;QACD,MAAM,EAAE;YACN,4LAA4L;YAC5L,OAAO,EAAE,iBAAiB;SAC3B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"PageHead.d.ts","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA+ED,eAAO,MAAM,QAAQ,8EAkBnB,CAAA;;;;;;;;;;;;;;;;AASF,wBAKE"}
+{"version":3,"file":"PageHead.d.ts","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA4ED,eAAO,MAAM,QAAQ,8EAoBnB,CAAA;;;;;;;;;;;;;;;;AASF,wBAKE"}

package/dist-package/src/PageHead/PageHead.js

@@ -10,17 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoPageHead',
-});
-const useMainStyles = makeStyles(styles, {
-    name: 'PicassoPageHeadMain',
-});
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 const Title = (_a) => {
     var { titleCase, children, className } = _a, rest = __rest(_a, ["titleCase", "children", "className"]);
     return (React.createElement(Typography, Object.assign({ variant: 'heading', size: 'large', titleCase: titleCase, className: className }, rest), children));
@@ -31,23 +23,25 @@ const Tabs = (_a) => {
 };
 const Main = (props) => {
     const { className, children, enableMinHeight } = props, rest = __rest(props, ["className", "children", "enableMinHeight"]);
-    const classes = useMainStyles(props);
-    return (React.createElement(Container, Object.assign({ flex: true, justifyContent: 'space-between', alignItems: 'center', className: cx({
-            [classes.main]: !enableMinHeight,
-            [classes.mainEnableMinHeight]: enableMinHeight,
-        }, className) }, rest), children));
+    return (React.createElement(Container, Object.assign({ flex: true, justifyContent: 'space-between', alignItems: 'center', className: twMerge(enableMinHeight ? 'py-3 min-h-[3.375em]' : 'h-[3.375em]', className) }, rest), children));
 };
 const Actions = (_a) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
     return (React.createElement(Container, Object.assign({ flex: true, alignItems: 'center', className: className }, rest), children));
 };
+const borderPseudoElement = [
+    'after:content-[""]',
+    'after:absolute',
+    'after:inset-x-0',
+    'after:bottom-0',
+    'after:z-0',
+    'after:bg-gray-200',
+    'after:h-[1px]',
+];
 export const PageHead = forwardRef(function PageHead(props, ref) {
     const { children, noBorder, rightPadding, className } = props;
-    const classes = useStyles();
-    return (React.createElement(Container, { ref: ref, className: cx(classes.root, className, {
-            [classes.withBorder]: !noBorder,
-            [classes.rightPadding]: rightPadding,
-        }) }, children));
+    const withBorder = !noBorder;
+    return (React.createElement(Container, { ref: ref, className: twMerge('relative', withBorder && borderPseudoElement, rightPadding && 'pr-8', className) }, children));
 });
 PageHead.defaultProps = {
     rightPadding: false,

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

@@ -1 +1 @@
-{"version":3,"file":"PageHead.js","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageHead.js","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,KAAK,GAAG,CAAC,EAKwC,EAAE,EAAE;QAL5C,EACb,SAAS,EACT,QAAQ,EACR,SAAS,OAE4C,EADlD,IAAI,cAJM,sCAKd,CADQ;IAEP,OAAO,CACL,oBAAC,UAAU,kBACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,IAChB,IAAI,GAEP,QAAQ,CACE,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,EAIwB,EAAE,EAAE;QAJ5B,EACZ,QAAQ,EACR,SAAS,OAE2B,EADjC,IAAI,cAHK,yBAIb,CADQ;IAEP,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GACtC,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CACX,KAAsE,EACtE,EAAE;IACF,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAzD,4CAAiD,CAAQ,CAAA;IAE/D,OAAO,CACL,oBAAC,SAAS,kBACR,IAAI,QACJ,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,OAAO,CAChB,eAAe,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,aAAa,EACxD,SAAS,CACV,IACG,IAAI,GAEP,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAIqB,EAAE,EAAE;QAJzB,EACf,QAAQ,EACR,SAAS,OAE2B,EADjC,IAAI,cAHQ,yBAIhB,CADQ;IAEP,OAAO,CACL,oBAAC,SAAS,kBAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GAC/D,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG;IAC1B,oBAAoB;IACpB,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;IAChB,WAAW;IACX,mBAAmB;IACnB,eAAe;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC7D,MAAM,UAAU,GAAG,CAAC,QAAQ,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,UAAU,EACV,UAAU,IAAI,mBAAmB,EACjC,YAAY,IAAI,MAAM,EACtB,SAAS,CACV,IAEA,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,YAAY,GAAG;IACtB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACrC,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,OAAO;CACR,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "4.0.2",
+  "version": "4.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.11",
-    "@toptal/picasso-autocomplete": "4.0.2",
+    "@toptal/picasso-accordion": "2.1.0",
+    "@toptal/picasso-autocomplete": "4.0.3",
     "@toptal/picasso-avatar": "6.1.0",
     "@toptal/picasso-badge": "3.0.0",
-    "@toptal/picasso-button": "4.0.0",
+    "@toptal/picasso-button": "4.0.1",
     "@toptal/picasso-container": "3.0.0",
-    "@toptal/picasso-dropdown": "4.0.0",
+    "@toptal/picasso-dropdown": "4.1.0",
     "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-logo": "2.0.0",
     "@toptal/picasso-menu": "3.0.2",
-    "@toptal/picasso-notification": "4.0.0",
+    "@toptal/picasso-notification": "4.0.1",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-tag": "4.0.0",
     "@toptal/picasso-tooltip": "1.1.5",

package/src/PageHamburger/styles.ts

@@ -6,7 +6,8 @@ export default () => {
   return createStyles({
     root: {
       [headerBreakingPointXL]: {
-        display: 'none',
+        //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
+        display: 'none !important',
       },
     },
     popper: {
@@ -16,7 +17,8 @@ export default () => {
       pointerEvents: 'none',
     },
     hidden: {
-      display: 'none',
+      //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
+      display: 'none !important',
     },
   })
 }

package/src/PageHead/PageHead.tsx

@@ -1,12 +1,9 @@
 import type { ReactNode } from 'react'
 import React, { forwardRef } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { TextLabelProps, BaseProps } from '@toptal/picasso-shared'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps {
   /** Content */
@@ -17,14 +14,6 @@ export interface Props extends BaseProps {
   noBorder?: boolean
 }
 
-const useStyles = makeStyles(styles, {
-  name: 'PicassoPageHead',
-})
-
-const useMainStyles = makeStyles(styles, {
-  name: 'PicassoPageHeadMain',
-})
-
 const Title = ({
   titleCase,
   children,
@@ -61,18 +50,13 @@ const Main = (
 ) => {
   const { className, children, enableMinHeight, ...rest } = props
 
-  const classes = useMainStyles(props)
-
   return (
     <Container
       flex
       justifyContent='space-between'
       alignItems='center'
-      className={cx(
-        {
-          [classes.main]: !enableMinHeight,
-          [classes.mainEnableMinHeight]: enableMinHeight,
-        },
+      className={twMerge(
+        enableMinHeight ? 'py-3 min-h-[3.375em]' : 'h-[3.375em]',
         className
       )}
       {...rest}
@@ -94,20 +78,32 @@ const Actions = ({
   )
 }
 
+const borderPseudoElement = [
+  'after:content-[""]',
+  'after:absolute',
+  'after:inset-x-0',
+  'after:bottom-0',
+  'after:z-0',
+  'after:bg-gray-200',
+  'after:h-[1px]',
+]
+
 export const PageHead = forwardRef<HTMLDivElement, Props>(function PageHead(
   props,
   ref
 ) {
   const { children, noBorder, rightPadding, className } = props
-  const classes = useStyles()
+  const withBorder = !noBorder
 
   return (
     <Container
       ref={ref}
-      className={cx(classes.root, className, {
-        [classes.withBorder]: !noBorder,
-        [classes.rightPadding]: rightPadding,
-      })}
+      className={twMerge(
+        'relative',
+        withBorder && borderPseudoElement,
+        rightPadding && 'pr-8',
+        className
+      )}
     >
       {children}
     </Container>

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

@@ -21,10 +21,10 @@ exports[`Page.TopBar render with custom logo 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
+                class="flex items-center PageHamburger-root PageHamburger-hidden"
               >
                 <div
-                  class="PicassoDropdown-anchor"
+                  class="inline-flex items-center cursor-pointer"
                 >
                   <button
                     aria-disabled="false"
@@ -50,13 +50,13 @@ exports[`Page.TopBar render with custom logo 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root PicassoDropdown-popper PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
                   <div>
                     <div
-                      class="bg-white shadow-0 transition-shadow duration-300 delay-0 PicassoDropdown-content !shadow-[inset_-1px_0px_0px_0px] !shadow-gray max-h-[calc(100vh-var(--header !bg-gray"
+                      class="bg-white shadow-0 transition-shadow duration-300 delay-0 overflow-y [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh !shadow-[inset_-1px_0px_0px_0px] !shadow-gray max-h-[calc(100vh-var(--header !bg-gray"
                       style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;"
                     >
                       <div>
@@ -120,10 +120,10 @@ exports[`Page.TopBar render with link 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
+                class="flex items-center PageHamburger-root PageHamburger-hidden"
               >
                 <div
-                  class="PicassoDropdown-anchor"
+                  class="inline-flex items-center cursor-pointer"
                 >
                   <button
                     aria-disabled="false"
@@ -149,13 +149,13 @@ exports[`Page.TopBar render with link 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root PicassoDropdown-popper PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
                   <div>
                     <div
-                      class="bg-white shadow-0 transition-shadow duration-300 delay-0 PicassoDropdown-content !shadow-[inset_-1px_0px_0px_0px] !shadow-gray max-h-[calc(100vh-var(--header !bg-gray"
+                      class="bg-white shadow-0 transition-shadow duration-300 delay-0 overflow-y [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh !shadow-[inset_-1px_0px_0px_0px] !shadow-gray max-h-[calc(100vh-var(--header !bg-gray"
                       style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;"
                     >
                       <div>
@@ -245,10 +245,10 @@ exports[`Page.TopBar renders 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
+                class="flex items-center PageHamburger-root PageHamburger-hidden"
               >
                 <div
-                  class="PicassoDropdown-anchor"
+                  class="inline-flex items-center cursor-pointer"
                 >
                   <button
                     aria-disabled="false"
@@ -274,13 +274,13 @@ exports[`Page.TopBar renders 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root PicassoDropdown-popper PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
                   <div>
                     <div
-                      class="bg-white shadow-0 transition-shadow duration-300 delay-0 PicassoDropdown-content !shadow-[inset_-1px_0px_0px_0px] !shadow-gray max-h-[calc(100vh-var(--header !bg-gray"
+                      class="bg-white shadow-0 transition-shadow duration-300 delay-0 overflow-y [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh !shadow-[inset_-1px_0px_0px_0px] !shadow-gray max-h-[calc(100vh-var(--header !bg-gray"
                       style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;"
                     >
                       <div>

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

@@ -6,10 +6,10 @@ exports[`PageTopBarMenu renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoDropdown-root"
+      class="flex items-center"
     >
       <div
-        class="PicassoDropdown-anchor"
+        class="inline-flex items-center cursor-pointer"
       >
         <div
           class="items-center flex text-[1rem]"

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

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "main" | "root" | "withBorder" | "rightPadding" | "mainEnableMinHeight">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -1,31 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette }) => createStyles({
-    root: {
-        position: 'relative',
-    },
-    withBorder: {
-        // underline effect for the container
-        '&::after': {
-            position: 'absolute',
-            content: '""',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: 1,
-            backgroundColor: palette.grey.lighter2,
-            zIndex: 0,
-        },
-    },
-    rightPadding: {
-        paddingRight: '2rem',
-    },
-    main: {
-        height: '3.375em',
-    },
-    mainEnableMinHeight: {
-        paddingTop: '0.75rem',
-        paddingBottom: '0.75rem',
-        minHeight: '3.375em',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageHead/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;KACrB;IACD,UAAU,EAAE;QACV,qCAAqC;QACrC,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,QAAQ;YACtC,MAAM,EAAE,CAAC;SACV;KACF;IACD,YAAY,EAAE;QACZ,YAAY,EAAE,MAAM;KACrB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;KAClB;IACD,mBAAmB,EAAE;QACnB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC,CAAA"}

package/src/PageHead/styles.ts

@@ -1,33 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-    },
-    withBorder: {
-      // underline effect for the container
-      '&::after': {
-        position: 'absolute',
-        content: '""',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: 1,
-        backgroundColor: palette.grey.lighter2,
-        zIndex: 0,
-      },
-    },
-    rightPadding: {
-      paddingRight: '2rem',
-    },
-    main: {
-      height: '3.375em',
-    },
-    mainEnableMinHeight: {
-      paddingTop: '0.75rem',
-      paddingBottom: '0.75rem',
-      minHeight: '3.375em',
-    },
-  })