@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

package/es/Accordion/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["className", "horizontalBorders", "summaryColor", "dense", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -11,13 +11,18 @@ import Base from '@digigov/react-core/Base';
  */
 export var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(_ref, ref) {
   var className = _ref.className,
+      _ref$horizontalBorder = _ref.horizontalBorders,
+      horizontalBorders = _ref$horizontalBorder === void 0 ? 'top' : _ref$horizontalBorder,
+      _ref$summaryColor = _ref.summaryColor,
+      summaryColor = _ref$summaryColor === void 0 ? 'primary' : _ref$summaryColor,
+      dense = _ref.dense,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, true && 'govgr-accordion')
+    className: clsx(className, horizontalBorders === 'bottom' && 'govgr-accordion--border-bottom', horizontalBorders === 'none' && 'govgr-accordion--no-border', summaryColor === 'secondary' && 'govgr-accordion--secondary', horizontalBorders === 'top' && 'govgr-accordion--border-top', dense && 'govgr-accordion--dense', true && 'govgr-accordion')
   }, props), children);
 });
 export default Accordion;

package/es/AccordionSection/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "border", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -12,15 +12,13 @@ import Base from '@digigov/react-core/Base';
  */
 export var AccordionSection = /*#__PURE__*/React.forwardRef(function AccordionSection(_ref, ref) {
   var className = _ref.className,
-      _ref$border = _ref.border,
-      border = _ref$border === void 0 ? true : _ref$border,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "details",
     ref: ref,
-    className: clsx(className, !border && 'govgr-accordion__section--no-border', true && 'govgr-accordion__section')
+    className: clsx(className, true && 'govgr-accordion__section')
   }, props), children);
 });
 export default AccordionSection;

package/es/AdminHeaderContent/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AdminHeaderContent with no props 1`] = `
+<ForwardRef(AdminHeaderContent)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-admin-header__content"
+  >
+    <div
+      className="govgr-admin-header__content"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(AdminHeaderContent)>
+`;

package/es/{AdminHeaderSection → AdminHeaderContent}/index.js

@@ -6,9 +6,9 @@ import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
- * AdminAdminHeaderSection is used inside AdminHeader as a container for its items.
+ * AdminAdminHeaderContent is used inside AdminHeader as a container for its items.
  */
-export var AdminHeaderSection = /*#__PURE__*/React.forwardRef(function AdminHeaderSection(_ref, ref) {
+export var AdminHeaderContent = /*#__PURE__*/React.forwardRef(function AdminHeaderContent(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -16,7 +16,7 @@ export var AdminHeaderSection = /*#__PURE__*/React.forwardRef(function AdminHead
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, true && 'govgr-admin-header__container')
+    className: clsx(className, true && 'govgr-admin-header__content')
   }, props), children);
 });
-export default AdminHeaderSection;
+export default AdminHeaderContent;

package/es/AdminHeaderContent/index.spec.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AdminHeaderContent from '@digigov/react-core/AdminHeaderContent';
+
+var _ref = /*#__PURE__*/React.createElement(AdminHeaderContent, null, "hello");
+
+it('renders the AdminHeaderContent with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/es/AdminLayout/index.js

@@ -17,7 +17,7 @@ export var AdminLayout = /*#__PURE__*/React.forwardRef(function AdminLayout(_ref
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, fullHeight && 'govgr-layout-wrapper__full-height', true && 'govgr-admin-layout-wrapper')
+    className: clsx(className, fullHeight && 'govgr-layout--full-height', true && 'govgr-admin-layout-wrapper')
   }, props), children);
 });
 export default AdminLayout;

package/es/AdminTopSection/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["color", "border", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Grid from '@digigov/react-core/Grid';
@@ -10,14 +10,17 @@ import Grid from '@digigov/react-core/Grid';
  * 1 to 12 individual equal spaces
  */
 export var AdminTopSection = /*#__PURE__*/React.forwardRef(function AdminTopSection(_ref, ref) {
-  var className = _ref.className,
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      border = _ref.border,
+      className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Grid, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, true && 'govgr-admin-top-section')
+    className: clsx(className, color === 'secondary' && 'govgr-admin-top-section--secondary', border && 'govgr-admin-top-section--border', true && 'govgr-admin-top-section')
   }, props), children);
 });
 export default AdminTopSection;

package/es/Aside/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the Aside with no props 1`] = `
 <ForwardRef(Aside)>
   <ForwardRef(Base)
     as="aside"
-    className="govgr-grid-column-one-third"
+    className="govgr-aside govgr-grid-column-one-third"
   >
     <aside
-      className="govgr-grid-column-one-third"
+      className="govgr-aside govgr-grid-column-one-third"
     >
       hello
     </aside>

package/es/AutoCompleteStatus/__snapshots__/index.test.tsx.snap

@@ -6,13 +6,13 @@ exports[`renders the AdminContainer with no props 1`] = `
     aria-atomic="true"
     aria-live="polite"
     as="div"
