@digigov/react-core 1.0.0-002c630d → 1.0.0-6b93ebf2

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

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the Checkbox with inline prop and CheckboxItems 1`] = `
+exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
 <ForwardRef(Checkbox)
-  inline={true}
+  layout="horizontal"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-checkboxes--inline govgr-checkboxes"
+    className="govgr-checkboxes--horizontal govgr-checkboxes"
   >
     <div
-      className="govgr-checkboxes--inline govgr-checkboxes"
+      className="govgr-checkboxes--horizontal govgr-checkboxes"
     >
       <ForwardRef(CheckboxItem)>
         <div

package/es/Checkbox/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["inline", "className", "children"];
+var _excluded = ["layout", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -11,7 +11,7 @@ import Base from '@digigov/react-core/Base';
  * It takes CheckboxItem as children
  */
 export var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
-  var inline = _ref.inline,
+  var layout = _ref.layout,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -19,7 +19,7 @@ export var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref)
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, inline && 'govgr-checkboxes--inline', true && 'govgr-checkboxes')
+    className: clsx(className, layout === 'horizontal' && 'govgr-checkboxes--horizontal', true && 'govgr-checkboxes')
   }, props), children);
 });
 export default Checkbox;

package/es/Checkbox/index.test.js

@@ -16,9 +16,9 @@ it('renders the Checkbox with no props and CheckboxItem', function () {
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Checkbox, {
-  inline: true
+  layout: "horizontal"
 }, /*#__PURE__*/React.createElement(CheckboxItem, null, "This is item 1"), /*#__PURE__*/React.createElement(CheckboxItem, null, "This is item 2"));
 
-it('renders the Checkbox with inline prop and CheckboxItems', function () {
+it('renders the Checkbox with layout=horizontal and CheckboxItems', function () {
   expect(mount(_ref3)).toMatchSnapshot();
 });

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

@@ -39,22 +39,20 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
 
 exports[`renders the CheckboxItem with \`divider\` prop 1`] = `
 <ForwardRef(CheckboxItem)
-  divider="ή"
+  dividerText="ή"
 >
-  <ForwardRef(ChoiceDivider)
-    text="ή"
-  >
+  <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
       as="div"
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       <div
-        className="govgr-choice-divider"
+        className="govgr-choice-divider-text"
       >
         ή
       </div>
     </ForwardRef(Base)>
-  </ForwardRef(ChoiceDivider)>
+  </ForwardRef(ChoiceDividerText)>
   <div
     className="govgr-checkboxes__item"
   >
@@ -169,24 +167,22 @@ exports[`renders the CheckboxItem with \`value\` \`name\` and \`disabled\` props
 exports[`renders the CheckboxItem with \`value\` \`name\`, \`divider\` and \`disabled\` props 1`] = `
 <ForwardRef(CheckboxItem)
   disabled={true}
-  divider="ή"
+  dividerText="ή"
   name="example"
   value="example"
 >
-  <ForwardRef(ChoiceDivider)
-    text="ή"
-  >
+  <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
       as="div"
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       <div
-        className="govgr-choice-divider"
+        className="govgr-choice-divider-text"
       >
         ή
       </div>
     </ForwardRef(Base)>
-  </ForwardRef(ChoiceDivider)>
+  </ForwardRef(ChoiceDividerText)>
   <div
     className="govgr-checkboxes__item"
   >

package/es/CheckboxItem/index.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "value", "divider", "className", "disabled", "children"];
+var _excluded = ["name", "value", "dividerText", "className", "disabled", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
-import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
+import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 
 /**
@@ -15,15 +15,13 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
 export var CheckboxItem = /*#__PURE__*/React.forwardRef(function CheckboxItem(_ref, ref) {
   var name = _ref.name,
       value = _ref.value,
-      divider = _ref.divider,
+      dividerText = _ref.dividerText,
       className = _ref.className,
       disabled = _ref.disabled,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, divider && /*#__PURE__*/React.createElement(ChoiceDivider, {
-    text: divider
-  }), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, dividerText && /*#__PURE__*/React.createElement(ChoiceDividerText, null, dividerText), /*#__PURE__*/React.createElement("div", {
     className: clsx(className, true && 'govgr-checkboxes__item')
   }, /*#__PURE__*/React.createElement(LabelContainer, {
     className: clsx(disabled && 'govgr-checkboxes__label--disabled', true && 'govgr-checkboxes__label')

package/es/CheckboxItem/index.test.js

@@ -33,7 +33,7 @@ it('renders the CheckboxItem with `disabled` prop', function () {
 });
 
 var _ref5 = /*#__PURE__*/React.createElement(CheckboxItem, {
-  divider: "\u03AE"
+  dividerText: "\u03AE"
 }, "hello");
 
 it('renders the CheckboxItem with `divider` prop', function () {
@@ -53,7 +53,7 @@ it('renders the CheckboxItem with `value` `name` and `disabled` props', function
 var _ref7 = /*#__PURE__*/React.createElement(CheckboxItem, {
   value: "example",
   name: "example",
-  divider: "\u03AE",
+  dividerText: "\u03AE",
   disabled: true
 }, "hello");
 

package/es/ChipKeyValue/index.test.js

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

package/es/ChipSectionWrapper/index.js

@@ -15,7 +15,7 @@ export var ChipSectionWrapper = /*#__PURE__*/React.forwardRef(function ChipSecti
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "ul",
+    as: "div",
     ref: ref,
     className: clsx(className)
   }, props), children);

package/es/{ChoiceDivider → ChoiceDividerText}/__snapshots__/index.test.tsx.snap

@@ -1,18 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the ChoiceDivider with text prop 1`] = `
-<ForwardRef(ChoiceDivider)
-  text="ή"
->
+<ForwardRef(ChoiceDividerText)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-choice-divider"
+    className="govgr-choice-divider-text"
   >
     <div
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       ή
     </div>
   </ForwardRef(Base)>
-</ForwardRef(ChoiceDivider)>
+</ForwardRef(ChoiceDividerText)>
 `;

package/{esm/ChoiceDivider → es/ChoiceDividerText}/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["text", "className"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -9,15 +9,15 @@ import Base from '@digigov/react-core/Base';
  * ChoiceDivider component adds a text divider on top of a Radio or Checkbox item.
  * It's been used as a prop ("divider") inside RadioItem and CheckboxItem.
  */
-export var ChoiceDivider = /*#__PURE__*/React.forwardRef(function ChoiceDivider(_ref, ref) {
-  var text = _ref.text,
-      className = _ref.className,
+export var ChoiceDividerText = /*#__PURE__*/React.forwardRef(function ChoiceDividerText(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, true && 'govgr-choice-divider')
-  }, props), text);
+    className: clsx(className, true && 'govgr-choice-divider-text')
+  }, props), children);
 });
