@digigov/react-core 1.2.0-mobile → 1.2.0-mobile-1

package/cjs/TextInput/index.native/index.js

@@ -0,0 +1,48 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_native_exports = {};
+__export(index_native_exports, {
+  TextInput: () => TextInput,
+  default: () => index_native_default
+});
+module.exports = __toCommonJS(index_native_exports);
+var import_extend = __toESM(require("@digigov/react-core/utils/extend"));
+var import_TextInput = __toESM(require("@digigov/react-core/TextInput/index.web"));
+var import_clsx = __toESM(require("clsx"));
+const TextInput = (0, import_extend.default)(import_TextInput.default, ({ className, ...props }) => ({
+  ...props,
+  className: (0, import_clsx.default)(className, {
+    "ds-input__wrapper": true
+  })
+}));
+var index_native_default = TextInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextInput
+});
+//# sourceMappingURL=index.native.js.map

package/cjs/TextInput/index.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/TextInput/index.native.tsx"],
+  "sourcesContent": ["import extend from '@digigov/react-core/utils/extend';\nimport CoreTextInput from '@digigov/react-core/TextInput/index.web';\nimport clsx from 'clsx';\nexport const TextInput = extend(CoreTextInput, ({ className, ...props }) => ({\n    ...props,\n    className: clsx(className, {\n        'ds-input__wrapper': true\n    })\n}))\nexport default TextInput;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAmB;AACnB,uBAA0B;AAC1B,kBAAiB;AACV,MAAM,gBAAY,cAAAA,SAAO,iBAAAC,SAAe,CAAC,EAAE,WAAW,GAAG,MAAM,OAAO;AAAA,EACzE,GAAG;AAAA,EACH,eAAW,YAAAC,SAAK,WAAW;AAAA,IACvB,qBAAqB;AAAA,EACzB,CAAC;AACL,EAAE;AACF,IAAO,uBAAQ;",
+  "names": ["extend", "CoreTextInput", "clsx"]
+}

package/cjs/TextInput/index.web/index.js

@@ -0,0 +1,76 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_web_exports = {};
+__export(index_web_exports, {
+  TextInput: () => TextInput,
+  default: () => index_web_default
+});
+module.exports = __toCommonJS(index_web_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_Base = __toESM(require("@digigov/react-core/Base"));
+const TextInput = import_react.default.forwardRef(
+  function TextInput2({
+    type = "text",
+    maxWidth,
+    width,
+    error,
+    dense,
+    className,
+    children,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Base.default,
+      {
+        as: "input",
+        type,
+        ref,
+        className: (0, import_clsx.default)(className, {
+          "ds-input": true,
+          "ds-input--error": error,
+          "ds-input--dense": dense,
+          [`ds-input--width-${maxWidth}`]: maxWidth !== void 0,
+          "ds-!-width-one-quarter": width === "25%",
+          "ds-!-width-one-third": width === "33.3%",
+          "ds-!-width-one-half": width === "50%",
+          "ds-!-width-two-thirds": width === "66.6%",
+          "ds-!-width-three-quarters": width === "75%"
+        }),
+        ...props
+      },
+      children
+    );
+  }
+);
+var index_web_default = TextInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextInput
+});
+//# sourceMappingURL=index.web.js.map

