@digigov/react-core 2.0.0-af1b5f33 → 2.0.0-cbc56209

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

@@ -4,7 +4,7 @@ exports[`renders the Aside with no props 1`] = `
 <ForwardRef(Aside)>
   <ForwardRef(Grid)
     as="aside"
-    className="ds-aside"
+    className="ds-aside--sticky ds-aside"
     item={true}
     md={4}
     spacing={4}
@@ -12,10 +12,10 @@ exports[`renders the Aside with no props 1`] = `
   >
     <ForwardRef(Base)
       as="aside"
-      className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+      className="ds-aside--sticky ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
     >
       <aside
-        className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+        className="ds-aside--sticky ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
       >
         hello
       </aside>

package/cjs/Base/index.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _excluded = ["as", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "printHidden", "printVisible", "hidden", "xsUpHidden", "smUpHidden", "mdUpHidden", "lgUpHidden", "xlUpHidden", "xsHidden", "smHidden", "mdHidden", "lgHidden", "xlHidden", "children", "className"];
+var _excluded = ["as", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "m", "mt", "mb", "ml", "mr", "mx", "my", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "p", "pt", "pb", "pr", "pl", "px", "py", "printHidden", "printVisible", "hidden", "xsUpHidden", "smUpHidden", "mdUpHidden", "lgUpHidden", "xlUpHidden", "xsHidden", "smHidden", "mdHidden", "lgHidden", "xlHidden", "children", "className"];
 // This is the first reusable type utility we built
 
 // This is a new type utitlity with ref!
@@ -31,11 +31,25 @@ var Base = exports.Base = /*#__PURE__*/_react["default"].forwardRef(function Bas
     marginBottom = _ref.marginBottom,
     marginLeft = _ref.marginLeft,
     marginRight = _ref.marginRight,
+    m = _ref.m,
+    mt = _ref.mt,
+    mb = _ref.mb,
+    ml = _ref.ml,
+    mr = _ref.mr,
+    mx = _ref.mx,
+    my = _ref.my,
     padding = _ref.padding,
     paddingTop = _ref.paddingTop,
     paddingBottom = _ref.paddingBottom,
     paddingLeft = _ref.paddingLeft,
     paddingRight = _ref.paddingRight,
+    p = _ref.p,
+    pt = _ref.pt,
+    pb = _ref.pb,
+    pr = _ref.pr,
+    pl = _ref.pl,
+    px = _ref.px,
+    py = _ref.py,
     printHidden = _ref.printHidden,
     printVisible = _ref.printVisible,
     hidden = _ref.hidden,
@@ -54,7 +68,7 @@ var Base = exports.Base = /*#__PURE__*/_react["default"].forwardRef(function Bas
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var Component = as || 'span';
   return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
-    className: (0, _clsx["default"])(className, (paddingBottom !== undefined ? true : undefined) && "ds-pb-".concat(paddingBottom), (marginBottom !== undefined ? true : undefined) && "ds-mb-".concat(marginBottom), (paddingRight !== undefined ? true : undefined) && "ds-pr-".concat(paddingRight), (marginRight !== undefined ? true : undefined) && "ds-mr-".concat(marginRight), (paddingLeft !== undefined ? true : undefined) && "ds-pl-".concat(paddingLeft), (marginLeft !== undefined ? true : undefined) && "ds-ml-".concat(marginLeft), (paddingTop !== undefined ? true : undefined) && "ds-pt-".concat(paddingTop), (marginTop !== undefined ? true : undefined) && "ds-mt-".concat(marginTop), (padding !== undefined ? true : undefined) && "ds-p-".concat(padding), (margin !== undefined ? true : undefined) && "ds-m-".concat(margin), printVisible === 'inline' && 'ds-print-visible-inline', printVisible === 'block' && 'ds-print-visible-block', !!printHidden && 'ds-print-hidden', !!xsUpHidden && 'ds-hidden-xs--up', !!smUpHidden && 'ds-hidden-sm--up', !!mdUpHidden && 'ds-hidden-md--up', !!lgUpHidden && 'ds-hidden-lg--up', !!xlUpHidden && 'ds-hidden-xl--up', !!xsHidden && 'ds-hidden-xs', !!smHidden && 'ds-hidden-sm', !!mdHidden && 'ds-hidden-md', !!lgHidden && 'ds-hidden-lg', !!xlHidden && 'ds-hidden-xl', !!hidden && 'ds-hidden'),
+    className: (0, _clsx["default"])(className, (paddingBottom !== undefined ? true : undefined) && "ds-pb-".concat(paddingBottom), (marginBottom !== undefined ? true : undefined) && "ds-mb-".concat(marginBottom), (paddingRight !== undefined ? true : undefined) && "ds-pr-".concat(paddingRight), (marginRight !== undefined ? true : undefined) && "ds-mr-".concat(marginRight), (paddingLeft !== undefined ? true : undefined) && "ds-pl-".concat(paddingLeft), (marginLeft !== undefined ? true : undefined) && "ds-ml-".concat(marginLeft), (paddingTop !== undefined ? true : undefined) && "ds-pt-".concat(paddingTop), (marginTop !== undefined ? true : undefined) && "ds-mt-".concat(marginTop), (padding !== undefined ? true : undefined) && "ds-p-".concat(padding), (margin !== undefined ? true : undefined) && "ds-m-".concat(margin), (mt !== undefined ? true : undefined) && "ds-mt-".concat(mt), (mb !== undefined ? true : undefined) && "ds-mb-".concat(mb), (mr !== undefined ? true : undefined) && "ds-mr-".concat(mr), (ml !== undefined ? true : undefined) && "ds-ml-".concat(ml), (mx !== undefined ? true : undefined) && "ds-mx-".concat(mx), (my !== undefined ? true : undefined) && "ds-my-".concat(my), (pt !== undefined ? true : undefined) && "ds-pt-".concat(pt), (pb !== undefined ? true : undefined) && "ds-pb-".concat(pb), (pr !== undefined ? true : undefined) && "ds-pr-".concat(pr), (pl !== undefined ? true : undefined) && "ds-pl-".concat(pl), (px !== undefined ? true : undefined) && "ds-px-".concat(px), (py !== undefined ? true : undefined) && "ds-py-".concat(py), (m !== undefined ? true : undefined) && "ds-m-".concat(m), (p !== undefined ? true : undefined) && "ds-p-".concat(p), printVisible === 'inline' && 'ds-print-visible-inline', printVisible === 'block' && 'ds-print-visible-block', !!printHidden && 'ds-print-hidden', !!xsUpHidden && 'ds-hidden-xs-up', !!smUpHidden && 'ds-hidden-sm-up', !!mdUpHidden && 'ds-hidden-md-up', !!lgUpHidden && 'ds-hidden-lg-up', !!xlUpHidden && 'ds-hidden-xl-up', !!xsHidden && 'ds-hidden-xs', !!smHidden && 'ds-hidden-sm', !!mdHidden && 'ds-hidden-md', !!lgHidden && 'ds-hidden-lg', !!xlHidden && 'ds-hidden-xl', !!hidden && 'ds-hidden'),
     ref: ref
   }, props), children);
 });

