new-sales-page-component 0.0.1

package/.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+    "workbench.colorCustomizations": {
+        "terminal.background": "#000000",
+        "terminal.foreground": "#E0E0E0",
+        "terminalCursor.background": "#E0E0E0",
+        "terminalCursor.foreground": "#E0E0E0",
+        "terminal.ansiBlack": "#000000",
+        "terminal.ansiBlue": "#6FB3D2",
+        "terminal.ansiBrightBlack": "#B0B0B0",
+        "terminal.ansiBrightBlue": "#6FB3D2",
+        "terminal.ansiBrightCyan": "#76C7B7",
+        "terminal.ansiBrightGreen": "#A1C659",
+        "terminal.ansiBrightMagenta": "#D381C3",
+        "terminal.ansiBrightRed": "#FB0120",
+        "terminal.ansiBrightWhite": "#FFFFFF",
+        "terminal.ansiBrightYellow": "#FDA331",
+        "terminal.ansiCyan": "#76C7B7",
+        "terminal.ansiGreen": "#A1C659",
+        "terminal.ansiMagenta": "#D381C3",
+        "terminal.ansiRed": "#FB0120",
+        "terminal.ansiWhite": "#E0E0E0",
+        "terminal.ansiYellow": "#FDA331",
+        "statusBar.noFolderBackground": "#092D5A",
+        "statusBar.noFolderForeground": "#F7FAFE"
+    }
+}