package/cjs/TextInput/index.web.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/TextInput/index.web.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface TextInputProps extends BaseProps<'input'> {\n  /**\n   * maxWidth is optional.\n   * @value '2-char';\n   * @value '3-char';\n   * @value '4-char';\n   * @value '5-char';\n   * @value '10-char';\n   * @value '20-char';\n   */\n  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';\n\n  /**\n   * width is optional.\n   * Use width prop to define a custom width in your component.\n   * @value '25%';\n   * @value '33.3%';\n   * @value '50%';\n   * @value '66.6%';\n   * @value '75%';\n   * @value '100%';\n   * @value 'full';\n   */\n  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';\n\n  /**\n   * error is optional. The default value is false.\n   * Use this prop when there is an error at the input.\n   * @value true\n   * @value false\n   */\n  error?: boolean;\n  /**\n   * dense is optional.\n   * @value true TextInput will be dense.\n   * @value false\n   * @default false\n   */\n  dense?: boolean;\n}\n/**\n * TextInput component when you need to let users enter text that\u2019s no\n * longer than a single line, such as their name or phone number.\n */\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      type = 'text',\n      maxWidth,\n      width,\n      error,\n      dense,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <Base\n        as=\"input\"\n        type={type}\n        ref={ref}\n        className={clsx(className, {\n          'ds-input': true,\n          'ds-input--error': error,\n          'ds-input--dense': dense,\n          [`ds-input--width-${maxWidth}`]: maxWidth !== undefined,\n          'ds-!-width-one-quarter': width === '25%',\n          'ds-!-width-one-third': width === '33.3%',\n          'ds-!-width-one-half': width === '50%',\n          'ds-!-width-two-thirds': width === '66.6%',\n          'ds-!-width-three-quarters': width === '75%',\n        })}\n        {...props}\n      >\n        {children}\n      </Base>\n    );\n  }\n);\n\nexport default TextInput;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AA8CzB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,SAASC,WACP;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,WACE,6BAAAD,QAAA;AAAA,MAAC,YAAAE;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,eAAW,YAAAC,SAAK,WAAW;AAAA,UACzB,YAAY;AAAA,UACZ,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,CAAC,mBAAmB,QAAQ,EAAE,GAAG,aAAa;AAAA,UAC9C,0BAA0B,UAAU;AAAA,UACpC,wBAAwB,UAAU;AAAA,UAClC,uBAAuB,UAAU;AAAA,UACjC,yBAAyB,UAAU;AAAA,UACnC,6BAA6B,UAAU;AAAA,QACzC,CAAC;AAAA,QACA,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;",
+  "names": ["React", "TextInput", "Base", "clsx"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "1.2.0-mobile",
+  "version": "1.2.0-mobile-1",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -10,7 +10,9 @@
     "@digigov/react-icons": "1.1.2",
     "clsx": "1.1.1",
     "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "react-dom": ">=16.8.0 <19.0.0",
+    "react-native": "0.75.3",
+    "nativewind": "2.0.11"
   },
   "dependencies": {},
   "private": false,

package/src/Base/compat/Input/CheckboxInput.tsx

@@ -1,34 +1,18 @@
 import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
-import { TouchableOpacity, View, StyleSheet } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 
 type HTMLElementProps = Omit<
   DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
   "ref"
 >;
