@digigov/react-icons 1.2.0-dcbd7ded → 2.0.0-0edebf87

package/AccessibilityIcon/__snapshots__/index.test.tsx.snap

@@ -41,28 +41,28 @@ exports[`renders the AccessibilityIcon with no props 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop size=l 1`] = `
+exports[`renders the AccessibilityIcon with prop color=base-content 1`] = `
 <AccessibilityIcon
-  size="lg"
+  color="base-content"
 >
   <ForwardRef(Icon)
+    color="base-content"
     icon="accessibility"
-    size="lg"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      size="lg"
+      color="base-content"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--lg ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--base-content ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--lg ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--base-content ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -86,28 +86,28 @@ exports[`renders the AccessibilityIcon with prop size=l 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop size=s 1`] = `
+exports[`renders the AccessibilityIcon with prop color=error 1`] = `
 <AccessibilityIcon
-  size="sm"
+  color="error"
 >
   <ForwardRef(Icon)
+    color="error"
     icon="accessibility"
-    size="sm"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      size="sm"
+      color="error"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--sm ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--error ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--sm ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--error ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -131,28 +131,31 @@ exports[`renders the AccessibilityIcon with prop size=s 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=dark 1`] = `
+exports[`renders the AccessibilityIcon with prop color=error and size= xl 1`] = `
 <AccessibilityIcon
-  variant="dark"
+  color="warning"
+  size="xl"
 >
   <ForwardRef(Icon)
+    color="warning"
     icon="accessibility"
-    variant="dark"
+    size="xl"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      variant="dark"
+      color="warning"
+      size="xl"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--dark ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--dark ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -176,28 +179,28 @@ exports[`renders the AccessibilityIcon with prop variant=dark 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=error 1`] = `
+exports[`renders the AccessibilityIcon with prop color=primary 1`] = `
 <AccessibilityIcon
-  variant="error"
+  color="primary"
 >
   <ForwardRef(Icon)
+    color="primary"
     icon="accessibility"
-    variant="error"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      variant="error"
+      color="primary"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--error ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--primary ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--error ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--primary ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -221,31 +224,28 @@ exports[`renders the AccessibilityIcon with prop variant=error 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=error and size= xl 1`] = `
+exports[`renders the AccessibilityIcon with prop color=success 1`] = `
 <AccessibilityIcon
-  size="xl"
-  variant="warning"
+  color="success"
 >
   <ForwardRef(Icon)
+    color="success"
     icon="accessibility"