-    className="govgr-autocomplete--status"
+    className="govgr-autocomplete__status"
     role="status"
   >
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="govgr-autocomplete--status"
+      className="govgr-autocomplete__status"
       role="status"
     >
       hello

package/es/AutoCompleteStatusWrapper/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the AdminContainer with no props 1`] = `
 <ForwardRef(AutoCompleteStatusWrapper)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-autocomplete--status__wrapper"
+    className="govgr-autocomplete__status__wrapper"
   >
     <div
-      className="govgr-autocomplete--status__wrapper"
+      className="govgr-autocomplete__status__wrapper"
     >
       hello
     </div>

package/es/AutoCompleteWrapper/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "cellWidth", "children"];
+var _excluded = ["className", "width", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -11,14 +11,14 @@ import Base from '@digigov/react-core/Base';
  */
 export var AutoCompleteWrapper = /*#__PURE__*/React.forwardRef(function AutoCompleteWrapper(_ref, ref) {
   var className = _ref.className,
-      cellWidth = _ref.cellWidth,
+      width = _ref.width,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, cellWidth === 'three-quarters' && 'govgr-!-width-three-quarters', cellWidth === 'one-quarter' && 'govgr-!-width-one-quarter', cellWidth === 'two-thirds' && 'govgr-!-width-two-thirds', cellWidth === 'one-third' && 'govgr-!-width-one-third', cellWidth === 'one-half' && 'govgr-!-width-one-half', cellWidth === 'full' && 'govgr-!-width-full', true && 'govgr-autocomplete__wrapper')
+    className: clsx(className, width === '33.3%' && 'govgr-!-width-one-third', width === '66.6%' && 'govgr-!-width-two-thirds', width === 'full' && 'govgr-!-width-full', width === '25%' && 'govgr-!-width-one-quarter', width === '50%' && 'govgr-!-width-one-half', width === '75%' && 'govgr-!-width-three-quarters', true && 'govgr-autocomplete__wrapper')
   }, props), children);
 });
 export default AutoCompleteWrapper;

package/es/BackLink/__snapshots__/index.test.tsx.snap

@@ -18,8 +18,11 @@ exports[`renders the BackLink with href="#" 1`] = `
       onClick={[Function]}
       tabIndex={0}
     >
-      <CaretIcon>
+      <CaretIcon
+        direction="left"
+      >
         <ForwardRef(Icon)
+          direction="left"
           icon="caret"
         >
           <ForwardRef(SvgIcon)
@@ -38,7 +41,9 @@ exports[`renders the BackLink with href="#" 1`] = `
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <caret>
+                <caret
+                  direction="left"
+                >
                   <path
                     d="M18,22V2L6,12L18,22z"
                   />
@@ -68,8 +73,11 @@ exports[`renders the BackLink with no props 1`] = `
       onClick={[Function]}
       tabIndex={0}
     >
-      <CaretIcon>
+      <CaretIcon
+        direction="left"
+      >
         <ForwardRef(Icon)
+          direction="left"
           icon="caret"
         >
           <ForwardRef(SvgIcon)
@@ -88,7 +96,9 @@ exports[`renders the BackLink with no props 1`] = `
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <caret>
+                <caret
+                  direction="left"
+                >
                   <path
                     d="M18,22V2L6,12L18,22z"
                   />

package/es/BannerContainer/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BannerContainer with no props 1`] = `
+<ForwardRef(BannerContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-cookie-banner"
+  >
+    <div
+      className="govgr-cookie-banner"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(BannerContainer)>
+`;

package/es/BottomInfo/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BottomInfo with no props 1`] = `
+<ForwardRef(BottomInfo)>
+  <ForwardRef(Container)
+    className="govgr-bottom-info"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-bottom-info govgr-container"
+    >
+      <div
+        className="govgr-bottom-info govgr-container"
+      >
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-main-wrapper"
+        >
+          <div
+            className="govgr-main-wrapper"
+          >
+            hello
+          </div>
+        </ForwardRef(Base)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Container)>
+</ForwardRef(BottomInfo)>
+`;

