@delmaredigital/payload-puck 0.6.12 → 0.6.13

package/dist/fields/ResponsiveVisibilityField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveVisibilityField.d.ts","sourceRoot":"","sources":["../../src/fields/ResponsiveVisibilityField.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AASnD,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,UAAU,CAAA;AAO3D,UAAU,8BAA8B;IACtC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA8ID,iBAAS,8BAA8B,CAAC,EACtC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,8BAA8B,2CA+DhC;AAED,eAAO,MAAM,yBAAyB,kEAAuC,CAAA;AAM7E,UAAU,qCAAqC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,+BAA+B,CAC7C,MAAM,GAAE,qCAA0C,GACjD,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAarC"}
+{"version":3,"file":"ResponsiveVisibilityField.d.ts","sourceRoot":"","sources":["../../src/fields/ResponsiveVisibilityField.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AASnD,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,aAAa,CAAA;AAO9D,UAAU,8BAA8B;IACtC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA8ID,iBAAS,8BAA8B,CAAC,EACtC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,8BAA8B,qBA+DhC;AAED,eAAO,MAAM,yBAAyB,kEAAuC,CAAA;AAM7E,UAAU,qCAAqC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,+BAA+B,CAC7C,MAAM,GAAE,qCAA0C,GACjD,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAarC"}

package/dist/fields/ResponsiveVisibilityField.js

@@ -6,10 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Provides a compact visual interface for toggling element visibility
  * at each breakpoint (xs, sm, md, lg, xl). Simple independent toggles
  * like Elementor/Divi - each breakpoint is just on or off.
- */
-import { useCallback, memo } from 'react';
-import { Smartphone, Tablet, Laptop, Monitor, Eye, EyeOff, } from 'lucide-react';
-import { BREAKPOINTS, DEFAULT_VISIBILITY } from './shared';
+ */ import React, { useCallback, memo } from 'react';
+import { Smartphone, Tablet, Laptop, Monitor, Eye, EyeOff } from 'lucide-react';
+import { BREAKPOINTS, DEFAULT_VISIBILITY } from './shared.js';
 // =============================================================================
 // Breakpoint Icons
 // =============================================================================
@@ -18,7 +17,7 @@ const BREAKPOINT_ICONS = {
     sm: Smartphone,
     md: Tablet,
     lg: Laptop,
-    xl: Monitor,
+    xl: Monitor
 };
 // =============================================================================
 // Styles
@@ -27,29 +26,29 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
+        gap: '8px'
     },
     header: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     label: {
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     warningBadge: {
         fontSize: '12px',
         color: 'var(--theme-warning-500)',
         display: 'flex',
         alignItems: 'center',
-        gap: '4px',
+        gap: '4px'
     },
     toggleGrid: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     toggleButton: {
         position: 'relative',
@@ -64,68 +63,147 @@ const styles = {
         minWidth: '44px',
         cursor: 'pointer',
         transition: 'all 0.15s',
-        border: '1px solid',
+        border: '1px solid'
     },
     toggleVisible: {
         backgroundColor: 'rgba(16, 185, 129, 0.15)',
         color: 'rgb(16, 185, 129)',
-        borderColor: 'rgba(16, 185, 129, 0.4)',
+        borderColor: 'rgba(16, 185, 129, 0.4)'
     },
     toggleHidden: {
         backgroundColor: 'rgba(239, 68, 68, 0.15)',
         color: 'rgb(239, 68, 68)',
-        borderColor: 'rgba(239, 68, 68, 0.4)',
+        borderColor: 'rgba(239, 68, 68, 0.4)'
     },
     toggleDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     },
     toggleLabel: {
         fontSize: '10px',
-        fontWeight: 500,
+        fontWeight: 500
     },
     toggleIcon: {
         position: 'absolute',
         top: '4px',
-        right: '4px',
+        right: '4px'
     },
     helpText: {
         fontSize: '12px',
-        color: 'var(--theme-elevation-500)',
-    },
+        color: 'var(--theme-elevation-500)'
+    }
 };
