@digigov/react-core 2.0.0-113e6661 → 2.0.0-298cfc51

package/AutoCompleteInputBase/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+export interface AutoCompleteInputBaseProps extends BaseProps<'input'> {
+    /**
+     * isFocused is optional. The default value is false.
+     * isFocused prop is used to focus the list element.
+     * @value true
+     * @value false
+     */
+    isFocused?: boolean;
+}
+/**
+ * AutoCompleteInputBase component is used to display the value that the user is typing.
+ *
+ */
+export declare const AutoCompleteInputBase: React.ForwardRefExoticComponent<Omit<AutoCompleteInputBaseProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default AutoCompleteInputBase;

package/{AutoCompleteInput → AutoCompleteInputBase}/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 import Base from "@digigov/react-core/Base";
-const AutoCompleteInput = React.forwardRef(function AutoCompleteInput2({ name, isFocused, className, ...props }, ref) {
+const AutoCompleteInputBase = React.forwardRef(function AutoCompleteInputBase2({ name, isFocused, className, ...props }, ref) {
   return /* @__PURE__ */ React.createElement(
     Base,
     {
@@ -17,9 +17,9 @@ const AutoCompleteInput = React.forwardRef(function AutoCompleteInput2({ name, i
     }
   );
 });
-var AutoCompleteInput_default = AutoCompleteInput;
+var AutoCompleteInputBase_default = AutoCompleteInputBase;
 export {
-  AutoCompleteInput,
-  AutoCompleteInput_default as default
+  AutoCompleteInputBase,
+  AutoCompleteInputBase_default as default
 };
 //# sourceMappingURL=index.js.map

package/AutoCompleteInputBase/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AutoCompleteInputBase/index.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\nexport interface AutoCompleteInputBaseProps extends BaseProps<'input'> {\n  /**\n   * isFocused is optional. The default value is false.\n   * isFocused prop is used to focus the list element.\n   * @value true\n   * @value false\n   */\n  isFocused?: boolean;\n\n}\n/**\n * AutoCompleteInputBase component is used to display the value that the user is typing.\n *\n */\nexport const AutoCompleteInputBase = React.forwardRef<\n  HTMLInputElement,\n  AutoCompleteInputBaseProps\n>(function AutoCompleteInputBase(\n  { name, isFocused, className, ...props },\n  ref\n) {\n  return (\n    <Base\n      as=\"input\"\n      type=\"text\"\n      name={name}\n      ref={ref}\n      className={clsx(className, {\n        'ds-autocomplete__input': true,\n        'ds-autocomplete__input--focused': isFocused,\n      })}\n      {...props}\n    />\n  );\n});\n\nexport default AutoCompleteInputBase;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AAezB,MAAM,wBAAwB,MAAM,WAGzC,SAASA,uBACT,EAAE,MAAM,WAAW,WAAW,GAAG,MAAM,GACvC,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW,KAAK,WAAW;AAAA,QACzB,0BAA0B;AAAA,QAC1B,mCAAmC;AAAA,MACrC,CAAC;AAAA,MACA,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,IAAO,gCAAQ;",
+  "names": ["AutoCompleteInputBase"]
+}

package/{AutoCompleteInput → AutoCompleteInputBase}/package.json

@@ -2,5 +2,5 @@
   "sideEffects": false,
   "module": "./index.js",
   "types": "./index.d.ts",
-  "main": "../cjs/AutoCompleteInput/index.js"
+  "main": "../cjs/AutoCompleteInputBase/index.js"
 }

package/Base/index.native/index.js

@@ -10,6 +10,7 @@ const BooleanMapper = {
   null: false,
   "": false
 };
+const textHtmlTags = ["h1", "h2", "h3", "h4", "h5", "p", "span"];
 const Base = React.forwardRef(function Base2({
   as,
   display,
@@ -56,6 +57,47 @@ const Base = React.forwardRef(function Base2({
   ...props
 }, ref) {
   const classNames = className?.split(" ") || [];
+  let applyBasePropsToWrapper = true;
+  const basePropToClassName = basePropGenerator({
+    display,
+    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
+  });
   if (typeof children === "string") {
     children = [children];
   }
@@ -70,11 +112,14 @@ const Base = React.forwardRef(function Base2({
           return child2;
         });
       } else if (typeof child === "string") {
+        if (as && textHtmlTags.includes(as)) {
+          applyBasePropsToWrapper = false;
+        }
         return /* @__PURE__ */ React.createElement(
           Text,
           {
             key: index,
-            className: textClassNames,
+            className: applyBasePropsToWrapper ? textClassNames : `${textClassNames} ${basePropToClassName}`,
             ...props.onClick && {
               onPress: props.onClick
             }
@@ -107,47 +152,7 @@ const Base = React.forwardRef(function Base2({
       ...props,
       ref,
       "aria-expanded": ariaExpanded === "false" ? false : ariaExpanded === true ? true : void 0,
-      className: basePropGenerator({
-        display,
-        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
-      })
+      className: applyBasePropsToWrapper ? `${basePropToClassName} ${className}` : className
     },
     children
   );

package/Base/index.native.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Base/index.native.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';\nimport { mapping } from '@digigov/react-core/Base/mapping.native';\nimport { basePropGenerator } from '@digigov/react-core/Base/utils';\nimport { wrap } from '@digigov/react-core/Base/wrap.native';\n\nexport type BaseProps<C extends React.ElementType> = CoreBaseProps<C> &\n  ViewProps;\nexport type BaseComponent = <C extends React.ElementType = 'span'>(\n  props: BaseProps<C>\n) => React.ReactNode | null;\n\nconst BooleanMapper = {\n  true: true,\n  false: false,\n  undefined: false,\n  null: false,\n  '': false,\n};\nexport const Base: BaseComponent = React.forwardRef(function Base<\n  C extends React.ElementType = 'span',\n>(\n  {\n    as,\n    display,\n    children,\n    margin,\n    marginTop,\n    marginBottom,\n    marginLeft,\n    marginRight,\n    m,\n    mt,\n    mb,\n    ml,\n    mr,\n    mx,\n    my,\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    p,\n    pt,\n    pb,\n    pr,\n    pl,\n    px,\n    py,\n    printHidden,\n    printVisible,\n    hidden,\n    xsUpHidden,\n    smUpHidden,\n    mdUpHidden,\n    lgUpHidden,\n    xlUpHidden,\n    xsHidden,\n    smHidden,\n    mdHidden,\n    lgHidden,\n    xlHidden,\n    className,\n    'aria-expanded': ariaExpanded,\n    ...props\n  }: BaseProps<C>,\n  ref: React.ComponentPropsWithRef<C>['ref']\n) {\n  const classNames = className?.split(' ') || [];\n  if (typeof children === 'string') {\n    children = [children];\n  }\n  if (Array.isArray(children)) {\n    const textClassNames = classNames\n      ?.map((className) => `${className}__text`)\n      .join(' ');\n    children = children.map((child, index) => {\n      if (Array.isArray(child)) {\n        return child.map((child, index) => {\n          if (typeof child === 'string') {\n            return (\n              <Text key={index} className={textClassNames}>\n                {child}\n              </Text>\n            );\n          }\n          return child;\n        });\n      } else if (typeof child === 'string') {\n        return (\n          <Text\n            key={index}\n            className={textClassNames}\n            {...(props.onClick && {\n              onPress: props.onClick,\n            })}\n          >\n            {child}\n          </Text>\n        );\n      }\n      return child;\n    });\n  }\n  const Component = useMemo(() => {\n    const C = mapping[as as keyof JSX.IntrinsicElements] || View;\n    if (\n      classNames.find((className) =>\n        className.match(/__wrapper|__before|__after$/)\n      )\n    ) {\n      return wrap(C);\n    }\n    return C;\n  }, [className]);\n\n  Object.keys(props).forEach((k) => {\n    if (k.startsWith('aria')) {\n      if (BooleanMapper[props[k as keyof typeof props]] !== undefined) {\n        props[k as keyof typeof props] =\n          BooleanMapper[props[k as keyof typeof props]];\n      }\n    }\n  });\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      aria-expanded={\n        (ariaExpanded as unknown as string) === 'false'\n          ? false\n          : ariaExpanded === true\n            ? true\n            : undefined\n      }\n      className={basePropGenerator({\n        display,\n        margin,\n        marginTop,\n        marginBottom,\n        marginLeft,\n        marginRight,\n        m,\n        mt,\n        mb,\n        ml,\n        mr,\n        mx,\n        my,\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n        p,\n        pt,\n        pb,\n        pr,\n        pl,\n        px,\n        py,\n        printHidden,\n        printVisible,\n        hidden,\n        xsUpHidden,\n        smUpHidden,\n        mdUpHidden,\n        lgUpHidden,\n        xlUpHidden,\n        xsHidden,\n        smHidden,\n        mdHidden,\n        lgHidden,\n        xlHidden,\n        className,\n      })}\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport default Base;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';\nimport { mapping } from '@digigov/react-core/Base/mapping.native';\nimport { basePropGenerator } from '@digigov/react-core/Base/utils';\nimport { wrap } from '@digigov/react-core/Base/wrap.native';\n\nexport type BaseProps<C extends React.ElementType> = CoreBaseProps<C> &\n  ViewProps;\nexport type BaseComponent = <C extends React.ElementType = 'span'>(\n  props: BaseProps<C>\n) => React.ReactNode | null;\n\nconst BooleanMapper = {\n  true: true,\n  false: false,\n  undefined: false,\n  null: false,\n  '': false,\n};\n\nconst textHtmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'];\n\nexport const Base: BaseComponent = React.forwardRef(function Base<\n  C extends React.ElementType = 'span',\n>(\n  {\n    as,\n    display,\n    children,\n    margin,\n    marginTop,\n    marginBottom,\n    marginLeft,\n    marginRight,\n    m,\n    mt,\n    mb,\n    ml,\n    mr,\n    mx,\n    my,\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    p,\n    pt,\n    pb,\n    pr,\n    pl,\n    px,\n    py,\n    printHidden,\n    printVisible,\n    hidden,\n    xsUpHidden,\n    smUpHidden,\n    mdUpHidden,\n    lgUpHidden,\n    xlUpHidden,\n    xsHidden,\n    smHidden,\n    mdHidden,\n    lgHidden,\n    xlHidden,\n    className,\n    'aria-expanded': ariaExpanded,\n    ...props\n  }: BaseProps<C>,\n  ref: React.ComponentPropsWithRef<C>['ref']\n) {\n  const classNames = className?.split(' ') || [];\n  let applyBasePropsToWrapper: boolean = true;\n\n  const basePropToClassName = basePropGenerator({\n    display,\n    margin,\n    marginTop,\n    marginBottom,\n    marginLeft,\n    marginRight,\n    m,\n    mt,\n    mb,\n    ml,\n    mr,\n    mx,\n    my,\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    p,\n    pt,\n    pb,\n    pr,\n    pl,\n    px,\n    py,\n    printHidden,\n    printVisible,\n    hidden,\n    xsUpHidden,\n    smUpHidden,\n    mdUpHidden,\n    lgUpHidden,\n    xlUpHidden,\n    xsHidden,\n    smHidden,\n    mdHidden,\n    lgHidden,\n    xlHidden,\n  });\n\n  if (typeof children === 'string') {\n    children = [children];\n  }\n  if (Array.isArray(children)) {\n    const textClassNames = classNames\n      ?.map((className) => `${className}__text`)\n      .join(' ');\n    children = children.map((child, index) => {\n      if (Array.isArray(child)) {\n        return child.map((child, index) => {\n          if (typeof child === 'string') {\n            return (\n              <Text key={index} className={textClassNames}>\n                {child}\n              </Text>\n            );\n          }\n          return child;\n        });\n      } else if (typeof child === 'string') {\n        if (as && textHtmlTags.includes(as as string)) {\n          applyBasePropsToWrapper = false;\n        }\n        return (\n          <Text\n            key={index}\n            className={\n              applyBasePropsToWrapper\n                ? textClassNames\n                : `${textClassNames} ${basePropToClassName}`\n            }\n            {...(props.onClick && {\n              onPress: props.onClick,\n            })}\n          >\n            {child}\n          </Text>\n        );\n      }\n      return child;\n    });\n  }\n  const Component = useMemo(() => {\n    const C = mapping[as as keyof JSX.IntrinsicElements] || View;\n    if (\n      classNames.find((className) =>\n        className.match(/__wrapper|__before|__after$/)\n      )\n    ) {\n      return wrap(C);\n    }\n    return C;\n  }, [className]);\n\n  Object.keys(props).forEach((k) => {\n    if (k.startsWith('aria')) {\n      if (BooleanMapper[props[k as keyof typeof props]] !== undefined) {\n        props[k as keyof typeof props] =\n          BooleanMapper[props[k as keyof typeof props]];\n      }\n    }\n  });\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      aria-expanded={\n        (ariaExpanded as unknown as string) === 'false'\n          ? false\n          : ariaExpanded === true\n            ? true\n            : undefined\n      }\n      className={\n        applyBasePropsToWrapper\n          ? `${basePropToClassName} ${className}`\n          : className\n      }\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport default Base;\n"],
+  "mappings": "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",
   "names": ["Base", "className", "child", "index"]
 }

package/Base/index.web/index.js

@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 import { basePropGenerator } from "@digigov/react-core/Base/utils";
 const Base = React.forwardRef(function Base2({
   as,
@@ -45,51 +46,50 @@ const Base = React.forwardRef(function Base2({
   ...props
 }, ref) {
   const Component = as || "span";
+  const basePropToClassName = basePropGenerator({
+    display,
+    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
+  });
   return /* @__PURE__ */ React.createElement(
     Component,
     {
-      as,
-      className: basePropGenerator({
-        display,
-        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
-      }),
+      className: clsx(basePropToClassName, className),
       ref,
       ...props
     },

package/Base/index.web.d.ts

@@ -12,53 +12,53 @@ type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = Record
  */
 export type BaseProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, {
     /** margin is optional. It has not a default value. */
-    margin?: spacingValues;
+    margin?: SpacingValues | SpacingMediaValues;
     /** marginTop is optional. It has not a default value. */
-    marginTop?: spacingValues;
+    marginTop?: SpacingValues | SpacingMediaValues;
     /** marginBottom is optional. It has not a default value. */
-    marginBottom?: spacingValues;
+    marginBottom?: SpacingValues | SpacingMediaValues;
     /** marginLeft is optional. It has not a default value. */
-    marginLeft?: spacingValues;
+    marginLeft?: SpacingValues | SpacingMediaValues;
     /** marginRight is optional. It has not a default value. */
-    marginRight?: spacingValues;
+    marginRight?: SpacingValues | SpacingMediaValues;
     /** Alternative for margin. Margin is optional. It has not a default value. */
-    m?: spacingValues;
+    m?: SpacingValues | SpacingMediaValues;
     /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
-    mt?: spacingValues;
+    mt?: SpacingValues | SpacingMediaValues;
     /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
-    mb?: spacingValues;
+    mb?: SpacingValues | SpacingMediaValues;
     /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
-    ml?: spacingValues;
+    ml?: SpacingValues | SpacingMediaValues;
     /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
-    mr?: spacingValues;
+    mr?: SpacingValues | SpacingMediaValues;
     /** Alternative for marginX. MarginX is optional. It has not a default value. */
-    mx?: spacingValues;
+    mx?: SpacingValues | SpacingMediaValues;
     /** Alternative for marginY. MarginY is optional. It has not a default value. */
-    my?: spacingValues;
+    my?: SpacingValues | SpacingMediaValues;
     /** padding is optional. It has not a default value. */
-    padding?: spacingValues;
+    padding?: SpacingValues | SpacingMediaValues;
     /** paddingTop is optional. It has not a default value. */
-    paddingTop?: spacingValues;
+    paddingTop?: SpacingValues | SpacingMediaValues;
     /** paddingBottom is optional. It has not a default value. */
-    paddingBottom?: spacingValues;
+    paddingBottom?: SpacingValues | SpacingMediaValues;
     /** paddingLeft is optional. It has not a default value. */
-    paddingLeft?: spacingValues;
+    paddingLeft?: SpacingValues | SpacingMediaValues;
     /** paddingRight is optional. It has not a default value. */
-    paddingRight?: spacingValues;
+    paddingRight?: SpacingValues | SpacingMediaValues;
     /** Alternative for padding. Padding is optional. It has not a default value. */
-    p?: spacingValues;
+    p?: SpacingValues | SpacingMediaValues;
     /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
-    pt?: spacingValues;
+    pt?: SpacingValues | SpacingMediaValues;
     /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
-    pb?: spacingValues;
+    pb?: SpacingValues | SpacingMediaValues;
     /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
-    pl?: spacingValues;
+    pl?: SpacingValues | SpacingMediaValues;
     /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
-    pr?: spacingValues;
+    pr?: SpacingValues | SpacingMediaValues;
     /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
-    px?: spacingValues;
+    px?: SpacingValues | SpacingMediaValues;
     /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
-    py?: spacingValues;
+    py?: SpacingValues | SpacingMediaValues;
     /**  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.*/
@@ -88,7 +88,14 @@ export type BaseProps<C extends React.ElementType> = PolymorphicComponentPropWit
     /**  display is optional. It has not a default value. */
     display?: 'flex' | 'block' | 'none';
 }>;
-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;
+export 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;
+export type SpacingMediaValues = {
+    xs?: SpacingValues;
+    sm?: SpacingValues;
+    md?: SpacingValues;
+    lg?: SpacingValues;
+    xl?: SpacingValues;
+};
 /**
  * This is the type used in the type annotation for the component
  */

package/Base/index.web.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Base/index.web.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { basePropGenerator } from '@digigov/react-core/Base/utils';\n\ntype AsProp<C extends React.ElementType> = {\n  as?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// This is the first reusable type utility we built\ntype PolymorphicComponentProp<\n  C extends React.ElementType,\n  Props = Record<string, unknown>,\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;\n\n// This is a new type utitlity with ref!\ntype PolymorphicComponentPropWithRef<\n  C extends React.ElementType,\n  Props = Record<string, unknown>,\n> = PolymorphicComponentProp<C, Props> & { ref?: any };\n\n// This is the type for the \"ref\" only\ntype PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>['ref'];\n\n/**\n * This is the updated component props using PolymorphicComponentPropWithRef\n */\nexport type BaseProps<C extends React.ElementType> =\n  PolymorphicComponentPropWithRef<\n    C,\n    {\n      /** margin is optional. It has not a default value. */\n      margin?: spacingValues;\n      /** marginTop is optional. It has not a default value. */\n      marginTop?: spacingValues;\n      /** marginBottom is optional. It has not a default value. */\n      marginBottom?: spacingValues;\n      /** marginLeft is optional. It has not a default value. */\n      marginLeft?: spacingValues;\n      /** marginRight is optional. It has not a default value. */\n      marginRight?: spacingValues;\n      /** Alternative for margin. Margin is optional. It has not a default value. */\n      m?: spacingValues;\n      /** Alternative for marginTop. MarginTop is optional. It has not a default value. */\n      mt?: spacingValues;\n      /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */\n      mb?: spacingValues;\n      /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */\n      ml?: spacingValues;\n      /** Alternative for marginRight. MarginRight is optional. It has not a default value. */\n      mr?: spacingValues;\n      /** Alternative for marginX. MarginX is optional. It has not a default value. */\n      mx?: spacingValues;\n      /** Alternative for marginY. MarginY is optional. It has not a default value. */\n      my?: spacingValues;\n      /** padding is optional. It has not a default value. */\n      padding?: spacingValues;\n      /** paddingTop is optional. It has not a default value. */\n      paddingTop?: spacingValues;\n      /** paddingBottom is optional. It has not a default value. */\n      paddingBottom?: spacingValues;\n      /** paddingLeft is optional. It has not a default value. */\n      paddingLeft?: spacingValues;\n      /** paddingRight is optional. It has not a default value. */\n      paddingRight?: spacingValues;\n      /** Alternative for padding. Padding is optional. It has not a default value. */\n      p?: spacingValues;\n      /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */\n      pt?: spacingValues;\n      /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */\n      pb?: spacingValues;\n      /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */\n      pl?: spacingValues;\n      /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */\n      pr?: spacingValues;\n      /** Alternative for paddingX. PaddingX is optional. It has not a default value. */\n      px?: spacingValues;\n      /** Alternative for paddingY. PaddingY is optional. It has not a default value. */\n      py?: spacingValues;\n      /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */\n      printHidden?: boolean;\n      /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/\n      printVisible?: 'block' | 'inline';\n      /** Components will be hidden at all screen sizes. */\n      hidden?: boolean;\n      /** Components will be hidden from 'xs' screen size and up. */\n      xsUpHidden?: boolean;\n      /** Components will be hidden from 'sm' screen size and up. */\n      smUpHidden?: boolean;\n      /** Components will be hidden from 'md' screen size and up. */\n      mdUpHidden?: boolean;\n      /** Components will be hidden from 'lg' screen size and up. */\n      lgUpHidden?: boolean;\n      /** Components will be hidden from 'xl' screen size and up. */\n      xlUpHidden?: boolean;\n      /** Components will be hidden between xs and sm screen size. */\n      xsHidden?: boolean;\n      /** Components will be hidden between sm and md screen size. */\n      smHidden?: boolean;\n      /** Components will be hidden between md and lg screen size. */\n      mdHidden?: boolean;\n      /** Components will be hidden between lg and xl screen size. */\n      lgHidden?: boolean;\n      /** Components will be hidden between xl and 2xl screen size. */\n      xlHidden?: boolean;\n      /**  display is optional. It has not a default value. */\n      display?: 'flex' | 'block' | 'none'\n    }\n  >;\n\ntype spacingValues =\n  | 0\n  | 0.5\n  | 1\n  | 1.5\n  | 2\n  | 2.5\n  | 3\n  | 3.5\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 14\n  | 16\n  | 20\n  | 24\n  | 28\n  | 32\n  | 36\n  | 40\n  | 44\n  | 48\n  | 52\n  | 56\n  | 60\n  | 64\n  | 72\n  | 80\n  | 96;\n\n/**\n * This is the type used in the type annotation for the component\n */\ntype BaseComponent = <C extends React.ElementType = 'span'>(\n  props: BaseProps<C>\n) => React.ReactNode | null;\n\nexport const Base: BaseComponent = React.forwardRef(function Base<\n  C extends React.ElementType = 'span',\n>(\n  {\n    as,\n    display,\n    margin,\n    marginTop,\n    marginBottom,\n    marginLeft,\n    marginRight,\n    m,\n    mt,\n    mb,\n    ml,\n    mr,\n    mx,\n    my,\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    p,\n    pt,\n    pb,\n    pr,\n    pl,\n    px,\n    py,\n    printHidden,\n    printVisible,\n    hidden,\n    xsUpHidden,\n    smUpHidden,\n    mdUpHidden,\n    lgUpHidden,\n    xlUpHidden,\n    xsHidden,\n    smHidden,\n    mdHidden,\n    lgHidden,\n    xlHidden,\n    children,\n    className,\n    ...props\n  }: BaseProps<C>,\n  ref?: PolymorphicRef<C>\n) {\n  const Component = as || 'span';\n\n  return (\n    <Component\n      as={as}\n      className={basePropGenerator({\n        display,\n        margin,\n        marginTop,\n        marginBottom,\n        marginLeft,\n        marginRight,\n        m,\n        mt,\n        mb,\n        ml,\n        mr,\n        mx,\n        my,\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n        p,\n        pt,\n        pb,\n        pr,\n        pl,\n        px,\n        py,\n        printHidden,\n        printVisible,\n        hidden,\n        xsUpHidden,\n        smUpHidden,\n        mdUpHidden,\n        lgUpHidden,\n        xlUpHidden,\n        xsHidden,\n        smHidden,\n        mdHidden,\n        lgHidden,\n        xlHidden,\n        className,\n      })}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport default Base;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,yBAAyB;AA0J3B,MAAM,OAAsB,MAAM,WAAW,SAASA,MAG3D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,kBAAkB;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport { basePropGenerator } from '@digigov/react-core/Base/utils';\ntype AsProp<C extends React.ElementType> = {\n  as?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// This is the first reusable type utility we built\ntype PolymorphicComponentProp<\n  C extends React.ElementType,\n  Props = Record<string, unknown>,\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;\n\n// This is a new type utitlity with ref!\ntype PolymorphicComponentPropWithRef<\n  C extends React.ElementType,\n  Props = Record<string, unknown>,\n> = PolymorphicComponentProp<C, Props> & { ref?: any };\n\n// This is the type for the \"ref\" only\ntype PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>['ref'];\n\n/**\n * This is the updated component props using PolymorphicComponentPropWithRef\n */\nexport type BaseProps<C extends React.ElementType> =\n  PolymorphicComponentPropWithRef<\n    C,\n    {\n      /** margin is optional. It has not a default value. */\n      margin?: SpacingValues | SpacingMediaValues;\n      /** marginTop is optional. It has not a default value. */\n      marginTop?: SpacingValues | SpacingMediaValues;\n      /** marginBottom is optional. It has not a default value. */\n      marginBottom?: SpacingValues | SpacingMediaValues;\n      /** marginLeft is optional. It has not a default value. */\n      marginLeft?: SpacingValues | SpacingMediaValues;\n      /** marginRight is optional. It has not a default value. */\n      marginRight?: SpacingValues | SpacingMediaValues;\n      /** Alternative for margin. Margin is optional. It has not a default value. */\n      m?: SpacingValues | SpacingMediaValues;\n      /** Alternative for marginTop. MarginTop is optional. It has not a default value. */\n      mt?: SpacingValues | SpacingMediaValues;\n      /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */\n      mb?: SpacingValues | SpacingMediaValues;\n      /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */\n      ml?: SpacingValues | SpacingMediaValues;\n      /** Alternative for marginRight. MarginRight is optional. It has not a default value. */\n      mr?: SpacingValues | SpacingMediaValues;\n      /** Alternative for marginX. MarginX is optional. It has not a default value. */\n      mx?: SpacingValues | SpacingMediaValues;\n      /** Alternative for marginY. MarginY is optional. It has not a default value. */\n      my?: SpacingValues | SpacingMediaValues;\n      /** padding is optional. It has not a default value. */\n      padding?: SpacingValues | SpacingMediaValues;\n      /** paddingTop is optional. It has not a default value. */\n      paddingTop?: SpacingValues | SpacingMediaValues;\n      /** paddingBottom is optional. It has not a default value. */\n      paddingBottom?: SpacingValues | SpacingMediaValues;\n      /** paddingLeft is optional. It has not a default value. */\n      paddingLeft?: SpacingValues | SpacingMediaValues;\n      /** paddingRight is optional. It has not a default value. */\n      paddingRight?: SpacingValues | SpacingMediaValues;\n      /** Alternative for padding. Padding is optional. It has not a default value. */\n      p?: SpacingValues | SpacingMediaValues;\n      /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */\n      pt?: SpacingValues | SpacingMediaValues;\n      /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */\n      pb?: SpacingValues | SpacingMediaValues;\n      /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */\n      pl?: SpacingValues | SpacingMediaValues;\n      /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */\n      pr?: SpacingValues | SpacingMediaValues;\n      /** Alternative for paddingX. PaddingX is optional. It has not a default value. */\n      px?: SpacingValues | SpacingMediaValues;\n      /** Alternative for paddingY. PaddingY is optional. It has not a default value. */\n      py?: SpacingValues | SpacingMediaValues;\n      /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */\n      printHidden?: boolean;\n      /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/\n      printVisible?: 'block' | 'inline';\n      /** Components will be hidden at all screen sizes. */\n      hidden?: boolean;\n      /** Components will be hidden from 'xs' screen size and up. */\n      xsUpHidden?: boolean;\n      /** Components will be hidden from 'sm' screen size and up. */\n      smUpHidden?: boolean;\n      /** Components will be hidden from 'md' screen size and up. */\n      mdUpHidden?: boolean;\n      /** Components will be hidden from 'lg' screen size and up. */\n      lgUpHidden?: boolean;\n      /** Components will be hidden from 'xl' screen size and up. */\n      xlUpHidden?: boolean;\n      /** Components will be hidden between xs and sm screen size. */\n      xsHidden?: boolean;\n      /** Components will be hidden between sm and md screen size. */\n      smHidden?: boolean;\n      /** Components will be hidden between md and lg screen size. */\n      mdHidden?: boolean;\n      /** Components will be hidden between lg and xl screen size. */\n      lgHidden?: boolean;\n      /** Components will be hidden between xl and 2xl screen size. */\n      xlHidden?: boolean;\n      /**  display is optional. It has not a default value. */\n      display?: 'flex' | 'block' | 'none';\n    }\n  >;\n\nexport type SpacingValues =\n  | 0\n  | 0.5\n  | 1\n  | 1.5\n  | 2\n  | 2.5\n  | 3\n  | 3.5\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 14\n  | 16\n  | 20\n  | 24\n  | 28\n  | 32\n  | 36\n  | 40\n  | 44\n  | 48\n  | 52\n  | 56\n  | 60\n  | 64\n  | 72\n  | 80\n  | 96;\n\nexport type SpacingMediaValues = {\n  xs?: SpacingValues;\n  sm?: SpacingValues;\n  md?: SpacingValues;\n  lg?: SpacingValues;\n  xl?: SpacingValues;\n};\n\n/**\n * This is the type used in the type annotation for the component\n */\ntype BaseComponent = <C extends React.ElementType = 'span'>(\n  props: BaseProps<C>\n) => React.ReactNode | null;\n\nexport const Base: BaseComponent = React.forwardRef(function Base<\n  C extends React.ElementType = 'span',\n>(\n  {\n    as,\n    display,\n    margin,\n    marginTop,\n    marginBottom,\n    marginLeft,\n    marginRight,\n    m,\n    mt,\n    mb,\n    ml,\n    mr,\n    mx,\n    my,\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    p,\n    pt,\n    pb,\n    pr,\n    pl,\n    px,\n    py,\n    printHidden,\n    printVisible,\n    hidden,\n    xsUpHidden,\n    smUpHidden,\n    mdUpHidden,\n    lgUpHidden,\n    xlUpHidden,\n    xsHidden,\n    smHidden,\n    mdHidden,\n    lgHidden,\n    xlHidden,\n    children,\n    className,\n    ...props\n  }: BaseProps<C>,\n  ref?: PolymorphicRef<C>\n) {\n  const Component = as || 'span';\n\n  const basePropToClassName = basePropGenerator({\n    display,\n    margin,\n    marginTop,\n    marginBottom,\n    marginLeft,\n    marginRight,\n    m,\n    mt,\n    mb,\n    ml,\n    mr,\n    mx,\n    my,\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    p,\n    pt,\n    pb,\n    pr,\n    pl,\n    px,\n    py,\n    printHidden,\n    printVisible,\n    hidden,\n    xsUpHidden,\n    smUpHidden,\n    mdUpHidden,\n    lgUpHidden,\n    xlUpHidden,\n    xsHidden,\n    smHidden,\n    mdHidden,\n    lgHidden,\n    xlHidden,\n  });\n\n  return (\n    <Component\n      className={clsx(basePropToClassName, className)}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport default Base;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,yBAAyB;AAiK3B,MAAM,OAAsB,MAAM,WAAW,SAASA,MAG3D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AAExB,QAAM,sBAAsB,kBAAkB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,qBAAqB,SAAS;AAAA,MAC9C;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
   "names": ["Base"]
 }

package/Base/utils/index.js

@@ -1,4 +1,20 @@
 import clsx from "clsx";
+const generateSpacingClasses = (prefix, spacing) => {
+  if (typeof spacing === "object") {
+    return {
+      [`${prefix}-xs-${spacing?.xs}`]: spacing?.xs !== void 0,
+      [`${prefix}-sm-${spacing?.sm}`]: spacing?.sm !== void 0,
+      [`${prefix}-md-${spacing?.md}`]: spacing?.md !== void 0,
+      [`${prefix}-lg-${spacing?.lg}`]: spacing?.lg !== void 0,
+      [`${prefix}-xl-${spacing?.xl}`]: spacing?.xl !== void 0
+    };
+  } else if (spacing !== void 0) {
+    return {
+      [`${prefix}-${spacing}`]: true
+    };
+  }
+  return {};
+};
 const basePropGenerator = ({
   display,
   margin,
@@ -37,49 +53,40 @@ const basePropGenerator = ({
   smHidden,
   mdHidden,
   lgHidden,
-  xlHidden,
-  className
-}) => clsx(className, {
-  [`ds-display-${display}`]: display !== void 0 ? true : void 0,
-  [`ds-m-${margin}`]: margin !== void 0 ? true : void 0,
-  [`ds-mt-${marginTop}`]: marginTop !== void 0 ? true : void 0,
-  [`ds-mb-${marginBottom}`]: marginBottom !== void 0 ? true : void 0,
-  [`ds-mr-${marginRight}`]: marginRight !== void 0 ? true : void 0,
-  [`ds-ml-${marginLeft}`]: marginLeft !== void 0 ? true : void 0,
-  [`ds-m-${m}`]: m !== void 0 ? true : void 0,
-  [`ds-mt-${mt}`]: mt !== void 0 ? true : void 0,
-  [`ds-mb-${mb}`]: mb !== void 0 ? true : void 0,
-  [`ds-mr-${mr}`]: mr !== void 0 ? true : void 0,
-  [`ds-ml-${ml}`]: ml !== void 0 ? true : void 0,
-  [`ds-mx-${mx}`]: mx !== void 0 ? true : void 0,
-  [`ds-my-${my}`]: my !== void 0 ? true : void 0,
-  [`ds-p-${padding}`]: padding !== void 0 ? true : void 0,
-  [`ds-pt-${paddingTop}`]: paddingTop !== void 0 ? true : void 0,
-  [`ds-pb-${paddingBottom}`]: paddingBottom !== void 0 ? true : void 0,
-  [`ds-pr-${paddingRight}`]: paddingRight !== void 0 ? true : void 0,
-  [`ds-pl-${paddingLeft}`]: paddingLeft !== void 0 ? true : void 0,
-  [`ds-p-${p}`]: p !== void 0 ? true : void 0,
-  [`ds-pt-${pt}`]: pt !== void 0 ? true : void 0,
-  [`ds-pb-${pb}`]: pb !== void 0 ? true : void 0,
-  [`ds-pr-${pr}`]: pr !== void 0 ? true : void 0,
-  [`ds-pl-${pl}`]: pl !== void 0 ? true : void 0,
-  [`ds-px-${px}`]: px !== void 0 ? true : void 0,
-  [`ds-py-${py}`]: py !== void 0 ? true : void 0,
-  "ds-print-hidden": !!printHidden,
-  "ds-print-visible-block": printVisible === "block",
-  "ds-print-visible-inline": printVisible === "inline",
-  "ds-hidden": !!hidden,
-  "ds-hidden-xs-up": !!xsUpHidden,
-  "ds-hidden-sm-up": !!smUpHidden,
-  "ds-hidden-md-up": !!mdUpHidden,
-  "ds-hidden-lg-up": !!lgUpHidden,
-  "ds-hidden-xl-up": !!xlUpHidden,
-  "ds-hidden-xs": !!xsHidden,
-  "ds-hidden-sm": !!smHidden,
-  "ds-hidden-md": !!mdHidden,
-  "ds-hidden-lg": !!lgHidden,
-  "ds-hidden-xl": !!xlHidden
-});
+  xlHidden
+}) => {
+  return clsx({
+    [`ds-display-${display}`]: display !== void 0,
+    ...generateSpacingClasses("ds-m", m ?? margin),
+    ...generateSpacingClasses("ds-mt", mt ?? marginTop),
+    ...generateSpacingClasses("ds-mb", mb ?? marginBottom),
+    ...generateSpacingClasses("ds-mr", mr ?? marginRight),
+    ...generateSpacingClasses("ds-ml", ml ?? marginLeft),
+    ...generateSpacingClasses("ds-mx", mx),
+    ...generateSpacingClasses("ds-my", my),
+    ...generateSpacingClasses("ds-p", p ?? padding),
+    ...generateSpacingClasses("ds-pt", pt ?? paddingTop),
+    ...generateSpacingClasses("ds-pb", pb ?? paddingBottom),
+    ...generateSpacingClasses("ds-pr", pr ?? paddingRight),
+    ...generateSpacingClasses("ds-pl", pl ?? paddingLeft),
+    ...generateSpacingClasses("ds-px", px),
+    ...generateSpacingClasses("ds-py", py),
+    "ds-print-hidden": !!printHidden,
+    "ds-print-visible-block": printVisible === "block",
+    "ds-print-visible-inline": printVisible === "inline",
+    "ds-hidden": !!hidden,
+    "ds-hidden-xs-up": !!xsUpHidden,
+    "ds-hidden-sm-up": !!smUpHidden,
+    "ds-hidden-md-up": !!mdUpHidden,
+    "ds-hidden-lg-up": !!lgUpHidden,
+    "ds-hidden-xl-up": !!xlUpHidden,
+    "ds-hidden-xs": !!xsHidden,
+    "ds-hidden-sm": !!smHidden,
+    "ds-hidden-md": !!mdHidden,
+    "ds-hidden-lg": !!lgHidden,
+    "ds-hidden-xl": !!xlHidden
+  });
+};
 export {
   basePropGenerator
 };

package/Base/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const basePropGenerator: ({ display, 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, }: {
+export declare const basePropGenerator: ({ display, 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, }: {
     display: any;
     margin: any;
     marginTop: any;
@@ -37,5 +37,4 @@ export declare const basePropGenerator: ({ display, margin, marginTop, marginBot
     mdHidden: any;
     lgHidden: any;
     xlHidden: any;
-    className: any;
 }) => string;

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Base/utils.ts"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nexport const basePropGenerator = ({\n  display,\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  m,\n  mt,\n  mb,\n  ml,\n  mr,\n  mx,\n  my,\n  padding,\n  paddingTop,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  p,\n  pt,\n  pb,\n  pr,\n  pl,\n  px,\n  py,\n  printHidden,\n  printVisible,\n  hidden,\n  xsUpHidden,\n  smUpHidden,\n  mdUpHidden,\n  lgUpHidden,\n  xlUpHidden,\n  xsHidden,\n  smHidden,\n  mdHidden,\n  lgHidden,\n  xlHidden,\n  className,\n}) =>\n  clsx(className, {\n    [`ds-display-${display}`]: display !== undefined ? true : undefined,\n    [`ds-m-${margin}`]: margin !== undefined ? true : undefined,\n    [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,\n    [`ds-mb-${marginBottom}`]: marginBottom !== undefined ? true : undefined,\n    [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,\n    [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,\n    [`ds-m-${m}`]: m !== undefined ? true : undefined,\n    [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,\n    [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,\n    [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,\n    [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,\n    [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,\n    [`ds-my-${my}`]: my !== undefined ? true : undefined,\n    [`ds-p-${padding}`]: padding !== undefined ? true : undefined,\n    [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,\n    [`ds-pb-${paddingBottom}`]: paddingBottom !== undefined ? true : undefined,\n    [`ds-pr-${paddingRight}`]: paddingRight !== undefined ? true : undefined,\n    [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,\n    [`ds-p-${p}`]: p !== undefined ? true : undefined,\n    [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,\n    [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,\n    [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,\n    [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,\n    [`ds-px-${px}`]: px !== undefined ? true : undefined,\n    [`ds-py-${py}`]: py !== undefined ? true : undefined,\n    'ds-print-hidden': !!printHidden,\n    'ds-print-visible-block': printVisible === 'block',\n    'ds-print-visible-inline': printVisible === 'inline',\n    'ds-hidden': !!hidden,\n    'ds-hidden-xs-up': !!xsUpHidden,\n    'ds-hidden-sm-up': !!smUpHidden,\n    'ds-hidden-md-up': !!mdUpHidden,\n    'ds-hidden-lg-up': !!lgUpHidden,\n    'ds-hidden-xl-up': !!xlUpHidden,\n    'ds-hidden-xs': !!xsHidden,\n    'ds-hidden-sm': !!smHidden,\n    'ds-hidden-md': !!mdHidden,\n    'ds-hidden-lg': !!lgHidden,\n    'ds-hidden-xl': !!xlHidden,\n  });\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\n\n// Helper function to handle both SpacingValues and SpacingMediaValues\nconst generateSpacingClasses = (prefix, spacing) => {\n  if (typeof spacing === 'object') {\n    // It's a SpacingMediaValues (media-specific)\n    return {\n      [`${prefix}-xs-${spacing?.xs}`]: spacing?.xs !== undefined,\n      [`${prefix}-sm-${spacing?.sm}`]: spacing?.sm !== undefined,\n      [`${prefix}-md-${spacing?.md}`]: spacing?.md !== undefined,\n      [`${prefix}-lg-${spacing?.lg}`]: spacing?.lg !== undefined,\n      [`${prefix}-xl-${spacing?.xl}`]: spacing?.xl !== undefined,\n    };\n  } else if (spacing !== undefined) {\n    // It's a regular SpacingValues\n    return {\n      [`${prefix}-${spacing}`]: true,\n    };\n  }\n  return {};\n};\n\nexport const basePropGenerator = ({\n  display,\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  m,\n  mt,\n  mb,\n  ml,\n  mr,\n  mx,\n  my,\n  padding,\n  paddingTop,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  p,\n  pt,\n  pb,\n  pr,\n  pl,\n  px,\n  py,\n  printHidden,\n  printVisible,\n  hidden,\n  xsUpHidden,\n  smUpHidden,\n  mdUpHidden,\n  lgUpHidden,\n  xlUpHidden,\n  xsHidden,\n  smHidden,\n  mdHidden,\n  lgHidden,\n  xlHidden,\n}) => {\n  return clsx({\n    [`ds-display-${display}`]: display !== undefined,\n    ...generateSpacingClasses('ds-m', m ?? margin),\n    ...generateSpacingClasses('ds-mt', mt ?? marginTop),\n    ...generateSpacingClasses('ds-mb', mb ?? marginBottom),\n    ...generateSpacingClasses('ds-mr', mr ?? marginRight),\n    ...generateSpacingClasses('ds-ml', ml ?? marginLeft),\n    ...generateSpacingClasses('ds-mx', mx),\n    ...generateSpacingClasses('ds-my', my),\n    ...generateSpacingClasses('ds-p', p ?? padding),\n    ...generateSpacingClasses('ds-pt', pt ?? paddingTop),\n    ...generateSpacingClasses('ds-pb', pb ?? paddingBottom),\n    ...generateSpacingClasses('ds-pr', pr ?? paddingRight),\n    ...generateSpacingClasses('ds-pl', pl ?? paddingLeft),\n    ...generateSpacingClasses('ds-px', px),\n    ...generateSpacingClasses('ds-py', py),\n    'ds-print-hidden': !!printHidden,\n    'ds-print-visible-block': printVisible === 'block',\n    'ds-print-visible-inline': printVisible === 'inline',\n    'ds-hidden': !!hidden,\n    'ds-hidden-xs-up': !!xsUpHidden,\n    'ds-hidden-sm-up': !!smUpHidden,\n    'ds-hidden-md-up': !!mdUpHidden,\n    'ds-hidden-lg-up': !!lgUpHidden,\n    'ds-hidden-xl-up': !!xlUpHidden,\n    'ds-hidden-xs': !!xsHidden,\n    'ds-hidden-sm': !!smHidden,\n    'ds-hidden-md': !!mdHidden,\n    'ds-hidden-lg': !!lgHidden,\n    'ds-hidden-xl': !!xlHidden,\n  });\n};\n"],
+  "mappings": "AAAA,OAAO,UAAU;AAGjB,MAAM,yBAAyB,CAAC,QAAQ,YAAY;AAClD,MAAI,OAAO,YAAY,UAAU;AAE/B,WAAO;AAAA,MACL,CAAC,GAAG,MAAM,OAAO,SAAS,EAAE,EAAE,GAAG,SAAS,OAAO;AAAA,MACjD,CAAC,GAAG,MAAM,OAAO,SAAS,EAAE,EAAE,GAAG,SAAS,OAAO;AAAA,MACjD,CAAC,GAAG,MAAM,OAAO,SAAS,EAAE,EAAE,GAAG,SAAS,OAAO;AAAA,MACjD,CAAC,GAAG,MAAM,OAAO,SAAS,EAAE,EAAE,GAAG,SAAS,OAAO;AAAA,MACjD,CAAC,GAAG,MAAM,OAAO,SAAS,EAAE,EAAE,GAAG,SAAS,OAAO;AAAA,IACnD;AAAA,EACF,WAAW,YAAY,QAAW;AAEhC,WAAO;AAAA,MACL,CAAC,GAAG,MAAM,IAAI,OAAO,EAAE,GAAG;AAAA,IAC5B;AAAA,EACF;AACA,SAAO,CAAC;AACV;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SAAO,KAAK;AAAA,IACV,CAAC,cAAc,OAAO,EAAE,GAAG,YAAY;AAAA,IACvC,GAAG,uBAAuB,QAAQ,KAAK,MAAM;AAAA,IAC7C,GAAG,uBAAuB,SAAS,MAAM,SAAS;AAAA,IAClD,GAAG,uBAAuB,SAAS,MAAM,YAAY;AAAA,IACrD,GAAG,uBAAuB,SAAS,MAAM,WAAW;AAAA,IACpD,GAAG,uBAAuB,SAAS,MAAM,UAAU;AAAA,IACnD,GAAG,uBAAuB,SAAS,EAAE;AAAA,IACrC,GAAG,uBAAuB,SAAS,EAAE;AAAA,IACrC,GAAG,uBAAuB,QAAQ,KAAK,OAAO;AAAA,IAC9C,GAAG,uBAAuB,SAAS,MAAM,UAAU;AAAA,IACnD,GAAG,uBAAuB,SAAS,MAAM,aAAa;AAAA,IACtD,GAAG,uBAAuB,SAAS,MAAM,YAAY;AAAA,IACrD,GAAG,uBAAuB,SAAS,MAAM,WAAW;AAAA,IACpD,GAAG,uBAAuB,SAAS,EAAE;AAAA,IACrC,GAAG,uBAAuB,SAAS,EAAE;AAAA,IACrC,mBAAmB,CAAC,CAAC;AAAA,IACrB,0BAA0B,iBAAiB;AAAA,IAC3C,2BAA2B,iBAAiB;AAAA,IAC5C,aAAa,CAAC,CAAC;AAAA,IACf,mBAAmB,CAAC,CAAC;AAAA,IACrB,mBAAmB,CAAC,CAAC;AAAA,IACrB,mBAAmB,CAAC,CAAC;AAAA,IACrB,mBAAmB,CAAC,CAAC;AAAA,IACrB,mBAAmB,CAAC,CAAC;AAAA,IACrB,gBAAgB,CAAC,CAAC;AAAA,IAClB,gBAAgB,CAAC,CAAC;AAAA,IAClB,gBAAgB,CAAC,CAAC;AAAA,IAClB,gBAAgB,CAAC,CAAC;AAAA,IAClB,gBAAgB,CAAC,CAAC;AAAA,EACpB,CAAC;AACH;",
   "names": []
 }

package/Base/wrap.native/index.js

@@ -5,7 +5,9 @@ const WrapperContext = React.createContext(
     return cls;
   }
 );
-const Wrapper = React.memo(({ children }) => {
+const Wrapper = React.memo(function Wrapper2({
+  children
+}) {
   const [className, setClassName] = useState("");
   return /* @__PURE__ */ React.createElement(WrapperContext.Provider, { value: setClassName }, /* @__PURE__ */ React.createElement(View, { className, focusable: false }, children));
 });