@payloadcms/ui 4.0.0-internal.af6aad0 → 4.0.0-internal.b8a92d2

package/dist/fields/Checkbox/Input.js

@@ -1,153 +1,171 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { Tooltip } from '../../elements/Tooltip/index.js';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { CheckIcon } from '../../icons/Check/index.js';
+import { LineIcon } from '../../icons/Line/index.js';
 export const inputBaseClass = 'checkbox-input';
-export const CheckboxInput = ({
-  id: idFromProps,
-  name,
-  AfterInput,
-  'aria-label': ariaLabelFromProps,
-  'aria-labelledby': ariaLabelledByFromProps,
-  BeforeInput,
-  checked,
-  className,
-  Error,
-  inputRef,
-  Label,
-  label,
-  localized,
-  onToggle,
-  partialChecked,
-  readOnly: readOnlyFromProps,
-  required,
-  tooltip,
-  variant = 'default'
-}) => {
+export const CheckboxInput = t0 => {
+  const $ = _c(37);
+  const {
+    id: idFromProps,
+    name,
+    AfterInput,
+    "aria-label": ariaLabelFromProps,
+    "aria-labelledby": ariaLabelledByFromProps,
+    BeforeInput,
+    checked,
+    className,
+    Error,
+    inputRef,
+    Label,
+    label,
+    localized,
+    onToggle,
+    partialChecked,
+    readOnly: readOnlyFromProps,
+    required,
+    tooltip,
+    variant: t1
+  } = t0;
+  const variant = t1 === undefined ? "default" : t1;
   const [isHydrated, setIsHydrated] = useState(false);
   const [showTooltip, setShowTooltip] = useState(false);
-  const [hasChanged, setHasChanged] = useState(false);
   const fallbackID = useId();
   const id = idFromProps || fallbackID;
   const ariaLabel = ariaLabelFromProps || undefined;
   const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps || name;
-  const controlWrapRef = useRef(null);
-  useEffect(() => {
-    setIsHydrated(true);
-  }, []);
+  let t2;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setIsHydrated(true);
+    };
+    t3 = [];
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t2 = $[0];
+    t3 = $[1];
+  }
+  useEffect(t2, t3);
   const readOnly = readOnlyFromProps || !isHydrated;