-function VisibilityToggle({ breakpoint, label, minWidth, isVisible, onClick, disabled, }) {
+function VisibilityToggle({ breakpoint, label, minWidth, isVisible, onClick, disabled }) {
     const DeviceIcon = BREAKPOINT_ICONS[breakpoint];
-    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, title: `${label}${minWidth ? ` (${minWidth}px+)` : ''}: ${isVisible ? 'Visible' : 'Hidden'}`, style: {
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        onClick: onClick,
+        disabled: disabled,
+        title: `${label}${minWidth ? ` (${minWidth}px+)` : ''}: ${isVisible ? 'Visible' : 'Hidden'}`,
+        style: {
             ...styles.toggleButton,
-            ...(isVisible ? styles.toggleVisible : styles.toggleHidden),
-            ...(disabled ? styles.toggleDisabled : {}),
-        }, children: [_jsx(DeviceIcon, { style: { width: '16px', height: '16px' } }), _jsx("span", { style: styles.toggleLabel, children: label }), _jsx("div", { style: styles.toggleIcon, children: isVisible ? (_jsx(Eye, { style: { width: '12px', height: '12px' } })) : (_jsx(EyeOff, { style: { width: '12px', height: '12px' } })) })] }));
+            ...isVisible ? styles.toggleVisible : styles.toggleHidden,
+            ...disabled ? styles.toggleDisabled : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsx(DeviceIcon, {
+                style: {
+                    width: '16px',
+                    height: '16px'
+                }
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                style: styles.toggleLabel,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.toggleIcon,
+                children: isVisible ? /*#__PURE__*/ _jsx(Eye, {
+                    style: {
+                        width: '12px',
+                        height: '12px'
+                    }
+                }) : /*#__PURE__*/ _jsx(EyeOff, {
+                    style: {
+                        width: '12px',
+                        height: '12px'
+                    }
+                })
+            })
+        ]
+    });
 }
 // =============================================================================
 // ResponsiveVisibilityField Component
 // =============================================================================
-function ResponsiveVisibilityFieldInner({ value, onChange, label, readOnly, }) {
+function ResponsiveVisibilityFieldInner({ value, onChange, label, readOnly }) {
     // Get visibility for a breakpoint (simple lookup, no cascade)
-    const getVisibility = useCallback((breakpoint) => {
+    const getVisibility = useCallback((breakpoint)=>{
         const val = value ?? DEFAULT_VISIBILITY;
         // All breakpoints have explicit values, default to true if undefined
         return val[breakpoint] ?? true;
-    }, [value]);
+    }, [
+        value
+    ]);
     // Toggle visibility for a breakpoint (simple toggle, no cascade)
-    const toggleVisibility = useCallback((breakpoint) => {
+    const toggleVisibility = useCallback((breakpoint)=>{
         const currentVisible = getVisibility(breakpoint);
         const newValue = {
-            ...(value ?? DEFAULT_VISIBILITY),
-            [breakpoint]: !currentVisible,
+            ...value ?? DEFAULT_VISIBILITY,
+            [breakpoint]: !currentVisible
         };
         onChange(newValue);
-    }, [value, onChange, getVisibility]);
+    }, [
+        value,
+        onChange,
+        getVisibility
+    ]);
     // Check if any breakpoint is hidden
-    const hasHiddenBreakpoints = BREAKPOINTS.some((bp) => !getVisibility(bp.key));
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [label && (_jsx("label", { style: styles.label, children: label })), hasHiddenBreakpoints && (_jsxs("span", { style: styles.warningBadge, children: [_jsx(EyeOff, { style: { width: '12px', height: '12px' } }), "Partially hidden"] }))] }), _jsx("div", { style: styles.toggleGrid, children: BREAKPOINTS.map((bp) => (_jsx(VisibilityToggle, { breakpoint: bp.key, label: bp.label, minWidth: bp.minWidth, isVisible: getVisibility(bp.key), onClick: () => toggleVisibility(bp.key), disabled: readOnly }, bp.key))) }), _jsx("p", { style: styles.helpText, children: "Toggle visibility per screen size. Each breakpoint is independent." })] }));
+    const hasHiddenBreakpoints = BREAKPOINTS.some((bp)=>!getVisibility(bp.key));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.header,
+                children: [
+                    label && /*#__PURE__*/ _jsx("label", {
+                        style: styles.label,
+                        children: label
+                    }),
+                    hasHiddenBreakpoints && /*#__PURE__*/ _jsxs("span", {
+                        style: styles.warningBadge,
+                        children: [
+                            /*#__PURE__*/ _jsx(EyeOff, {
+                                style: {
+                                    width: '12px',
+                                    height: '12px'
+                                }
+                            }),
+                            "Partially hidden"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.toggleGrid,
+                children: BREAKPOINTS.map((bp)=>/*#__PURE__*/ _jsx(VisibilityToggle, {
+                        breakpoint: bp.key,
+                        label: bp.label,
+                        minWidth: bp.minWidth,
+                        isVisible: getVisibility(bp.key),
+                        onClick: ()=>toggleVisibility(bp.key),
+                        disabled: readOnly
+                    }, bp.key))
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: styles.helpText,
+                children: "Toggle visibility per screen size. Each breakpoint is independent."
+            })
+        ]
+    });
 }
