@splpi/estore-shared-components 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -227,8 +227,7 @@ var STANDARD_ICON_BUTTON_STYLES = {
   }
 };
 
-// src/NewSaleForm/ui/floating-label-input.tsx
-import { useState } from "react";
+// src/NewSaleForm/ui/FloatingLabelInput.tsx
 import {
   Box,
   Field,
@@ -236,6 +235,7 @@ import {
   defineStyle,
   useControllableState
 } from "@chakra-ui/react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var FloatingLabelInput = (props) => {
   const { label, onValueChange, value, defaultValue = "", ...rest } = props;
@@ -251,6 +251,14 @@ var FloatingLabelInput = (props) => {
       Input,
       {
         ...rest,
+        h: "12",
+        pt: shouldFloat ? "5" : "2",
+        pb: "1",
+        fontSize: "sm",
+        fontWeight: "semibold",
+        borderWidth: "1.5px",
+        borderRadius: "lg",
+        _placeholder: { color: "transparent" },
         onFocus: (e) => {
           props.onFocus?.(e);
           setFocused(true);
@@ -271,22 +279,28 @@ var FloatingLabelInput = (props) => {
   ] });
 };
 var floatingStyles = defineStyle({
+  /* placeholder state — vertically centred inside the input */
   pos: "absolute",
-  bg: "bg",
-  px: "0.5",
-  top: "2.5",
+  top: "50%",
+  transform: "translateY(-50%)",
   insetStart: "3",
+  fontSize: "sm",
   fontWeight: "normal",
+  color: "gray.400",
+  bg: "bg",
+  px: "0.5",
   pointerEvents: "none",
-  transition: "position",
-  color: "fg.muted",
+  transition: "top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease",
+  /* floated state — sits above the border, clearly a label */
   "&[data-float]": {
-    top: "-3",
-    insetStart: "2",
-    color: "fg"
+    top: "-2",
+    transform: "translateY(0)",
+    fontSize: "xs",
+    fontWeight: "medium",
+    color: "gray.400",
+    insetStart: "2.5"
   }
 });
-var floating_label_input_default = FloatingLabelInput;
 
 // src/NewSaleForm/LifePlanApplication1.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -399,7 +413,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "idNumber",
             type: "text",
@@ -409,7 +423,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "lastName",
             type: "text",
@@ -419,7 +433,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "firstName",
             type: "text",
@@ -429,7 +443,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "middleName",
             type: "text",
@@ -439,7 +453,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "suffix",
             type: "text",
@@ -465,7 +479,7 @@ var LifePlanApplication1 = ({
           /* @__PURE__ */ jsx2(Input2, { id: "dateOfNeutralization", type: "date" })
         ] }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "height",
             label: "Height (ft)",
@@ -477,7 +491,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "weight",
             label: "Weight (lbs)",
@@ -526,7 +540,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "nationality",
             type: "text",
@@ -536,7 +550,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "mobileNumber",
             type: "text",
@@ -546,7 +560,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "landlineNumber",
             type: "text",
@@ -559,7 +573,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "email",
             type: "email",
@@ -569,7 +583,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "mailingAddress",
             type: "text",
@@ -579,7 +593,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ jsx2(Field2.Root, { children: /* @__PURE__ */ jsx2(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "insurability",
             type: "text",
@@ -900,7 +914,7 @@ var LifePlanApplication2 = ({
           }
         ) }),
         /* @__PURE__ */ jsx3(Field3.Root, { children: /* @__PURE__ */ jsx3(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "street",
             label: "Street",
@@ -909,7 +923,7 @@ var LifePlanApplication2 = ({
           }
         ) }),
         /* @__PURE__ */ jsx3(Field3.Root, { children: /* @__PURE__ */ jsx3(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "lotNumber",
             label: "Lot #",
@@ -925,13 +939,13 @@ var LifePlanApplication2_default = LifePlanApplication2;
 
 // src/NewSaleForm/LifePlanApplication3.tsx
 import { Box as Box3, Field as Field4, SimpleGrid as SimpleGrid2, VStack as VStack2 } from "@chakra-ui/react";
-import React2 from "react";
+import React from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var LifePlanApplication3 = ({
   initialData,
   onUpdate
 }) => {
-  const [formData, setFormData] = React2.useState({
+  const [formData, setFormData] = React.useState({
     occupation: initialData?.occupation ?? "Software Engineer",
     employerName: initialData?.employerName ?? "ABC Technologies Inc.",
     employmentStatus: initialData?.employmentStatus ?? "Regular",
@@ -1309,7 +1323,7 @@ var Beneficiary = ({ onUpdate }) => {
                           children: [
                             /* @__PURE__ */ jsxs6(Field5.Root, { children: [
                               /* @__PURE__ */ jsx6(
-                                floating_label_input_default,
+                                FloatingLabelInput,
                                 {
                                   id: "firstName",
                                   type: "text",
@@ -1325,7 +1339,7 @@ var Beneficiary = ({ onUpdate }) => {
                             ] }),
                             /* @__PURE__ */ jsxs6(Field5.Root, { children: [
                               /* @__PURE__ */ jsx6(
-                                floating_label_input_default,
+                                FloatingLabelInput,
                                 {
                                   id: "lastName",
                                   type: "text",
@@ -1341,7 +1355,7 @@ var Beneficiary = ({ onUpdate }) => {
                             ] }),
                             /* @__PURE__ */ jsxs6(Field5.Root, { children: [
                               /* @__PURE__ */ jsx6(
-                                floating_label_input_default,
+                                FloatingLabelInput,
                                 {
                                   id: "middleInitial",
                                   type: "text",
@@ -1360,7 +1374,7 @@ var Beneficiary = ({ onUpdate }) => {
                       ),
                       /* @__PURE__ */ jsxs6(Field5.Root, { children: [
                         /* @__PURE__ */ jsx6(
-                          floating_label_input_default,
+                          FloatingLabelInput,
                           {
                             id: "address",
                             type: "text",
@@ -3168,7 +3182,7 @@ var LifePlanApplicationStepWrapper = () => {
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
 // src/Generic/BottomQuickActions.tsx
-import React6 from "react";
+import React5 from "react";
 import {
   Box as Box15,
   Drawer,
@@ -3229,7 +3243,7 @@ var SUBTITLE_COLOR = BRAND_COLORS.grey;
 var LABEL_COLOR = BRAND_COLORS.neutralText;
 var DESC_COLOR = BRAND_COLORS.grey;
 var CHEVRON_COLOR = BRAND_COLORS.ashWhite;
-var QuickActionsHeaderCard = React6.memo(
+var QuickActionsHeaderCard = React5.memo(
   ({
     initials,
     avatarBg = AVATAR_DEFAULT_BG,
@@ -3305,7 +3319,7 @@ var QuickActionsHeaderCard = React6.memo(
 var ITEM_TRANSITION = {
   transition: "background 0.15s ease, transform 0.1s ease"
 };
-var ActionItem = React6.memo(({ action }) => {
+var ActionItem = React5.memo(({ action }) => {
   const iconBg = action.iconBg ?? DEFAULT_ICON_BG;
   const iconColor = action.iconColor ?? DEFAULT_ICON_COLOR;
   const inner = /* @__PURE__ */ jsxs15(
@@ -3562,7 +3576,8 @@ var STEPS = [
 ];
 var INSTALL_DIALOG_DISMISSED_KEY = "estore-install-dialog-dismissed";
 function NotifyInstall({
-  children
+  children,
+  appName
 }) {
   const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
   const [isDismissed, setIsDismissed] = useState13(false);
@@ -3623,13 +3638,16 @@ function NotifyInstall({
                         }
                       ),
                       /* @__PURE__ */ jsxs16(VStack8, { gap: 2, children: [
-                        /* @__PURE__ */ jsx19(
+                        /* @__PURE__ */ jsxs16(
                           Heading,
                           {
                             fontSize: { base: "lg", sm: "xl" },
                             fontWeight: "bold",
                             color: "gray.900",
-                            children: "Install St. Peter eStore"
+                            children: [
+                              "Install ",
+                              appName || "eStore"
+                            ]
                           }
                         ),
                         /* @__PURE__ */ jsx19(
@@ -5214,7 +5232,6 @@ var UserProfile_default = ReusableProfile;
 export {
   beneficiary_default as Beneficiary,
   BottomQuickActions_default as BottomQuickActions,
-  floating_label_input_default as FloatingLabelInput,
   HealthDeclaration_default as HealthDeclaration,
   LifePlanApplication1_default as LifePlanApplication1,
   LifePlanApplication2_default as LifePlanApplication2,