package/es/BottomInfoContainer/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BottomInfoContainer with no props 1`] = `
+<ForwardRef(BottomInfoContainer)>
+  <ForwardRef(Container)
+    className="govgr-bottom-info__container"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-bottom-info__container govgr-container"
+    >
+      <div
+        className="govgr-bottom-info__container govgr-container"
+      >
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-main-wrapper"
+        >
+          <div
+            className="govgr-main-wrapper"
+          >
+            hello
+          </div>
+        </ForwardRef(Base)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Container)>
+</ForwardRef(BottomInfoContainer)>
+`;

package/es/BottomInfoContent/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BottomInfoContent with no props 1`] = `
+<ForwardRef(BottomInfoContent)>
+  <ForwardRef(Grid)
+    className="govgr-bottom-info__content"
+    item={true}
+    lg={3}
+    md={3}
+    xl={3}
+    xs={3}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+    >
+      <div
+        className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+      >
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(BottomInfoContent)>
+`;

package/es/CardAction/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the CardAction with no props 1`] = `
-<ForwardRef(CardContent)>
+<ForwardRef(CardAction)>
   <ForwardRef(Base)
     as="div"
     className="govgr-card__action"
@@ -12,5 +12,5 @@ exports[`renders the CardAction with no props 1`] = `
       hello
     </div>
   </ForwardRef(Base)>
-</ForwardRef(CardContent)>
+</ForwardRef(CardAction)>
 `;

package/es/CheckboxConditional/__snapshots__/index.test.tsx.snap

@@ -13,17 +13,14 @@ exports[`renders the Blockquote with no props 1`] = `
         <ForwardRef(Grid)
           className="govgr-field"
           item={true}
-          lg={12}
-          md={12}
-          xl={12}
           xs={12}
         >
           <ForwardRef(Base)
             as="div"
-            className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+            className="govgr-field xs:govgr-grid__col-span-12"
           >
             <div
-              className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+              className="govgr-field xs:govgr-grid__col-span-12"
             >
               <ForwardRef(LabelContainer)>
                 <ForwardRef(Base)

package/es/Chip/__snapshots__/index.test.tsx.snap

@@ -4,41 +4,16 @@ exports[`renders the Chip with no props 1`] = `
 <ForwardRef(Chip)>
   <ForwardRef(Base)
     as="li"
-    className=""
+    className="govgr-chip"
   >
     <li
-      className=""
+      className="govgr-chip"
     >
-      <a
-        className="govgr-chip"
-        href="#"
+      <div
+        className="govgr-chip__content"
       >
         hello
-        <ForwardRef(CloseIcon)>
-          <ForwardRef(SvgIcon)
-            className="govgr-svg-icon--close"
-          >
-            <ForwardRef(Base)
-              aria-hidden="true"
-              as="svg"
-              className="govgr-svg-icon--close govgr-svg-icon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <svg
-                aria-hidden="true"
-                className="govgr-svg-icon--close govgr-svg-icon"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <polygon
-                  points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
-                />
-              </svg>
-            </ForwardRef(Base)>
-          </ForwardRef(SvgIcon)>
-        </ForwardRef(CloseIcon)>
-      </a>
+      </div>
     </li>
   </ForwardRef(Base)>
 </ForwardRef(Chip)>

package/es/Chip/index.js