-export const ResponsiveVisibilityField = memo(ResponsiveVisibilityFieldInner);
+export const ResponsiveVisibilityField = /*#__PURE__*/ memo(ResponsiveVisibilityFieldInner);
 /**
  * Creates a Puck custom field for responsive visibility control.
  *
@@ -135,12 +213,17 @@ export const ResponsiveVisibilityField = memo(ResponsiveVisibilityFieldInner);
  *   visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
  * }
  * ```
- */
-export function createResponsiveVisibilityField(config = {}) {
+ */ export function createResponsiveVisibilityField(config = {}) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(ResponsiveVisibilityField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(ResponsiveVisibilityField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly
+            })
     };
 }
+
 //# sourceMappingURL=ResponsiveVisibilityField.js.map

package/dist/fields/ResponsiveVisibilityField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveVisibilityField.js","sourceRoot":"","sources":["../../src/fields/ResponsiveVisibilityField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ResponsiveVisibilityField.tsx"],"sourcesContent":["'use client'\n\n/**\n * ResponsiveVisibilityField - Show/hide elements at different breakpoints\n *\n * Provides a compact visual interface for toggling element visibility\n * at each breakpoint (xs, sm, md, lg, xl). Simple independent toggles\n * like Elementor/Divi - each breakpoint is just on or off.\n */\n\nimport React, { useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport {\n  Smartphone,\n  Tablet,\n  Laptop,\n  Monitor,\n  Eye,\n  EyeOff,\n} from 'lucide-react'\nimport type { Breakpoint, VisibilityValue } from './shared.js'\nimport { BREAKPOINTS, DEFAULT_VISIBILITY } from './shared.js'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ninterface ResponsiveVisibilityFieldProps {\n  value: VisibilityValue | null\n  onChange: (value: VisibilityValue | null) => void\n  label?: string\n  readOnly?: boolean\n}\n\n// =============================================================================\n// Breakpoint Icons\n// =============================================================================\n\nconst BREAKPOINT_ICONS: Record<Breakpoint, React.ComponentType<{ className?: string; style?: CSSProperties }>> = {\n  xs: Smartphone,\n  sm: Smartphone,\n  md: Tablet,\n  lg: Laptop,\n  xl: Monitor,\n}\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n  } as CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  warningBadge: {\n    fontSize: '12px',\n    color: 'var(--theme-warning-500)',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '4px',\n  } as CSSProperties,\n  toggleGrid: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '4px',\n  } as CSSProperties,\n  toggleButton: {\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '2px',\n    padding: '6px 4px',\n    borderRadius: '6px',\n    flex: '1 1 auto',\n    minWidth: '44px',\n    cursor: 'pointer',\n    transition: 'all 0.15s',\n    border: '1px solid',\n  } as CSSProperties,\n  toggleVisible: {\n    backgroundColor: 'rgba(16, 185, 129, 0.15)',\n    color: 'rgb(16, 185, 129)',\n    borderColor: 'rgba(16, 185, 129, 0.4)',\n  } as CSSProperties,\n  toggleHidden: {\n    backgroundColor: 'rgba(239, 68, 68, 0.15)',\n    color: 'rgb(239, 68, 68)',\n    borderColor: 'rgba(239, 68, 68, 0.4)',\n  } as CSSProperties,\n  toggleDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as CSSProperties,\n  toggleLabel: {\n    fontSize: '10px',\n    fontWeight: 500,\n  } as CSSProperties,\n  toggleIcon: {\n    position: 'absolute',\n    top: '4px',\n    right: '4px',\n  } as CSSProperties,\n  helpText: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// Visibility Toggle Button\n// =============================================================================\n\ninterface VisibilityToggleProps {\n  breakpoint: Breakpoint\n  label: string\n  minWidth: number | null\n  isVisible: boolean\n  onClick: () => void\n  disabled?: boolean\n}\n\nfunction VisibilityToggle({\n  breakpoint,\n  label,\n  minWidth,\n  isVisible,\n  onClick,\n  disabled,\n}: VisibilityToggleProps) {\n  const DeviceIcon = BREAKPOINT_ICONS[breakpoint]\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      title={`${label}${minWidth ? ` (${minWidth}px+)` : ''}: ${isVisible ? 'Visible' : 'Hidden'}`}\n      style={{\n        ...styles.toggleButton,\n        ...(isVisible ? styles.toggleVisible : styles.toggleHidden),\n        ...(disabled ? styles.toggleDisabled : {}),\n      }}\n    >\n      <DeviceIcon style={{ width: '16px', height: '16px' }} />\n      <span style={styles.toggleLabel}>{label}</span>\n      <div style={styles.toggleIcon as CSSProperties}>\n        {isVisible ? (\n          <Eye style={{ width: '12px', height: '12px' }} />\n        ) : (\n          <EyeOff style={{ width: '12px', height: '12px' }} />\n        )}\n      </div>\n    </button>\n  )\n}\n\n// =============================================================================\n// ResponsiveVisibilityField Component\n// =============================================================================\n\nfunction ResponsiveVisibilityFieldInner({\n  value,\n  onChange,\n  label,\n  readOnly,\n}: ResponsiveVisibilityFieldProps) {\n  // Get visibility for a breakpoint (simple lookup, no cascade)\n  const getVisibility = useCallback(\n    (breakpoint: Breakpoint): boolean => {\n      const val = value ?? DEFAULT_VISIBILITY\n      // All breakpoints have explicit values, default to true if undefined\n      return val[breakpoint] ?? true\n    },\n    [value]\n  )\n\n  // Toggle visibility for a breakpoint (simple toggle, no cascade)\n  const toggleVisibility = useCallback(\n    (breakpoint: Breakpoint) => {\n      const currentVisible = getVisibility(breakpoint)\n      const newValue: VisibilityValue = {\n        ...(value ?? DEFAULT_VISIBILITY),\n        [breakpoint]: !currentVisible,\n      }\n      onChange(newValue)\n    },\n    [value, onChange, getVisibility]\n  )\n\n  // Check if any breakpoint is hidden\n  const hasHiddenBreakpoints = BREAKPOINTS.some((bp) => !getVisibility(bp.key))\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {/* Header */}\n      <div style={styles.header}>\n        {label && (\n          <label style={styles.label}>{label}</label>\n        )}\n        {hasHiddenBreakpoints && (\n          <span style={styles.warningBadge}>\n            <EyeOff style={{ width: '12px', height: '12px' }} />\n            Partially hidden\n          </span>\n        )}\n      </div>\n\n      {/* Visibility Grid */}\n      <div style={styles.toggleGrid}>\n        {BREAKPOINTS.map((bp) => (\n          <VisibilityToggle\n            key={bp.key}\n            breakpoint={bp.key}\n            label={bp.label}\n            minWidth={bp.minWidth}\n            isVisible={getVisibility(bp.key)}\n            onClick={() => toggleVisibility(bp.key)}\n            disabled={readOnly}\n          />\n        ))}\n      </div>\n\n      {/* Help text */}\n      <p style={styles.helpText}>\n        Toggle visibility per screen size. Each breakpoint is independent.\n      </p>\n    </div>\n  )\n}\n\nexport const ResponsiveVisibilityField = memo(ResponsiveVisibilityFieldInner)\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\ninterface CreateResponsiveVisibilityFieldConfig {\n  label?: string\n}\n\n/**\n * Creates a Puck custom field for responsive visibility control.\n *\n * @example\n * ```ts\n * fields: {\n *   visibility: createResponsiveVisibilityField({ label: 'Visibility' }),\n * }\n * ```\n */\nexport function createResponsiveVisibilityField(\n  config: CreateResponsiveVisibilityFieldConfig = {}\n): CustomField<VisibilityValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <ResponsiveVisibilityField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n      />\n    ),\n  }\n}\n"],"names":["React","useCallback","memo","Smartphone","Tablet","Laptop","Monitor","Eye","EyeOff","BREAKPOINTS","DEFAULT_VISIBILITY","BREAKPOINT_ICONS","xs","sm","md","lg","xl","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","label","fontSize","fontWeight","color","warningBadge","toggleGrid","flexWrap","toggleButton","position","padding","borderRadius","flex","minWidth","cursor","transition","border","toggleVisible","backgroundColor","borderColor","toggleHidden","toggleDisabled","opacity","toggleLabel","toggleIcon","top","right","helpText","VisibilityToggle","breakpoint","isVisible","onClick","disabled","DeviceIcon","button","type","title","style","width","height","span","div","ResponsiveVisibilityFieldInner","value","onChange","readOnly","getVisibility","val","toggleVisibility","currentVisible","newValue","hasHiddenBreakpoints","some","bp","key","className","map","p","ResponsiveVisibilityField","createResponsiveVisibilityField","config","render"],"mappings":"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"}

package/dist/fields/SizeField.d.ts

@@ -6,8 +6,8 @@
  */
 import React from 'react';
 import type { CustomField } from '@puckeditor/core';
-export { type SizeMode, type SizeUnit, type SizeValue, sizeValueToCSS, getSizeClasses, } from './shared';
-import type { SizeValue } from './shared';
+export { type SizeMode, type SizeUnit, type SizeValue, sizeValueToCSS, getSizeClasses, } from './shared.js';
+import type { SizeValue } from './shared.js';
 interface SizeFieldProps {
     value: SizeValue | null;
     onChange: (value: SizeValue | null) => void;
@@ -18,7 +18,7 @@ interface SizeFieldProps {
     /** Show font size input (default: true) */
     showFontSize?: boolean;
 }
-declare function SizeFieldInner({ value, onChange, label, readOnly, showHeight, showFontSize, }: SizeFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function SizeFieldInner({ value, onChange, label, readOnly, showHeight, showFontSize, }: SizeFieldProps): React.JSX.Element;
 export declare const SizeField: React.MemoExoticComponent<typeof SizeFieldInner>;
 interface CreateSizeFieldConfig {
     label?: string;

package/dist/fields/SizeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SizeField.d.ts","sourceRoot":"","sources":["../../src/fields/SizeField.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAKnD,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,cAAc,EACd,cAAc,GACf,MAAM,UAAU,CAAA;AAEjB,OAAO,KAAK,EAAE,SAAS,EAAsB,MAAM,UAAU,CAAA;AAE7D,UAAU,cAAc;IACtB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AA0KD,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,KAAc,EACd,QAAQ,EACR,UAAiB,EACjB,YAAmB,GACpB,EAAE,cAAc,2CAuKhB;AAED,eAAO,MAAM,SAAS,kDAAuB,CAAA;AAM7C,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,MAAM,GAAE,qBAA0B,GACjC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,CAe/B"}
+{"version":3,"file":"SizeField.d.ts","sourceRoot":"","sources":["../../src/fields/SizeField.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAKnD,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,cAAc,EACd,cAAc,GACf,MAAM,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,SAAS,EAAsB,MAAM,aAAa,CAAA;AAEhE,UAAU,cAAc;IACtB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AA0KD,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,KAAc,EACd,QAAQ,EACR,UAAiB,EACjB,YAAmB,GACpB,EAAE,cAAc,qBAuKhB;AAED,eAAO,MAAM,SAAS,kDAAuB,CAAA;AAM7C,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,MAAM,GAAE,qBAA0B,GACjC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,CAe/B"}