-  const isIndeterminate = !checked && Boolean(partialChecked);
-  /**
-  * `indeterminate` has no HTML attribute, so the mixed state has to be written to the
-  * node itself. The node is reached through the wrapper rather than a ref on the input
-  * so that a caller-supplied `inputRef` stays the only ref attached to it. Setting the
-  * property keeps mark selection in CSS and reports the real `mixed` state to
-  * assistive technology.
-  */
-  useEffect(() => {
-    const control = controlWrapRef.current?.querySelector(`.${inputBaseClass}__control`);
-    if (control instanceof HTMLInputElement) {
-      control.indeterminate = isIndeterminate;
+  const t4 = checked && `${inputBaseClass}--checked`;
+  const t5 = readOnly && `${inputBaseClass}--read-only`;
+  const t6 = tooltip && `${inputBaseClass}--has-tooltip`;
+  const t7 = variant !== "default" && `${inputBaseClass}--${variant}`;
+  let t8;
+  if ($[2] !== className || $[3] !== t4 || $[4] !== t5 || $[5] !== t6 || $[6] !== t7) {
+    t8 = [className, inputBaseClass, t4, t5, t6, t7].filter(Boolean);
+    $[2] = className;
+    $[3] = t4;
+    $[4] = t5;
+    $[5] = t6;
+    $[6] = t7;
+    $[7] = t8;
+  } else {
+    t8 = $[7];
+  }
+  const t9 = t8.join(" ");
+  let t10;
+  if ($[8] !== tooltip) {
+    t10 = tooltip ? () => setShowTooltip(true) : undefined;
+    $[8] = tooltip;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  let t11;
+  if ($[10] !== tooltip) {
+    t11 = tooltip ? () => setShowTooltip(false) : undefined;
+    $[10] = tooltip;
+    $[11] = t11;
+  } else {
+    t11 = $[11];
+  }
+  const t12 = Boolean(checked);
+  let t13;
+  if ($[12] !== AfterInput || $[13] !== BeforeInput || $[14] !== Error || $[15] !== Label || $[16] !== ariaLabel || $[17] !== ariaLabelledBy || $[18] !== checked || $[19] !== id || $[20] !== inputRef || $[21] !== label || $[22] !== localized || $[23] !== name || $[24] !== onToggle || $[25] !== partialChecked || $[26] !== readOnly || $[27] !== required || $[28] !== showTooltip || $[29] !== t10 || $[30] !== t11 || $[31] !== t12 || $[32] !== t9 || $[33] !== tooltip) {
+    const t14 = _jsx("input", {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      checked: t12,
+      disabled: readOnly,
+      id,
+      name,
+      onChange: onToggle,
+      ref: inputRef,
+      required,
+      title: name,
+      type: "checkbox"
+    });
+    const t15 = !checked && partialChecked ? "partial" : "check";
+    let t16;
+    if ($[35] !== t15) {
+      t16 = [`${inputBaseClass}__icon`, t15].filter(Boolean);
+      $[35] = t15;
+      $[36] = t16;
+    } else {
+      t16 = $[36];
     }
-  }, [isIndeterminate]);
-  /**
-  * The mark only draws itself in once the value has actually changed, so a document
-  * that loads with the box already checked doesn't replay the animation.
-  */
-  const handleToggle = useCallback(event => {
-    setHasChanged(true);
-    onToggle(event);
-  }, [onToggle]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: [className, inputBaseClass, checked && `${inputBaseClass}--checked`, isIndeterminate && `${inputBaseClass}--indeterminate`, readOnly && `${inputBaseClass}--read-only`, hasChanged && `${inputBaseClass}--changed`, tooltip && `${inputBaseClass}--has-tooltip`, variant !== 'default' && `${inputBaseClass}--${variant}`].filter(Boolean).join(' '),
-    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,
-    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,
-    children: [BeforeInput, /*#__PURE__*/_jsxs("div", {
-      className: `${inputBaseClass}__wrap`,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `${inputBaseClass}__input`,
-        ref: controlWrapRef,
-        children: [/*#__PURE__*/_jsx("input", {
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledBy,
-          checked: Boolean(checked),
-          className: [`${inputBaseClass}__control`, variant !== 'default' && `${inputBaseClass}__control--${variant}`].filter(Boolean).join(' '),
-          disabled: readOnly,
-          id: id,
-          name: name,
-          onChange: handleToggle,
-          ref: inputRef,
-          required: required,
-          title: name,
-          type: "checkbox"
-        }), /*#__PURE__*/_jsxs("span", {
-          className: `${inputBaseClass}__visuals`,
-          children: [/*#__PURE__*/_jsx(Mark, {
-            className: `${inputBaseClass}__mixed`,
-            shape: "mixed"
-          }), /*#__PURE__*/_jsx(Mark, {
-            className: `${inputBaseClass}__check`,
-            shape: "check"
+    t13 = _jsxs("div", {
+      className: t9,
+      onPointerEnter: t10,
+      onPointerLeave: t11,
+      children: [BeforeInput, _jsxs("div", {
+        className: `${inputBaseClass}__wrap`,
+        children: [_jsxs("div", {
+          className: `${inputBaseClass}__input`,
+          children: [t14, _jsxs("span", {
+            className: t16.join(" "),
+            children: [checked && _jsx(CheckIcon, {}), !checked && partialChecked && _jsx(LineIcon, {})]
           })]
-        })]
-      }), /*#__PURE__*/_jsx(RenderCustomComponent, {
-        CustomComponent: Label,
-        Fallback: /*#__PURE__*/_jsx(FieldLabel, {
-          htmlFor: id,
-          label: label,
-          localized: localized,
-          required: required
-        })
-      }), Error]
-    }), tooltip && /*#__PURE__*/_jsx(Tooltip, {
-      alignCaret: "left",
-      className: `${inputBaseClass}__tooltip`,
-      show: showTooltip,
-      children: tooltip
-    }), AfterInput]
-  });
-};
-const markShapes = {
-  check: {
-    d: 'M5.00012 8.5L7.5 11L11.5 5',
-    shapeRendering: 'geometricPrecision'
-  },
-  mixed: {
-    d: 'M5 8H11',
-    shapeRendering: 'crispEdges'
+        }), _jsx(RenderCustomComponent, {
+          CustomComponent: Label,
+          Fallback: _jsx(FieldLabel, {
+            htmlFor: id,
+            label,
+            localized,
+            required
+          })
+        }), Error]
+      }), tooltip && _jsx(Tooltip, {
+        alignCaret: "left",
+        className: `${inputBaseClass}__tooltip`,
+        show: showTooltip,
+        children: tooltip
+      }), AfterInput]
+    });
+    $[12] = AfterInput;
+    $[13] = BeforeInput;
+    $[14] = Error;
+    $[15] = Label;
+    $[16] = ariaLabel;
+    $[17] = ariaLabelledBy;
+    $[18] = checked;
+    $[19] = id;
+    $[20] = inputRef;
+    $[21] = label;
+    $[22] = localized;
+    $[23] = name;
+    $[24] = onToggle;
+    $[25] = partialChecked;
+    $[26] = readOnly;
+    $[27] = required;
+    $[28] = showTooltip;
+    $[29] = t10;
+    $[30] = t11;
+    $[31] = t12;
+    $[32] = t9;
+    $[33] = tooltip;
+    $[34] = t13;
+  } else {
+    t13 = $[34];
   }
-};
-/**
- * Each mark is drawn twice: a wider halo stroke underneath, then the mark itself on
- * top. The halo is what keeps the mark legible against the brand fill.
- */
-const Mark = ({
-  className,
-  shape
-}) => {
-  const {
-    d,
-    shapeRendering
-  } = markShapes[shape];
-  return /*#__PURE__*/_jsxs("svg", {
-    className: className,
-    fill: "none",
-    height: 16,
-    viewBox: "0 0 16 16",
-    width: 16,
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/_jsx("path", {
-      className: `${inputBaseClass}__mark-halo`,
-      d: d,
-      shapeRendering: shapeRendering
-    }), /*#__PURE__*/_jsx("path", {
-      className: `${inputBaseClass}__mark`,
-      d: d,
-      shapeRendering: shapeRendering
-    })]
-  });
+  return t13;
 };
 //# sourceMappingURL=Input.js.map

