@licklist/design 0.68.6-dev.0 → 0.68.6-dev.2

package/dist/setting/dashboard/DashboardSettingForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardSettingForm.d.ts","sourceRoot":"","sources":["../../../src/setting/dashboard/DashboardSettingForm.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAM3E,OAAO,EAEL,2BAA2B,EAC5B,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAEL,8BAA8B,EAC/B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,MAAM,+BAA+B,GAAG;IAC5C,uBAAuB,EAAE,MAAM,CAAA;IAC/B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,iBAAiB,EAAE,MAAM,CAAA;IACzB,aAAa,EAAE,OAAO,CAAA;IACtB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yBAAyB,CAAC,EAAE,MAAM,CAAA;CACnC,GAAG,2BAA2B,GAC7B,8BAA8B,CAAA;AAYhC,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB;IAClE,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,+BAA+B,KAAK,IAAI,CAAA;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC,+BAA+B,CAAC,CAAA;IACxD,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B;AAED,eAAO,MAAM,oBAAoB,yEAM9B,yBAAyB,4CAkN3B,CAAA"}
+{"version":3,"file":"DashboardSettingForm.d.ts","sourceRoot":"","sources":["../../../src/setting/dashboard/DashboardSettingForm.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAM3E,OAAO,EAEL,2BAA2B,EAC5B,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAEL,8BAA8B,EAC/B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,MAAM,+BAA+B,GAAG;IAC5C,uBAAuB,EAAE,MAAM,CAAA;IAC/B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,iBAAiB,EAAE,MAAM,CAAA;IACzB,aAAa,EAAE,OAAO,CAAA;IACtB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yBAAyB,CAAC,EAAE,MAAM,CAAA;CACnC,GAAG,2BAA2B,GAC7B,8BAA8B,CAAA;AAYhC,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB;IAClE,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,+BAA+B,KAAK,IAAI,CAAA;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC,+BAA+B,CAAC,CAAA;IACxD,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B;AAED,eAAO,MAAM,oBAAoB,yEAM9B,yBAAyB,4CAmN3B,CAAA"}

package/dist/setting/dashboard/DashboardSettingForm.js

@@ -194,7 +194,10 @@ var DashboardSettingForm = function(param) {
                                                 children: t('metaPixelId')
                                             }),
                                             /*#__PURE__*/ jsx(Form.Control, _object_spread_props(_object_spread({
-                                                type: "number"
+                                                type: "number",
+                                                onWheel: function(event) {
+                                                    return event.currentTarget.blur();
+                                                }
                                             }, register('metaPixelId', {
                                                 minLength: {
                                                     value: 15,

package/dist/static/CurrencyNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyNumberInput.d.ts","sourceRoot":"","sources":["../../src/static/CurrencyNumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAQ,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAExD,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,uHAoC/B,CAAA"}
+{"version":3,"file":"CurrencyNumberInput.d.ts","sourceRoot":"","sources":["../../src/static/CurrencyNumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAQ,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAExD,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,uHAqC/B,CAAA"}

package/dist/static/CurrencyNumberInput.js

@@ -88,6 +88,9 @@ var CurrencyNumberInput = /*#__PURE__*/ forwardRef(function(_param, ref) {
                         disabled: disabled,
                         value: value,
                         onChange: onChange,
+                        onWheel: function(event) {
+                            return event.currentTarget.blur();
+                        },
                         ref: ref
                     }, props)),
                     /*#__PURE__*/ jsx(Form.Control.Feedback, {

package/dist/static/form-number-input/FormNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormNumberInput.d.ts","sourceRoot":"","sources":["../../../src/static/form-number-input/FormNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,eAAe,EAGhB,MAAM,iBAAiB,CAAA;AAIxB,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,IAAI,CACV,eAAe,EACf,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CACpD,CAAA;CACF;AAED,eAAO,MAAM,eAAe,2DAOzB,oBAAoB,4CAiEtB,CAAA"}
+{"version":3,"file":"FormNumberInput.d.ts","sourceRoot":"","sources":["../../../src/static/form-number-input/FormNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,eAAe,EAGhB,MAAM,iBAAiB,CAAA;AAIxB,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,IAAI,CACV,eAAe,EACf,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CACpD,CAAA;CACF;AAED,eAAO,MAAM,eAAe,2DAOzB,oBAAoB,4CAkEtB,CAAA"}

package/dist/static/form-number-input/FormNumberInput.js

@@ -106,6 +106,9 @@ var FormNumberInput = function(param) {
                                 type: "number",
                                 step: step,
                                 disabled: disabled,
+                                onWheel: function(event) {
+                                    return event.currentTarget.blur();
+                                },
                                 isInvalid: HookFormService.isInvalid(fieldName, errors)
                             }, field), {
                                 onChange: function(event) {

package/dist/static/number-input/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/static/number-input/NumberInput.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,SAAc,EACd,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,EACH,YAAY,GACb,EAAE,gBAAgB,2CAmDlB"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/static/number-input/NumberInput.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,SAAc,EACd,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,EACH,YAAY,GACb,EAAE,gBAAgB,2CAoDlB"}

package/dist/static/number-input/NumberInput.js

@@ -27,6 +27,9 @@ function NumberInput(param) {
         children: [
             /*#__PURE__*/ jsx(FormControl, {
                 type: "number",
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 onChange: function(e) {
                     return onChange(Number(e.target.value));
                 },

package/dist/tiptap-editor/TipTapMenu/extensions/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/tiptap-editor/TipTapMenu/extensions/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,sEAAsE,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/tiptap-editor/TipTapMenu/extensions/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,sEAC+C,CAAA"}

package/dist/tiptap-editor/TipTapMenu/extensions/constants.js

@@ -1,3 +1,3 @@
-var EMOJI_URL = "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/";
+var EMOJI_URL = 'https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/';
 
 export { EMOJI_URL };

package/dist/tiptap-editor/TipTapMenu/extensions/utils.js

@@ -49,7 +49,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 function parseTwemoji(emoji) {
     var _parse = _sliced_to_array(parse(emoji), 1), twemoji = _parse[0];
-    var emojiPathUrl = EMOJI_URL.concat(twemoji.url.split("/").slice(-1));
+    var emojiPathUrl = EMOJI_URL.concat(twemoji.url.split('/').slice(-1));
     return {
         src: emojiPathUrl,
         alt: twemoji.text,

package/dist/zone/form/components/GameDurationControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CA+B1B,CAAA"}
+{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CAgC1B,CAAA"}

package/dist/zone/form/components/GameDurationControl.js

@@ -77,6 +77,9 @@ var GameDurationControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:duration'),
                 isInvalid: Boolean(errors.defaultDuration),
                 disabled: isLoading

package/dist/zone/form/components/SortControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAmC1D,CAAA"}
+{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAoC1D,CAAA"}

package/dist/zone/form/components/SortControl.js

@@ -77,6 +77,9 @@ var SortControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:ordering'),
                 isInvalid: Boolean(errors.sort),
                 disabled: isLoading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.68.6-dev.0",
+  "version": "0.68.6-dev.2",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -64,6 +64,8 @@
     "@licklist/core": "0.30.0-dev.0",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.33.0-dev.0",
+    "@mantine/core": "6.0.22",
+    "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -160,15 +162,21 @@
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.8.1",
     "@vitejs/plugin-react": "4.3.1",
+    "autoprefixer": "10.4.20",
     "babel-loader": "8.2.2",
     "css-loader": "5.1.1",
+    "cssnano": "7.0.6",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-react-hooks": "4.2.0",
     "husky": "7.0.4",
     "lint-staged": "12.3.2",
+    "postcss": "8.4.47",
+    "postcss-preset-mantine": "1.17.0",
+    "postcss-simple-vars": "7.0.1",
     "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.8",
     "rollup": "3.29.4",
     "rollup-plugin-auto-external": "2.0.0",
     "rollup-plugin-copy": "3.5.0",
@@ -179,6 +187,7 @@
     "sass": "1.77.8",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
+    "tailwindcss": "3.4.13",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
     "vite": "5.3.5",

package/postcss.config.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
+  },
+}

package/rollup.config.js

@@ -33,6 +33,7 @@ export default [
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
+          { src: './src/root.css', dest: './dist' },
         ],
       }),
 

package/src/auth/Layout/UserNavDropDownToggle.tsx

@@ -19,7 +19,7 @@ function UserNavDropDownToggle(props: UserNavDropDownToggleProps) {
       </span>
 
       <DefaultUserImage
-        className='header-user-image img-profile rounded-circle'
+        className='header-user-image img-profile rounded-circle tw-ring-white'
         alt={user?.last_name}
         roundedCircle
       />

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -121,7 +121,7 @@ export const SelectEventProductSet = ({
       <div className='d-flex mt-5 mb-5 align-items-end'>
         <Form.Group
           controlId={productSetsId}
-          className='d-flex flex-column  w-100 choose-product-set-container '
+          className='d-flex flex-column w-100 choose-product-set-container'
         >
           <Form.Label>{t('Design:selectProductSet')}</Form.Label>
 
@@ -160,7 +160,7 @@ export const SelectEventProductSet = ({
                     {showOverrideProductSet && (
                       <Button
                         variant=''
-                        className='btn product-set-button '
+                        className='btn product-set-button'
                         onClick={onEditProductSet}
                       >
                         {isOverrideProductSet

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -89,6 +89,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <FormControl
           type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
+          onWheel={(event) => event.currentTarget.blur()}
           value={value}
           min={0}
           max={max}
@@ -101,6 +102,14 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type='button'
           onClick={handleArrowUpClick}
+          onWheel={(event) => event.currentTarget.blur()}
+          onFocus={(event) =>
+            event.target.addEventListener(
+              'wheel',
+              (event) => event.preventDefault(),
+              { passive: false },
+            )
+          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}

package/src/iframe/order-process/components/Timer/Timer.tsx

@@ -11,7 +11,7 @@ export const Timer = ({ timer }: TimerProps) => {
 
   return (
     <div className='payment-timer-counter'>
-      <div className='timer-wrapper '>
+      <div className='timer-wrapper'>
         <div className='timer'>
           <div className='d-flex align-items-center'>
             <FaStopwatch />

package/src/modals/dialog/Dialog.tsx

@@ -41,11 +41,11 @@ export const Dialog = ({
         centered
         className='text-center justify-content-center rounded'
       >
-        <Modal.Header className='justify-content-center border-0 '>
+        <Modal.Header className='justify-content-center border-0'>
           {title && <Modal.Title as='h6'>{title}</Modal.Title>}
         </Modal.Header>
         {content && (
-          <Modal.Body className='justify-content-center '>{content}</Modal.Body>
+          <Modal.Body className='justify-content-center'>{content}</Modal.Body>
         )}
         <Modal.Footer className='border-0 justify-content-center'>
           {customButtons || (

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -434,6 +434,7 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
+                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

package/src/product-set/form/MobileFooter.tsx

@@ -7,8 +7,7 @@ export function MobileFooter() {
   return (
     <div className='container product-set-mobile-footer'>
       <div
-        className={`d-block d-sm-none bg-white border-top fixed-bottom
-         py-4 px-5 d-flex justify-content-between flex-row-reverse`}
+        className={`d-block d-sm-none bg-white border-top fixed-bottom py-4 px-5 d-flex justify-content-between flex-row-reverse`}
       >
         <Button type='submit'>{t('save')}</Button>
       </div>

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -86,6 +86,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -129,6 +130,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min='0'
                 step='1'
                 value={value as string}

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -50,6 +50,7 @@ export function ProductDepositControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
                 step='0.01'

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -91,6 +91,7 @@ export const ProductDurationControl = <T,>({
                 <Form.Control
                   type='number'
                   min={0}
+                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -127,6 +128,7 @@ export const ProductDurationControl = <T,>({
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -59,6 +59,7 @@ export function ProductPriceControl<T extends FormValues>({
                 ref={ref}
                 type='number'
                 min={0}
+                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
                 step='0.01'
                 value={value as string}

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -111,6 +111,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -165,6 +166,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -85,6 +85,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -143,6 +144,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -69,6 +69,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type='number'
                 min={0}
                 step={1}
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -216,6 +216,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -288,6 +289,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -348,6 +350,7 @@ export function ProductCategoryControl({
                       min={0}
                       step={1}
                       type='number'
+                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -530,6 +533,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -109,6 +109,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/recurring-date-picker-input/RecurrenceEndInput.tsx

@@ -91,6 +91,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/resource/form/components/CapacityControl.tsx

@@ -27,6 +27,7 @@ export const CapacityControl = ({ isLoading }: CapacityControlProps) => {
           required: true,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:capacity')}
         isInvalid={Boolean(errors.capacity)}
         disabled={isLoading}

package/src/resource/form/components/SortControl.tsx

@@ -27,6 +27,7 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}

package/src/root.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 95%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 204 88% 47%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -179,6 +179,7 @@ export const CouponFormControl = ({
               <Form.Label>{t('Design:discount')}</Form.Label>
               <Form.Control
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.discount !== undefined}
                 {...register('discount', {
                   required: t('Validation:fieldRequired', {
@@ -316,6 +317,7 @@ export const CouponFormControl = ({
               <Form.Control
                 {...register('totalCoupons')}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}
               />
@@ -330,6 +332,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('usesPerUser')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
             </Form.Group>
@@ -342,6 +345,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('useAgain')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -355,6 +359,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('usesPerUserDay')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -370,6 +375,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('minAmount')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -383,6 +389,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('maxAmount')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>

package/src/sales/manual-booking/search-user/SearchUser.tsx

@@ -102,7 +102,7 @@ export const SearchUser = ({
         {t('Design:search')}
       </div>
       <div className='search-container'>
-        <div className=' search-input-container'>
+        <div className='search-input-container'>
           <div className='input-label'>{t('Sale:byName')}</div>
           <Controller
             control={control}