package/cjs/CallToAction/__snapshots__/index.test.tsx.snap

@@ -17,29 +17,29 @@ exports[`renders the CallToAction with no props 1`] = `
         hello
         <ChevronIcon>
           <ForwardRef(Icon)
-            icon="arrow"
+            icon="chevron"
           >
             <ForwardRef(SvgIcon)
-              className="ds-svg-icon--arrow"
+              className="ds-svg-icon--chevron"
             >
               <ForwardRef(Base)
                 aria-hidden="true"
                 as="svg"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
                 <svg
                   aria-hidden="true"
-                  className="ds-svg-icon--arrow ds-svg-icon"
+                  className="ds-svg-icon--chevron ds-svg-icon"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
-                  <arrow>
+                  <chevron>
                     <path
                       d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
                     />
-                  </arrow>
+                  </chevron>
                 </svg>
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>

package/cjs/Card/__snapshots__/index.test.tsx.snap

@@ -42,6 +42,48 @@ exports[`renders the Card with dense props 1`] = `
 </ForwardRef(Card)>
 `;
 
+exports[`renders the Card with dense" prop 1`] = `
+<ForwardRef(Card)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-card--dense ds-card"
+  >
+    <div
+      className="ds-card--dense ds-card"
+    >
+      <div
+        className="ds-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with fullHeight" prop 1`] = `
+<ForwardRef(Card)
+  fullHeight={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-card--full-height ds-card"
+  >
+    <div
+      className="ds-card--full-height ds-card"
+    >
+      <div
+        className="ds-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
 exports[`renders the Card with no props 1`] = `
 <ForwardRef(Card)>
   <ForwardRef(Base)

package/cjs/Card/index.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-var _excluded = ["variant", "borderColor", "callToAction", "dense", "className", "children"];
+var _excluded = ["variant", "borderColor", "callToAction", "dense", "fullHeight", "className", "children"];
 /**
  * Cards can be used to divide and organise interface content for better understandability and readability.
  * Cards can help your users to scan through vast amounts of information quicker.
@@ -21,13 +21,14 @@ var Card = exports.Card = /*#__PURE__*/_react["default"].forwardRef(function Car
     borderColor = _ref.borderColor,
     callToAction = _ref.callToAction,
     dense = _ref.dense,
+    fullHeight = _ref.fullHeight,
     className = _ref.className,
     children = _ref.children,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "div",
     ref: ref,
-    className: (0, _clsx["default"])(className, variant === 'border-top' && 'ds-card--border-top', borderColor === 'light' && 'ds-card--border-light', borderColor === 'dark' && 'ds-card--border-dark', variant === 'divider' && 'ds-card--divider', variant === 'border' && 'ds-card--border', callToAction && 'ds-card--cta', dense && 'ds-card--dense', true && 'ds-card')
+    className: (0, _clsx["default"])(className, variant === 'border-top' && 'ds-card--border-top', borderColor === 'light' && 'ds-card--border-light', borderColor === 'dark' && 'ds-card--border-dark', variant === 'divider' && 'ds-card--divider', variant === 'border' && 'ds-card--border', callToAction && 'ds-card--cta', fullHeight && 'ds-card--full-height', dense && 'ds-card--dense', true && 'ds-card')
   }, props), /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _clsx["default"])(true && 'ds-card__body')
   }, children));

package/cjs/Card/index.test/index.js

@@ -39,38 +39,50 @@ it('renders the Card with variant="border-top" props', function () {
   expect((0, _enzyme.mount)(_ref6)).toMatchSnapshot();
 });
 var _ref7 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  dense: true
+}, "hello");
+it('renders the Card with dense" prop', function () {
+  expect((0, _enzyme.mount)(_ref7)).toMatchSnapshot();
+});
+var _ref8 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  fullHeight: true
+}, "hello");
+it('renders the Card with fullHeight" prop', function () {
+  expect((0, _enzyme.mount)(_ref8)).toMatchSnapshot();
+});
+var _ref9 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
   variant: "border",
   borderColor: "dark"
 }, "hello");
 it('renders the Card with variant="border" and borderColor="dark" props', function () {
-  expect((0, _enzyme.mount)(_ref7)).toMatchSnapshot();
+  expect((0, _enzyme.mount)(_ref9)).toMatchSnapshot();
 });
-var _ref8 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+var _ref10 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
   variant: "border",
   borderColor: "light"
 }, "hello");
 it('renders the Card with variant="border" and borderColor="light" props', function () {
-  expect((0, _enzyme.mount)(_ref8)).toMatchSnapshot();
+  expect((0, _enzyme.mount)(_ref10)).toMatchSnapshot();
 });
-var _ref9 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+var _ref11 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
   variant: "border-top",
   borderColor: "dark"
 }, "hello");
 it('renders the Card with variant="border-top" and borderColor="dark" props', function () {
-  expect((0, _enzyme.mount)(_ref9)).toMatchSnapshot();
+  expect((0, _enzyme.mount)(_ref11)).toMatchSnapshot();
 });
-var _ref10 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+var _ref12 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
   variant: "border-top",
   borderColor: "light"
 }, "hello");
 it('renders the Card with variant="border-top" and borderColor="light" props', function () {
-  expect((0, _enzyme.mount)(_ref10)).toMatchSnapshot();
+  expect((0, _enzyme.mount)(_ref12)).toMatchSnapshot();
 });
-var _ref11 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+var _ref13 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
   variant: "border-top",
   borderColor: "dark",
   callToAction: true
 }, "hello");
 it('renders the Card with variant="border-top" and borderColor="dark" callToAction props', function () {
-  expect((0, _enzyme.mount)(_ref11)).toMatchSnapshot();
+  expect((0, _enzyme.mount)(_ref13)).toMatchSnapshot();
 });

package/cjs/DropdownButton/__snapshots__/index.test.tsx.snap

@@ -57,31 +57,31 @@ exports[`renders the DropdownButton with arrow=true 1`] = `
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -150,31 +150,31 @@ exports[`renders the DropdownButton with color=primary and arrow={true} 1`] = `
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -286,31 +286,31 @@ exports[`renders the DropdownButton with color=primary variant="button" arrow={t
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -362,31 +362,31 @@ exports[`renders the DropdownButton with color=primary variant="link" arrow={tru
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -455,31 +455,31 @@ exports[`renders the DropdownButton with color=secondary and arrow={true} 1`] =
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -552,31 +552,31 @@ exports[`renders the DropdownButton with color=warning variant="button" arrow={t
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>

package/cjs/FooterContentLogos/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the FooterContentLogos with no props 1`] = `
 <ForwardRef(FooterContentLogos)>
   <ForwardRef(Base)
     as="div"
-    className="ds-footer__content--logos"
+    className="ds-footer__content__logos"
   >
     <div
-      className="ds-footer__content--logos"
+      className="ds-footer__content__logos"
     >
       hello
     </div>

package/cjs/FooterContentLogos/index.js

@@ -23,7 +23,7 @@ var FooterContentLogos = exports.FooterContentLogos = /*#__PURE__*/_react["defau
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "div",
     ref: ref,
-    className: (0, _clsx["default"])(className, true && 'ds-footer__content--logos')
+    className: (0, _clsx["default"])(className, true && 'ds-footer__content__logos')
   }, props), children);
 });
 var _default = exports["default"] = FooterContentLogos;