package/dist/fields/Checkbox/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","useCallback","useEffect","useId","useRef","useState","RenderCustomComponent","Tooltip","FieldLabel","inputBaseClass","CheckboxInput","id","idFromProps","name","AfterInput","ariaLabelFromProps","ariaLabelledByFromProps","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","isHydrated","setIsHydrated","showTooltip","setShowTooltip","hasChanged","setHasChanged","fallbackID","ariaLabel","undefined","ariaLabelledBy","controlWrapRef","isIndeterminate","Boolean","control","current","querySelector","HTMLInputElement","indeterminate","handleToggle","event","_jsxs","filter","join","onPointerEnter","onPointerLeave","ref","_jsx","disabled","onChange","title","type","Mark","shape","CustomComponent","Fallback","htmlFor","alignCaret","show","markShapes","check","d","shapeRendering","mixed","fill","height","viewBox","width","xmlns"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useCallback, useEffect, useId, useRef, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly 'aria-label'?: string\n  readonly 'aria-labelledby'?: string\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly Error?: React.ReactNode\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly tooltip?: string\n  /**\n   * Visual variant for the checkbox\n   * - 'default': Brand fill and an on-brand mark when checked (for form fields)\n   * - 'muted': Keeps the neutral surface when checked (for tables)\n   */\n  readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  'aria-label': ariaLabelFromProps,\n  'aria-labelledby': ariaLabelledByFromProps,\n  BeforeInput,\n  checked,\n  className,\n  Error,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n  tooltip,\n  variant = 'default',\n}) => {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [showTooltip, setShowTooltip] = useState(false)\n  const [hasChanged, setHasChanged] = useState(false)\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n  const ariaLabel = ariaLabelFromProps || undefined\n  const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps || name\n  const controlWrapRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const readOnly = readOnlyFromProps || !isHydrated\n  const isIndeterminate = !checked && Boolean(partialChecked)\n\n  /**\n   * `indeterminate` has no HTML attribute, so the mixed state has to be written to the\n   * node itself. The node is reached through the wrapper rather than a ref on the input\n   * so that a caller-supplied `inputRef` stays the only ref attached to it. Setting the\n   * property keeps mark selection in CSS and reports the real `mixed` state to\n   * assistive technology.\n   */\n  useEffect(() => {\n    const control = controlWrapRef.current?.querySelector(`.${inputBaseClass}__control`)\n\n    if (control instanceof HTMLInputElement) {\n      control.indeterminate = isIndeterminate\n    }\n  }, [isIndeterminate])\n\n  /**\n   * The mark only draws itself in once the value has actually changed, so a document\n   * that loads with the box already checked doesn't replay the animation.\n   */\n  const handleToggle = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setHasChanged(true)\n      onToggle(event)\n    },\n    [onToggle],\n  )\n\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        isIndeterminate && `${inputBaseClass}--indeterminate`,\n        readOnly && `${inputBaseClass}--read-only`,\n        hasChanged && `${inputBaseClass}--changed`,\n        tooltip && `${inputBaseClass}--has-tooltip`,\n        variant !== 'default' && `${inputBaseClass}--${variant}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n      onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n    >\n      {BeforeInput}\n      <div className={`${inputBaseClass}__wrap`}>\n        <div className={`${inputBaseClass}__input`} ref={controlWrapRef}>\n          <input\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            checked={Boolean(checked)}\n            className={[\n              `${inputBaseClass}__control`,\n              variant !== 'default' && `${inputBaseClass}__control--${variant}`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            disabled={readOnly}\n            id={id}\n            name={name}\n            onChange={handleToggle}\n            ref={inputRef}\n            required={required}\n            title={name}\n            type=\"checkbox\"\n          />\n          {/* Both marks are always rendered and revealed by CSS, so an uncontrolled\n              input that changes without React knowing still shows the right mark. */}\n          <span className={`${inputBaseClass}__visuals`}>\n            <Mark className={`${inputBaseClass}__mixed`} shape=\"mixed\" />\n            <Mark className={`${inputBaseClass}__check`} shape=\"check\" />\n          </span>\n        </div>\n        <RenderCustomComponent\n          CustomComponent={Label}\n          Fallback={\n            <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n          }\n        />\n        {Error}\n      </div>\n      {tooltip && (\n        <Tooltip alignCaret=\"left\" className={`${inputBaseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {AfterInput}\n    </div>\n  )\n}\n\nconst markShapes = {\n  check: { d: 'M5.00012 8.5L7.5 11L11.5 5', shapeRendering: 'geometricPrecision' },\n  mixed: { d: 'M5 8H11', shapeRendering: 'crispEdges' },\n} as const\n\n/**\n * Each mark is drawn twice: a wider halo stroke underneath, then the mark itself on\n * top. The halo is what keeps the mark legible against the brand fill.\n */\nconst Mark: React.FC<{\n  readonly className: string\n  readonly shape: keyof typeof markShapes\n}> = ({ className, shape }) => {\n  const { d, shapeRendering } = markShapes[shape]\n\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      height={16}\n      viewBox=\"0 0 16 16\"\n      width={16}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path className={`${inputBaseClass}__mark-halo`} d={d} shapeRendering={shapeRendering} />\n      <path className={`${inputBaseClass}__mark`} d={d} shapeRendering={shapeRendering} />\n    </svg>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["c","_c","React","useEffect","useId","useState","RenderCustomComponent","Tooltip","FieldLabel","CheckIcon","LineIcon","inputBaseClass","CheckboxInput","t0","$","id","idFromProps","name","AfterInput","ariaLabelFromProps","ariaLabelledByFromProps","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","t1","undefined","isHydrated","setIsHydrated","showTooltip","setShowTooltip","fallbackID","ariaLabel","ariaLabelledBy","t2","t3","Symbol","for","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","t13","t14","_jsx","disabled","onChange","ref","title","type","t15","t16","_jsxs","onPointerEnter","onPointerLeave","children","CustomComponent","Fallback","htmlFor","alignCaret","show"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useEffect, useId, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { LineIcon } from '../../icons/Line/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly 'aria-label'?: string\n  readonly 'aria-labelledby'?: string\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly Error?: React.ReactNode\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly tooltip?: string\n  /**\n   * Visual variant for the checkbox\n   * - 'default': Dark border, transparent background (for form fields)\n   * - 'muted': Light gray background and border (for tables)\n   */\n  readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  'aria-label': ariaLabelFromProps,\n  'aria-labelledby': ariaLabelledByFromProps,\n  BeforeInput,\n  checked,\n  className,\n  Error,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n  tooltip,\n  variant = 'default',\n}) => {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [showTooltip, setShowTooltip] = useState(false)\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n  const ariaLabel = ariaLabelFromProps || undefined\n  const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps || name\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const readOnly = readOnlyFromProps || !isHydrated\n\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        readOnly && `${inputBaseClass}--read-only`,\n        tooltip && `${inputBaseClass}--has-tooltip`,\n        variant !== 'default' && `${inputBaseClass}--${variant}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n      onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n    >\n      {BeforeInput}\n      <div className={`${inputBaseClass}__wrap`}>\n        <div className={`${inputBaseClass}__input`}>\n          <input\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            checked={Boolean(checked)}\n            disabled={readOnly}\n            id={id}\n            name={name}\n            onChange={onToggle}\n            ref={inputRef}\n            required={required}\n            title={name}\n            type=\"checkbox\"\n          />\n          <span\n            className={[`${inputBaseClass}__icon`, !checked && partialChecked ? 'partial' : 'check']\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {checked && <CheckIcon />}\n            {!checked && partialChecked && <LineIcon />}\n          </span>\n        </div>\n        <RenderCustomComponent\n          CustomComponent={Label}\n          Fallback={\n            <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n          }\n        />\n        {Error}\n      </div>\n      {tooltip && (\n        <Tooltip alignCaret=\"left\" className={`${inputBaseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {AfterInput}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}