-    size="xl"
-    variant="warning"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      size="xl"
-      variant="warning"
+      color="success"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--success ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--success ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -269,28 +269,31 @@ exports[`renders the AccessibilityIcon with prop variant=error and size= xl 1`]
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=primary 1`] = `
+exports[`renders the AccessibilityIcon with prop color=warning and size=s 1`] = `
 <AccessibilityIcon
-  variant="primary"
+  color="warning"
+  size="sm"
 >
   <ForwardRef(Icon)
+    color="warning"
     icon="accessibility"
-    variant="primary"
+    size="sm"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      variant="primary"
+      color="warning"
+      size="sm"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--primary ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--primary ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -314,28 +317,28 @@ exports[`renders the AccessibilityIcon with prop variant=primary 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=success 1`] = `
+exports[`renders the AccessibilityIcon with prop size=l 1`] = `
 <AccessibilityIcon
-  variant="success"
+  size="lg"
 >
   <ForwardRef(Icon)
     icon="accessibility"
-    variant="success"
+    size="lg"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      variant="success"
+      size="lg"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--success ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--lg ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--success ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--lg ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -359,31 +362,28 @@ exports[`renders the AccessibilityIcon with prop variant=success 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=warning and size=s 1`] = `
+exports[`renders the AccessibilityIcon with prop size=s 1`] = `
 <AccessibilityIcon
   size="sm"
-  variant="warning"
 >
   <ForwardRef(Icon)
     icon="accessibility"
     size="sm"
-    variant="warning"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
       size="sm"
-      variant="warning"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--sm ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--sm ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >

package/AccessibilityIcon/index.test/index.js

@@ -18,40 +18,40 @@ it('renders the AccessibilityIcon with prop size=l', function () {
   expect(mount(_ref3)).toMatchSnapshot();
 });
 var _ref4 = /*#__PURE__*/React.createElement(AccessibilityIcon, {
-  variant: "dark"
+  color: "base-content"
 });
-it('renders the AccessibilityIcon with prop variant=dark', function () {
+it('renders the AccessibilityIcon with prop color=base-content', function () {
   expect(mount(_ref4)).toMatchSnapshot();
 });
 var _ref5 = /*#__PURE__*/React.createElement(AccessibilityIcon, {
-  variant: "primary"
+  color: "primary"
 });
-it('renders the AccessibilityIcon with prop variant=primary', function () {
+it('renders the AccessibilityIcon with prop color=primary', function () {
   expect(mount(_ref5)).toMatchSnapshot();
 });
 var _ref6 = /*#__PURE__*/React.createElement(AccessibilityIcon, {
-  variant: "success"
+  color: "success"
 });
-it('renders the AccessibilityIcon with prop variant=success', function () {
+it('renders the AccessibilityIcon with prop color=success', function () {
   expect(mount(_ref6)).toMatchSnapshot();
 });
 var _ref7 = /*#__PURE__*/React.createElement(AccessibilityIcon, {
-  variant: "error"
+  color: "error"
 });
-it('renders the AccessibilityIcon with prop variant=error', function () {
+it('renders the AccessibilityIcon with prop color=error', function () {
   expect(mount(_ref7)).toMatchSnapshot();
 });
 var _ref8 = /*#__PURE__*/React.createElement(AccessibilityIcon, {
-  variant: "warning",
+  color: "warning",
   size: "sm"
 });
-it('renders the AccessibilityIcon with prop variant=warning and size=s', function () {
+it('renders the AccessibilityIcon with prop color=warning and size=s', function () {
   expect(mount(_ref8)).toMatchSnapshot();
 });
 var _ref9 = /*#__PURE__*/React.createElement(AccessibilityIcon, {
-  variant: "warning",
+  color: "warning",
   size: "xl"
 });
-it('renders the AccessibilityIcon with prop variant=error and size= xl', function () {
+it('renders the AccessibilityIcon with prop color=error and size= xl', function () {
   expect(mount(_ref9)).toMatchSnapshot();
 });

package/ArrowIcon/__snapshots__/index.test.tsx.snap

@@ -27,8 +27,8 @@ exports[`renders the ArrowIcon with direction down prop 1`] = `
           <arrow
             direction="down"
           >
-            <path
-              d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+            <polygon
+              points="19.7 9.6 13.7 15.52 13.7 2.07 10.37 2 10.32 15.52 4.4 9.6 2 12 12 22 22 12 19.7 9.6"
             />
           </arrow>
         </svg>
@@ -65,8 +65,8 @@ exports[`renders the ArrowIcon with direction left prop 1`] = `
           <arrow
             direction="left"
           >
-            <path
-              d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
+            <polygon
+              points="14.4 19.7 8.48 13.7 21.93 13.7 22 10.37 8.48 10.32 14.4 4.4 12 2 2 12 12 22 14.4 19.7"
             />
           </arrow>
         </svg>
@@ -103,8 +103,8 @@ exports[`renders the ArrowIcon with direction up prop 1`] = `
           <arrow
             direction="up"
           >
-            <path
-              d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
+            <polygon
+              points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12"
             />
           </arrow>
         </svg>
