@bundle-stats/ui 3.2.6 → 3.2.8

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.8](https://github.com/relative-ci/bundle-stats/compare/v3.2.7...v3.2.8) (2022-03-10)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.7](https://github.com/relative-ci/bundle-stats/compare/v3.2.6...v3.2.7) (2022-03-10)
+
+
+### Bug Fixes
+
+* **ui:** App - consistent vertical spacing ([4f29d3d](https://github.com/relative-ci/bundle-stats/commit/4f29d3d47edc7f89858f0948d0cdc1e22ce5b157))
+* **ui:** HoverCard - prevent default on close ([9fae6a4](https://github.com/relative-ci/bundle-stats/commit/9fae6a4825d1a016e3b626168f73ca0a90213d10))
+* **ui:** MetricsTable - consistent toolbar spacing ([fcaf38d](https://github.com/relative-ci/bundle-stats/commit/fcaf38df698329bc00bc267e72289fec8064cc61))
+
+
+
+
+
 ## [3.2.6](https://github.com/relative-ci/bundle-stats/compare/v3.2.5...v3.2.6) (2022-03-04)
 
 

package/lib/app/app.js

@@ -236,7 +236,7 @@ var AppComponent = function AppComponent(_ref2) {
     path: _constants.URLS.OVERVIEW,
     render: function render() {
       return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "large"
+        space: "medium"
       }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
         duplicatePackagesCount: duplicatePackagesCount,
         showDelta: jobs.length > 1

package/lib/app/app.module.css

@@ -13,7 +13,7 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
@@ -35,8 +35,8 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 

package/lib/components/bundle-assets/bundle-assets.js

@@ -222,7 +222,7 @@ var BundleAssets = function BundleAssets(props) {
     renderActions: function renderActions(_ref7) {
       var actionClassName = _ref7.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-        space: "xsmall",
+        space: "xxsmall",
         className: (0, _classnames["default"])(_bundleAssetsModule["default"].dropdown, actionClassName)
       }, /*#__PURE__*/_react["default"].createElement(_sortDropdown.SortDropdown, _extends({
         fields: sortFields
@@ -233,7 +233,9 @@ var BundleAssets = function BundleAssets(props) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleAssetsModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib/components/bundle-modules/bundle-modules.js

@@ -232,7 +232,9 @@ var BundleModules = function BundleModules(_ref4) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleModulesModule["default"].toolbarSearch,
     search: search,
     updateSearch: updateSearch,

package/lib/components/bundle-packages/bundle-packages.js

@@ -225,7 +225,9 @@ var BundlePackages = function BundlePackages(props) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundlePackagesModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib/components/metrics-table-search/metrics-table-search.module.css

@@ -5,7 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }

package/lib/ui/filters/filters.js

@@ -226,6 +226,7 @@ var Filters = function Filters(props) {
   return /*#__PURE__*/_react["default"].createElement("form", {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall",
     className: _filtersModule["default"].items
   }, Object.entries(filters).map(function (_ref11) {
     var _ref12 = _slicedToArray(_ref11, 2),

package/lib/ui/filters/filters.module.css

@@ -132,17 +132,8 @@
 .item {
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
 .itemButton {
-  border-radius: 0px;
-}
-
-.item:last-child .itemButton {
-  border-radius: 0 var(--radius-small) var(--radius-small) 0;
-}
-
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+  border-radius: var(--radius-small);
 }

package/lib/ui/hover-card/hover-card.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HoverCard = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,12 +15,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _hovercard = require("ariakit/hovercard");
 
-var _icon = require("../icon");
-
 var _hoverCardModule = _interopRequireDefault(require("./hover-card.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var resolveComponent = function resolveComponent(as, href) {
@@ -48,6 +52,10 @@ var HoverCard = function HoverCard(props) {
   }); // Fallback to span if no href
 
   var Component = resolveComponent(as, href);
+  var handleOnClose = (0, _react.useCallback)(function (event) {
+    state.hide();
+    event.preventDefault();
+  }, [state]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_hoverCardModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
@@ -65,14 +73,7 @@ var HoverCard = function HoverCard(props) {
     size: 24
   }), typeof children === 'function' ? children({
     close: state.hide
-  }) : children, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    glyph: "close",
-    size: "small",
-    as: "button",
-    type: "button",
-    className: _hoverCardModule["default"].closeBtn,
-    onClick: state.hide
-  })));
+  }) : children));
 };
 
 exports.HoverCard = HoverCard;

package/lib/ui/hover-card/hover-card.module.css

@@ -15,12 +15,11 @@ buton.anchor {
 
 a.anchor:hover,
 button.anchor:hover {
-  color: var(--color-primary);
   text-decoration: underline;
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   max-width: 320px;
   outline: none;
@@ -29,24 +28,3 @@ button.anchor:hover {
   background: var(--color-light);
   font-size: var(--size-small);
 }
-
-.closeBtn {
-  position: absolute;
-  right: var(--space-xxxsmall);
-  top: var(--space-xxxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}

package/lib-esm/app/app.js

@@ -176,7 +176,7 @@ const AppComponent = _ref2 => {
     exact: true,
     path: URLS.OVERVIEW,
     render: () => /*#__PURE__*/React.createElement(Stack, {
-      space: "large"
+      space: "medium"
     }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
       duplicatePackagesCount: duplicatePackagesCount,
       showDelta: jobs.length > 1

package/lib-esm/app/app.module.css

@@ -13,7 +13,7 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
@@ -35,8 +35,8 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 

package/lib-esm/components/bundle-assets/bundle-assets.js

@@ -170,7 +170,7 @@ export const BundleAssets = props => {
         actionClassName
       } = _ref5;
       return /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xsmall",
+        space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
       }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
         fields: sortFields
@@ -181,7 +181,9 @@ export const BundleAssets = props => {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib-esm/components/bundle-modules/bundle-modules.js

@@ -187,7 +187,9 @@ export const BundleModules = _ref4 => {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     search: search,
     updateSearch: updateSearch,

package/lib-esm/components/bundle-packages/bundle-packages.js

@@ -170,7 +170,9 @@ export const BundlePackages = props => {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib-esm/components/metrics-table-search/metrics-table-search.module.css

@@ -5,7 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }

package/lib-esm/ui/filters/filters.js

@@ -188,6 +188,7 @@ export const Filters = props => {
   return /*#__PURE__*/React.createElement("form", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall",
     className: css.items
   }, Object.entries(filters).map(_ref7 => {
     let [name, data] = _ref7;

package/lib-esm/ui/filters/filters.module.css

@@ -132,17 +132,8 @@
 .item {
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
 .itemButton {
-  border-radius: 0px;
-}
-
-.item:last-child .itemButton {
-  border-radius: 0 var(--radius-small) var(--radius-small) 0;
-}
-
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+  border-radius: var(--radius-small);
 }

package/lib-esm/ui/hover-card/hover-card.js

@@ -1,10 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardState } from 'ariakit/hovercard';
-import { Icon } from '../icon';
 import css from './hover-card.module.css';
 
 const resolveComponent = (as, href) => {
@@ -36,6 +35,10 @@ export const HoverCard = props => {
   }); // Fallback to span if no href
 
   const Component = resolveComponent(as, href);
+  const handleOnClose = useCallback(event => {
+    state.hide();
+    event.preventDefault();
+  }, [state]);
   return /*#__PURE__*/React.createElement("div", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(HovercardAnchor, {
@@ -53,14 +56,7 @@ export const HoverCard = props => {
     size: 24
   }), typeof children === 'function' ? children({
     close: state.hide
-  }) : children, /*#__PURE__*/React.createElement(Icon, {
-    glyph: "close",
-    size: "small",
-    as: "button",
-    type: "button",
-    className: css.closeBtn,
-    onClick: state.hide
-  })));
+  }) : children));
 };
 HoverCard.propTypes = {
   /** Adopted child class name */

package/lib-esm/ui/hover-card/hover-card.module.css

@@ -15,12 +15,11 @@ buton.anchor {
 
 a.anchor:hover,
 button.anchor:hover {
-  color: var(--color-primary);
   text-decoration: underline;
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   max-width: 320px;
   outline: none;
@@ -29,24 +28,3 @@ button.anchor:hover {
   background: var(--color-light);
   font-size: var(--size-small);
 }
-
-.closeBtn {
-  position: absolute;
-  right: var(--space-xxxsmall);
-  top: var(--space-xxxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.6",
+  "version": "3.2.8",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.6",
+    "@bundle-stats/utils": "^3.2.8",
     "ariakit": "2.0.0-alpha.19",
     "date-fns": "2.28.0",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.1",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "27848343746d211ecb964271bf4f8703a0be36d9"
+  "gitHead": "269089b4458cd27618394d9e90eaa6a903d98e8f"
 }

package/src/app/app.jsx

@@ -182,7 +182,7 @@ const AppComponent = ({ version, jobs }) => {
             exact
             path={URLS.OVERVIEW}
             render={() => (
-              <Stack space="large">
+              <Stack space="medium">
                 {duplicatePackagesInsights && (
                   <Container>
                     <DuplicatePackagesWarning

package/src/app/app.module.css

@@ -13,7 +13,7 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
@@ -35,8 +35,8 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 

package/src/components/bundle-assets/bundle-assets.jsx

@@ -172,7 +172,7 @@ export const BundleAssets = (props) => {
       <Toolbar
         className={css.toolbar}
         renderActions={({ actionClassName }) => (
-          <FlexStack space="xsmall" className={cx(css.dropdown, actionClassName)}>
+          <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
             <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
             <MetricsTableOptions
               handleViewAll={resetAllFilters}
@@ -181,7 +181,7 @@ export const BundleAssets = (props) => {
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             placeholder="Search by name"

package/src/components/bundle-modules/bundle-modules.jsx

@@ -192,7 +192,7 @@ export const BundleModules = ({
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             search={search}

package/src/components/bundle-packages/bundle-packages.jsx

@@ -199,7 +199,7 @@ export const BundlePackages = (props) => {
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             placeholder="Search by name"

package/src/components/metrics-table-search/metrics-table-search.module.css

@@ -5,7 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }

package/src/ui/filters/filters.jsx

@@ -175,7 +175,7 @@ export const Filters = (props) => {
 
   return (
     <form className={rootClassName}>
-      <FlexStack className={css.items}>
+      <FlexStack space="xxsmall" className={css.items}>
         {Object.entries(filters).map(([name, data]) => {
           if (typeof data?.defaultValue !== 'undefined') {
             return (

package/src/ui/filters/filters.module.css

@@ -132,17 +132,8 @@
 .item {
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
 .itemButton {
-  border-radius: 0px;
-}
-
-.item:last-child .itemButton {
-  border-radius: 0 var(--radius-small) var(--radius-small) 0;
-}
-
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+  border-radius: var(--radius-small);
 }

package/src/ui/hover-card/hover-card.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
@@ -9,7 +9,6 @@ import {
   useHovercardState,
 } from 'ariakit/hovercard';
 
-import { Icon } from '../icon';
 import css from './hover-card.module.css';
 
 const resolveComponent = (as, href) => {
@@ -32,6 +31,14 @@ export const HoverCard = (props) => {
   // Fallback to span if no href
   const Component = resolveComponent(as, href);
 
+  const handleOnClose = useCallback(
+    (event) => {
+      state.hide();
+      event.preventDefault();
+    },
+    [state],
+  );
+
   return (
     <div className={cx(css.root, className)}>
       <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
@@ -45,14 +52,6 @@ export const HoverCard = (props) => {
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}
-        <Icon
-          glyph="close"
-          size="small"
-          as="button"
-          type="button"
-          className={css.closeBtn}
-          onClick={state.hide}
-        />
       </Hovercard>
     </div>
   );

package/src/ui/hover-card/hover-card.module.css

@@ -15,12 +15,11 @@ buton.anchor {
 
 a.anchor:hover,
 button.anchor:hover {
-  color: var(--color-primary);
   text-decoration: underline;
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   max-width: 320px;
   outline: none;
@@ -29,24 +28,3 @@ button.anchor:hover {
   background: var(--color-light);
   font-size: var(--size-small);
 }
-
-.closeBtn {
-  position: absolute;
-  right: var(--space-xxxsmall);
-  top: var(--space-xxxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}