npm - @licklist/design - Versions diffs - 0.78.14 → 0.78.16 - Mend

@licklist/design 0.78.14 → 0.78.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist/CustomDatePicker/CustomDatePicker.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+type CustomDatePickerProps = {
+    name: string;
+    error?: string;
+    label?: string;
+    showAge?: boolean;
+    required?: boolean;
+};
+export declare function CustomDatePicker({ name, error, showAge, required }: CustomDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CustomDatePicker.d.ts.map

package/dist/CustomDatePicker/CustomDatePicker.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CustomDatePicker.d.ts","sourceRoot":"","sources":["../../src/CustomDatePicker/CustomDatePicker.tsx"],"names":[],"mappings":"AAMA,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,OAAc,EACd,QAAe,EAChB,EAAE,qBAAqB,2CA8OvB"}

package/dist/customRadioButton/RadioButton.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+interface RadioButtonProps {
+    name: string;
+    value: string;
+    checked: boolean;
+    onChange: (value: string) => void;
+    label?: string;
+}
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;
+//# sourceMappingURL=RadioButton.d.ts.map

package/dist/customRadioButton/RadioButton.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../src/customRadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/customRadioButton/RadioButton.js ADDED Viewed

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+var RadioButton = function(param) {
+    var name = param.name, value = param.value, checked = param.checked, onChange = param.onChange, label = param.label;
+    // Generate a stable id so label could be connected if needed
+    var id = "".concat(name, "-").concat(value);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "tw-flex tw-items-center tw-space-x-3",
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12
+        },
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "tw-relative tw-cursor-pointer",
+                style: {
+                    position: 'relative',
+                    cursor: 'pointer'
+                },
+                onClick: function() {
+                    return onChange(value);
+                },
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        id: id,
+                        type: "radio",
+                        name: name,
+                        value: value,
+                        checked: checked,
+                        onChange: function() {
+                            return onChange(value);
+                        },
+                        className: "tw-sr-only",
+                        style: {
+                            position: 'absolute',
+                            opacity: 0,
+                            pointerEvents: 'none',
+                            width: 0,
+                            height: 0
+                        }
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "tw-w-[47px] tw-h-[47px] tw-border-[3px] tw-border-black tw-rounded-full tw-bg-white tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 hover:tw-shadow-sm",
+                        style: {
+                            width: 52,
+                            height: 52,
+                            borderWidth: 3,
+                            borderStyle: 'solid',
+                            borderColor: '#000',
+                            borderRadius: 9999,
+                            background: '#fff',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'all 200ms'
+                        },
+                        children: checked && /*#__PURE__*/ jsx("div", {
+                            className: "tw-w-[30px] tw-h-[30px] tw-bg-slate-900 tw-rounded-full",
+                            style: {
+                                width: 30,
+                                height: 30,
+                                background: '#0f172a',
+                                borderRadius: 9999
+                            }
+                        })
+                    })
+                ]
+            }),
+            label && /*#__PURE__*/ jsx("label", {
+                htmlFor: id,
+                className: "tw-cursor-pointer tw-text-gray-700 tw-select-none tw-flex tw-items-center tw-leading-none",
+                style: {
+                    cursor: 'pointer',
+                    color: '#374151',
+                    userSelect: 'none',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    lineHeight: 1,
+                    position: 'relative',
+                    top: 5
+                },
+                onClick: function() {
+                    return onChange(value);
+                },
+                children: label
+            })
+        ]
+    });
+};
+export { RadioButton as default };

package/dist/index.d.ts CHANGED Viewed

@@ -43,4 +43,5 @@ export * from './availability-indicator';
 export * from './number-of-people-input';
 export * from './fullscreen-loader';
 export * from './pages';
+export { default as RadioButton } from './customRadioButton/RadioButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAA"}

package/dist/index.js CHANGED Viewed

@@ -205,6 +205,7 @@ export { useFullscreenLoader } from './fullscreen-loader/useFullscreenLoader.js'
 export { FullscreenLoaderContext } from './fullscreen-loader/context.js';
 export { PrivacyComponent } from './pages/PrivacyComponent.js';
 export { TermsComponent } from './pages/TermsComponent.js';
+export { default as RadioButton } from './customRadioButton/RadioButton.js';
 export { default as CountrySelect } from './static/CountrySelect.js';
 export { default as FormCard } from './static/FormCard.js';
 export { default as Image } from './static/Image.js';

