@payloadcms/ui 4.0.0-internal.f11981a → 4.0.0-internal.f15737c

package/dist/fields/Checkbox/Input.js

@@ -1,171 +1,153 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useId, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, 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 = 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;
+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'
+}) => {
   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;
-  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 ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps;
+  const controlWrapRef = useRef(null);
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
   const readOnly = readOnlyFromProps || !isHydrated;
-  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];
+  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;
     }
-    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, {})]
+  }, [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"
           })]
-        }), _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];
+        })]
+      }), /*#__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'
   }
-  return t13;
+};
+/**
+ * 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
+    })]
+  });
 };
 //# sourceMappingURL=Input.js.map

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

@@ -1 +1 @@
-{"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":[]}
+{"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\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":[]}