@multiplatform.one/forms 6.0.4 → 6.3.0

package/dist/esm/Form/Form.stories.native.js

@@ -1,1828 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { action } from "@multiplatform.one/storybook";
-import { BarcodeIcon, CameraIcon, ClockIcon, EraserIcon, NavigationArrowIcon, StarIcon, XIcon } from "@phosphor-icons/react";
-import { useForm } from "@tanstack/react-form";
-import { useCallback, useState } from "react";
-import { H3, Separator, YStack } from "tamagui";
-import { FormGrid } from "../FormGrid.native.js";
-import { Button } from "../Button/index.native.js";
-import { Barcode } from "../fields/Barcode/index.native.js";
-import { Checkbox, CheckboxGroup } from "../fields/Checkbox/index.native.js";
-import { ColorPicker } from "../fields/ColorPicker/index.native.js";
-import { Combobox } from "../fields/Combobox/index.native.js";
-import { authorOptions, shortAuthorOptions } from "../fields/Combobox/authorOptions.native.js";
-import { DatePicker, DateRangePicker, DatetimePicker, MonthPicker, MultiDatePicker } from "../fields/DatePicker/index.native.js";
-import { RichTextEditor } from "@multiplatform.one/rich-text";
-import { Duration } from "../fields/Duration/index.native.js";
-import { FileUpload } from "../fields/FileUpload/index.native.js";
-import { Geolocation } from "../fields/Geolocation/index.native.js";
-import { Input } from "../fields/Input/index.native.js";
-import { MentionInput } from "../fields/MentionInput/index.native.js";
-import { Stepper } from "../fields/Stepper/index.native.js";
-import { OTPInput } from "../fields/OTPInput/index.native.js";
-import { PhoneInput } from "../fields/PhoneInput/index.native.js";
-import { Progress } from "../fields/Progress/index.native.js";
-import { RadioGroup } from "../fields/RadioGroup/index.native.js";
-import { Rating } from "../fields/Rating/index.native.js";
-import { Select } from "../fields/Select/index.native.js";
-import { Signature } from "../fields/Signature/index.native.js";
-import { Slider } from "../fields/Slider/index.native.js";
-import { Switch } from "../fields/Switch/index.native.js";
-import { TextArea } from "../fields/TextArea/index.native.js";
-import { TimePicker } from "../fields/TimePicker/index.native.js";
-import { ToggleGroup } from "../fields/ToggleGroup/index.native.js";
-import { Form } from "./index.native.js";
-var meta = {
-  title: "Forms/Form",
-  component: Form,
-  parameters: {
-    docs: {
-      description: {
-        component: "A form wrapper component that provides TanStack Form context and handles form submission with URL state sync support."
-      }
-    }
-  },
-  argTypes: {
-    syncWithUrl: {
-      control: "boolean",
-      description: "Sync form state with URL query parameters"
-    },
-    urlDebounceMs: {
-      control: "number",
-      description: "Debounce time for URL sync in milliseconds"
-    }
-  }
-};
-var Form_stories_default = meta;
-var Basic = function Basic2() {
-  return /* @__PURE__ */_jsx(Form, {
-    formOptions: {
-      defaultValues: {
-        username: "",
-        email: ""
-      }
-    },
-    onSubmit: function onSubmit(values) {
-      return action("onSubmit")(values);
-    },
-    children: /* @__PURE__ */_jsxs(YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */_jsx(Input, {
-        label: "Username",
-        name: "username",
-        required: true
-      }), /* @__PURE__ */_jsx(Input, {
-        label: "Email",
-        name: "email",
-        required: true
-      }), /* @__PURE__ */_jsx(Button, {
-        action: "submit",
-        children: "Submit"
-      })]
-    })
-  });
-};
-Basic.storyName = "Main";
-var WithValidation = function WithValidation2() {
-  return /* @__PURE__ */_jsx(Form, {
-    formOptions: {
-      defaultValues: {
-        password: "",
-        confirmPassword: ""
-      }
-    },
-    onSubmit: function onSubmit(values) {
-      return action("onSubmit")(values);
-    },
-    children: /* @__PURE__ */_jsxs(YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */_jsx(Input, {
-        label: "Password",
-        name: "password",
-        validators: {
-          onChange: function onChange(param) {
-            var {
-              value
-            } = param;
-            return value.length < 8 ? "Password must be at least 8 characters" : void 0;
-          }
-        },
-        required: true
-      }), /* @__PURE__ */_jsx(Input, {
-        label: "Confirm Password",
-        name: "confirmPassword",
-        validators: {
-          onChangeListenTo: ["password"],
-          onChange: function onChange(param) {
-            var {
-              value,
-              fieldApi
-            } = param;
-            var password = fieldApi.form.getFieldValue("password");
-            return value !== password ? "Passwords must match" : void 0;
-          }
-        },
-        required: true
-      }), /* @__PURE__ */_jsx(Button, {
-        action: "submit",
-        children: "Create Account"
-      })]
-    })
-  });
-};
-var DynamicFields = function DynamicFields2() {
-  var form = useForm({
-    defaultValues: {
-      accountType: "personal",
-      companyName: "",
-      personalInfo: ""
-    },
-    onSubmit: async function onSubmit(param) {
-      var {
-        value
-      } = param;
-      action("onSubmit")(value);
-    }
-  });
-  return /* @__PURE__ */_jsx(Form, {
-    form,
-    onSubmit: function onSubmit() {
-      return form.handleSubmit();
-    },
-    children: /* @__PURE__ */_jsxs(YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */_jsx(Select, {
-        label: "Account Type",
-        name: "accountType",
-        required: true,
-        options: [{
-          label: "Personal",
-          value: "personal"
-        }, {
-          label: "Business",
-          value: "business"
-        }]
-      }), function () {
-        var FormSubscribe = form.Subscribe;
-        return /* @__PURE__ */_jsx(FormSubscribe, {
-          selector: function selector(state) {
-            return [state.values.accountType];
-          },
-          children: function children(param) {
-            var [accountType] = param;
-            return /* @__PURE__ */_jsx(_Fragment, {
-              children: accountType === "business" ? /* @__PURE__ */_jsx(Input, {
-                label: "Company Name",
-                name: "companyName",
-                required: true,
-                helperText: "Enter your company name"
-              }) : /* @__PURE__ */_jsx(Input, {
-                label: "Personal Info",
-                name: "personalInfo",
-                helperText: "Tell us about yourself"
-              })
-            });
-          }
-        });
-      }(), /* @__PURE__ */_jsx(Button, {
-        action: "submit",
-        children: "Submit"
-      })]
-    })
-  });
-};
-var ReadOnlyAndDisabledSubmit = function ReadOnlyAndDisabledSubmit2() {
-  return /* @__PURE__ */_jsx(Form, {
-    formOptions: {
-      defaultValues: {
-        editable: "included in submit",
-        readOnlyField: "included in submit",
-        disabledField: "included in submit (not editable)"
-      }
-    },
-    onSubmit: function onSubmit(values) {
-      return action("onSubmit")(values);
-    },
-    children: /* @__PURE__ */_jsxs(YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */_jsx(Input, {
-        label: "Editable",
-        name: "editable"
-      }), /* @__PURE__ */_jsx(Input, {
-        label: "Read Only",
-        name: "readOnlyField",
-        readOnly: true
-      }), /* @__PURE__ */_jsx(Input, {
-        label: "Disabled",
-        name: "disabledField",
-        disabled: true
-      }), /* @__PURE__ */_jsx(Button, {
-        action: "submit",
-        children: "Submit"
-      })]
-    })
-  });
-};
-ReadOnlyAndDisabledSubmit.parameters = {
-  docs: {
-    description: {
-      story: "readOnly values are included in submit. Disabled fields are non-editable and visually muted but remain in TanStack Form payload unless filtered by app logic."
-    }
-  }
-};
-var InputWithLinkResolver = function InputWithLinkResolver2() {
-  return /* @__PURE__ */_jsx(Form, {
-    formOptions: {
-      defaultValues: {
-        itemCode: "ITEM-001"
-      }
-    },
-    onSubmit: function onSubmit(values) {
-      return action("onSubmit")(values);
-    },
-    children: /* @__PURE__ */_jsxs(YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */_jsx(Input, {
-        label: "Item Code (readOnly + linkResolver)",
-        name: "itemCode",
-        readOnly: true,
-        linkResolver: function linkResolver(v) {
-          return v ? `/items/${String(v)}` : null;
-        }
-      }), /* @__PURE__ */_jsx(Button, {
-        action: "submit",
-        children: "Submit"
-      })]
-    })
-  });
-};
-InputWithLinkResolver.parameters = {
-  docs: {
-    description: {
-      story: "When readOnly and linkResolver are provided, the value renders as a Link when linkResolver returns href. Frappe wrappers provide doctype-aware resolvers."
-    }
-  }
-};
-var shortPriorityOptions = [{
-  value: "low",
-  label: "Low"
-}, {
-  value: "medium",
-  label: "Medium"
-}, {
-  value: "high",
-  label: "High"
-}];
-var shortCountryOptions = [{
-  value: "us",
-  label: "United States",
-  keywords: "usa america"
-}, {
-  value: "ca",
-  label: "Canada",
-  keywords: "north america"
-}, {
-  value: "uk",
-  label: "United Kingdom",
-  keywords: "britain england"
-}, {
-  value: "de",
-  label: "Germany",
-  keywords: "europe deutschland"
-}, {
-  value: "fr",
-  label: "France",
-  keywords: "europe paris"
-}];
-var countryOptions = [{
-  value: "af",
-  label: "Afghanistan",
-  keywords: "asia kabul"
-}, {
-  value: "al",
-  label: "Albania",
-  keywords: "europe tirana"
-}, {
-  value: "dz",
-  label: "Algeria",
-  keywords: "africa algiers"
-}, {
-  value: "ad",
-  label: "Andorra",
-  keywords: "europe"
-}, {
-  value: "ao",
-  label: "Angola",
-  keywords: "africa luanda"
-}, {
-  value: "ag",
-  label: "Antigua and Barbuda",
-  keywords: "caribbean"
-}, {
-  value: "ar",
-  label: "Argentina",
-  keywords: "south america buenos aires"
-}, {
-  value: "am",
-  label: "Armenia",
-  keywords: "asia yerevan"
-}, {
-  value: "au",
-  label: "Australia",
-  keywords: "oceania sydney canberra"
-}, {
-  value: "at",
-  label: "Austria",
-  keywords: "europe vienna wien"
-}, {
-  value: "az",
-  label: "Azerbaijan",
-  keywords: "asia baku"
-}, {
-  value: "bs",
-  label: "Bahamas",
-  keywords: "caribbean nassau"
-}, {
-  value: "bh",
-  label: "Bahrain",
-  keywords: "middle east asia"
-}, {
-  value: "bd",
-  label: "Bangladesh",
-  keywords: "asia dhaka"
-}, {
-  value: "bb",
-  label: "Barbados",
-  keywords: "caribbean"
-}, {
-  value: "by",
-  label: "Belarus",
-  keywords: "europe minsk"
-}, {
-  value: "be",
-  label: "Belgium",
-  keywords: "europe brussels"
-}, {
-  value: "bz",
-  label: "Belize",
-  keywords: "central america"
-}, {
-  value: "bj",
-  label: "Benin",
-  keywords: "africa"
-}, {
-  value: "bt",
-  label: "Bhutan",
-  keywords: "asia thimphu"
-}, {
-  value: "bo",
-  label: "Bolivia",
-  keywords: "south america"
-}, {
-  value: "ba",
-  label: "Bosnia and Herzegovina",
-  keywords: "europe sarajevo"
-}, {
-  value: "bw",
-  label: "Botswana",
-  keywords: "africa gaborone"
-}, {
-  value: "br",
-  label: "Brazil",
-  keywords: "south america brasilia"
-}, {
-  value: "bn",
-  label: "Brunei",
-  keywords: "asia"
-}, {
-  value: "bg",
-  label: "Bulgaria",
-  keywords: "europe sofia"
-}, {
-  value: "bf",
-  label: "Burkina Faso",
-  keywords: "africa"
-}, {
-  value: "bi",
-  label: "Burundi",
-  keywords: "africa"
-}, {
-  value: "kh",
-  label: "Cambodia",
-  keywords: "asia phnom penh"
-}, {
-  value: "cm",
-  label: "Cameroon",
-  keywords: "africa yaounde"
-}, {
-  value: "ca",
-  label: "Canada",
-  keywords: "north america ottawa"
-}, {
-  value: "cv",
-  label: "Cape Verde",
-  keywords: "africa"
-}, {
-  value: "cf",
-  label: "Central African Republic",
-  keywords: "africa"
-}, {
-  value: "td",
-  label: "Chad",
-  keywords: "africa ndjamena"
-}, {
-  value: "cl",
-  label: "Chile",
-  keywords: "south america santiago"
-}, {
-  value: "cn",
-  label: "China",
-  keywords: "asia beijing"
-}, {
-  value: "co",
-  label: "Colombia",
-  keywords: "south america bogota"
-}, {
-  value: "km",
-  label: "Comoros",
-  keywords: "africa"
-}, {
-  value: "cg",
-  label: "Congo",
-  keywords: "africa brazzaville"
-}, {
-  value: "cd",
-  label: "Congo (DRC)",
-  keywords: "africa kinshasa"
-}, {
-  value: "cr",
-  label: "Costa Rica",
-  keywords: "central america san jose"
-}, {
-  value: "hr",
-  label: "Croatia",
-  keywords: "europe zagreb"
-}, {
-  value: "cu",
-  label: "Cuba",
-  keywords: "caribbean havana"
-}, {
-  value: "cy",
-  label: "Cyprus",
-  keywords: "europe nicosia"
-}, {
-  value: "cz",
-  label: "Czech Republic",
-  keywords: "europe prague"
-}, {
-  value: "dk",
-  label: "Denmark",
-  keywords: "europe copenhagen"
-}, {
-  value: "dj",
-  label: "Djibouti",
-  keywords: "africa"
-}, {
-  value: "dm",
-  label: "Dominica",
-  keywords: "caribbean"
-}, {
-  value: "do",
-  label: "Dominican Republic",
-  keywords: "caribbean santo domingo"
-}, {
-  value: "ec",
-  label: "Ecuador",
-  keywords: "south america quito"
-}, {
-  value: "eg",
-  label: "Egypt",
-  keywords: "africa cairo"
-}, {
-  value: "sv",
-  label: "El Salvador",
-  keywords: "central america"
-}, {
-  value: "gq",
-  label: "Equatorial Guinea",
-  keywords: "africa"
-}, {
-  value: "er",
-  label: "Eritrea",
-  keywords: "africa asmara"
-}, {
-  value: "ee",
-  label: "Estonia",
-  keywords: "europe tallinn baltic"
-}, {
-  value: "sz",
-  label: "Eswatini",
-  keywords: "africa swaziland"
-}, {
-  value: "et",
-  label: "Ethiopia",
-  keywords: "africa addis ababa"
-}, {
-  value: "fj",
-  label: "Fiji",
-  keywords: "oceania pacific"
-}, {
-  value: "fi",
-  label: "Finland",
-  keywords: "europe helsinki nordic"
-}, {
-  value: "fr",
-  label: "France",
-  keywords: "europe paris"
-}, {
-  value: "ga",
-  label: "Gabon",
-  keywords: "africa"
-}, {
-  value: "gm",
-  label: "Gambia",
-  keywords: "africa"
-}, {
-  value: "ge",
-  label: "Georgia",
-  keywords: "europe tbilisi"
-}, {
-  value: "de",
-  label: "Germany",
-  keywords: "europe berlin deutschland"
-}, {
-  value: "gh",
-  label: "Ghana",
-  keywords: "africa accra"
-}, {
-  value: "gr",
-  label: "Greece",
-  keywords: "europe athens"
-}, {
-  value: "gd",
-  label: "Grenada",
-  keywords: "caribbean"
-}, {
-  value: "gt",
-  label: "Guatemala",
-  keywords: "central america"
-}, {
-  value: "gn",
-  label: "Guinea",
-  keywords: "africa conakry"
-}, {
-  value: "gw",
-  label: "Guinea-Bissau",
-  keywords: "africa"
-}, {
-  value: "gy",
-  label: "Guyana",
-  keywords: "south america"
-}, {
-  value: "ht",
-  label: "Haiti",
-  keywords: "caribbean port-au-prince"
-}, {
-  value: "hn",
-  label: "Honduras",
-  keywords: "central america"
-}, {
-  value: "hu",
-  label: "Hungary",
-  keywords: "europe budapest"
-}, {
-  value: "is",
-  label: "Iceland",
-  keywords: "europe reykjavik nordic"
-}, {
-  value: "in",
-  label: "India",
-  keywords: "asia new delhi mumbai"
-}, {
-  value: "id",
-  label: "Indonesia",
-  keywords: "asia jakarta"
-}, {
-  value: "ir",
-  label: "Iran",
-  keywords: "middle east tehran"
-}, {
-  value: "iq",
-  label: "Iraq",
-  keywords: "middle east baghdad"
-}, {
-  value: "ie",
-  label: "Ireland",
-  keywords: "europe dublin"
-}, {
-  value: "il",
-  label: "Israel",
-  keywords: "middle east jerusalem tel aviv"
-}, {
-  value: "it",
-  label: "Italy",
-  keywords: "europe rome roma"
-}, {
-  value: "ci",
-  label: "Ivory Coast",
-  keywords: "africa cote d'ivoire"
-}, {
-  value: "jm",
-  label: "Jamaica",
-  keywords: "caribbean kingston"
-}, {
-  value: "jp",
-  label: "Japan",
-  keywords: "asia tokyo"
-}, {
-  value: "jo",
-  label: "Jordan",
-  keywords: "middle east amman"
-}, {
-  value: "kz",
-  label: "Kazakhstan",
-  keywords: "asia astana"
-}, {
-  value: "ke",
-  label: "Kenya",
-  keywords: "africa nairobi"
-}, {
-  value: "ki",
-  label: "Kiribati",
-  keywords: "oceania pacific"
-}, {
-  value: "kw",
-  label: "Kuwait",
-  keywords: "middle east"
-}, {
-  value: "kg",
-  label: "Kyrgyzstan",
-  keywords: "asia bishkek"
-}, {
-  value: "la",
-  label: "Laos",
-  keywords: "asia vientiane"
-}, {
-  value: "lv",
-  label: "Latvia",
-  keywords: "europe riga baltic"
-}, {
-  value: "lb",
-  label: "Lebanon",
-  keywords: "middle east beirut"
-}, {
-  value: "ls",
-  label: "Lesotho",
-  keywords: "africa"
-}, {
-  value: "lr",
-  label: "Liberia",
-  keywords: "africa monrovia"
-}, {
-  value: "ly",
-  label: "Libya",
-  keywords: "africa tripoli"
-}, {
-  value: "li",
-  label: "Liechtenstein",
-  keywords: "europe"
-}, {
-  value: "lt",
-  label: "Lithuania",
-  keywords: "europe vilnius baltic"
-}, {
-  value: "lu",
-  label: "Luxembourg",
-  keywords: "europe"
-}, {
-  value: "mg",
-  label: "Madagascar",
-  keywords: "africa"
-}, {
-  value: "mw",
-  label: "Malawi",
-  keywords: "africa lilongwe"
-}, {
-  value: "my",
-  label: "Malaysia",
-  keywords: "asia kuala lumpur"
-}, {
-  value: "mv",
-  label: "Maldives",
-  keywords: "asia"
-}, {
-  value: "ml",
-  label: "Mali",
-  keywords: "africa bamako"
-}, {
-  value: "mt",
-  label: "Malta",
-  keywords: "europe valletta"
-}, {
-  value: "mh",
-  label: "Marshall Islands",
-  keywords: "oceania pacific"
-}, {
-  value: "mr",
-  label: "Mauritania",
-  keywords: "africa"
-}, {
-  value: "mu",
-  label: "Mauritius",
-  keywords: "africa"
-}, {
-  value: "mx",
-  label: "Mexico",
-  keywords: "north america mexico city"
-}, {
-  value: "fm",
-  label: "Micronesia",
-  keywords: "oceania pacific"
-}, {
-  value: "md",
-  label: "Moldova",
-  keywords: "europe chisinau"
-}, {
-  value: "mc",
-  label: "Monaco",
-  keywords: "europe"
-}, {
-  value: "mn",
-  label: "Mongolia",
-  keywords: "asia ulaanbaatar"
-}, {
-  value: "me",
-  label: "Montenegro",
-  keywords: "europe podgorica"
-}, {
-  value: "ma",
-  label: "Morocco",
-  keywords: "africa rabat"
-}, {
-  value: "mz",
-  label: "Mozambique",
-  keywords: "africa maputo"
-}, {
-  value: "mm",
-  label: "Myanmar",
-  keywords: "asia burma"
-}, {
-  value: "na",
-  label: "Namibia",
-  keywords: "africa windhoek"
-}, {
-  value: "nr",
-  label: "Nauru",
-  keywords: "oceania pacific"
-}, {
-  value: "np",
-  label: "Nepal",
-  keywords: "asia kathmandu"
-}, {
-  value: "nl",
-  label: "Netherlands",
-  keywords: "europe amsterdam holland"
-}, {
-  value: "nz",
-  label: "New Zealand",
-  keywords: "oceania wellington"
-}, {
-  value: "ni",
-  label: "Nicaragua",
-  keywords: "central america managua"
-}, {
-  value: "ne",
-  label: "Niger",
-  keywords: "africa niamey"
-}, {
-  value: "ng",
-  label: "Nigeria",
-  keywords: "africa lagos abuja"
-}, {
-  value: "kp",
-  label: "North Korea",
-  keywords: "asia pyongyang"
-}, {
-  value: "mk",
-  label: "North Macedonia",
-  keywords: "europe skopje"
-}, {
-  value: "no",
-  label: "Norway",
-  keywords: "europe oslo nordic"
-}, {
-  value: "om",
-  label: "Oman",
-  keywords: "middle east muscat"
-}, {
-  value: "pk",
-  label: "Pakistan",
-  keywords: "asia islamabad"
-}, {
-  value: "pw",
-  label: "Palau",
-  keywords: "oceania pacific"
-}, {
-  value: "ps",
-  label: "Palestine",
-  keywords: "middle east"
-}, {
-  value: "pa",
-  label: "Panama",
-  keywords: "central america"
-}, {
-  value: "pg",
-  label: "Papua New Guinea",
-  keywords: "oceania pacific"
-}, {
-  value: "py",
-  label: "Paraguay",
-  keywords: "south america asuncion"
-}, {
-  value: "pe",
-  label: "Peru",
-  keywords: "south america lima"
-}, {
-  value: "ph",
-  label: "Philippines",
-  keywords: "asia manila"
-}, {
-  value: "pl",
-  label: "Poland",
-  keywords: "europe warsaw"
-}, {
-  value: "pt",
-  label: "Portugal",
-  keywords: "europe lisbon"
-}, {
-  value: "qa",
-  label: "Qatar",
-  keywords: "middle east doha"
-}, {
-  value: "ro",
-  label: "Romania",
-  keywords: "europe bucharest"
-}, {
-  value: "ru",
-  label: "Russia",
-  keywords: "europe asia moscow"
-}, {
-  value: "rw",
-  label: "Rwanda",
-  keywords: "africa kigali"
-}, {
-  value: "kn",
-  label: "Saint Kitts and Nevis",
-  keywords: "caribbean"
-}, {
-  value: "lc",
-  label: "Saint Lucia",
-  keywords: "caribbean"
-}, {
-  value: "vc",
-  label: "Saint Vincent and the Grenadines",
-  keywords: "caribbean"
-}, {
-  value: "ws",
-  label: "Samoa",
-  keywords: "oceania pacific"
-}, {
-  value: "sm",
-  label: "San Marino",
-  keywords: "europe"
-}, {
-  value: "st",
-  label: "Sao Tome and Principe",
-  keywords: "africa"
-}, {
-  value: "sa",
-  label: "Saudi Arabia",
-  keywords: "middle east riyadh"
-}, {
-  value: "sn",
-  label: "Senegal",
-  keywords: "africa dakar"
-}, {
-  value: "rs",
-  label: "Serbia",
-  keywords: "europe belgrade"
-}, {
-  value: "sc",
-  label: "Seychelles",
-  keywords: "africa"
-}, {
-  value: "sl",
-  label: "Sierra Leone",
-  keywords: "africa freetown"
-}, {
-  value: "sg",
-  label: "Singapore",
-  keywords: "asia"
-}, {
-  value: "sk",
-  label: "Slovakia",
-  keywords: "europe bratislava"
-}, {
-  value: "si",
-  label: "Slovenia",
-  keywords: "europe ljubljana"
-}, {
-  value: "sb",
-  label: "Solomon Islands",
-  keywords: "oceania pacific"
-}, {
-  value: "so",
-  label: "Somalia",
-  keywords: "africa mogadishu"
-}, {
-  value: "za",
-  label: "South Africa",
-  keywords: "africa pretoria cape town"
-}, {
-  value: "kr",
-  label: "South Korea",
-  keywords: "asia seoul"
-}, {
-  value: "ss",
-  label: "South Sudan",
-  keywords: "africa juba"
-}, {
-  value: "es",
-  label: "Spain",
-  keywords: "europe madrid"
-}, {
-  value: "lk",
-  label: "Sri Lanka",
-  keywords: "asia colombo"
-}, {
-  value: "sd",
-  label: "Sudan",
-  keywords: "africa khartoum"
-}, {
-  value: "sr",
-  label: "Suriname",
-  keywords: "south america"
-}, {
-  value: "se",
-  label: "Sweden",
-  keywords: "europe stockholm nordic"
-}, {
-  value: "ch",
-  label: "Switzerland",
-  keywords: "europe bern zurich"
-}, {
-  value: "sy",
-  label: "Syria",
-  keywords: "middle east damascus"
-}, {
-  value: "tw",
-  label: "Taiwan",
-  keywords: "asia taipei"
-}, {
-  value: "tj",
-  label: "Tajikistan",
-  keywords: "asia dushanbe"
-}, {
-  value: "tz",
-  label: "Tanzania",
-  keywords: "africa dar es salaam"
-}, {
-  value: "th",
-  label: "Thailand",
-  keywords: "asia bangkok"
-}, {
-  value: "tl",
-  label: "Timor-Leste",
-  keywords: "asia"
-}, {
-  value: "tg",
-  label: "Togo",
-  keywords: "africa lome"
-}, {
-  value: "to",
-  label: "Tonga",
-  keywords: "oceania pacific"
-}, {
-  value: "tt",
-  label: "Trinidad and Tobago",
-  keywords: "caribbean"
-}, {
-  value: "tn",
-  label: "Tunisia",
-  keywords: "africa tunis"
-}, {
-  value: "tr",
-  label: "Turkey",
-  keywords: "europe asia ankara istanbul"
-}, {
-  value: "tm",
-  label: "Turkmenistan",
-  keywords: "asia ashgabat"
-}, {
-  value: "tv",
-  label: "Tuvalu",
-  keywords: "oceania pacific"
-}, {
-  value: "ug",
-  label: "Uganda",
-  keywords: "africa kampala"
-}, {
-  value: "ua",
-  label: "Ukraine",
-  keywords: "europe kyiv"
-}, {
-  value: "ae",
-  label: "United Arab Emirates",
-  keywords: "middle east dubai abu dhabi"
-}, {
-  value: "uk",
-  label: "United Kingdom",
-  keywords: "europe london britain england"
-}, {
-  value: "us",
-  label: "United States",
-  keywords: "north america washington usa"
-}, {
-  value: "uy",
-  label: "Uruguay",
-  keywords: "south america montevideo"
-}, {
-  value: "uz",
-  label: "Uzbekistan",
-  keywords: "asia tashkent"
-}, {
-  value: "vu",
-  label: "Vanuatu",
-  keywords: "oceania pacific"
-}, {
-  value: "va",
-  label: "Vatican City",
-  keywords: "europe rome"
-}, {
-  value: "ve",
-  label: "Venezuela",
-  keywords: "south america caracas"
-}, {
-  value: "vn",
-  label: "Vietnam",
-  keywords: "asia hanoi"
-}, {
-  value: "ye",
-  label: "Yemen",
-  keywords: "middle east sanaa"
-}, {
-  value: "zm",
-  label: "Zambia",
-  keywords: "africa lusaka"
-}, {
-  value: "zw",
-  label: "Zimbabwe",
-  keywords: "africa harare"
-}];
-var mockUserDatabase = [{
-  value: "alice",
-  label: "Alice Johnson",
-  keywords: "engineer dev"
-}, {
-  value: "bob",
-  label: "Bob Smith",
-  keywords: "designer ui"
-}, {
-  value: "charlie",
-  label: "Charlie Brown",
-  keywords: "pm product"
-}, {
-  value: "diana",
-  label: "Diana Prince",
-  keywords: "lead"
-}, {
-  value: "eve",
-  label: "Eve Wilson",
-  keywords: "qa test"
-}, {
-  value: "frank",
-  label: "Frank Miller",
-  keywords: "backend"
-}, {
-  value: "grace",
-  label: "Grace Lee",
-  keywords: "frontend"
-}, {
-  value: "henry",
-  label: "Henry Ford",
-  keywords: "ops"
-}, {
-  value: "iris",
-  label: "Iris Chang",
-  keywords: "data science ml"
-}, {
-  value: "jack",
-  label: "Jack Reacher",
-  keywords: "security infra"
-}, {
-  value: "karen",
-  label: "Karen Wu",
-  keywords: "mobile ios"
-}, {
-  value: "leo",
-  label: "Leo Tanaka",
-  keywords: "devops cloud"
-}, {
-  value: "maya",
-  label: "Maya Patel",
-  keywords: "fullstack react"
-}, {
-  value: "nick",
-  label: "Nick Rivera",
-  keywords: "backend go"
-}, {
-  value: "olivia",
-  label: "Olivia Chen",
-  keywords: "design systems"
-}, {
-  value: "paul",
-  label: "Paul Nguyen",
-  keywords: "database sql"
-}, {
-  value: "quinn",
-  label: "Quinn Harper",
-  keywords: "platform sre"
-}, {
-  value: "rosa",
-  label: "Rosa Martinez",
-  keywords: "analytics data"
-}, {
-  value: "sam",
-  label: "Sam O'Brien",
-  keywords: "frontend vue"
-}, {
-  value: "tara",
-  label: "Tara Singh",
-  keywords: "ml research"
-}, {
-  value: "uma",
-  label: "Uma Krishnan",
-  keywords: "architect"
-}, {
-  value: "vic",
-  label: "Vic Romano",
-  keywords: "product manager"
-}, {
-  value: "wendy",
-  label: "Wendy Zhou",
-  keywords: "ux research"
-}, {
-  value: "xander",
-  label: "Xander Blake",
-  keywords: "embedded systems"
-}, {
-  value: "yuki",
-  label: "Yuki Yamamoto",
-  keywords: "compiler rust"
-}, {
-  value: "zara",
-  label: "Zara Ahmed",
-  keywords: "ai nlp"
-}];
-var mockPageSize = 20;
-var mockUserInitialPage = mockUserDatabase.slice(0, mockPageSize);
-var userMentions = {
-  trigger: "@",
-  data: [{
-    id: "1",
-    display: "Alice",
-    description: "Engineer"
-  }, {
-    id: "2",
-    display: "Bob",
-    description: "Designer"
-  }, {
-    id: "3",
-    display: "Charlie",
-    description: "PM"
-  }],
-  allowSpace: false,
-  insertSpace: true
-};
-var AllFields = function AllFields2() {
-  var [userSearchOptions, setUserSearchOptions] = useState(mockUserInitialPage);
-  var [userSearchLoading, setUserSearchLoading] = useState(false);
-  var handleUserSearch = useCallback(function (query) {
-    setUserSearchLoading(true);
-    var timer = setTimeout(function () {
-      var results = (query.trim() ? mockUserDatabase.filter(function (u) {
-        return u.label.toLowerCase().includes(query.toLowerCase()) || u.keywords && u.keywords.toLowerCase().includes(query.toLowerCase());
-      }) : mockUserDatabase).slice(0, mockPageSize);
-      setUserSearchOptions(results);
-      setUserSearchLoading(false);
-    }, 150);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, []);
-  var form = useForm({
-    defaultValues: {
-      fullName: "",
-      email: "",
-      bio: "",
-      age: 25,
-      country: "",
-      priority: "",
-      countries: [],
-      author: "",
-      authors: [],
-      userSearch: "",
-      usersMulti: [],
-      role: "",
-      theme: "light",
-      alignment: "center",
-      volume: [50],
-      birthDate: null,
-      appointmentDatetime: null,
-      fiscalMonth: null,
-      vacationDates: [],
-      projectDateRange: null,
-      startTime: "09:00",
-      taskDuration: 3600,
-      richContent: "<p>Welcome to the <strong>rich text</strong> editor!</p>",
-      markdownContent: "# Hello\n\nThis is **markdown** content.",
-      features: [],
-      phone: "",
-      otp: "",
-      brandColor: "#3B82F6",
-      comment: {
-        text: "",
-        mentions: []
-      },
-      avatar: null,
-      acceptTerms: false,
-      notifications: true,
-      completion: 65,
-      rating: 0.6,
-      signature: "",
-      barcode: "",
-      location: JSON.stringify({
-        lat: 40.7128,
-        lng: -74.006
-      }),
-      items: []
-    },
-    onSubmit: async function onSubmit(param) {
-      var {
-        value
-      } = param;
-      action("onSubmit")(value);
-    }
-  });
-  return /* @__PURE__ */_jsx(Form, {
-    form,
-    children: /* @__PURE__ */_jsxs(YStack, {
-      gap: "$4",
-      children: [/* @__PURE__ */_jsx(H3, {
-        children: "Field Height Comparison (2 columns)"
-      }), /* @__PURE__ */_jsxs(FormGrid, {
-        columns: 2,
-        gap: 16,
-        children: [/* @__PURE__ */_jsx(Input, {
-          label: "Full Name",
-          name: "fullName",
-          placeholder: "Jane Doe",
-          helperText: "Your first and last name",
-          required: true
-        }), /* @__PURE__ */_jsx(Input, {
-          label: "Email",
-          name: "email",
-          placeholder: "jane@example.com",
-          helperText: "We'll never share your email",
-          required: true
-        }), /* @__PURE__ */_jsx(Select, {
-          label: "Country",
-          name: "country",
-          placeholder: "Select a country",
-          options: countryOptions,
-          required: true
-        }), /* @__PURE__ */_jsx(Select, {
-          label: "Priority",
-          name: "priority",
-          placeholder: "Select priority",
-          options: shortPriorityOptions,
-          helperText: "Short list (no scroll)"
-        }), /* @__PURE__ */_jsx(Combobox, {
-          label: "Author",
-          name: "author",
-          options: authorOptions,
-          placeholder: "Search and select...",
-          searchPlaceholder: "Type to search...",
-          helperText: "Full list, filters locally"
-        }), /* @__PURE__ */_jsx(Combobox, {
-          label: "User",
-          name: "userSearch",
-          options: userSearchOptions,
-          placeholder: "Type to search users...",
-          searchPlaceholder: "Type to search...",
-          emptyMessage: "No users found.",
-          onSearch: handleUserSearch,
-          loading: userSearchLoading,
-          helperText: "onSearch callback (simulated API)"
-        }), /* @__PURE__ */_jsx(DatePicker, {
-          label: "Birth Date",
-          name: "birthDate",
-          helperText: "Select your date of birth"
-        }), /* @__PURE__ */_jsx(DatetimePicker, {
-          label: "Appointment",
-          name: "appointmentDatetime",
-          helperText: "Select date and time"
-        }), /* @__PURE__ */_jsx(TimePicker, {
-          label: "Start Time",
-          name: "startTime",
-          helperText: "When does your day begin?",
-          clockIcon: /* @__PURE__ */_jsx(ClockIcon, {
-            size: 16
-          })
-        }), /* @__PURE__ */_jsx(MonthPicker, {
-          label: "Fiscal Month",
-          name: "fiscalMonth",
-          helperText: "Select month and year"
-        }), /* @__PURE__ */_jsx(ColorPicker, {
-          label: "Brand Color",
-          name: "brandColor",
-          helperText: "Pick your favorite color"
-        }), /* @__PURE__ */_jsx(DateRangePicker, {
-          label: "Project Dates",
-          name: "projectDateRange",
-          helperText: "Select start and end dates"
-        }), /* @__PURE__ */_jsx(PhoneInput, {
-          label: "Phone Number",
-          name: "phone",
-          helperText: "Your contact number"
-        }), /* @__PURE__ */_jsx(MultiDatePicker, {
-          label: "Vacation Days",
-          name: "vacationDates",
-          helperText: "Select multiple dates",
-          limit: 10
-        }), /* @__PURE__ */_jsx(Stepper, {
-          label: "Age",
-          name: "age",
-          min: 0,
-          max: 150,
-          helperText: "Your current age"
-        }), /* @__PURE__ */_jsx(OTPInput, {
-          label: "Verification Code",
-          name: "otp",
-          length: 6,
-          helperText: "Enter the 6-digit code"
-        }), /* @__PURE__ */_jsx(Duration, {
-          label: "Task Duration",
-          name: "taskDuration",
-          helperText: "How long will this take?",
-          clockIcon: /* @__PURE__ */_jsx(ClockIcon, {
-            size: 16
-          })
-        }), /* @__PURE__ */_jsx(Checkbox, {
-          label: "Accept Terms & Conditions",
-          name: "acceptTerms"
-        }), /* @__PURE__ */_jsx(Slider, {
-          label: "Volume",
-          name: "volume",
-          min: 0,
-          max: 100,
-          helperText: "Adjust the volume"
-        }), /* @__PURE__ */_jsx(Switch, {
-          label: "Enable Notifications",
-          name: "notifications",
-          helperText: "Receive push notifications"
-        }), /* @__PURE__ */_jsx(Rating, {
-          label: "Quality Rating",
-          name: "rating",
-          helperText: "Rate from 1 to 5 stars",
-          starIcon: StarIcon
-        }), /* @__PURE__ */_jsx(Geolocation, {
-          label: "Location",
-          name: "location",
-          helperText: "Set your coordinates",
-          locationIcon: /* @__PURE__ */_jsx(NavigationArrowIcon, {
-            size: 16
-          })
-        }), /* @__PURE__ */_jsx(Progress, {
-          label: "Profile Completion",
-          name: "completion",
-          form,
-          helperText: "Your profile progress"
-        }), /* @__PURE__ */_jsx(Barcode, {
-          label: "Product Barcode",
-          name: "barcode",
-          helperText: "Scan or enter a barcode",
-          barcodeIcon: /* @__PURE__ */_jsx(BarcodeIcon, {
-            size: 18
-          }),
-          scanIcon: /* @__PURE__ */_jsx(CameraIcon, {
-            size: 18
-          }),
-          stopIcon: /* @__PURE__ */_jsx(XIcon, {
-            size: 18
-          })
-        })]
-      }), /* @__PURE__ */_jsx(Separator, {
-        marginTop: "$4"
-      }), /* @__PURE__ */_jsx(H3, {
-        children: "Multi-line Fields"
-      }), /* @__PURE__ */_jsxs(FormGrid, {
-        columns: 2,
-        gap: 16,
-        children: [/* @__PURE__ */_jsx(TextArea, {
-          label: "Bio",
-          name: "bio",
-          textAreaProps: {
-            placeholder: "Tell us about yourself..."
-          },
-          helperText: "A short description"
-        }), /* @__PURE__ */_jsx(MentionInput, {
-          label: "Comment",
-          name: "comment",
-          mentions: [userMentions],
-          placeholder: "Type @ to mention someone",
-          helperText: "Mention team members with @"
-        }), /* @__PURE__ */_jsx(RadioGroup, {
-          label: "Role",
-          name: "role",
-          helperText: "Select your primary role",
-          options: [{
-            value: "developer",
-            label: "Developer"
-          }, {
-            value: "designer",
-            label: "Designer"
-          }, {
-            value: "manager",
-            label: "Manager"
-          }]
-        }), /* @__PURE__ */_jsx(CheckboxGroup, {
-          label: "Features",
-          name: "features",
-          options: [{
-            value: "notifications",
-            label: "Push Notifications"
-          }, {
-            value: "emails",
-            label: "Email Updates"
-          }, {
-            value: "sms",
-            label: "SMS Alerts"
-          }],
-          helperText: "Select all that apply"
-        }), /* @__PURE__ */_jsx(ToggleGroup, {
-          label: "Theme",
-          name: "theme",
-          type: "single",
-          orientation: "vertical",
-          options: [{
-            label: "Light",
-            value: "light"
-          }, {
-            label: "Dark",
-            value: "dark"
-          }, {
-            label: "Auto",
-            value: "auto"
-          }]
-        }), /* @__PURE__ */_jsx(ToggleGroup, {
-          label: "Alignment",
-          name: "alignment",
-          type: "single",
-          orientation: "horizontal",
-          options: [{
-            label: "Left",
-            value: "left"
-          }, {
-            label: "Center",
-            value: "center"
-          }, {
-            label: "Right",
-            value: "right"
-          }]
-        })]
-      }), /* @__PURE__ */_jsx(Separator, {
-        marginTop: "$4"
-      }), /* @__PURE__ */_jsx(H3, {
-        children: "Full-width Fields"
-      }), /* @__PURE__ */_jsxs(YStack, {
-        gap: "$4",
-        children: [/* @__PURE__ */_jsx(RichTextEditor, {
-          label: "Rich Content",
-          name: "richContent",
-          helperText: "Toggle between Raw and Formatted views",
-          minHeight: 150
-        }), /* @__PURE__ */_jsx(Select, {
-          label: "Countries (Multi)",
-          name: "countries",
-          placeholder: "Select countries...",
-          options: countryOptions,
-          multiple: true,
-          helperText: "Multi-select with chips"
-        }), /* @__PURE__ */_jsx(Combobox, {
-          label: "Authors (Multi)",
-          name: "authors",
-          options: authorOptions,
-          placeholder: "Search and select authors...",
-          searchPlaceholder: "Type to search...",
-          helperText: "Multi-select combobox",
-          multiple: true
-        }), /* @__PURE__ */_jsx(Combobox, {
-          label: "Users (Multi)",
-          name: "usersMulti",
-          options: userSearchOptions,
-          placeholder: "Search and select users...",
-          searchPlaceholder: "Type to search...",
-          emptyMessage: "No users found.",
-          onSearch: handleUserSearch,
-          loading: userSearchLoading,
-          helperText: "Multi-select with onSearch callback",
-          multiple: true
-        }), /* @__PURE__ */_jsx(FileUpload, {
-          ...{
-            label: "Avatar",
-            name: "avatar",
-            form,
-            accept: "image/*",
-            helperText: "Upload a profile picture",
-            showPreview: true
-          }
-        }), /* @__PURE__ */_jsx(Signature, {
-          label: "Signature",
-          name: "signature",
-          helperText: "Sign in the box",
-          clearIcon: /* @__PURE__ */_jsx(EraserIcon, {
-            size: 16
-          })
-        })]
-      }), /* @__PURE__ */_jsx(Separator, {
-        marginTop: "$4"
-      }), /* @__PURE__ */_jsx(Button, {
-        action: "submit",
-        children: "Submit All Fields"
-      })]
-    })
-  });
-};
-AllFields.parameters = {
-  docs: {
-    description: {
-      story: "A comprehensive showcase of every available form field rendered inside a single Form, demonstrating how they integrate with TanStack Form context."
-    }
-  }
-};
-var shortListDefaults = {
-  fullName: "",
-  email: "",
-  bio: "",
-  age: 25,
-  country: "",
-  author: "",
-  role: "",
-  theme: "light",
-  alignment: "center",
-  volume: [50],
-  birthDate: null,
-  startTime: "09:00",
-  taskDuration: 3600,
-  phone: "",
-  otp: "",
-  brandColor: "#3B82F6",
-  comment: {
-    text: "",
-    mentions: []
-  },
-  avatar: null,
-  acceptTerms: false,
-  notifications: true,
-  completion: 65,
-  rating: 0.6,
-  signature: "",
-  barcode: "",
-  location: JSON.stringify({
-    lat: 40.7128,
-    lng: -74.006
-  }),
-  items: []
-};
-var AllFieldsShortLists = function AllFieldsShortLists2() {
-  var form = useForm({
-    defaultValues: shortListDefaults,
-    onSubmit: async function onSubmit(param) {
-      var {
-        value
-      } = param;
-      action("onSubmit")(value);
-    }
-  });
-  return /* @__PURE__ */_jsx(Form, {
-    form,
-    children: /* @__PURE__ */_jsxs(YStack, {
-      gap: "$4",
-      maxWidth: 500,
-      children: [/* @__PURE__ */_jsx(H3, {
-        children: "Text Inputs"
-      }), /* @__PURE__ */_jsx(Input, {
-        label: "Full Name",
-        name: "fullName",
-        placeholder: "Jane Doe",
-        helperText: "Your first and last name",
-        required: true
-      }), /* @__PURE__ */_jsx(Input, {
-        label: "Email",
-        name: "email",
-        placeholder: "jane@example.com",
-        helperText: "We'll never share your email",
-        required: true
-      }), /* @__PURE__ */_jsx(TextArea, {
-        label: "Bio",
-        name: "bio",
-        textAreaProps: {
-          placeholder: "Tell us about yourself..."
-        },
-        helperText: "A short description"
-      }), /* @__PURE__ */_jsx(Stepper, {
-        label: "Age",
-        name: "age",
-        min: 0,
-        max: 150,
-        helperText: "Your current age"
-      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(H3, {
-        children: "Selection (short lists)"
-      }), /* @__PURE__ */_jsx(Select, {
-        label: "Country",
-        name: "country",
-        placeholder: "Select a country",
-        options: shortCountryOptions,
-        required: true
-      }), /* @__PURE__ */_jsx(Combobox, {
-        label: "Author",
-        name: "author",
-        options: shortAuthorOptions,
-        placeholder: "Search and select...",
-        searchPlaceholder: "Type to search..."
-      }), /* @__PURE__ */_jsx(RadioGroup, {
-        label: "Role",
-        name: "role",
-        helperText: "Select your primary role",
-        options: [{
-          value: "developer",
-          label: "Developer"
-        }, {
-          value: "designer",
-          label: "Designer"
-        }, {
-          value: "manager",
-          label: "Manager"
-        }]
-      }), /* @__PURE__ */_jsx(ToggleGroup, {
-        label: "Theme",
-        name: "theme",
-        type: "single",
-        orientation: "vertical",
-        options: [{
-          label: "Light",
-          value: "light"
-        }, {
-          label: "Dark",
-          value: "dark"
-        }, {
-          label: "Auto",
-          value: "auto"
-        }]
-      }), /* @__PURE__ */_jsx(ToggleGroup, {
-        label: "Alignment",
-        name: "alignment",
-        type: "single",
-        orientation: "horizontal",
-        options: [{
-          label: "Left",
-          value: "left"
-        }, {
-          label: "Center",
-          value: "center"
-        }, {
-          label: "Right",
-          value: "right"
-        }]
-      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(H3, {
-        children: "Toggles"
-      }), /* @__PURE__ */_jsx(Checkbox, {
-        label: "Accept Terms & Conditions",
-        name: "acceptTerms"
-      }), /* @__PURE__ */_jsx(Switch, {
-        label: "Enable Notifications",
-        name: "notifications",
-        helperText: "Receive push notifications"
-      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(H3, {
-        children: "Range, Rating & Date/Time"
-      }), /* @__PURE__ */_jsx(Slider, {
-        label: "Volume",
-        name: "volume",
-        min: 0,
-        max: 100,
-        helperText: "Adjust the volume"
-      }), /* @__PURE__ */_jsx(Rating, {
-        label: "Quality Rating",
-        name: "rating",
-        helperText: "Rate from 1 to 5 stars",
-        starIcon: StarIcon
-      }), /* @__PURE__ */_jsx(DatePicker, {
-        label: "Birth Date",
-        name: "birthDate",
-        helperText: "Select your date of birth"
-      }), /* @__PURE__ */_jsx(TimePicker, {
-        label: "Start Time",
-        name: "startTime",
-        helperText: "When does your day begin?",
-        clockIcon: /* @__PURE__ */_jsx(ClockIcon, {
-          size: 16
-        })
-      }), /* @__PURE__ */_jsx(Duration, {
-        label: "Task Duration",
-        name: "taskDuration",
-        helperText: "How long will this take?",
-        clockIcon: /* @__PURE__ */_jsx(ClockIcon, {
-          size: 16
-        })
-      }), /* DataTable moved to @multiplatform.one/table */
-      /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(H3, {
-        children: "Specialized Inputs"
-      }), /* @__PURE__ */_jsx(PhoneInput, {
-        label: "Phone Number",
-        name: "phone",
-        helperText: "Your contact number"
-      }), /* @__PURE__ */_jsx(OTPInput, {
-        label: "Verification Code",
-        name: "otp",
-        length: 6,
-        helperText: "Enter the 6-digit code"
-      }), /* @__PURE__ */_jsx(ColorPicker, {
-        label: "Brand Color",
-        name: "brandColor",
-        helperText: "Pick your favorite color"
-      }), /* @__PURE__ */_jsx(MentionInput, {
-        label: "Comment",
-        name: "comment",
-        mentions: [userMentions],
-        placeholder: "Type @ to mention someone",
-        helperText: "Mention team members with @"
-      }), /* @__PURE__ */_jsx(FileUpload, {
-        ...{
-          label: "Avatar",
-          name: "avatar",
-          form,
-          accept: "image/*",
-          helperText: "Upload a profile picture",
-          showPreview: true
-        }
-      }), /* @__PURE__ */_jsx(Signature, {
-        label: "Signature",
-        name: "signature",
-        helperText: "Sign in the box",
-        clearIcon: /* @__PURE__ */_jsx(EraserIcon, {
-          size: 16
-        })
-      }), /* @__PURE__ */_jsx(Barcode, {
-        label: "Product Barcode",
-        name: "barcode",
-        helperText: "Scan or enter a barcode",
-        barcodeIcon: /* @__PURE__ */_jsx(BarcodeIcon, {
-          size: 18
-        }),
-        scanIcon: /* @__PURE__ */_jsx(CameraIcon, {
-          size: 18
-        }),
-        stopIcon: /* @__PURE__ */_jsx(XIcon, {
-          size: 18
-        })
-      }), /* @__PURE__ */_jsx(Geolocation, {
-        label: "Location",
-        name: "location",
-        helperText: "Set your coordinates",
-        locationIcon: /* @__PURE__ */_jsx(NavigationArrowIcon, {
-          size: 16
-        })
-      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(H3, {
-        children: "Display"
-      }), /* @__PURE__ */_jsx(Progress, {
-        label: "Profile Completion",
-        name: "completion",
-        form,
-        helperText: "Your profile progress"
-      }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(Button, {
-        action: "submit",
-        children: "Submit All Fields"
-      })]
-    })
-  });
-};
-AllFieldsShortLists.parameters = {
-  docs: {
-    description: {
-      story: "Same as All Fields but with short option lists (no scroll). Tests dropdown shrink-to-fit when content doesn't fill the viewport."
-    }
-  }
-};
-export { AllFields, AllFieldsShortLists, Basic, DynamicFields, InputWithLinkResolver, ReadOnlyAndDisabledSubmit, WithValidation, Form_stories_default as default };
-//# sourceMappingURL=Form.stories.native.js.map