package/dist/sales/guest-profile/profile/Profile.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Profile.d.ts","sourceRoot":"","sources":["../../../../src/sales/guest-profile/profile/Profile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAA;AAO5E,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CAGrB,CAAA;AAED,eAAO,MAAM,OAAO,aAAc,YAAY,~~4CAgD7C~~,CAAA"}
1	+ {"version":3,"file":"Profile.d.ts","sourceRoot":"","sources":["../../../../src/sales/guest-profile/profile/Profile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAA;AAO5E,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CAGrB,CAAA;AAED,eAAO,MAAM,OAAO,aAAc,YAAY,4CA6C7C,CAAA"}

package/dist/sales/guest-profile/profile/Profile.js CHANGED Viewed

@@ -10,7 +10,8 @@ var Profile = function(param) {
     if (!user) {
         return null;
     }
-    var firstName = user.firstName, lastName = user.lastName, gender = user.userDetail.gender;
+    var firstName = user.firstName, lastName = user.lastName, userDetail = user.userDetail;
+    var gender = userDetail === null || userDetail === void 0 ? void 0 : userDetail.gender;
     return /*#__PURE__*/ jsx("div", {
         className: "profile",
         children: /*#__PURE__*/ jsxs("div", {

package/dist/snippet/snippet-template/context/snippetTemplate.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"snippetTemplate.d.ts","sourceRoot":"","sources":["../../../../src/snippet/snippet-template/context/snippetTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EAEhB,MAAM,mEAAmE,CAAA;AAG1E,MAAM,MAAM,6BAA6B,GAAG,OAAO,CACjD,eAAe,GAAG;IAChB,IAAI,EAAE,MAAM,CAAA;CACb,CACF,CAAA;AAED,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,6BAA6B,CAAA;IACvC,OAAO,EAAE;QACP,cAAc,EAAE,CAAC,YAAY,EAAE,6BAA6B,KAAK,IAAI,CAAA;KACtE,CAAA;CACF;AAED,eAAO,MAAM,sBAAsB,uDACuB,CAAA;AAE1D,MAAM,WAAW,0CACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC;IACxC,aAAa,CAAC,EAAE,6BAA6B,CAAA;CAC9C;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,QAAQ,EACR,aAAa,GACd,EAAE,0CAA0C,~~2CA8J5C~~"}
1	+ {"version":3,"file":"snippetTemplate.d.ts","sourceRoot":"","sources":["../../../../src/snippet/snippet-template/context/snippetTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EAEhB,MAAM,mEAAmE,CAAA;AAG1E,MAAM,MAAM,6BAA6B,GAAG,OAAO,CACjD,eAAe,GAAG;IAChB,IAAI,EAAE,MAAM,CAAA;CACb,CACF,CAAA;AAED,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,6BAA6B,CAAA;IACvC,OAAO,EAAE;QACP,cAAc,EAAE,CAAC,YAAY,EAAE,6BAA6B,KAAK,IAAI,CAAA;KACtE,CAAA;CACF;AAED,eAAO,MAAM,sBAAsB,uDACuB,CAAA;AAE1D,MAAM,WAAW,0CACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC;IACxC,aAAa,CAAC,EAAE,6BAA6B,CAAA;CAC9C;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,QAAQ,EACR,aAAa,GACd,EAAE,0CAA0C,2CA+J5C"}

package/dist/snippet/snippet-template/context/snippetTemplate.js CHANGED Viewed

@@ -102,6 +102,7 @@ function SnippetTemplateContextProvider(param) {
                 '--snippet-page-body-left-block-back-button-body-color': template === null || template === void 0 ? void 0 : template.pageBodyLeftBlockBackButtonBodyColor,
                 '--snippet-page-body-right-block-background-color': template === null || template === void 0 ? void 0 : template.pageBodyRightBlockBackgroundColor,
                 '--snippet-elements-body-color': template === null || template === void 0 ? void 0 : template.elementsBodyColor,
+                '--snippet-elements-heading-text-color': (template === null || template === void 0 ? void 0 : template.elementsHeadingTextColor) || (template === null || template === void 0 ? void 0 : template.elementsTitleColor),
                 '--snippet-elements-input-border-color': template === null || template === void 0 ? void 0 : template.elementsInputBorderColor,
                 '--snippet-elements-input-background-color': template === null || template === void 0 ? void 0 : template.elementsInputBackgroundColor,
                 '--snippet-elements-input-body-color': template === null || template === void 0 ? void 0 : template.elementsInputBodyColor,

package/dist/snippet/snippet-template/context/snippetTemplateView.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"snippetTemplateView.d.ts","sourceRoot":"","sources":["../../../../src/snippet/snippet-template/context/snippetTemplateView.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB;;;;;;;;;;CAUhC,CAAA;AAED,MAAM,WAAW,gCAAgC;IAC/C,IAAI,EAAE,MAAM,OAAO,oBAAoB,CAAA;IACvC,UAAU,EAAE,OAAO,oBAAoB,CAAA;IACvC,OAAO,EAAE,KAAK,CAAC,QAAQ,CACrB,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,oBAAoB,CAAC,CACxD,CAAA;CACF;AAED,eAAO,MAAM,0BAA0B,2DACuB,CAAA;AAE9D,eAAO,MAAM,YAAY,EAAE,MAAM,OAAO,oBAA6B,CAAA;AAErE,wBAAgB,kCAAkC,CAAC,EAAE,QAAQ,EAAE;;CAAA,~~2CA0I9D~~"}
1	+ {"version":3,"file":"snippetTemplateView.d.ts","sourceRoot":"","sources":["../../../../src/snippet/snippet-template/context/snippetTemplateView.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB;;;;;;;;;;CAUhC,CAAA;AAED,MAAM,WAAW,gCAAgC;IAC/C,IAAI,EAAE,MAAM,OAAO,oBAAoB,CAAA;IACvC,UAAU,EAAE,OAAO,oBAAoB,CAAA;IACvC,OAAO,EAAE,KAAK,CAAC,QAAQ,CACrB,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,oBAAoB,CAAC,CACxD,CAAA;CACF;AAED,eAAO,MAAM,0BAA0B,2DACuB,CAAA;AAE9D,eAAO,MAAM,YAAY,EAAE,MAAM,OAAO,oBAA6B,CAAA;AAErE,wBAAgB,kCAAkC,CAAC,EAAE,QAAQ,EAAE;;CAAA,2CA2I9D"}

package/dist/snippet/snippet-template/context/snippetTemplateView.js CHANGED Viewed

@@ -112,6 +112,7 @@ function SnippetTemplateViewContextProvider(param) {
         },
         elements: {
             elementsBodyColor: t('bodyColor'),
+            elementsHeadingTextColor: t('headingTextColor'),
             elementsInputBorderColor: t('inputBorderColor'),
             elementsInputBackgroundColor: t('inputBackgroundColor'),
             elementsInputBodyColor: t('inputBodyColor'),

package/dist/snippet/snippet-template/utils/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/snippet/snippet-template/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,eAAe,EAChB,MAAM,mEAAmE,CAAA;AAE1E,eAAO,MAAM,wBAAwB,cACzB,OAAO,CAAC,eAAe,CAAC,~~oBAyBnC~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/snippet/snippet-template/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,eAAe,EAChB,MAAM,mEAAmE,CAAA;AAE1E,eAAO,MAAM,wBAAwB,cACzB,OAAO,CAAC,eAAe,CAAC,oBAkCnC,CAAA"}

package/dist/snippet/snippet-template/utils/index.js CHANGED Viewed

@@ -116,6 +116,10 @@ var safeMergeDefaultSettings = function() {
     var settingKeys = _to_consumable_array(new Set(_to_consumable_array(Object.keys(settingsProps)).concat(_to_consumable_array(Object.keys(DEFAULT_SNIPPET_TEMPLATE_COLORS)))));
     return settingKeys.reduce(function(prevValues, currentKey) {
         var settingsKeyValue = settings[currentKey];
+        // Do not default heading text color; leave undefined unless explicitly provided
+        if (currentKey === 'elementsHeadingTextColor' && (settingsKeyValue === undefined || settingsKeyValue === null || settingsKeyValue === '')) {
+            return prevValues;
+        }
         var // @TODO remove when will be integration with
         // calendar type
         _DEFAULT_SNIPPET_TEMPLATE_COLORS_currentKey;

package/dist/styles/snippet-templates/SnippetTemplate.scss CHANGED Viewed

@@ -456,3 +456,9 @@
     display: block !important;
   }
 }
+// Ensure Texts element is always visible and uses heading text color by default
+.snippet-template__texts-heading {
+  color: $snippet-elements-heading-text-color;
+}

package/dist/styles/snippet-templates/_snippetVariables.scss CHANGED Viewed

@@ -257,3 +257,9 @@ $color-transition:
   background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out,
   box-shadow 0.15s ease-in-out !default;
+// Heading text color variable mapping
+$snippet-elements-heading-text-color: var(
+  --snippet-elements-heading-text-color,
+  #333333
+) !default;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.14",
+  "version": "0.78.16",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.4",
+    "@licklist/core": "0.36.5",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.5",
     "clsx": "2.1.1",
@@ -64,7 +64,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.36.4",
+    "@licklist/core": "0.36.5",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.5",
     "@mantine/core": "6.0.22",

package/src/CustomDatePicker/CustomDatePicker.tsx ADDED Viewed

@@ -0,0 +1,258 @@
+import { TextInput } from '@mantine/core'
+import { useEffect, useState } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+import { DateTime } from 'luxon'
+import { useTranslation } from 'react-i18next'
+type CustomDatePickerProps = {
+  name: string
+  error?: string
+  label?: string
+  showAge?: boolean
+  required?: boolean
+}
+export function CustomDatePicker({
+  name,
+  error,
+  showAge = true,
+  required = true
+}: CustomDatePickerProps) {
+  const { t } = useTranslation()
+  const { control, setValue, watch, getValues, trigger, formState } = useFormContext()
+  const [age, setAge] = useState<number | null>(null)
+  const [localError, setLocalError] = useState<string | null>(null)
+  // Get current field values
+  const day = watch(`${name}_day`) || ''
+  const month = watch(`${name}_month`) || ''
+  const year = watch(`${name}_year`) || ''
+  // Initialize values from existing date
+  useEffect(() => {
+    const existingDate = getValues(name)
+    if (existingDate instanceof Date && !day && !month && !year) {
+      const dateTime = DateTime.fromJSDate(existingDate)
+      if (dateTime.isValid) {
+        setValue(`${name}_day`, dateTime.day.toString().padStart(2, '0'))
+        setValue(`${name}_month`, dateTime.month.toString().padStart(2, '0'))
+        setValue(`${name}_year`, dateTime.year.toString())
+      }
+    }
+  }, [name, setValue, getValues, day, month, year])
+  // Check for empty fields after submit attempt
+  useEffect(() => {
+    if (formState.isSubmitted && required) {
+      const hasEmptyFields = !day || !month || !year
+      if (hasEmptyFields) {
+        setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
+        // Set the main field to null to trigger form validation
+        setValue(name, null, { shouldValidate: true })
+      } else {
+        setLocalError(null)
+      }
+    }
+  }, [formState.isSubmitted, day, month, year, required, name, setValue, t])
+  // Calculate age and validate date when all fields are filled
+  useEffect(() => {
+    if (day && month && year) {
+      try {
+        // Create a date object
+        const dateObj = DateTime.fromObject({
+          day: parseInt(day, 10),
+          month: parseInt(month, 10),
+          year: parseInt(year, 10)
+        })
+        // Only proceed if date is valid
+        if (dateObj.isValid) {
+          // Set the main field value
+          setValue(name, dateObj.toJSDate(), { shouldValidate: true })
+          setLocalError(null)
+          // Calculate age
+          if (showAge) {
+            const now = DateTime.now()
+            const diff = now.diff(dateObj, 'years')
+            setAge(Math.floor(diff.years))
+          }
+        } else {
+          setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
+          setValue(name, null, { shouldValidate: true })
+          setAge(null)
+        }
+      } catch (err) {
+        // If any parsing fails, just reset the age display
+        setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
+        setValue(name, null, { shouldValidate: true })
+        setAge(null)
+      }
+    } else if (formState.isSubmitted && required) {
+      // If form was submitted and fields are required but not all filled
+      setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
+      setValue(name, null, { shouldValidate: true })
+      setAge(null)
+    } else {
+      // Reset if not all fields are filled but not submitted yet
+      setValue(name, null, { shouldValidate: false })
+      setAge(null)
+    }
+  }, [day, month, year, name, setValue, showAge, formState.isSubmitted, required, t])
+  // After user completes all fields, validate the form
+  useEffect(() => {
+    if (day && month && year) {
+      trigger(name)
+    }
+  }, [day, month, year, name, trigger])
+  // Display either the form error or our local error
+  const displayError = error || localError
+  return (
+    <div className="tw-w-full">
+      <div className="tw-flex tw-flex-col">
+        <div className="tw-mb-2 tw-flex tw-items-center tw-justify-between">
+          <label className="tw-font-semibold">
+            {t('App:dateOfBirth')}
+            {required && <span className="tw-ml-1 tw-text-red-500"></span>}
+          </label>
+          {age !== null && (
+            <span className="tw-text-sm tw-text-gray-600">
+              {t('App:Age')}: {age}
+            </span>
+          )}
+        </div>
+        <div className="tw-flex tw-flex-row tw-gap-4">
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Day')}</label>
+            <Controller
+              control={control}
+              name={`${name}_day`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="DD"
+                  maxLength={2}
+                  error={!!displayError}
+                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
+                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate and format on blur
+                    let value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      if (num < 1) value = '01'
+                      else if (num > 31) value = '31'
+                      else value = num.toString().padStart(2, '0')
+                    }
+                    field.onChange(value)
+                  }}
+                />
+              )}
+            />
+          </div>
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Month')}</label>
+            <Controller
+              control={control}
+              name={`${name}_month`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="MM"
+                  maxLength={2}
+                  error={!!displayError}
+                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
+                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate and format on blur
+                    let value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      if (num < 1) value = '01'
+                      else if (num > 12) value = '12'
+                      else value = num.toString().padStart(2, '0')
+                    }
+                    field.onChange(value)
+                  }}
+                />
+              )}
+            />
+          </div>
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Year')}</label>
+            <Controller
+              control={control}
+              name={`${name}_year`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="YYYY"
+                  maxLength={4}
+                  error={!!displayError}
+                  classNames={{ input: 'tw-placeholder-[#626A90]' }}
+                  styles={{ input: { '&::placeholder': { color: '#626A90' } } }}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate on blur
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      const currentYear = new Date().getFullYear()
+                      if (num > currentYear) {
+                        field.onChange(currentYear.toString())
+                      } else if (num < 1900) {
+                        field.onChange('1900')
+                      }
+                    }
+                  }}
+                />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      {/* Hidden field to store the actual date value */}
+      <Controller
+        control={control}
+        name={name}
+        defaultValue={null}
+        rules={{
+          validate: value => {
+            if (required && !value) {
+              return t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') })
+            }
+            return true
+          }
+        }}
+        render={() => <input type="hidden" />}
+      />
+    </div>
+  )
+}

package/src/customRadioButton/RadioButton.tsx ADDED Viewed

@@ -0,0 +1,84 @@
+import React from 'react';
+interface RadioButtonProps {
+  name: string;
+  value: string;
+  checked: boolean;
+  onChange: (value: string) => void;
+  label?: string;
+}
+const RadioButton: React.FC<RadioButtonProps> = ({
+                                                   name,
+                                                   value,
+                                                   checked,
+                                                   onChange,
+                                                   label
+                                                 }) => {
+  // Generate a stable id so label could be connected if needed
+  const id = `${name}-${value}`;
+  return (
+    <div
+      className="tw-flex tw-items-center tw-space-x-3"
+      style={{ display: 'flex', alignItems: 'center', gap: 12 }}
+    >
+      <div
+        className="tw-relative tw-cursor-pointer"
+        style={{ position: 'relative', cursor: 'pointer' }}
+        onClick={() => onChange(value)}
+      >
+        {/* Hidden native radio input for accessibility */}
+        <input
+          id={id}
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={() => onChange(value)}
+          className="tw-sr-only"
+          style={{ position: 'absolute', opacity: 0, pointerEvents: 'none', width: 0, height: 0 }}
+        />
+        {/* Custom radio button circle */}
+        <div
+          className="tw-w-[47px] tw-h-[47px] tw-border-[3px] tw-border-black tw-rounded-full tw-bg-white tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 hover:tw-shadow-sm"
+          style={{
+            width: 52,
+            height: 52,
+            borderWidth: 3,
+            borderStyle: 'solid',
+            borderColor: '#000',
+            borderRadius: 9999,
+            background: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'all 200ms',
+          }}
+        >
+          {/* Inner filled circle when selected */}
+          {checked && (
+            <div
+              className="tw-w-[30px] tw-h-[30px] tw-bg-slate-900 tw-rounded-full"
+              style={{ width: 30, height: 30, background: '#0f172a', borderRadius: 9999 }}
+            />
+          )}
+        </div>
+      </div>
+      {label && (
+        <label
+          htmlFor={id}
+          className="tw-cursor-pointer tw-text-gray-700 tw-select-none tw-flex tw-items-center tw-leading-none"
+          style={{ cursor: 'pointer', color: '#374151', userSelect: 'none', display: 'inline-flex', alignItems: 'center', lineHeight: 1, position: 'relative', top: 5 }}
+          onClick={() => onChange(value)}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+export default RadioButton;

package/src/index.ts CHANGED Viewed

@@ -43,3 +43,4 @@ export * from './availability-indicator'
 export * from './number-of-people-input'
 export * from './fullscreen-loader'
 export * from './pages'
+export { default as RadioButton } from './customRadioButton/RadioButton'

package/src/sales/guest-profile/profile/Profile.tsx CHANGED Viewed

@@ -16,11 +16,8 @@ export const Profile = ({ user }: ProfileProps) => {
     return null
   }
-  const {
-    firstName,
-    lastName,
-    userDetail: { gender },
-  } = user
+  const { firstName, lastName, userDetail } = user
+  const gender = userDetail?.gender
   return (
     <div className='profile'>

package/src/snippet/snippet-template/context/snippetTemplate.tsx CHANGED Viewed

@@ -105,6 +105,7 @@ export function SnippetTemplateContextProvider({
             '--snippet-page-body-right-block-background-color':
               template?.pageBodyRightBlockBackgroundColor,
             '--snippet-elements-body-color': template?.elementsBodyColor,
+            '--snippet-elements-heading-text-color': template?.elementsHeadingTextColor || template?.elementsTitleColor,
             '--snippet-elements-input-border-color':
               template?.elementsInputBorderColor,
             '--snippet-elements-input-background-color':

package/src/snippet/snippet-template/context/snippetTemplateView.tsx CHANGED Viewed

@@ -92,6 +92,7 @@ export function SnippetTemplateViewContextProvider({ children }) {
     elements: {
       elementsBodyColor: t('bodyColor'),
+      elementsHeadingTextColor: t('headingTextColor'),
       elementsInputBorderColor: t('inputBorderColor'),
       elementsInputBackgroundColor: t('inputBackgroundColor'),

package/src/snippet/snippet-template/utils/index.ts CHANGED Viewed

@@ -18,6 +18,15 @@ export const safeMergeDefaultSettings = (
   return settingKeys.reduce(
     (prevValues, currentKey) => {
       const settingsKeyValue = settings[currentKey]
+      // Do not default heading text color; leave undefined unless explicitly provided
+      if (
+        currentKey === 'elementsHeadingTextColor' &&
+        (settingsKeyValue === undefined || settingsKeyValue === null || settingsKeyValue === '')
+      ) {
+        return prevValues
+      }
       return {
         ...prevValues,
         [currentKey]:

package/src/styles/snippet-templates/SnippetTemplate.scss CHANGED Viewed

@@ -456,3 +456,9 @@
     display: block !important;
   }
 }
+// Ensure Texts element is always visible and uses heading text color by default
+.snippet-template__texts-heading {
+  color: $snippet-elements-heading-text-color;
+}

package/src/styles/snippet-templates/_snippetVariables.scss CHANGED Viewed

@@ -257,3 +257,9 @@ $color-transition:
   background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out,
   box-shadow 0.15s ease-in-out !default;
+// Heading text color variable mapping
+$snippet-elements-heading-text-color: var(
+  --snippet-elements-heading-text-color,
+  #333333
+) !default;

package/dist/CustomAlertTypes/AlertBox.d.ts DELETED Viewed

@@ -1,22 +0,0 @@
-import { alertThemes } from "./alertThemes";
-export interface AlertConfig {
-    type: keyof typeof alertThemes;
-    title?: string;
-    subTitle?: string;
-    message?: string | string[];
-    description?: string;
-    actionText?: string;
-    secondaryActionText?: string;
-    onAction?: (() => void) | null;
-    onSecondaryAction?: (() => void) | null;
-    timeout?: number;
-    closable?: boolean;
-    titleColor?: string;
-    subTitleColor?: string;
-    showArrow?: boolean;
-    showSecondaryArrow?: boolean;
-    alignActionsRight?: boolean;
-    mount?: "container" | "global";
-}
-export declare function showAlert(config: AlertConfig): void;
-//# sourceMappingURL=AlertBox.d.ts.map

package/dist/CustomAlertTypes/AlertBox.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"AlertBox.d.ts","sourceRoot":"","sources":["../../src/CustomAlertTypes/AlertBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,OAAO,WAAW,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CAChC;AAqDD,wBAAgB,SAAS,CAAC,MAAM,EAAE,WAAW,QAW5C"}

package/dist/CustomAlertTypes/AlertRender.d.ts DELETED Viewed

@@ -1,21 +0,0 @@
-import React from "react";
-import { AlertConfig } from './AlertBox';
-export declare class AlertRenderer {
-    static createAlert(config: AlertConfig, onClose: () => void): React.DetailedReactHTMLElement<{
-        style: {
-            backgroundColor: string;
-            border: string;
-            borderRadius: string;
-            padding: string;
-            width: string;
-            maxWidth: string;
-            margin: string;
-            pointerEvents: "auto";
-            fontFamily: string;
-            position: "relative";
-            overflow: "hidden";
-            boxSizing: "border-box";
-        };
-    }, HTMLElement>;
-}
-//# sourceMappingURL=AlertRender.d.ts.map

package/dist/CustomAlertTypes/AlertRender.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"AlertRender.d.ts","sourceRoot":"","sources":["../../src/CustomAlertTypes/AlertRender.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,qBAAa,aAAa;IACxB,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,IAAI;;;;;;;;;;;;;;;;CAoR5D"}

package/dist/CustomAlertTypes/alertThemes.d.ts DELETED Viewed

@@ -1,41 +0,0 @@
-import React from "react";
-export declare const ErrorIcon: () => React.ReactSVGElement;
-export declare const SuccessIcon: () => React.ReactSVGElement;
-export declare const InfoIcon: () => React.ReactSVGElement;
-export declare const WarningIcon: () => React.ReactSVGElement;
-export declare const commonStyle: {
-    fontFamily: string;
-    color: string;
-    borderRad: string;
-};
-export declare const alertThemes: {
-    error: {
-        bg: string;
-        border: string;
-        icon: string;
-        IconComponent: () => React.ReactSVGElement;
-        defaultTitle: string;
-    };
-    success: {
-        bg: string;
-        border: string;
-        icon: string;
-        IconComponent: () => React.ReactSVGElement;
-        defaultTitle: string;
-    };
-    warning: {
-        bg: string;
-        border: string;
-        icon: string;
-        IconComponent: () => React.ReactSVGElement;
-        defaultTitle: string;
-    };
-    info: {
-        bg: string;
-        border: string;
-        icon: string;
-        IconComponent: () => React.ReactSVGElement;
-        defaultTitle: string;
-    };
-};
-//# sourceMappingURL=alertThemes.d.ts.map

package/dist/CustomAlertTypes/alertThemes.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"alertThemes.d.ts","sourceRoot":"","sources":["../../src/CustomAlertTypes/alertThemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8B1B,eAAO,MAAM,SAAS,6BAA0C,CAAC;AACjE,eAAO,MAAM,WAAW,6BAA4C,CAAC;AACrE,eAAO,MAAM,QAAQ,6BAAyC,CAAC;AAC/D,eAAO,MAAM,WAAW,6BAA4C,CAAC;AAErE,eAAO,MAAM,WAAW;;;;CAIvB,CAAA;AAGD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BvB,CAAC"}

package/dist/CustomAlertTypes/utils/textWrapperUtils.d.ts DELETED Viewed

@@ -1,8 +0,0 @@
-/**
- * Wraps text into multiple lines by word count limit.
- * @param text - The input string
- * @param limit - Max characters per line
- * @returns Wrapped text as a single string with newlines
- */
-export declare function wrapText(text: string, limit: number): string;
-//# sourceMappingURL=textWrapperUtils.d.ts.map

package/dist/CustomAlertTypes/utils/textWrapperUtils.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"textWrapperUtils.d.ts","sourceRoot":"","sources":["../../../src/CustomAlertTypes/utils/textWrapperUtils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAmB5D"}

package/src/CustomAlertTypes/AlertBox.tsx DELETED Viewed

@@ -1,87 +0,0 @@
-import { createRoot } from "react-dom/client";
-import { AlertRenderer } from './AlertRender';
-import { alertThemes } from "./alertThemes";
-export interface AlertConfig {
-  type: keyof typeof alertThemes;
-  title?: string;
-  subTitle?: string;
-  message?: string | string[];
-  description?: string;
-  actionText?: string;
-  secondaryActionText?: string;
-  onAction?: (() => void) | null;
-  onSecondaryAction?: (() => void) | null;
-  timeout?: number;
-  closable?: boolean;
-  titleColor?: string;
-  subTitleColor?: string;
-  showArrow?: boolean;
-  showSecondaryArrow?: boolean;
-  alignActionsRight?: boolean;
-  mount?: "container" | "global";
-}
-let container: HTMLDivElement | null = null;
-let root: any = null;
-function createContainer(mount: "container" | "global" = "global") {
-  if (container) return container;
-  container = document.createElement("div");
-  root = createRoot(container);
-  if (mount === "container") {
-    const containerFluid = document.querySelector(
-      ".container-fluid"
-    ) as HTMLDivElement | null;
-    if (containerFluid) {
-      container.style.cssText = `
-        width: 100%;
-        margin-bottom: 1rem;
-        pointer-events: auto;
-      `;
-      containerFluid.insertBefore(container, containerFluid.firstChild);
-    } else {
-      document.body.appendChild(container);
-    }
-  } else {
-    container.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 9999;
-      pointer-events: none;
-    `;
-    document.body.appendChild(container);
-  }
-  injectShrinkBarAnimation();
-  return container;
-}
-function injectShrinkBarAnimation() {
-  if (document.getElementById('shrinkBar-style')) return;
-  const style = document.createElement('style');
-  style.id = 'shrinkBar-style';
-  style.textContent = `
-    @keyframes shrinkBar {
-      from { width: 100%; }
-      to { width: 0%; }
-    }
-  `;
-  document.head.appendChild(style);
-}
-export function showAlert(config: AlertConfig) {
-  createContainer(config.mount || "global");
-  const removeAlert = () => {
-    if (root) root.render(null);
-  };
-  if (config.timeout && config.timeout > 0) {
-    setTimeout(removeAlert, config.timeout);
-  }
-  const alertBox = AlertRenderer.createAlert(config, removeAlert);
-  root.render(alertBox);
-}

package/src/CustomAlertTypes/AlertRender.ts DELETED Viewed

@@ -1,283 +0,0 @@
-import React from "react";
-import { MdClose, MdArrowForward } from "react-icons/md";
-import { alertThemes, commonStyle } from "./alertThemes";
-import { wrapText } from "./utils/textWrapperUtils";
-import { AlertConfig } from './AlertBox'
-export class AlertRenderer {
-  static createAlert(config: AlertConfig, onClose: () => void) {
-    const theme = alertThemes[config.type];
-    return React.createElement(
-      "div",
-      {
-        style: {
-          backgroundColor: theme.bg,
-          border: theme.border,
-          borderRadius: commonStyle.borderRad,
-          padding: "16px 20px 0",
-          width: "100%",
-          maxWidth: "100%",
-          margin: "0 auto",
-          pointerEvents: "auto",
-          fontFamily: commonStyle.fontFamily,
-          position: "relative",
-          overflow: "hidden",
-          boxSizing: "border-box",
-        },
-      },
-      // HEADER ROW (icon + title + close button)
-      React.createElement(
-        "div",
-        {
-          style: {
-            display: "grid",
-            gridTemplateColumns: "20px 1fr auto", // icon | title | X
-            alignItems: "center",
-            columnGap: "12px",
-            marginBottom: "4px",
-          },
-        },
-        // Icon
-        React.createElement(theme.IconComponent, {
-          size: 20,
-          style: {
-            color: theme.icon,
-            gridColumn: "1 / 2",
-            gridRow: "1 / 2",
-          },
-        }),
-        // Title
-        React.createElement(
-          "h4",
-          {
-            style: {
-              gridColumn: "2 / 3",
-              gridRow: "1 / 2",
-              alignSelf: "center",
-              fontFamily: commonStyle.fontFamily,
-              fontSize: "16px",
-              fontWeight: 600,
-              lineHeight: "18px",
-              color: config.titleColor || commonStyle.fontFamily,
-              margin: 0,
-            },
-          },
-          config.title || theme.defaultTitle
-        ),
-        // Close Button
-        config.closable !== true &&
-        React.createElement(
-          "button",
-          {
-            style: {
-              gridColumn: "3 / 4",
-              gridRow: "1 / 2",
-              background: "none",
-              border: "none",
-              color: config.type === "info" ? "#1E3A8A" : theme.icon,
-              cursor: "pointer",
-              padding: 0,
-              lineHeight: 1,
-              display: "flex",
-              alignItems: "center",
-            },
-            onClick: onClose,
-          },
-          React.createElement(MdClose, { size: 20 })
-        )
-      ),
-      // BODY (Subtitle, Message, Description, Actions)
-      React.createElement(
-        "div",
-        {
-          style: {
-            marginLeft: "32px", // aligns with title, not icon
-            marginBottom:
-              !config.message && !config.description && !config.actionText
-                ? "12px"
-                : "0",
-          },
-        },
-        // Subtitle
-        config.subTitle &&
-        React.createElement(
-          "span",
-          {
-            style: {
-              fontFamily: "Geist, system-ui, sans-serif",
-              fontSize: "16px",
-              fontWeight: 600,
-              lineHeight: "18px",
-              color: config.subTitleColor || commonStyle.color,
-              display: "block",
-              marginBottom: "4px",
-            },
-          },
-          config.subTitle
-        ),
-        // Message
-        config.message &&
-        (Array.isArray(config.message)
-          ? React.createElement(
-            "ul",
-            {
-              style: {
-                margin: "0 0 8px 0",
-                paddingLeft: "20px",
-                fontFamily: commonStyle.fontFamily,
-                fontSize: "15px",
-                fontWeight: 400,
-                lineHeight: "20px",
-                color: commonStyle.color,
-              },
-            },
-            config.message.map((line, idx) =>
-              React.createElement(
-                "li",
-                {
-                  key: idx,
-                  style: {
-                    fontSize: "15px",
-                    fontWeight: 400,
-                    lineHeight: "20px",
-                    fontFamily: "Geist, system-ui, sans-serif",
-                    color: commonStyle.color,
-                  },
-                },
-                line
-              )
-            )
-          )
-          : React.createElement(
-            "p",
-            {
-              style: {
-                fontFamily: commonStyle.fontFamily,
-                fontSize: "15px",
-                fontWeight: 400,
-                lineHeight: "20px",
-                color: commonStyle.color,
-                margin: "0 0 8px 0",
-              },
-            },
-            config.message
-          )),
-        // Description
-        config.description &&
-        React.createElement(
-          "p",
-          {
-            style: {
-              fontFamily: commonStyle.fontFamily,
-              fontSize: "15px",
-              fontWeight: 400,
-              lineHeight: "20px",
-              color: commonStyle.color,
-              margin: "0 0 12px 0",
-              whiteSpace: "pre-line",
-            },
-          },
-          wrapText(config.description, 150)
-        ),
-        // Actions
-        (config.actionText || config.secondaryActionText) &&
-        React.createElement(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "row",
-              gap: "16px",
-              marginTop: "6px",
-              justifyContent: config.alignActionsRight
-                ? "flex-end"
-                : "flex-start",
-              marginBottom: "8px",
-            },
-          },
-          // Primary Action
-          config.actionText &&
-          React.createElement(
-            "button",
-            {
-              style: {
-                fontFamily: commonStyle.fontFamily,
-                fontSize: "15px",
-                fontWeight: 600,
-                lineHeight: "20px",
-                color: commonStyle.color,
-                background: "none",
-                border: "none",
-                padding: 0,
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-              },
-              onClick: () => {
-                if (config.onAction) config.onAction();
-                onClose();
-              },
-            },
-            config.actionText,
-            config.showArrow &&
-            React.createElement(MdArrowForward, { size: 16 })
-          ),
-          // Secondary Action
-          config.secondaryActionText &&
-          React.createElement(
-            "button",
-            {
-              style: {
-                fontFamily: commonStyle.fontFamily,
-                fontSize: "15px",
-                fontWeight: 600,
-                lineHeight: "20px",
-                color: commonStyle.color,
-                background: "none",
-                border: "none",
-                padding: 0,
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-              },
-              onClick: () => {
-                if (config.onSecondaryAction) config.onSecondaryAction();
-                onClose();
-              },
-            },
-            config.secondaryActionText,
-            config.showSecondaryArrow &&
-            React.createElement(MdArrowForward, { size: 16 })
-          )
-        )
-      ),
-      // Progress Bar
-      config.timeout &&
-      React.createElement("div", {
-        style: {
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          height: "4px",
-          backgroundColor: theme.icon,
-          width: "100%",
-          animation: `shrinkBar ${config.timeout}ms linear forwards`,
-        },
-      })
-    );
-  }
-}

package/src/CustomAlertTypes/alertThemes.ts DELETED Viewed

@@ -1,72 +0,0 @@
-import React from "react";
-// Factory for simple SVG icon components
-function createSvgIcon(pathD: string, fillColor: string) {
-  return () =>
-    React.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: 32,
-        height: 32,
-        viewBox: "0 0 32 32",
-      },
-      React.createElement("path", { d: pathD, fill: fillColor })
-    );
-}
-// Each icon path (different geometry and colors)
-const iconInfoPath =
-  'M16 7C20.9706 7 25 11.0294 25 16C25 20.9706 20.9706 25 16 25C11.0294 25 7 20.9706 7 16C7 11.0294 11.0294 7 16 7ZM16 14C15.4477 14 15 14.4477 15 15V20C15 20.5523 15.4477 21 16 21C16.5523 21 17 20.5523 17 20V15C17 14.4477 16.5523 14 16 14ZM16 11C15.4477 11 15 11.4477 15 12C15 12.5523 15.4477 13 16 13C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11Z';
-const warningIconPath =
-  'M15.3496 8.46973C15.7414 7.84329 16.6543 7.84314 17.0459 8.46973L25.2412 21.583C25.6574 22.249 25.1788 23.113 24.3936 23.1133H8.00195C7.21654 23.1133 6.73711 22.249 7.15332 21.583L15.3496 8.46973ZM16.1973 19.1133C15.6451 19.1134 15.1973 19.5611 15.1973 20.1133C15.1973 20.6654 15.6451 21.1132 16.1973 21.1133C16.7495 21.1133 17.1972 20.6655 17.1973 20.1133C17.1973 19.561 16.7496 19.1133 16.1973 19.1133ZM15.1973 18.1133H17.1973V13.1133H15.1973V18.1133Z';
-const errorIconPath =
-  'M16.1975 7C21.1681 7 25.1975 11.0294 25.1975 16C25.1975 20.9706 21.1681 25 16.1975 25C11.2269 25 7.19751 20.9706 7.19751 16C7.19751 11.0294 11.2269 7 16.1975 7ZM16.1975 14.5859L13.3694 11.7578L11.9553 13.1719L14.7834 16L11.9553 18.8281L13.3694 20.2422L16.1975 17.4141L19.0256 20.2422L20.4397 18.8281L17.6116 16L20.4397 13.1719L19.0256 11.7578L16.1975 14.5859Z';
-const successIconPath =
-  'M16 7C20.9706 7 25 11.0294 25 16C25 20.9706 20.9706 25 16 25C11.0294 25 7 20.9706 7 16C7 11.0294 11.0294 7 16 7ZM14.4463 17.6055L12.7217 15.8076L11.2783 17.1924L14.3525 20.3945L21.6729 13.7402L20.3271 12.2598L14.4463 17.6055Z';
-// Specific icons with unique fills
-export const ErrorIcon = createSvgIcon(errorIconPath, "#E0423A");   // red
-export const SuccessIcon = createSvgIcon(successIconPath, "#52C22B"); // green
-export const InfoIcon = createSvgIcon(iconInfoPath, "#0E8CE2");    // blue
-export const WarningIcon = createSvgIcon(warningIconPath, "#E2A50C"); // yellow
-export const commonStyle = {
-  fontFamily: 'Geist, system-ui, sans-serif',
-  color: '#14215A',
-  borderRad: '8px',
-}
-export const alertThemes = {
-  error: {
-    bg: "#FCECEB",
-    border: "2px solid #F5C4C2",
-    icon: "#E0423A",
-    IconComponent: ErrorIcon,
-    defaultTitle: "Error!",
-  },
-  success: {
-    bg: "#EEF9EA",
-    border: "2px solid #C9ECBD",
-    icon: "#52C22B",
-    IconComponent: SuccessIcon,
-    defaultTitle: "Success!",
-  },
-  warning: {
-    bg: "#FCF6E7",
-    border: "2px solid #F2D68F",
-    icon: "#E2A50C",
-    IconComponent: WarningIcon,
-    defaultTitle: "Warning!",
-  },
-  info: {
-    bg: "#E7F4FC",
-    border: "2px solid #B4DBF6",
-    icon: "#0E8CE2",
-    IconComponent: InfoIcon,
-    defaultTitle: "Info",
-  },
-};

package/src/CustomAlertTypes/utils/textWrapperUtils.ts DELETED Viewed

@@ -1,26 +0,0 @@
-/**
- * Wraps text into multiple lines by word count limit.
- * @param text - The input string
- * @param limit - Max characters per line
- * @returns Wrapped text as a single string with newlines
- */
-export function wrapText(text: string, limit: number): string {
-  const words = text.split(' ');
-  let lines: string[] = [];
-  let currentLine = '';
-  words.forEach((word) => {
-    if ((currentLine + word).length >= limit) {
-      lines.push(currentLine.trim());
-      currentLine = word + ' ';
-    } else {
-      currentLine += word + ' ';
-    }
-  });
-  if (currentLine.trim() !== '') {
-    lines.push(currentLine.trim());
-  }
-  return lines.join('\n');
-}