@chekinapp/ui 0.0.75 → 0.0.77

package/dist/index.d.cts

@@ -555,20 +555,20 @@ declare const FramedIcon: React$1.ForwardRefExoticComponent<FramedIconProps & Re
 
 declare const statusStyles: {
     readonly INACTIVE: {
-        readonly background: "bg-[var(--chekin-color-surface-input-empty)]";
-        readonly color: "text-[var(--chekin-color-gray-2)]";
+        readonly background: "bg-[#f4f6f8]";
+        readonly color: "text-[#9696b9]";
     };
     readonly ACTIVE: {
-        readonly background: "bg-[var(--chekin-color-surface-autocomplete)]";
-        readonly color: "text-[var(--chekin-color-brand-blue)]";
+        readonly background: "bg-[#eff6ff]";
+        readonly color: "text-[#385cf8]";
     };
     readonly SUCCESS: {
         readonly background: "bg-[#e8fcf7]";
         readonly color: "text-[#2bc29f]";
     };
     readonly DANGER: {
-        readonly background: "bg-[#ffe2ed]";
-        readonly color: "text-[var(--error-message-color)]";
+        readonly background: "bg-[#fff5f9]";
+        readonly color: "text-[#ff2467]";
     };
 };
 interface HaloIconProps extends PropsWithChildren {
@@ -794,6 +794,7 @@ declare const uiKitTranslations: {
         date_range_min_days_error_other: string;
         past_dates: string;
         future_dates: string;
+        signature_placeholder_text: string;
     };
     readonly es: {
         verified: string;
@@ -1227,6 +1228,7 @@ declare const uiKitI18nResources: {
             date_range_min_days_error_other: string;
             past_dates: string;
             future_dates: string;
+            signature_placeholder_text: string;
         };
     };
     readonly es: {

package/dist/index.d.ts

@@ -555,20 +555,20 @@ declare const FramedIcon: React$1.ForwardRefExoticComponent<FramedIconProps & Re
 
 declare const statusStyles: {
     readonly INACTIVE: {
-        readonly background: "bg-[var(--chekin-color-surface-input-empty)]";
-        readonly color: "text-[var(--chekin-color-gray-2)]";
+        readonly background: "bg-[#f4f6f8]";
+        readonly color: "text-[#9696b9]";
     };
     readonly ACTIVE: {
-        readonly background: "bg-[var(--chekin-color-surface-autocomplete)]";
-        readonly color: "text-[var(--chekin-color-brand-blue)]";
+        readonly background: "bg-[#eff6ff]";
+        readonly color: "text-[#385cf8]";
     };
     readonly SUCCESS: {
         readonly background: "bg-[#e8fcf7]";
         readonly color: "text-[#2bc29f]";
     };
     readonly DANGER: {
-        readonly background: "bg-[#ffe2ed]";
-        readonly color: "text-[var(--error-message-color)]";
+        readonly background: "bg-[#fff5f9]";
+        readonly color: "text-[#ff2467]";
     };
 };
 interface HaloIconProps extends PropsWithChildren {
@@ -794,6 +794,7 @@ declare const uiKitTranslations: {
         date_range_min_days_error_other: string;
         past_dates: string;
         future_dates: string;
+        signature_placeholder_text: string;
     };
     readonly es: {
         verified: string;
@@ -1227,6 +1228,7 @@ declare const uiKitI18nResources: {
             date_range_min_days_error_other: string;
             past_dates: string;
             future_dates: string;
+            signature_placeholder_text: string;
         };
     };
     readonly es: {

package/dist/index.js

@@ -1377,7 +1377,7 @@ var Checkbox = React9.forwardRef(
     const errorId = error ? `${checkboxId}-error` : void 0;
     const descriptionId = supportingText ? `${checkboxId}-desc` : void 0;
     const ariaDescribedBy = errorId || descriptionId || void 0;
-    return /* @__PURE__ */ jsxs13("div", { className: cn("flex w-full flex-col", className), children: [
+    return /* @__PURE__ */ jsxs13("div", { className: cn("flex flex-col", className), children: [
       /* @__PURE__ */ jsxs13(
         "div",
         {
@@ -2129,7 +2129,7 @@ function CopyLinkButton({
 // src/copy-string/CopyString.tsx
 import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 function CopyString({ value = "", className, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { className: cn("flex w-fit items-center gap-1.5", className), ...props, children: [
+  return /* @__PURE__ */ jsxs22("div", { className: cn("flex w-fit items-center gap-2", className), ...props, children: [
     /* @__PURE__ */ jsx30("div", { className: "copy-string_value w-full overflow-hidden text-ellipsis whitespace-nowrap text-left", children: value }),
     /* @__PURE__ */ jsx30(CopyIcon, { textToCopy: value })
   ] });
@@ -3891,7 +3891,7 @@ var CustomCheckboxDropdownGroup = forwardRef20(({ options, value = [], onChange,
               id: `checkbox-${option.value}`,
               value: checked,
               disabled: option.disabled,
-              className: cn(option.disabled && "cursor-not-allowed opacity-50")
+              className: cn(option.disabled && "cursor-not-allowed opacity-50 w-auto")
             },
             option.value
           ),
@@ -4059,20 +4059,20 @@ var HALO_ICON_STATUS = {
 import { jsx as jsx49 } from "react/jsx-runtime";
 var statusStyles = {
   [HALO_ICON_STATUS.inactive]: {
-    background: "bg-[var(--chekin-color-surface-input-empty)]",
-    color: "text-[var(--chekin-color-gray-2)]"
+    background: "bg-[#f4f6f8]",
+    color: "text-[#9696b9]"
   },
   [HALO_ICON_STATUS.active]: {
-    background: "bg-[var(--chekin-color-surface-autocomplete)]",
-    color: "text-[var(--chekin-color-brand-blue)]"
+    background: "bg-[#eff6ff]",
+    color: "text-[#385cf8]"
   },
   [HALO_ICON_STATUS.success]: {
     background: "bg-[#e8fcf7]",
     color: "text-[#2bc29f]"
   },
   [HALO_ICON_STATUS.danger]: {
-    background: "bg-[#ffe2ed]",
-    color: "text-[var(--error-message-color)]"
+    background: "bg-[#fff5f9]",
+    color: "text-[#ff2467]"
   }
 };
 var HaloIcon = forwardRef21(
@@ -5185,7 +5185,8 @@ var translation_default2 = {
   date_range_min_days_error_one: "Range must be at least {{count}} day",
   date_range_min_days_error_other: "Range must be at least {{count}} days",
   past_dates: "Date cannot be before {{minDate}}",
-  future_dates: "Date cannot be after {{maxDate}}"
+  future_dates: "Date cannot be after {{maxDate}}",
+  signature_placeholder_text: "Sign inside this box.<br/> Use your finger.<br/> Tap to start."
 };
 
 // src/locales/es/translation.json
@@ -8169,8 +8170,8 @@ var VALUE_PART = 1;
 var getSidebarState = (stateName) => document.cookie.split("; ").find((row) => row.startsWith(`${stateName}=`))?.split("=")[VALUE_PART] === "true";
 
 // src/signature-canvas/SignatureCanvas.tsx
-import { forwardRef as forwardRef40, Fragment as Fragment10, useEffect as useEffect27, useRef as useRef18 } from "react";
-import { useTranslation as useTranslation16 } from "react-i18next";
+import { forwardRef as forwardRef40, useEffect as useEffect27, useRef as useRef18 } from "react";
+import { Trans, useTranslation as useTranslation16 } from "react-i18next";
 import ReactSignatureCanvas from "react-signature-pad-wrapper";
 
 // src/assets/icons/sign-finger.svg
@@ -8197,12 +8198,6 @@ var SIGNATURE_PROPS = {
   maxWidth: 1.5,
   dotSize: 1
 };
-function breakIntoLines(text = "") {
-  return text.split("\n").map((line, index) => /* @__PURE__ */ jsxs62(Fragment10, { children: [
-    line,
-    /* @__PURE__ */ jsx102("br", {})
-  ] }, index));
-}
 var SignatureCanvas = forwardRef40(
   ({ onClear, hasSignature, onEnd, onEnable, className, enabled }, ref) => {
     const { t } = useTranslation16();
@@ -8223,7 +8218,7 @@ var SignatureCanvas = forwardRef40(
           type: "button",
           className: cn(
             "absolute left-0 top-0 z-10 flex h-[174px] w-[250px] flex-col items-center",
-            "justify-between rounded border-0 bg-[var(--signature-canvas-placeholder-bg)] px-0 pb-11 pt-10",
+            "justify-between rounded border-0 bg-[var(--signature-canvas-placeholder-bg)] px-0 pb-7 pt-10",
             "cursor-pointer select-none"
           ),
           onClick: onEnable,
@@ -8234,10 +8229,10 @@ var SignatureCanvas = forwardRef40(
               "span",
               {
                 className: cn(
-                  "mx-auto max-w-[154px] break-words text-center text-sm font-medium uppercase",
+                  "mx-auto mt-2 max-w-[154px] break-words text-center text-sm font-medium uppercase",
                   "text-[var(--signature-canvas-placeholder-text)] opacity-[0.55]"
                 ),
-                children: breakIntoLines(t("signature_placeholder_text"))
+                children: /* @__PURE__ */ jsx102(Trans, { i18nKey: "signature_placeholder_text" })
               }
             )
           ]
@@ -9875,15 +9870,15 @@ function UploadedFilesList({
   return /* @__PURE__ */ jsx129("div", { className: cn("flex flex-wrap gap-2.5", className), children: files.map((file, index) => /* @__PURE__ */ jsxs77(
     "div",
     {
-      className: "flex cursor-default items-center gap-2 rounded border border-[var(--chekin-color-gray-2)] bg-[var(--chekin-color-surface-pressed)] py-1.5 pl-3 pr-1.5",
+      className: "flex cursor-default items-center gap-2 rounded border border-[#acacd5] bg-[#f0f0f8] py-1.5 pl-3 pr-1.5",
       children: [
-        /* @__PURE__ */ jsx129("span", { className: "text-nowrap text-sm font-medium leading-5 text-[var(--chekin-color-brand-navy)]", children: file.name }),
+        /* @__PURE__ */ jsx129("span", { className: "text-nowrap text-sm font-medium leading-5 text-[#161643]", children: file.name }),
         /* @__PURE__ */ jsx129(
           "button",
           {
             type: "button",
             onClick: () => onRemoveFile(file.name),
-            className: "flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded bg-[var(--chekin-color-gray-1)] transition-all hover:shadow-md active:opacity-95",
+            className: "flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded bg-[#6b6b95] transition-all hover:shadow-md active:opacity-95",
             "aria-label": `Remove ${file.name}`,
             children: /* @__PURE__ */ jsx129(X6, { className: "h-3.5 w-3.5 text-white", strokeWidth: 3 })
           }
@@ -14475,7 +14470,9 @@ function DashboardMultiSelectInternal({
   }, [isOpen, filteredOptions]);
   React58.useEffect(() => {
     if (!isOpen || !isMobile2) return;
-    const frame = window.requestAnimationFrame(() => mobileSearchInputRef.current?.focus());
+    const frame = window.requestAnimationFrame(
+      () => mobileSearchInputRef.current?.focus()
+    );
     return () => window.cancelAnimationFrame(frame);
   }, [isOpen, isMobile2]);
   const openMenu = () => {
@@ -16410,7 +16407,13 @@ var DashboardDateRangePicker = React66.forwardRef(function DashboardDateRangePic
   const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
   const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
   const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
-  const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({ value, format: formatter, parse: parser, onCommit: commit, onBlur });
+  const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
+    value,
+    format: formatter,
+    parse: parser,
+    onCommit: commit,
+    onBlur
+  });
   const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
   const [isOpen, setIsOpen] = React66.useState(false);
   const [focusedInput, setFocusedInput] = React66.useState(null);
@@ -16493,7 +16496,15 @@ var DashboardDateRangePicker = React66.forwardRef(function DashboardDateRangePic
       open: openCalendar,
       close: closeCalendar
     }),
-    [closeCalendar, commit, formatter, openCalendar, setFromText, setToText, syncMonthToValue]
+    [
+      closeCalendar,
+      commit,
+      formatter,
+      openCalendar,
+      setFromText,
+      setToText,
+      syncMonthToValue
+    ]
   );
   return /* @__PURE__ */ jsx169(
     "div",
@@ -16923,15 +16934,7 @@ var DashboardFileInput = React69.forwardRef(
                               onClick: handleClear,
                               className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
                               "aria-label": t("remove_file"),
-                              children: /* @__PURE__ */ jsx171(
-                                SquareX5,
-                                {
-                                  size: 15,
-                                  fill: "#9696b9",
-                                  color: "#f8f8f8",
-                                  strokeWidth: 1.8
-                                }
-                              )
+                              children: /* @__PURE__ */ jsx171(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                             }
                           )
                         ]