@@ -136,8 +136,8 @@ exports[`renders the ArrowIcon with no props, direction prop is right by default
           viewBox="0 0 24 24"
         >
           <arrow>
-            <path
-              d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
+            <polygon
+              points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12"
             />
           </arrow>
         </svg>

package/Base/index.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+type AsProp<C extends React.ElementType> = {
+    as?: C;
+};
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+type PolymorphicComponentProp<C extends React.ElementType, Props = Record<string, unknown>> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = Record<string, unknown>> = PolymorphicComponentProp<C, Props> & {
+    ref?: any;
+};
+/**
+ * This is the updated component props using PolymorphicComponentPropWithRef
+ */
+export type BaseProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, {
+    /** margin is optional. It has not a default value. */
+    margin?: spacingValues;
+    /** marginTop is optional. It has not a default value. */
+    marginTop?: spacingValues;
+    /** marginBottom is optional. It has not a default value. */
+    marginBottom?: spacingValues;
+    /** marginLeft is optional. It has not a default value. */
+    marginLeft?: spacingValues;
+    /** marginRight is optional. It has not a default value. */
+    marginRight?: spacingValues;
+    /** Alternative for margin. Margin is optional. It has not a default value. */
+    m?: spacingValues;
+    /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
+    mt?: spacingValues;
+    /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
+    mb?: spacingValues;
+    /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
+    ml?: spacingValues;
+    /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
+    mr?: spacingValues;
+    /** Alternative for marginX. MarginX is optional. It has not a default value. */
+    mx?: spacingValues;
+    /** Alternative for marginY. MarginY is optional. It has not a default value. */
+    my?: spacingValues;
+    /** padding is optional. It has not a default value. */
+    padding?: spacingValues;
+    /** paddingTop is optional. It has not a default value. */
+    paddingTop?: spacingValues;
+    /** paddingBottom is optional. It has not a default value. */
+    paddingBottom?: spacingValues;
+    /** paddingLeft is optional. It has not a default value. */
+    paddingLeft?: spacingValues;
+    /** paddingRight is optional. It has not a default value. */
+    paddingRight?: spacingValues;
+    /** Alternative for padding. Padding is optional. It has not a default value. */
+    p?: spacingValues;
+    /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
+    pt?: spacingValues;
+    /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
+    pb?: spacingValues;
+    /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
+    pl?: spacingValues;
+    /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
+    pr?: spacingValues;
+    /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
+    px?: spacingValues;
+    /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
+    py?: spacingValues;
+    /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
+    printHidden?: boolean;
+    /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
+    printVisible?: 'block' | 'inline';
+    /** Components will be hidden at all screen sizes. */
+    hidden?: boolean;
+    /** Components will be hidden from 'xs' screen size and up. */
+    xsUpHidden?: boolean;
+    /** Components will be hidden from 'sm' screen size and up. */
+    smUpHidden?: boolean;
+    /** Components will be hidden from 'md' screen size and up. */
+    mdUpHidden?: boolean;
+    /** Components will be hidden from 'lg' screen size and up. */
+    lgUpHidden?: boolean;
+    /** Components will be hidden from 'xl' screen size and up. */
+    xlUpHidden?: boolean;
+    /** Components will be hidden between xs and sm screen size. */
+    xsHidden?: boolean;
+    /** Components will be hidden between sm and md screen size. */
+    smHidden?: boolean;
+    /** Components will be hidden between md and lg screen size. */
+    mdHidden?: boolean;
+    /** Components will be hidden between lg and xl screen size. */
+    lgHidden?: boolean;
+    /** Components will be hidden between xl and 2xl screen size. */
+    xlHidden?: boolean;
+}>;
+type spacingValues = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
+/**
+ * This is the type used in the type annotation for the component
+ */
+type BaseComponent = <C extends React.ElementType = 'span'>(props: BaseProps<C>) => React.ReactElement | null;
+export declare const Base: BaseComponent;
+export default Base;

package/Base/index.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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"];
+import React from 'react';
+import clsx from 'clsx';
+
+// This is the first reusable type utility we built
+
+// This is a new type utitlity with ref!
+
+// This is the type for the "ref" only
+
+/**
+ * This is the updated component props using PolymorphicComponentPropWithRef
+ */
+
+/**
+ * This is the type used in the type annotation for the component
+ */
+
+export var Base = /*#__PURE__*/React.forwardRef(function Base(_ref, ref) {
+  var as = _ref.as,
+    margin = _ref.margin,
+    marginTop = _ref.marginTop,
+    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,
+    xsUpHidden = _ref.xsUpHidden,
+    smUpHidden = _ref.smUpHidden,
+    mdUpHidden = _ref.mdUpHidden,
+    lgUpHidden = _ref.lgUpHidden,
+    xlUpHidden = _ref.xlUpHidden,
+    xsHidden = _ref.xsHidden,
+    smHidden = _ref.smHidden,
+    mdHidden = _ref.mdHidden,
+    lgHidden = _ref.lgHidden,
+    xlHidden = _ref.xlHidden,
+    children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var Component = as || 'span';
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: clsx(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);
+});
+export default Base;

package/Base/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../cjs/Base/index.js"
+}