@@ -8,7 +8,7 @@ import { CloseIcon } from '@digigov/react-icons';
 
 /**
  * Chips can be used to represent small blocks of information.
- * Chip component must be inside ChipSection component.
+ * Chip component must be inside ChipContainer component.
  */
 export var Chip = /*#__PURE__*/React.forwardRef(function Chip(_ref, ref) {
   var className = _ref.className,

package/{src/ChipSection → es/ChipContainer}/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the ChipSection with no props 1`] = `
-<ForwardRef(ChipSection)>
+exports[`renders the ChipContainer with no props 1`] = `
+<ForwardRef(ChipContainer)>
   <ForwardRef(Base)
     as="ul"
     className="govgr-chips"
@@ -12,5 +12,5 @@ exports[`renders the ChipSection with no props 1`] = `
       hello!
     </ul>
   </ForwardRef(Base)>
-</ForwardRef(ChipSection)>
+</ForwardRef(ChipContainer)>
 `;

package/{esm/ChipSection → es/ChipContainer}/index.js

@@ -6,9 +6,9 @@ import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
- * ChipSection is used inside Chip component as a container for its items.
+ * ChipContainer is used inside Chip component as a container for its items.
  */
-export var ChipSection = /*#__PURE__*/React.forwardRef(function ChipSection(_ref, ref) {
+export var ChipContainer = /*#__PURE__*/React.forwardRef(function ChipContainer(_ref, ref) {
   var className = _ref.className,
       horizontal = _ref.horizontal,
       children = _ref.children,
@@ -20,4 +20,4 @@ export var ChipSection = /*#__PURE__*/React.forwardRef(function ChipSection(_ref
     className: clsx(className, horizontal && 'govgr-chips--horizontal', true && 'govgr-chips')
   }, props), children);
 });
-export default ChipSection;
+export default ChipContainer;

package/es/ChipContainer/index.spec.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ChipContainer from '@digigov/react-core/ChipContainer';
+
+var _ref = /*#__PURE__*/React.createElement(ChipContainer, null, "hello!");
+
+it('renders the ChipContainer with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/es/ChipHeading/__snapshots__/index.test.tsx.snap

@@ -2,15 +2,20 @@
 
 exports[`renders the ChipHeading with no props 1`] = `
 <ForwardRef(ChipHeading)>
-  <ForwardRef(Base)
-    as="h4"
-    className="govgr-chip--heading"
+  <ForwardRef(Heading)
+    element="h2"
+    size="xs"
   >
-    <h4
-      className="govgr-chip--heading"
+    <ForwardRef(Base)
+      as="h2"
+      className="govgr-heading-xs"
     >
-      hello
-    </h4>
-  </ForwardRef(Base)>
+      <h2
+        className="govgr-heading-xs"
+      >
+        hello
+      </h2>
+    </ForwardRef(Base)>
+  </ForwardRef(Heading)>
 </ForwardRef(ChipHeading)>
 `;

package/es/ChipHeading/index.js

@@ -1,23 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["children"];
 import React from 'react';
-import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Heading from '@digigov/react-core/Heading';
 
 /**
  * ChipHeading is used to provide header title above chips.
  * ChipHeading component must be wrapped inside FilterSelectedSection component.
  */
 export var ChipHeading = /*#__PURE__*/React.forwardRef(function ChipHeading(_ref, ref) {
-  var className = _ref.className,
-      children = _ref.children,
+  var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "h4",
+  return /*#__PURE__*/React.createElement(Heading, _extends({
     ref: ref,
-    className: clsx(className, true && 'govgr-chip--heading')
+    element: "h2",
+    size: "xs"
   }, props), children);
 });
 export default ChipHeading;

package/es/ChipKeyValue/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ChipKeyValue with no props 1`] = `
+<ForwardRef(ChipKeyValue)>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-chip__key-value"
+  >
+    <span
+      className="govgr-chip__key-value"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(ChipKeyValue)>
+`;

package/es/CloseButton/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CloseButton 1`] = `
+<ForwardRef(CloseButton)>
+  <ForwardRef(Button)
+    className="govgr-close-btn"
+    variant="link"
+  >
+    <ForwardRef(Base)
+      as="button"
+      className="govgr-close-btn govgr-link"
+      printHidden={true}
+    >
+      <button
+        className="govgr-close-btn govgr-link govgr-print-hidden"
+      >
+        <CloseIcon>
+          <ForwardRef(Icon)
+            icon="close"
+          >
+            <ForwardRef(SvgIcon)
+              className="govgr-svg-icon--close"
+            >
+              <ForwardRef(Base)
+                aria-hidden="true"
+                as="svg"
+                className="govgr-svg-icon--close govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="govgr-svg-icon--close govgr-svg-icon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <close>
+                    <polygon
+                      points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
+                    />
+                  </close>
+                </svg>
+              </ForwardRef(Base)>
+            </ForwardRef(SvgIcon)>
+          </ForwardRef(Icon)>
+        </CloseIcon>
+      </button>
+    </ForwardRef(Base)>
+  </ForwardRef(Button)>
+</ForwardRef(CloseButton)>
+`;