-export default ChoiceDivider;
+export default ChoiceDividerText;

package/{esm/ChoiceDivider → es/ChoiceDividerText}/index.test.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
+import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
 
-var _ref = /*#__PURE__*/React.createElement(ChoiceDivider, {
-  text: "\u03AE"
-});
+var _ref = /*#__PURE__*/React.createElement(ChoiceDividerText, null, "\u03AE");
 
 it('renders the ChoiceDivider with text prop', function () {
   expect(mount(_ref)).toMatchSnapshot();

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

@@ -5,13 +5,13 @@ exports[`renders the CircularProgress 1`] = `
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--medium govgr-loader"
+    className="govgr-circular-progress--md govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--medium govgr-loader"
+      className="govgr-circular-progress--md govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -28,21 +28,21 @@ exports[`renders the CircularProgress 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with inverse and size l props 1`] = `
+exports[`renders the CircularProgress with color=secondary and size lg props 1`] = `
 <ForwardRef(CircularProgress)
-  inverse={true}
+  color="secondary"
   size="lg"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--inverse govgr-loader--large govgr-loader"
+    className="govgr-circular-progress--secondary govgr-circular-progress--lg govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--inverse govgr-loader--large govgr-loader"
+      className="govgr-circular-progress--secondary govgr-circular-progress--lg govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -59,21 +59,21 @@ exports[`renders the CircularProgress with inverse and size l props 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with inverse and size s props 1`] = `
+exports[`renders the CircularProgress with color=secondary and size sm props 1`] = `
 <ForwardRef(CircularProgress)
-  inverse={true}
+  color="secondary"
   size="sm"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--inverse govgr-loader--small govgr-loader"
+    className="govgr-circular-progress--secondary govgr-circular-progress--sm govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--inverse govgr-loader--small govgr-loader"
+      className="govgr-circular-progress--secondary govgr-circular-progress--sm govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -90,20 +90,20 @@ exports[`renders the CircularProgress with inverse and size s props 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with inverse prop 1`] = `
+exports[`renders the CircularProgress with color=secondary prop 1`] = `
 <ForwardRef(CircularProgress)
-  inverse={true}
+  color="secondary"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--inverse govgr-loader--medium govgr-loader"
+    className="govgr-circular-progress--secondary govgr-circular-progress--md govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--inverse govgr-loader--medium govgr-loader"
+      className="govgr-circular-progress--secondary govgr-circular-progress--md govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -120,20 +120,20 @@ exports[`renders the CircularProgress with inverse prop 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with size l 1`] = `
+exports[`renders the CircularProgress with size lg 1`] = `
 <ForwardRef(CircularProgress)
   size="lg"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--large govgr-loader"
+    className="govgr-circular-progress--lg govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--large govgr-loader"
+      className="govgr-circular-progress--lg govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -150,20 +150,20 @@ exports[`renders the CircularProgress with size l 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with size s 1`] = `
+exports[`renders the CircularProgress with size sm 1`] = `
 <ForwardRef(CircularProgress)
   size="sm"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--small govgr-loader"
+    className="govgr-circular-progress--sm govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--small govgr-loader"
+      className="govgr-circular-progress--sm govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >

package/es/CircularProgress/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["inverse", "size", "className"];
+var _excluded = ["color", "size", "className"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -20,8 +20,8 @@ var _ref3 = /*#__PURE__*/React.createElement("path", {
  *  CircularProgress can be used inside LoaderContainer component.
  */
 export var CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(_ref, ref) {
-  var _ref$inverse = _ref.inverse,
-      inverse = _ref$inverse === void 0 ? false : _ref$inverse,
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
       className = _ref.className,
@@ -30,7 +30,7 @@ export var CircularProgress = /*#__PURE__*/React.forwardRef(function CircularPro
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "svg",
     ref: ref,
-    className: clsx(className, size === 'sm' && 'govgr-loader--sm', size === 'md' && 'govgr-loader--md', size === 'lg' && 'govgr-loader--lg', inverse && 'govgr-loader--inverse', true && 'govgr-loader'),
+    className: clsx(className, color === 'secondary' && 'govgr-circular-progress--secondary', size === 'sm' && 'govgr-circular-progress--sm', size === 'md' && 'govgr-circular-progress--md', size === 'lg' && 'govgr-circular-progress--lg', true && 'govgr-circular-progress'),
     focusable: "false",
     viewBox: "0 0 200 200",
     "aria-hidden": "true"

package/es/CircularProgress/index.test.js

@@ -12,7 +12,7 @@ var _ref2 = /*#__PURE__*/React.createElement(CircularProgress, {
   size: "sm"
 });
 
-it('renders the CircularProgress with size s', function () {
+it('renders the CircularProgress with size sm', function () {
   expect(mount(_ref2)).toMatchSnapshot();
 });
 
@@ -20,32 +20,32 @@ var _ref3 = /*#__PURE__*/React.createElement(CircularProgress, {
   size: "lg"
 });
 
-it('renders the CircularProgress with size l', function () {
+it('renders the CircularProgress with size lg', function () {
   expect(mount(_ref3)).toMatchSnapshot();
 });
 
 var _ref4 = /*#__PURE__*/React.createElement(CircularProgress, {
-  inverse: true
+  color: 'secondary'
 });
 
-it('renders the CircularProgress with inverse prop', function () {
+it('renders the CircularProgress with color=secondary prop', function () {
   expect(mount(_ref4)).toMatchSnapshot();
 });
 
 var _ref5 = /*#__PURE__*/React.createElement(CircularProgress, {
-  inverse: true,
+  color: 'secondary',
   size: "sm"
 });
 
-it('renders the CircularProgress with inverse and size s props', function () {
+it('renders the CircularProgress with color=secondary and size sm props', function () {
   expect(mount(_ref5)).toMatchSnapshot();
 });
 
 var _ref6 = /*#__PURE__*/React.createElement(CircularProgress, {
-  inverse: true,
+  color: 'secondary',
   size: "lg"
 });
 
-it('renders the CircularProgress with inverse and size l props', function () {
+it('renders the CircularProgress with color=secondary and size lg props', function () {
   expect(mount(_ref6)).toMatchSnapshot();
 });

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

@@ -7,10 +7,10 @@ exports[`renders the Container with cols={false} prop 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-full-width-container"
+    className="govgr-container--full-width"
   >
     <div
-      className="govgr-full-width-container"
+      className="govgr-container--full-width"
     >
       <ForwardRef(Base)
         as="div"
@@ -33,10 +33,10 @@ exports[`renders the Container with fullWidth prop 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-full-width-container"
+    className="govgr-container--full-width"
   >
     <div
-      className="govgr-full-width-container"
+      className="govgr-container--full-width"
     >
       <ForwardRef(Base)
         as="div"
@@ -57,10 +57,10 @@ exports[`renders the Container with no props 1`] = `
 <ForwardRef(Container)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-width-container"
+    className="govgr-container"
   >
     <div
-      className="govgr-width-container"
+      className="govgr-container"
     >
       <ForwardRef(Base)
         as="div"

package/es/Container/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cols", "fullWidth", "className", "children"];
+var _excluded = ["grid", "fullWidth", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -9,8 +9,8 @@ import Base from '@digigov/react-core/Base';
  * Use Container as a wrapper.
  */
 export var Container = /*#__PURE__*/React.forwardRef(function Container(_ref, ref) {
-  var _ref$cols = _ref.cols,
-      cols = _ref$cols === void 0 ? true : _ref$cols,
+  var _ref$grid = _ref.grid,
+      grid = _ref$grid === void 0 ? true : _ref$grid,
       _ref$fullWidth = _ref.fullWidth,
       fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
       className = _ref.className,
@@ -20,10 +20,10 @@ export var Container = /*#__PURE__*/React.forwardRef(function Container(_ref, re
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, !fullWidth && 'govgr-width-container', fullWidth && 'govgr-full-width-container')
+    className: clsx(className, fullWidth && 'govgr-container--full-width', true && 'govgr-container')
   }, props), /*#__PURE__*/React.createElement(Base, {
     as: "div",
-    className: clsx(cols && 'govgr-main-wrapper')
+    className: clsx(grid && 'govgr-main-wrapper')
   }, children));
 });
 export default Container;

package/es/Container/index.test.js

@@ -18,7 +18,7 @@ it('renders the Container with fullWidth prop', function () {
 
 var _ref3 = /*#__PURE__*/React.createElement(Container, {
   fullWidth: true,
-  cols: false
+  grid: false
 }, "hello");
 
 it('renders the Container with cols={false} prop', function () {

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

@@ -4,13 +4,13 @@ exports[`renders the CopyToClipboardContainer with no props 1`] = `
 <ForwardRef(CopyToClipboardContainer)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className=""
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip"
       >
         Text copied!
       </div>
@@ -25,13 +25,13 @@ exports[`renders the CopyToClipboardContainer with variant=banner 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className=""
+        className="govgr-copy-to-clipboard__banner"
       >
         Text copied!
       </div>
@@ -42,17 +42,18 @@ exports[`renders the CopyToClipboardContainer with variant=banner 1`] = `
 
 exports[`renders the CopyToClipboardContainer with variant=tooltip 1`] = `
 <ForwardRef(CopyToClipboardContainer)
-  variant="tooltip-right"
+  tooltipAlign="right"
+  variant="tooltip"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className="govgr-copy-to-clipboard--container"
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip"
       >
         Text copied!
       </div>

package/es/CopyToClipboardContainer/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "className", "children"];
+var _excluded = ["variant", "tooltipAlign", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -9,7 +9,10 @@ import Base from '@digigov/react-core/Base';
  * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
  */
 export var CopyToClipboardContainer = /*#__PURE__*/React.forwardRef(function CopyToClipboardContainer(_ref, ref) {
-  var variant = _ref.variant,
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      _ref$tooltipAlign = _ref.tooltipAlign,
+      tooltipAlign = _ref$tooltipAlign === void 0 ? 'right' : _ref$tooltipAlign,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -18,9 +21,9 @@ export var CopyToClipboardContainer = /*#__PURE__*/React.forwardRef(function Cop
     as: "div",
     ref: ref
   }, props, {
-    className: clsx(className, true && 'govgr-copy-to-clipboard-root')
+    className: clsx(className, true && 'govgr-copy-to-clipboard')
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, (variant === 'tooltip-left' || variant === 'tooltip-right') && 'govgr-copy-to-clipboard-container')
+    className: clsx(className, variant === 'tooltip' && [tooltipAlign === 'right' && 'govgr-copy-to-clipboard__tooltip--right', tooltipAlign === 'left' && 'govgr-copy-to-clipboard__tooltip--left', 'govgr-copy-to-clipboard__tooltip'], variant === 'banner' && 'govgr-copy-to-clipboard__banner')
   }, children));
 });
 export default CopyToClipboardContainer;