package/dist/index.d.mts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { InputProps } from '@chakra-ui/react';
+
+/**
+ * Planholder and Application types
+ * Defines data structures for Life Plan applications
+ */
+interface IPersonalInfo {
+    firstName?: string;
+    middleName?: string;
+    lastName: string;
+    suffix?: string;
+    birthDate?: string;
+    idType?: string;
+    idNumber?: string;
+    height?: number;
+    weight?: number;
+    gender?: string;
+    civilStatus?: string;
+    nationality?: string;
+    mobileNumber?: string;
+    emailAddress?: string;
+    mailingAddress?: string;
+    landLineNumber?: string;
+}
+interface IAddress {
+    lot?: string;
+    street?: string;
+    barangay?: string;
+    city?: string;
+    province?: string;
+    district?: string;
+}
+interface IEmployment {
+    occupation?: string;
+    employerName?: string;
+    employmentStatus?: string;
+    officeAddress?: string;
+    TIN?: string;
+    SSS?: string;
+    sourceOfIncome?: string;
+}
+
+interface FloatingLabelInputProps extends InputProps {
+    label: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+declare const FloatingLabelInput: (props: FloatingLabelInputProps) => react_jsx_runtime.JSX.Element;
+
+export { FloatingLabelInput, type IAddress, type IEmployment, type IPersonalInfo };

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { InputProps } from '@chakra-ui/react';
+
+/**
+ * Planholder and Application types
+ * Defines data structures for Life Plan applications
+ */
+interface IPersonalInfo {
+    firstName?: string;
+    middleName?: string;
+    lastName: string;
+    suffix?: string;
+    birthDate?: string;
+    idType?: string;
+    idNumber?: string;
+    height?: number;
+    weight?: number;
+    gender?: string;
+    civilStatus?: string;
+    nationality?: string;
+    mobileNumber?: string;
+    emailAddress?: string;
+    mailingAddress?: string;
+    landLineNumber?: string;
+}
+interface IAddress {
+    lot?: string;
+    street?: string;
+    barangay?: string;
+    city?: string;
+    province?: string;
+    district?: string;
+}
+interface IEmployment {
+    occupation?: string;
+    employerName?: string;
+    employmentStatus?: string;
+    officeAddress?: string;
+    TIN?: string;
+    SSS?: string;
+    sourceOfIncome?: string;
+}
+
+interface FloatingLabelInputProps extends InputProps {
+    label: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+declare const FloatingLabelInput: (props: FloatingLabelInputProps) => react_jsx_runtime.JSX.Element;
+
+export { FloatingLabelInput, type IAddress, type IEmployment, type IPersonalInfo };

package/dist/index.js

@@ -0,0 +1,218 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FloatingLabelInput: () => FloatingLabelInput
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/NewSaleForm/PersonalInfo.tsx
+var import_react3 = require("@chakra-ui/react");
+var import_react4 = require("react");
+var import_st_peter_ui = require("st-peter-ui");
+
+// src/NewSaleForm/ui/floating-label-input.tsx
+var import_react = require("react");
+var import_react2 = require("@chakra-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FloatingLabelInput = (props) => {
+  const { label, onValueChange, value, defaultValue = "", ...rest } = props;
+  const [inputState, setInputState] = (0, import_react2.useControllableState)({
+    defaultValue,
+    onChange: onValueChange,
+    value
+  });
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const shouldFloat = inputState.length > 0 || focused;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Box, { pos: "relative", w: "full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react2.Input,
+      {
+        ...rest,
+        onFocus: (e) => {
+          props.onFocus?.(e);
+          setFocused(true);
+        },
+        onBlur: (e) => {
+          props.onBlur?.(e);
+          setFocused(false);
+        },
+        onChange: (e) => {
+          props.onChange?.(e);
+          setInputState(e.target.value);
+        },
+        value: inputState,
+        "data-float": shouldFloat || void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Field.Label, { css: floatingStyles, "data-float": shouldFloat || void 0, children: label })
+  ] });
+};
+var floatingStyles = (0, import_react2.defineStyle)({
+  pos: "absolute",
+  bg: "bg",
+  px: "0.5",
+  top: "2.5",
+  insetStart: "3",
+  fontWeight: "normal",
+  pointerEvents: "none",
+  transition: "position",
+  color: "fg.muted",
+  "&[data-float]": {
+    top: "-3",
+    insetStart: "2",
+    color: "fg"
+  }
+});
+
+// src/NewSaleForm/PersonalInfo.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// src/NewSaleForm/Employment.tsx
+var import_st_peter_ui2 = require("st-peter-ui");
+var import_react5 = require("react");
+var import_react6 = require("@chakra-ui/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/NewSaleForm/Address.tsx
+var import_react7 = require("@chakra-ui/react");
+var import_st_peter_ui3 = require("st-peter-ui");
+var import_react8 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var provinceOptions = [
+  "Abra",
+  "Agusan del Norte",
+  "Agusan del Sur",
+  "Aklan",
+  "Albay",
+  "Antique",
+  "Apayao",
+  "Aurora",
+  "Basilan",
+  "Bataan",
+  "Batanes",
+  "Batangas",
+  "Benguet",
+  "Biliran",
+  "Bohol",
+  "Bukidnon",
+  "Bulacan",
+  "Cagayan",
+  "Camarines Norte",
+  "Camarines Sur",
+  "Camiguin",
+  "Capiz",
+  "Catanduanes",
+  "Cavite",
+  "Cebu",
+  "Cotabato",
+  "Davao de Oro",
+  "Davao del Norte",
+  "Davao del Sur",
+  "Davao Occidental",
+  "Davao Oriental",
+  "Dinagat Islands",
+  "Eastern Samar",
+  "Guimaras",
+  "Ifugao",
+  "Ilocos Norte",
+  "Ilocos Sur",
+  "Iloilo",
+  "Isabela",
+  "Kalinga",
+  "La Union",
+  "Laguna",
+  "Lanao del Norte",
+  "Lanao del Sur",
+  "Leyte",
+  "Maguindanao del Norte",
+  "Maguindanao del Sur",
+  "Marinduque",
+  "Masbate",
+  "Metro Manila",
+  "Misamis Occidental",
+  "Misamis Oriental",
+  "Mountain Province",
+  "Negros Occidental",
+  "Negros Oriental",
+  "Northern Samar",
+  "Nueva Ecija",
+  "Nueva Vizcaya",
+  "Occidental Mindoro",
+  "Oriental Mindoro",
+  "Palawan",
+  "Pampanga",
+  "Pangasinan",
+  "Quezon",
+  "Quirino",
+  "Rizal",
+  "Romblon",
+  "Samar",
+  "Sarangani",
+  "Siquijor",
+  "Sorsogon",
+  "South Cotabato",
+  "Southern Leyte",
+  "Sultan Kudarat",
+  "Sulu",
+  "Surigao del Norte",
+  "Surigao del Sur",
+  "Tarlac",
+  "Tawi-Tawi",
+  "Zambales",
+  "Zamboanga del Norte",
+  "Zamboanga del Sur",
+  "Zamboanga Sibugay"
+].map((prov) => ({ label: prov, value: prov }));
+var cityOptions = [
+  "Quezon City",
+  "Manila",
+  "Davao City",
+  "Caloocan",
+  "Cebu City",
+  "Zamboanga City",
+  "Taguig",
+  "Antipolo",
+  "Pasig",
+  "Valenzuela"
+].map((city) => ({ label: city, value: city }));
+var districtOptions = cityOptions;
+var barangayOptions = cityOptions;
+var provinceCollection = (0, import_react7.createListCollection)({ items: provinceOptions });
+var cityCollection = (0, import_react7.createListCollection)({ items: cityOptions });
+var districtCollection = (0, import_react7.createListCollection)({ items: districtOptions });
+var barangayCollection = (0, import_react7.createListCollection)({ items: barangayOptions });
+
+// src/NewSaleForm/LifePlanApplicationFormWrapper.tsx
+var import_react9 = require("@chakra-ui/react");
+var import_io5 = require("react-icons/io5");
+var import_bs = require("react-icons/bs");
+var import_fa = require("react-icons/fa");
+var import_react10 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/NewSaleForm/LifePlanApplicationMainWrapper.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloatingLabelInput
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/NewSaleForm/PersonalInfo.tsx","../src/NewSaleForm/ui/floating-label-input.tsx","../src/NewSaleForm/Employment.tsx","../src/NewSaleForm/Address.tsx","../src/NewSaleForm/LifePlanApplicationFormWrapper.tsx","../src/NewSaleForm/LifePlanApplicationMainWrapper.tsx"],"sourcesContent":["export * from \"./NewSaleForm/PersonalInfo\";\r\nexport * from \"./NewSaleForm/Employment\";\r\nexport * from \"./types/planholder\";\r\nexport * from \"./NewSaleForm/ui/floating-label-input\";\r\nexport * from \"./NewSaleForm/Address\";\r\nexport * from \"./NewSaleForm/LifePlanApplicationFormWrapper\";\r\nexport * from \"./NewSaleForm/LifePlanApplicationMainWrapper\";\r\n\r\n\r\n\r\n\r\n","import {\r\n  Box,\r\n  createListCollection,\r\n  Field,\r\n  Grid,\r\n  Input,\r\n  Select,\r\n  Separator,\r\n  VStack,\r\n} from \"@chakra-ui/react\";\r\nimport { useState } from \"react\";\r\nimport { Body } from \"st-peter-ui\";\r\nimport FloatingLabelInput from \"./ui/floating-label-input\";\r\nimport type { IPersonalInfo } from \"../types/planholder\";\r\ninterface PersonalInfoProps {\r\n  value?: IPersonalInfo;\r\n  onChange?: (value: IPersonalInfo) => void;\r\n}\r\n\r\nconst PersonalInfo = ({ value, onChange }: PersonalInfoProps) => {\r\n  const idCollection = createListCollection({\r\n    items: [\r\n      { label: \"Passport\", value: \"passport\" },\r\n      { label: \"Driver's License\", value: \"driver_license\" },\r\n      { label: \"Philippine Identification Card\", value: \"national_id\" },\r\n    ],\r\n  });\r\n  const [formData, setFormData] = useState<IPersonalInfo>({\r\n    firstName: value?.firstName ?? \"\",\r\n    middleName: value?.middleName ?? \"\",\r\n    lastName: value?.lastName ?? \"\",\r\n    suffix: value?.suffix ?? \"\",\r\n    birthDate: value?.birthDate ?? \"\",\r\n    idType: value?.idType ?? \"\",\r\n    idNumber: value?.idNumber ?? \"\",\r\n    height: value?.height ?? 0,\r\n    weight: value?.weight ?? 0,\r\n    gender: value?.gender ?? \"\",\r\n    civilStatus: value?.civilStatus ?? \"\",\r\n    nationality: value?.nationality ?? \"\",\r\n    mobileNumber: value?.mobileNumber ?? \"\",\r\n    emailAddress: value?.emailAddress ?? \"\",\r\n    mailingAddress: value?.mailingAddress ?? \"\",\r\n    landLineNumber: value?.landLineNumber ?? \"\",\r\n    // addressLine1: initialData?.addressLine1 ?? \"\",\r\n  });\r\n  return (\r\n    <>\r\n      <VStack mb={4} align=\"stretch\">\r\n        <Body fontWeight=\"bold\">Identification</Body>\r\n      </VStack>\r\n      {/* <Button onClick={() => console.log(\"Current formData:\", formData)}>\r\n        Log Form Data\r\n      </Button> */}\r\n      <VStack gap={6} align=\"stretch\" w=\"full\">\r\n        {/* Identification Section */}\r\n        <Grid templateColumns={{ base: \"1fr\", md: \"repeat(2, 1fr)\" }} gap={8}>\r\n          <Select.Root\r\n            collection={idCollection}\r\n            value={formData.idType ? [formData.idType] : []}\r\n            onValueChange={(details) =>\r\n              setFormData({ ...formData, idType: details.value[0] ?? \"\" })\r\n            }\r\n          >\r\n            <Select.HiddenSelect />\r\n            <Select.Control>\r\n              <Select.Trigger>\r\n                <Select.ValueText placeholder=\"Select ID Type\" />\r\n                {formData.idType && (\r\n                  <Box fontSize=\"sm\" color=\"fg.default\" hidden>\r\n                    {\r\n                      idCollection.items.find(\r\n                        (item) => item.value === formData.idType,\r\n                      )?.label\r\n                    }\r\n                  </Box>\r\n                )}\r\n              </Select.Trigger>\r\n              <Select.IndicatorGroup>\r\n                <Select.Indicator />\r\n              </Select.IndicatorGroup>\r\n            </Select.Control>\r\n            <Select.Positioner>\r\n              <Select.Content>\r\n                {idCollection.items.map((item) => (\r\n                  <Select.Item key={item.value} item={item}>\r\n                    {item.label}\r\n                  </Select.Item>\r\n                ))}\r\n              </Select.Content>\r\n            </Select.Positioner>\r\n          </Select.Root>\r\n        </Grid>\r\n\r\n        <Separator />\r\n\r\n        {/* Full Name Section */}\r\n        <Body fontWeight=\"bold\">Full Name</Body>\r\n\r\n        <Grid templateColumns={{ base: \"1fr\", md: \"repeat(2, 1fr)\" }} gap={8}>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"lastName\"\r\n              type=\"text\"\r\n              label=\"Last Name\"\r\n              value={formData.lastName || \"\"}\r\n            />\r\n          </Field.Root>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"firstName\"\r\n              type=\"text\"\r\n              label=\"First Name\"\r\n              value={formData.firstName || \"\"}\r\n            />\r\n          </Field.Root>\r\n        </Grid>\r\n\r\n        <Grid templateColumns={{ base: \"1fr\", md: \"repeat(2, 1fr)\" }} gap={8}>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"middleName\"\r\n              type=\"text\"\r\n              label=\"Middle Name\"\r\n              value={formData.middleName || \"\"}\r\n            />\r\n          </Field.Root>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"suffix\"\r\n              type=\"text\"\r\n              label=\"Suffix (Optional)\"\r\n              value={formData.suffix || \"\"}\r\n            />\r\n          </Field.Root>\r\n        </Grid>\r\n\r\n        <Separator />\r\n\r\n        {/* Personal Data Section */}\r\n        <Body fontWeight=\"bold\">Personal Details</Body>\r\n\r\n        <Grid templateColumns={{ base: \"1fr\", md: \"repeat(2, 1fr)\" }} gap={8}>\r\n          <Field.Root>\r\n            <Field.Label>Date of Birth</Field.Label>\r\n\r\n            <Input\r\n              id=\"dateOfBirth\"\r\n              type=\"date\"\r\n              value={formData.birthDate || \"\"}\r\n              onChange={(e) =>\r\n                setFormData({ ...formData, birthDate: e.target.value })\r\n              }\r\n            />\r\n          </Field.Root>\r\n\r\n          <Field.Root>\r\n            <Field.Label>Date of Neutralization</Field.Label>\r\n\r\n            <Input id=\"dateOfNeutralization\" type=\"date\" />\r\n          </Field.Root>\r\n\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"height\"\r\n              label=\"Height (ft)\"\r\n              // value={stateOcrValue?.height}\r\n              onChange={(e) =>\r\n                setFormData({ ...formData, height: parseFloat(e.target.value) })\r\n              }\r\n            />\r\n          </Field.Root>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"weight\"\r\n              label=\"Weight (lbs)\"\r\n              // value={stateOcrValue?.weight}\r\n              onChange={(e) =>\r\n                setFormData({ ...formData, weight: parseFloat(e.target.value) })\r\n              }\r\n            />\r\n          </Field.Root>\r\n        </Grid>\r\n\r\n        <Separator />\r\n\r\n        {/* Demographics Section */}\r\n        <Body fontWeight=\"bold\">Demographics</Body>\r\n        <Grid templateColumns={{ base: \"1fr\", md: \"repeat(2 , 1fr)\" }} gap={8}>\r\n          <Field.Root>\r\n            <Select.Root\r\n              collection={createListCollection({\r\n                items: [\r\n                  { label: \"Male\", value: \"male\" },\r\n                  { label: \"Female\", value: \"female\" },\r\n                ],\r\n              })}\r\n            >\r\n              <Select.HiddenSelect id=\"gender\" />\r\n              <Select.Control>\r\n                <Select.Trigger>\r\n                  <Select.ValueText placeholder=\"Gender\" />\r\n                </Select.Trigger>\r\n                <Select.IndicatorGroup>\r\n                  <Select.Indicator />\r\n                </Select.IndicatorGroup>\r\n              </Select.Control>\r\n              <Select.Positioner>\r\n                <Select.Content>\r\n                  {createListCollection({\r\n                    items: [\r\n                      { label: \"Male\", value: \"male\" },\r\n                      { label: \"Female\", value: \"female\" },\r\n                    ],\r\n                  }).items.map((item) => (\r\n                    <Select.Item key={item.value} item={item}>\r\n                      {item.label}\r\n                    </Select.Item>\r\n                  ))}\r\n                </Select.Content>\r\n              </Select.Positioner>\r\n            </Select.Root>\r\n          </Field.Root>\r\n          <Field.Root>\r\n            <Select.Root\r\n              collection={createListCollection({\r\n                items: [\r\n                  { label: \"Single\", value: \"single\" },\r\n                  { label: \"Married\", value: \"married\" },\r\n                  { label: \"Widowed\", value: \"widowed\" },\r\n                  { label: \"Divorced\", value: \"divorced\" },\r\n                  { label: \"Separated\", value: \"separated\" },\r\n                  { label: \"Annulled\", value: \"annulled\" },\r\n                ],\r\n              })}\r\n            >\r\n              <Select.HiddenSelect id=\"civilStatus\" />\r\n              <Select.Control>\r\n                <Select.Trigger>\r\n                  <Select.ValueText placeholder=\"Civil Status\" />\r\n                </Select.Trigger>\r\n                <Select.IndicatorGroup>\r\n                  <Select.Indicator />\r\n                </Select.IndicatorGroup>\r\n              </Select.Control>\r\n              <Select.Positioner>\r\n                <Select.Content>\r\n                  {createListCollection({\r\n                    items: [\r\n                      { label: \"Single\", value: \"single\" },\r\n                      { label: \"Married\", value: \"married\" },\r\n                      { label: \"Widowed\", value: \"widowed\" },\r\n                      { label: \"Divorced\", value: \"divorced\" },\r\n                      { label: \"Separated\", value: \"separated\" },\r\n                      { label: \"Annulled\", value: \"annulled\" },\r\n                    ],\r\n                  }).items.map((item) => (\r\n                    <Select.Item key={item.value} item={item}>\r\n                      {item.label}\r\n                    </Select.Item>\r\n                  ))}\r\n                </Select.Content>\r\n              </Select.Positioner>\r\n            </Select.Root>\r\n          </Field.Root>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"nationality\"\r\n              type=\"text\"\r\n              label=\"Nationality\"\r\n              onChange={(e) =>\r\n                setFormData({ ...formData, nationality: e.target.value })\r\n              }\r\n            />\r\n          </Field.Root>\r\n        </Grid>\r\n\r\n        <Separator />\r\n\r\n        {/* Basic Contact Info */}\r\n        <Body fontWeight=\"bold\">Contact Information</Body>\r\n\r\n        <Grid templateColumns={{ base: \"1fr\", md: \"repeat(2, 1fr)\" }} gap={8}>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"mobileNumber\"\r\n              type=\"text\"\r\n              label=\"Mobile Number\"\r\n              onChange={(e) =>\r\n                setFormData({ ...formData, mobileNumber: e.target.value })\r\n              }\r\n            />\r\n          </Field.Root>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"landlineNumber\"\r\n              type=\"text\"\r\n              label=\"Landline Number\"\r\n              onChange={(e) =>\r\n                setFormData({ ...formData, landLineNumber: e.target.value })\r\n              }\r\n            />\r\n          </Field.Root>\r\n        </Grid>\r\n\r\n        <Grid templateColumns={{ base: \"1fr\", md: \"repeat(2, 1fr)\" }} gap={8}>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"email\"\r\n              type=\"email\"\r\n              label=\"Email Address\"\r\n              onChange={(e) =>\r\n                setFormData({ ...formData, emailAddress: e.target.value })\r\n              }\r\n            />\r\n          </Field.Root>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"mailingAddress\"\r\n              type=\"text\"\r\n              label=\"Mailing Address\"\r\n              onChange={(e) =>\r\n                setFormData({ ...formData, mailingAddress: e.target.value })\r\n              }\r\n            />\r\n          </Field.Root>\r\n        </Grid>\r\n\r\n        <Separator />\r\n\r\n        <Grid templateColumns={{ base: \"1fr\", md: \"repeat(2, 1fr)\" }} gap={8}>\r\n          <Field.Root>\r\n            <FloatingLabelInput\r\n              id=\"insurability\"\r\n              type=\"text\"\r\n              label=\"Insurability\"\r\n              value=\"Insurable\"\r\n              readOnly\r\n            />\r\n          </Field.Root>\r\n        </Grid>\r\n      </VStack>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default PersonalInfo;\r\n","\"use client\";\r\nimport React, { useState } from \"react\";\r\nimport {\r\n  Box,\r\n  Field,\r\n  Input,\r\n  defineStyle,\r\n  useControllableState,\r\n  type InputProps,\r\n} from \"@chakra-ui/react\";\r\n\r\ninterface FloatingLabelInputProps extends InputProps {\r\n  label: React.ReactNode;\r\n  value?: string;\r\n  defaultValue?: string;\r\n  onValueChange?: (value: string) => void;\r\n}\r\n\r\nexport const FloatingLabelInput = (props: FloatingLabelInputProps) => {\r\n  const { label, onValueChange, value, defaultValue = \"\", ...rest } = props;\r\n\r\n  const [inputState, setInputState] = useControllableState({\r\n    defaultValue,\r\n    onChange: onValueChange,\r\n    value,\r\n  });\r\n\r\n  const [focused, setFocused] = useState(false);\r\n  const shouldFloat = inputState.length > 0 || focused;\r\n\r\n  return (\r\n    <Box pos=\"relative\" w=\"full\">\r\n      <Input\r\n        {...rest}\r\n        onFocus={(e) => {\r\n          props.onFocus?.(e);\r\n          setFocused(true);\r\n        }}\r\n        onBlur={(e) => {\r\n          props.onBlur?.(e);\r\n          setFocused(false);\r\n        }}\r\n        onChange={(e) => {\r\n          props.onChange?.(e);\r\n          setInputState(e.target.value);\r\n        }}\r\n        value={inputState}\r\n        data-float={shouldFloat || undefined}\r\n      />\r\n      <Field.Label css={floatingStyles} data-float={shouldFloat || undefined}>\r\n        {label}\r\n      </Field.Label>\r\n    </Box>\r\n  );\r\n};\r\n\r\nconst floatingStyles = defineStyle({\r\n  pos: \"absolute\",\r\n  bg: \"bg\",\r\n  px: \"0.5\",\r\n  top: \"2.5\",\r\n  insetStart: \"3\",\r\n  fontWeight: \"normal\",\r\n  pointerEvents: \"none\",\r\n  transition: \"position\",\r\n  color: \"fg.muted\",\r\n  \"&[data-float]\": {\r\n    top: \"-3\",\r\n    insetStart: \"2\",\r\n    color: \"fg\",\r\n  },\r\n});\r\n\r\nexport default FloatingLabelInput;\r\n","import FloatingLabelInput from \"./ui/floating-label-input\";\r\nimport { Body } from \"st-peter-ui\";\r\nimport type { IEmployment } from \"../types/planholder\";\r\nimport { useState } from \"react\";\r\nimport { Field, SimpleGrid, Span, VStack } from \"@chakra-ui/react\";\r\n\r\ninterface EmploymentProps {\r\n  value?: IEmployment; // Made value prop non-optional\r\n  onChange?: (value: IEmployment) => void;\r\n}\r\n\r\nconst Employment = ({ value }: EmploymentProps) => {\r\n  const [formData, setFormData] = useState<IEmployment>({\r\n    occupation: value?.occupation ?? \"\",\r\n    employerName: value?.employerName ?? \"\",\r\n    employmentStatus: value?.employmentStatus ?? \"\",\r\n    officeAddress: value?.officeAddress ?? \"\",\r\n    TIN: value?.TIN ?? \"\",\r\n    SSS: value?.SSS ?? \"\",\r\n    sourceOfIncome: value?.sourceOfIncome ?? \"\",\r\n  });\r\n  return (\r\n    <>\r\n      <VStack align=\"stretch\" gap={4} mb={4}>\r\n        <Body>\r\n          <Span fontWeight=\"bold\">Employment</Span>\r\n        </Body>\r\n      </VStack>\r\n\r\n      <SimpleGrid columns={{ base: 1, md: 2 }} gap={4} mb={4}>\r\n        <Field.Root>\r\n          <FloatingLabelInput\r\n            id=\"occupation\"\r\n            label=\"Occupation\"\r\n            value={formData.occupation ?? \"\"}\r\n            onChange={(e) => {\r\n              setFormData({ ...formData, occupation: e.target.value });\r\n            }}\r\n          />\r\n        </Field.Root>\r\n        <Field.Root>\r\n          <FloatingLabelInput\r\n            id=\"employerName\"\r\n            label=\"Employer Name\"\r\n            value={formData.employerName ?? \"\"}\r\n            onChange={(e) => {\r\n              setFormData({ ...formData, employerName: e.target.value });\r\n            }}\r\n          />\r\n        </Field.Root>\r\n      </SimpleGrid>\r\n\r\n      <SimpleGrid columns={{ base: 1, md: 2 }} gap={4} mb={4}>\r\n        <Field.Root>\r\n          <FloatingLabelInput\r\n            id=\"employmentStatus\"\r\n            label=\"Employment Status\"\r\n            value={formData.employmentStatus ?? \"\"}\r\n            onChange={(e) => {\r\n              setFormData({ ...formData, employmentStatus: e.target.value });\r\n            }}\r\n          />\r\n        </Field.Root>\r\n        <Field.Root>\r\n          <FloatingLabelInput\r\n            id=\"officeAddress\"\r\n            label=\"Office Address\"\r\n            value={formData.officeAddress ?? \"\"}\r\n            onChange={(e) => {\r\n              setFormData({ ...formData, officeAddress: e.target.value });\r\n            }}\r\n          />\r\n        </Field.Root>\r\n      </SimpleGrid>\r\n\r\n      <SimpleGrid columns={{ base: 1, md: 2 }} gap={4} mb={4}>\r\n        <Field.Root>\r\n          <FloatingLabelInput\r\n            id=\"tin\"\r\n            label=\"TIN\"\r\n            value={formData.TIN ?? \"\"}\r\n            onChange={(e) => {\r\n              setFormData({ ...formData, TIN: e.target.value });\r\n            }}\r\n          />\r\n        </Field.Root>\r\n        <Field.Root>\r\n          <FloatingLabelInput\r\n            id=\"sssGsis\"\r\n            label=\"SSS\"\r\n            value={formData.SSS ?? \"\"}\r\n            onChange={(e) => {\r\n              setFormData({ ...formData, SSS: e.target.value });\r\n            }}\r\n          />\r\n        </Field.Root>\r\n      </SimpleGrid>\r\n      <SimpleGrid columns={{ base: 1, md: 2 }} gap={4} mb={4}>\r\n        <Field.Root w=\"100%\">\r\n          <FloatingLabelInput\r\n            id=\"otherSourceOfFund\"\r\n            label=\"Other Source of Fund\"\r\n            value={formData.sourceOfIncome ?? \"\"}\r\n            onChange={(e) => {\r\n              setFormData({ ...formData, sourceOfIncome: e.target.value });\r\n            }}\r\n          />\r\n        </Field.Root>\r\n      </SimpleGrid>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Employment;\r\n","import {\r\n  Box,\r\n  createListCollection,\r\n  Field,\r\n  Portal,\r\n  Select,\r\n  SimpleGrid,\r\n  Span,\r\n  VStack,\r\n} from \"@chakra-ui/react\";\r\nimport { Body } from \"st-peter-ui\";\r\nimport { useState } from \"react\";\r\nimport type { IAddress } from \"../types/planholder\";\r\nimport FloatingLabelInput from \"./ui/floating-label-input\";\r\n\r\ninterface AddressProps {\r\n  value?: IAddress;\r\n  onChange?: (value: IAddress) => void;\r\n}\r\n\r\nconst provinceOptions = [\r\n  \"Abra\",\r\n  \"Agusan del Norte\",\r\n  \"Agusan del Sur\",\r\n  \"Aklan\",\r\n  \"Albay\",\r\n  \"Antique\",\r\n  \"Apayao\",\r\n  \"Aurora\",\r\n  \"Basilan\",\r\n  \"Bataan\",\r\n  \"Batanes\",\r\n  \"Batangas\",\r\n  \"Benguet\",\r\n  \"Biliran\",\r\n  \"Bohol\",\r\n  \"Bukidnon\",\r\n  \"Bulacan\",\r\n  \"Cagayan\",\r\n  \"Camarines Norte\",\r\n  \"Camarines Sur\",\r\n  \"Camiguin\",\r\n  \"Capiz\",\r\n  \"Catanduanes\",\r\n  \"Cavite\",\r\n  \"Cebu\",\r\n  \"Cotabato\",\r\n  \"Davao de Oro\",\r\n  \"Davao del Norte\",\r\n  \"Davao del Sur\",\r\n  \"Davao Occidental\",\r\n  \"Davao Oriental\",\r\n  \"Dinagat Islands\",\r\n  \"Eastern Samar\",\r\n  \"Guimaras\",\r\n  \"Ifugao\",\r\n  \"Ilocos Norte\",\r\n  \"Ilocos Sur\",\r\n  \"Iloilo\",\r\n  \"Isabela\",\r\n  \"Kalinga\",\r\n  \"La Union\",\r\n  \"Laguna\",\r\n  \"Lanao del Norte\",\r\n  \"Lanao del Sur\",\r\n  \"Leyte\",\r\n  \"Maguindanao del Norte\",\r\n  \"Maguindanao del Sur\",\r\n  \"Marinduque\",\r\n  \"Masbate\",\r\n  \"Metro Manila\",\r\n  \"Misamis Occidental\",\r\n  \"Misamis Oriental\",\r\n  \"Mountain Province\",\r\n  \"Negros Occidental\",\r\n  \"Negros Oriental\",\r\n  \"Northern Samar\",\r\n  \"Nueva Ecija\",\r\n  \"Nueva Vizcaya\",\r\n  \"Occidental Mindoro\",\r\n  \"Oriental Mindoro\",\r\n  \"Palawan\",\r\n  \"Pampanga\",\r\n  \"Pangasinan\",\r\n  \"Quezon\",\r\n  \"Quirino\",\r\n  \"Rizal\",\r\n  \"Romblon\",\r\n  \"Samar\",\r\n  \"Sarangani\",\r\n  \"Siquijor\",\r\n  \"Sorsogon\",\r\n  \"South Cotabato\",\r\n  \"Southern Leyte\",\r\n  \"Sultan Kudarat\",\r\n  \"Sulu\",\r\n  \"Surigao del Norte\",\r\n  \"Surigao del Sur\",\r\n  \"Tarlac\",\r\n  \"Tawi-Tawi\",\r\n  \"Zambales\",\r\n  \"Zamboanga del Norte\",\r\n  \"Zamboanga del Sur\",\r\n  \"Zamboanga Sibugay\",\r\n].map((prov) => ({ label: prov, value: prov }));\r\n\r\nconst cityOptions = [\r\n  \"Quezon City\",\r\n  \"Manila\",\r\n  \"Davao City\",\r\n  \"Caloocan\",\r\n  \"Cebu City\",\r\n  \"Zamboanga City\",\r\n  \"Taguig\",\r\n  \"Antipolo\",\r\n  \"Pasig\",\r\n  \"Valenzuela\",\r\n].map((city) => ({ label: city, value: city }));\r\n\r\nconst districtOptions = cityOptions;\r\nconst barangayOptions = cityOptions;\r\n\r\nconst provinceCollection = createListCollection({ items: provinceOptions });\r\nconst cityCollection = createListCollection({ items: cityOptions });\r\nconst districtCollection = createListCollection({ items: districtOptions });\r\nconst barangayCollection = createListCollection({ items: barangayOptions });\r\n\r\nconst Address = ({ value, onChange }: AddressProps) => {\r\n  const [form, setForm] = useState<IAddress>({\r\n    lot: value?.lot ?? \"\",\r\n    street: value?.street ?? \"\",\r\n    city: value?.city ?? \"\",\r\n    province: value?.province ?? \"\",\r\n    district: value?.district ?? \"\",\r\n    barangay: value?.barangay ?? \"\",\r\n  });\r\n\r\n  const update = (next: IAddress) => {\r\n    setForm(next);\r\n    onChange?.(next);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <VStack align=\"stretch\" gap={4} mb={4}>\r\n        <Box>\r\n          <Body>\r\n            <Span fontWeight=\"bold\">Residential Address</Span>\r\n          </Body>\r\n        </Box>\r\n      </VStack>\r\n\r\n      <SimpleGrid columns={{ base: 1, md: 2 }} gap={4}>\r\n        <Field.Root>\r\n          <FloatingLabelInput\r\n            id=\"lotNumber\"\r\n            label=\"Lot #\"\r\n            value={form.lot ?? \"\"}\r\n            onChange={(e) => update({ ...form, lot: e.target.value })}\r\n          />\r\n        </Field.Root>\r\n\r\n        <Field.Root>\r\n          <FloatingLabelInput\r\n            id=\"street\"\r\n            label=\"Street\"\r\n            value={form.street ?? \"\"}\r\n            onChange={(e) => update({ ...form, street: e.target.value })}\r\n          />\r\n        </Field.Root>\r\n\r\n        {/* Province */}\r\n        <Select.Root\r\n          value={form.province ? [form.province] : []}\r\n          onValueChange={(details) =>\r\n            update({ ...form, province: details.value[0] ?? \"\" })\r\n          }\r\n          collection={provinceCollection}\r\n        >\r\n          <Select.HiddenSelect />\r\n          <Select.Control>\r\n            <Select.Trigger>\r\n              <Select.ValueText placeholder=\"Select Province\" />\r\n            </Select.Trigger>\r\n          </Select.Control>\r\n          <Portal>\r\n            <Select.Positioner>\r\n              <Select.Content>\r\n                {provinceCollection.items.map((item) => (\r\n                  <Select.Item key={item.value} item={item}>\r\n                    {item.label}\r\n                  </Select.Item>\r\n                ))}\r\n              </Select.Content>\r\n            </Select.Positioner>\r\n          </Portal>\r\n        </Select.Root>\r\n\r\n        {/* City */}\r\n        <Select.Root\r\n          value={form.city ? [form.city] : []}\r\n          onValueChange={(details) =>\r\n            update({ ...form, city: details.value[0] ?? \"\" })\r\n          }\r\n          collection={cityCollection}\r\n        >\r\n          <Select.HiddenSelect />\r\n          <Select.Control>\r\n            <Select.Trigger>\r\n              <Select.ValueText placeholder=\"Select City\" />\r\n            </Select.Trigger>\r\n          </Select.Control>\r\n          <Portal>\r\n            <Select.Positioner>\r\n              <Select.Content>\r\n                {cityCollection.items.map((item) => (\r\n                  <Select.Item key={item.value} item={item}>\r\n                    {item.label}\r\n                  </Select.Item>\r\n                ))}\r\n              </Select.Content>\r\n            </Select.Positioner>\r\n          </Portal>\r\n        </Select.Root>\r\n\r\n        {/* District */}\r\n        <Select.Root\r\n          value={form.district ? [form.district] : []}\r\n          onValueChange={(details) =>\r\n            update({ ...form, district: details.value[0] ?? \"\" })\r\n          }\r\n          collection={districtCollection}\r\n        >\r\n          <Select.HiddenSelect />\r\n          <Select.Control>\r\n            <Select.Trigger>\r\n              <Select.ValueText placeholder=\"Select District\" />\r\n            </Select.Trigger>\r\n          </Select.Control>\r\n          <Portal>\r\n            <Select.Positioner>\r\n              <Select.Content>\r\n                {districtCollection.items.map((item) => (\r\n                  <Select.Item key={item.value} item={item}>\r\n                    {item.label}\r\n                  </Select.Item>\r\n                ))}\r\n              </Select.Content>\r\n            </Select.Positioner>\r\n          </Portal>\r\n        </Select.Root>\r\n\r\n        {/* Barangay */}\r\n        <Select.Root\r\n          value={form.barangay ? [form.barangay] : []}\r\n          onValueChange={(details) =>\r\n            update({ ...form, barangay: details.value[0] ?? \"\" })\r\n          }\r\n          collection={barangayCollection}\r\n        >\r\n          <Select.HiddenSelect />\r\n          <Select.Control>\r\n            <Select.Trigger>\r\n              <Select.ValueText placeholder=\"Select Barangay\" />\r\n            </Select.Trigger>\r\n          </Select.Control>\r\n          <Portal>\r\n            <Select.Positioner>\r\n              <Select.Content>\r\n                {barangayCollection.items.map((item) => (\r\n                  <Select.Item key={item.value} item={item}>\r\n                    {item.label}\r\n                  </Select.Item>\r\n                ))}\r\n              </Select.Content>\r\n            </Select.Positioner>\r\n          </Portal>\r\n        </Select.Root>\r\n      </SimpleGrid>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Address;\r\n","import { Flex, Tabs, Text } from \"@chakra-ui/react\";\r\nimport { IoHomeOutline } from \"react-icons/io5\";\r\nimport { BsPersonWorkspace } from \"react-icons/bs\";\r\nimport { FaRegUser } from \"react-icons/fa\";\r\nimport { useState } from \"react\";\r\n\r\nimport PersonalInfo from \"./PersonalInfo\";\r\nimport Address from \"./Address\";\r\nimport Employment from \"./Employment\";\r\n\r\nconst LifePlanApplicationFormWrapper = () => {\r\n  const [activeTab, setActiveTab] = useState(\"step1\");\r\n\r\n  const handleTabChange = (details: any) => {\r\n    setActiveTab(details.value);\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <Tabs.Root\r\n        value={activeTab}\r\n        onValueChange={handleTabChange}\r\n        variant=\"line\"\r\n      >\r\n        <Tabs.List>\r\n          <Tabs.Trigger value=\"step1\">\r\n            <Flex align=\"center\" gap={2}>\r\n              <FaRegUser fontSize={24} />\r\n              <Text>Personal Info</Text>\r\n            </Flex>\r\n          </Tabs.Trigger>\r\n\r\n          <Tabs.Trigger value=\"step2\">\r\n            <Flex align=\"center\" gap={2}>\r\n              <IoHomeOutline />\r\n              <Text>Residential Address</Text>\r\n            </Flex>\r\n          </Tabs.Trigger>\r\n\r\n          <Tabs.Trigger value=\"step3\">\r\n            <Flex align=\"center\" gap={2}>\r\n              <BsPersonWorkspace />\r\n              <Text>Employment</Text>\r\n            </Flex>\r\n          </Tabs.Trigger>\r\n        </Tabs.List>\r\n\r\n        <Tabs.Content value=\"step1\">\r\n          <PersonalInfo />\r\n        </Tabs.Content>\r\n\r\n        <Tabs.Content value=\"step2\">\r\n          <Address />\r\n        </Tabs.Content>\r\n\r\n        <Tabs.Content value=\"step3\">\r\n          <Employment />\r\n        </Tabs.Content>\r\n      </Tabs.Root>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default LifePlanApplicationFormWrapper;\r\n","const LifePlanApplicationMainWrapper = ({\r\n  children,\r\n}: {\r\n  children: React.ReactNode;\r\n}) => {\r\n  return (\r\n    <div className=\"w-full h-full flex flex-col gap-6\">\r\n      <div className=\"w-full h-auto p-4 bg-white rounded-lg shadow\">\r\n        <h2 className=\"text-2xl font-semibold mb-4\">Life Plan Application</h2>\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime","import_st_peter_ui","import_react","import_jsx_runtime","import_react","import_st_peter_ui","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,215 @@
+// src/NewSaleForm/PersonalInfo.tsx
+import {
+  Box as Box2,
+  createListCollection,
+  Field as Field2,
+  Grid,
+  Input as Input2,
+  Select,
+  Separator,
+  VStack
+} from "@chakra-ui/react";
+import { useState as useState2 } from "react";
+import { Body } from "st-peter-ui";
+
+// src/NewSaleForm/ui/floating-label-input.tsx
+import { useState } from "react";
+import {
+  Box,
+  Field,
+  Input,
+  defineStyle,
+  useControllableState
+} from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FloatingLabelInput = (props) => {
+  const { label, onValueChange, value, defaultValue = "", ...rest } = props;
+  const [inputState, setInputState] = useControllableState({
+    defaultValue,
+    onChange: onValueChange,
+    value
+  });
+  const [focused, setFocused] = useState(false);
+  const shouldFloat = inputState.length > 0 || focused;
+  return /* @__PURE__ */ jsxs(Box, { pos: "relative", w: "full", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...rest,
+        onFocus: (e) => {
+          props.onFocus?.(e);
+          setFocused(true);
+        },
+        onBlur: (e) => {
+          props.onBlur?.(e);
+          setFocused(false);
+        },
+        onChange: (e) => {
+          props.onChange?.(e);
+          setInputState(e.target.value);
+        },
+        value: inputState,
+        "data-float": shouldFloat || void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(Field.Label, { css: floatingStyles, "data-float": shouldFloat || void 0, children: label })
+  ] });
+};
+var floatingStyles = defineStyle({
+  pos: "absolute",
+  bg: "bg",
+  px: "0.5",
+  top: "2.5",
+  insetStart: "3",
+  fontWeight: "normal",
+  pointerEvents: "none",
+  transition: "position",
+  color: "fg.muted",
+  "&[data-float]": {
+    top: "-3",
+    insetStart: "2",
+    color: "fg"
+  }
+});
+
+// src/NewSaleForm/PersonalInfo.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/NewSaleForm/Employment.tsx
+import { Body as Body2 } from "st-peter-ui";
+import { useState as useState3 } from "react";
+import { Field as Field3, SimpleGrid, Span, VStack as VStack2 } from "@chakra-ui/react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/NewSaleForm/Address.tsx
+import {
+  Box as Box3,
+  createListCollection as createListCollection2,
+  Field as Field4,
+  Portal,
+  Select as Select2,
+  SimpleGrid as SimpleGrid2,
+  Span as Span2,
+  VStack as VStack3
+} from "@chakra-ui/react";
+import { Body as Body3 } from "st-peter-ui";
+import { useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var provinceOptions = [
+  "Abra",
+  "Agusan del Norte",
+  "Agusan del Sur",
+  "Aklan",
+  "Albay",
+  "Antique",
+  "Apayao",
+  "Aurora",
+  "Basilan",
+  "Bataan",
+  "Batanes",
+  "Batangas",
+  "Benguet",
+  "Biliran",
+  "Bohol",
+  "Bukidnon",
+  "Bulacan",
+  "Cagayan",
+  "Camarines Norte",
+  "Camarines Sur",
+  "Camiguin",
+  "Capiz",
+  "Catanduanes",
+  "Cavite",
+  "Cebu",
+  "Cotabato",
+  "Davao de Oro",
+  "Davao del Norte",
+  "Davao del Sur",
+  "Davao Occidental",
+  "Davao Oriental",
+  "Dinagat Islands",
+  "Eastern Samar",
+  "Guimaras",
+  "Ifugao",
+  "Ilocos Norte",
+  "Ilocos Sur",
+  "Iloilo",
+  "Isabela",
+  "Kalinga",
+  "La Union",
+  "Laguna",
+  "Lanao del Norte",
+  "Lanao del Sur",
+  "Leyte",
+  "Maguindanao del Norte",
+  "Maguindanao del Sur",
+  "Marinduque",
+  "Masbate",
+  "Metro Manila",
+  "Misamis Occidental",
+  "Misamis Oriental",
+  "Mountain Province",
+  "Negros Occidental",
+  "Negros Oriental",
+  "Northern Samar",
+  "Nueva Ecija",
+  "Nueva Vizcaya",
+  "Occidental Mindoro",
+  "Oriental Mindoro",
+  "Palawan",
+  "Pampanga",
+  "Pangasinan",
+  "Quezon",
+  "Quirino",
+  "Rizal",
+  "Romblon",
+  "Samar",
+  "Sarangani",
+  "Siquijor",
+  "Sorsogon",
+  "South Cotabato",
+  "Southern Leyte",
+  "Sultan Kudarat",
+  "Sulu",
+  "Surigao del Norte",
+  "Surigao del Sur",
+  "Tarlac",
+  "Tawi-Tawi",
+  "Zambales",
+  "Zamboanga del Norte",
+  "Zamboanga del Sur",
+  "Zamboanga Sibugay"
+].map((prov) => ({ label: prov, value: prov }));
+var cityOptions = [
+  "Quezon City",
+  "Manila",
+  "Davao City",
+  "Caloocan",
+  "Cebu City",
+  "Zamboanga City",
+  "Taguig",
+  "Antipolo",
+  "Pasig",
+  "Valenzuela"
+].map((city) => ({ label: city, value: city }));
+var districtOptions = cityOptions;
+var barangayOptions = cityOptions;
+var provinceCollection = createListCollection2({ items: provinceOptions });
+var cityCollection = createListCollection2({ items: cityOptions });
+var districtCollection = createListCollection2({ items: districtOptions });
+var barangayCollection = createListCollection2({ items: barangayOptions });
+
+// src/NewSaleForm/LifePlanApplicationFormWrapper.tsx
+import { Flex, Tabs, Text } from "@chakra-ui/react";
+import { IoHomeOutline } from "react-icons/io5";
+import { BsPersonWorkspace } from "react-icons/bs";
+import { FaRegUser } from "react-icons/fa";
+import { useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/NewSaleForm/LifePlanApplicationMainWrapper.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+export {
+  FloatingLabelInput
+};
+//# sourceMappingURL=index.mjs.map