-export const CheckboxInput = React.forwardRef(function CheckboxInput({ checked, onChange, ...props }, ref){
+
+export const CheckboxInput = React.forwardRef(function CheckboxInput({ checked, onChange, ...props }, ref) {
+
   return (
-    <TouchableOpacity ref={ref} onPress={()=>onChange({currentTarget:{checked:!checked}})} {...props}>
-      <View style={styles.checkbox}>
-        {checked && <View style={styles.checkmark} />}
-      </View>
+    <TouchableOpacity ref={ref} onPress={() => onChange({ currentTarget: { checked: !checked, value: props.value } })} {...props}>
+      {checked && <View className="ds-checkboxes__input--checked" />}
     </TouchableOpacity>
   );
 });
 
-const styles = StyleSheet.create({
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderWidth: 2,
-    borderColor: '#000',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  checkmark: {
-    width: 12,
-    height: 12,
-    backgroundColor: '#000',
-  },
-});
-
 export default CheckboxInput;

package/src/Base/compat/Input/RadioInput.tsx

@@ -1,5 +1,5 @@
 import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
-import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 
 type HTMLElementProps = Omit<
   DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
@@ -8,9 +8,10 @@ type HTMLElementProps = Omit<
 
 export const RadioInput = React.forwardRef(function RadioInput({
   value,
-  checked = false,
+  checked,
   onChange,
-}: HTMLElementProps, ref) {
+  ...props
+}, ref) {
   const handlePress = () => {
     if (onChange) {
       const syntheticEvent = {
@@ -23,30 +24,10 @@ export const RadioInput = React.forwardRef(function RadioInput({
     }
   };
   return (
-    <TouchableOpacity ref={ref} onPress={handlePress}>
-      <View style={styles.outerCircle}>
-        {checked && <View style={styles.innerCircle} />}
-      </View>
+    <TouchableOpacity ref={ref} onPress={handlePress} {...props}>
+      {checked && <View className="ds-radios__input--checked" />}
     </TouchableOpacity>
   );
 });
 
 export default RadioInput;
-
-const styles = StyleSheet.create({
-  outerCircle: {
-    height: 24,
-    width: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    borderColor: '#000',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  innerCircle: {
-    height: 12,
-    width: 12,
-    borderRadius: 6,
-    backgroundColor: '#000',
-  },
-});

package/src/Base/compat/Input/StringInput.tsx

@@ -1,18 +1,25 @@
 import React, { DetailedHTMLProps, InputHTMLAttributes, useEffect } from "react";
-import { TextInput } from "react-native";
+import { TextInput,  } from "react-native";
+import { wrap } from "../../utils";
 
 type HTMLElementProps = Omit<
   DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
   "ref"
 >;
 
-export const StringInput = React.forwardRef(function StringInput({type, onChange, onBlur, onFocus, value,maxLength,
+export const StringInput = wrap(React.forwardRef(function StringInput({
+  type, 
+  onChange, 
+  onBlur, 
+  onFocus, 
+  value,
+  maxLength,
   "aria-activedescendant": ariaActivedescendant,
   "aria-owns": ariaOwns,
   "aria-autocomplete": ariaAutocomplete,
   "aria-expanded": ariaExpanded,
-  
-  ...props}: HTMLElementProps, ref) {
+  ...props
+}: HTMLElementProps, ref) {
   switch (type) {
     case "email":
       props.keyboardType = "email-address";
@@ -52,5 +59,5 @@ export const StringInput = React.forwardRef(function StringInput({type, onChange
     value={currentValue}
     maxLength={Number(maxLength) || undefined}
   {...props} />;
-});
+}));
 

package/src/Base/compat/button.tsx

@@ -0,0 +1,21 @@
+import { FormContext } from '@digigov/form/FormContext';
+import { Pressable } from "react-native";
+import React, { useContext } from 'react';
+export const FormButton = React.forwardRef(function FormButton({onClick, ...props}, ref) {
+  const formContext = useContext(FormContext)
+  return <CompatButton {...props} onClick={()=>{
+    onClick && onClick();
+    formContext?.[props.type]();
+  }} />;
+});
+
+export const CompatButton = React.forwardRef(function CompatButton({onClick, ...props}, ref) {
+  return <Pressable onPress={onClick} ref={ref} hitSlop={10} {...props} />;
+});
+
+export const Button = React.forwardRef(function Button(props, ref) {
+  if (['submit', 'reset'].includes(props.type)) {
+    return <FormButton ref={ref} {...props} />
+  }
+  return <CompatButton ref={ref} {...props} />;
+});

package/src/Base/index.native.tsx

@@ -1,110 +1,82 @@
-import React, { useRef, useState } from "react";
-import { Text, View, ViewProps } from "react-native";
-import { mapping } from "@digigov/react-core/Base/mapping";
-import  { BaseProps as CoreBaseProps } from "@digigov/react-core/Base/index";
+import React, { useRef, useState } from 'react';
+import { Text, View, ViewProps } from 'react-native';
+import { mapping } from '@digigov/react-core/Base/mapping';
+import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
 import clsx from 'clsx';
-import { basePropGenerator } from "./utils";
+import { basePropGenerator, wrap } from '@digigov/react-core/Base/utils';
 export type BaseProps<C extends React.ElementType> = CoreBaseProps<C> &
   ViewProps;
-export type BaseComponent = <C extends React.ElementType = "span">(
+export type BaseComponent = <C extends React.ElementType = 'span'>(
   props: BaseProps<C>
 ) => React.ReactNode | null;
-const WrapperComponent = ({classNames, focused, ...props})=>{
-  const focusedClassNames = focused ? classNames.map(cls=>`${cls}--focus`).join(' ') :' '
-  return <View className={clsx(classNames.join(' '), focusedClassNames)} {...props} />
-}
-const Focusable = ({ wrapperClassNames, Component}) =>{
-  return React.forwardRef(function Focusable(props, ref){
-    const [focused, setFocused] = useState(false);
-    return <WrapperComponent classNames={wrapperClassNames} focused={focused}>
-      <Component
-        ref={ref}
-        onFocus={() => {
-          if (wrapperClassNames.length) {
-            setFocused(true)
-          }
-        }}
-        onBlur={() => {
-          if (wrapperClassNames.length) {
-            setFocused(false)
-          }
-        }}
-        {...props}
-      />
-    </WrapperComponent>
-  })
-}
+
+
 const BooleanMapper = {
   true: true,
   false: false,
   undefined: false,
   null: false,
-  "": false,
+  '': false,
 };
-export const Base: BaseComponent = React.forwardRef(function Base({
-  as,
-  children,
-  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,
-  className,
-  'aria-expanded': ariaExpanded,
-  ...props
-}, ref) {
-  const wrapperClassNames: string[] = []
-  
-  const classNames = (className?.split(" ") || [])
-  .filter((cls) => {
-    if (cls.endsWith('__wrapper')){
-      wrapperClassNames.push(cls)
-      return false
-    }
-    return true
-  })
-  
-  if (typeof children === "string") {
+export const Base: BaseComponent = React.forwardRef(function Base(
+  {
+    as,
+    children,
+    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,
+    className,
+    'aria-expanded': ariaExpanded,
+    ...props
+  },
+  ref
+) {
+  const classNames = className?.split(' ') || []
+  if (typeof children === 'string') {
     children = [children];
   }
   if (Array.isArray(children)) {
-    const textClassNames = classNames?.map((className) => `${className}__text`).join(" ")
+    const textClassNames = classNames
+      ?.map((className) => `${className}__text`)
+      .join(' ');
     children = children.map((child, index) => {
-      if(Array.isArray(child)) {
+      if (Array.isArray(child)) {
         return child.map((child, index) => {
-          if (typeof child === "string") {
+          if (typeof child === 'string') {
             return (
               <Text key={index} className={textClassNames}>
                 {child}
@@ -113,12 +85,14 @@ export const Base: BaseComponent = React.forwardRef(function Base({
           }
           return child;
         });
-      }else if (typeof child === "string") {
+      } else if (typeof child === 'string') {
         return (
-          <Text key={index} className={textClassNames}
-            {...props.onClick && {
-              onPress: props.onClick
-            }}
+          <Text
+            key={index}
+            className={textClassNames}
+            {...(props.onClick && {
+              onPress: props.onClick,
+            })}
           >
             {child}
           </Text>
@@ -128,69 +102,72 @@ export const Base: BaseComponent = React.forwardRef(function Base({
     });
   }
   let Component = mapping[as as keyof JSX.IntrinsicElements] || View;
-
-  if(wrapperClassNames.length > 0){
-    Component = Focusable({wrapperClassNames, Component})
+  if(classNames.find((className) => className.match(/__wrapper|__before|__after$/))) {
+    Component = wrap(Component)
   }
-  Object.keys(props).forEach((k)=>{
-    if(k.startsWith('aria')){
-      if(BooleanMapper[props[k]] !== undefined){
-        props[k] = BooleanMapper[props[k]]
+
+  Object.keys(props).forEach((k) => {
+    if (k.startsWith('aria')) {
+      if (BooleanMapper[props[k]] !== undefined) {
+        props[k] = BooleanMapper[props[k]];
       }
     }
-  })
+  });
   return (
-      <Component
-        {...props}
-        ref={ref}
-        aria-expanded={ariaExpanded === 'false'? false : ariaExpanded === true? true: undefined}
-        className={
-          basePropGenerator({
-            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,
-            className: (classNames|| []).join(' ')
-          })
-        }
-        >
-        {children}
-      </Component>
-
+    <Component
+      {...props}
+      ref={ref}
+      aria-expanded={
+        ariaExpanded === 'false'
+          ? false
+          : ariaExpanded === true
+            ? true
+            : undefined
+      }
+      className={basePropGenerator({
+        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,
+        className,
+      })}
+    >
+      {children}
+    </Component>
   );
 });
 
-export default Base;
+export default Base;