package/cjs/Hidden/__snapshots__/index.test.tsx.snap

@@ -6,10 +6,11 @@ exports[`renders the Hidden with \`lgUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-lg--up"
+    lgUpHidden={true}
+    xsUpHidden={false}
   >
     <div
-      className="ds-hidden-lg--up"
+      className="ds-hidden-lg-up"
     >
       <div>
         hello
@@ -25,10 +26,11 @@ exports[`renders the Hidden with \`mdUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-md--up"
+    mdUpHidden={true}
+    xsUpHidden={false}
   >
     <div
-      className="ds-hidden-md--up"
+      className="ds-hidden-md-up"
     >
       <div>
         hello
@@ -44,10 +46,11 @@ exports[`renders the Hidden with \`smUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-sm--up"
+    smUpHidden={true}
+    xsUpHidden={false}
   >
     <div
-      className="ds-hidden-sm--up"
+      className="ds-hidden-sm-up"
     >
       <div>
         hello
@@ -63,10 +66,11 @@ exports[`renders the Hidden with \`xlUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-xl--up"
+    xlUpHidden={true}
+    xsUpHidden={false}
   >
     <div
-      className="ds-hidden-xl--up"
+      className="ds-hidden-xl-up"
     >
       <div>
         hello
@@ -82,10 +86,10 @@ exports[`renders the Hidden with \`xsUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-xs--up"
+    xsUpHidden={true}
   >
     <div
-      className="ds-hidden-xs--up"
+      className="ds-hidden-xs-up"
     >
       <div>
         hello

package/cjs/Hint/index.js

@@ -23,7 +23,7 @@ var Hint = exports.Hint = /*#__PURE__*/_react["default"].forwardRef(function Hin
   return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
     as: "p",
     ref: ref,
-    className: (0, _clsx["default"])(className, size === 'lg' && 'ds-hint-lg', size === 'sm' && 'ds-hint-sm', breakWords && 'ds-hint--break-words', true && 'ds-hint')
+    className: (0, _clsx["default"])(className, size === 'lg' && 'ds-hint--lg', size === 'sm' && 'ds-hint--sm', breakWords && 'ds-hint--break-words', true && 'ds-hint')
   }, props), children);
 });
 var _default = exports["default"] = Hint;

package/cjs/ImageLogo/__snapshots__/index.test.tsx.snap

@@ -7,12 +7,12 @@ exports[`renders the Hint with  variant and src props 1`] = `
 >
   <ForwardRef(Base)
     as="img"
-    className="ds-image-logo--dark"
+    className="ds-image-logo-dark"
     printHidden={true}
     src="logo.png"
   >
     <img
-      className="ds-image-logo--dark ds-print-hidden"
+      className="ds-image-logo-dark ds-print-hidden"
       src="logo.png"
     />
   </ForwardRef(Base)>

package/cjs/ImageLogo/index.js

@@ -28,7 +28,7 @@ var ImageLogo = exports.ImageLogo = /*#__PURE__*/_react["default"].forwardRef(fu
     src: src,
     ref: ref,
     printHidden: true,
-    className: (0, _clsx["default"])(className, variant === undefined && 'ds-image-logo', variant !== undefined && "ds-image-logo--".concat(variant))
+    className: (0, _clsx["default"])(className, variant === undefined && 'ds-image-logo', variant !== undefined && "ds-image-logo-".concat(variant))
   }, props)));
 });
 var _default = exports["default"] = ImageLogo;