@codeleap/web 4.0.2 → 4.2.1

package/dist/lib/utils/cache.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeleapWebCache = exports.createCodeleapWebCache = void 0;
+var cache_1 = __importDefault(require("@emotion/cache"));
+var createCodeleapWebCache = function () {
+    return (0, cache_1.default)({
+        key: 'codeleap-web',
+    });
+};
+exports.createCodeleapWebCache = createCodeleapWebCache;
+exports.codeleapWebCache = (0, exports.createCodeleapWebCache)();
+//# sourceMappingURL=cache.js.map

package/dist/lib/utils/cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.js","sourceRoot":"","sources":["../../../src/lib/utils/cache.ts"],"names":[],"mappings":";;;;;;AAAA,yDAAwC;AAEjC,IAAM,sBAAsB,GAAG;IACpC,OAAO,IAAA,eAAW,EAAC;QACjB,GAAG,EAAE,cAAc;KACpB,CAAC,CAAA;AACJ,CAAC,CAAA;AAJY,QAAA,sBAAsB,0BAIlC;AAEY,QAAA,gBAAgB,GAAG,IAAA,8BAAsB,GAAE,CAAA"}

package/dist/lib/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './pollyfils/scroll';
+export * from './stopPropagation';
+export * from './test';
+export * from './cache';

package/dist/lib/utils/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./pollyfils/scroll"), exports);
+__exportStar(require("./stopPropagation"), exports);
+__exportStar(require("./test"), exports);
+__exportStar(require("./cache"), exports);
+//# sourceMappingURL=index.js.map

package/dist/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC;AAClC,oDAAiC;AACjC,yCAAsB;AACtB,0CAAuB"}

package/dist/lib/utils/pollyfils/scroll.d.ts

@@ -0,0 +1 @@
+export declare const scrollToElem: (elemSelector: any, padOffsets?: number[]) => void;

package/dist/lib/utils/pollyfils/scroll.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollToElem = void 0;
+// native smooth scrolling for Chrome, Firefox & Opera
+// @see: https://caniuse.com/#feat=css-scroll-behavior
+var nativeSmoothScrollTo = function (elem, pad) {
+    if (pad === void 0) { pad = 0; }
+    if (!window)
+        return;
+    window.scroll({
+        behavior: 'smooth',
+        left: 0,
+        top: elem.getBoundingClientRect().top + window.pageYOffset + pad,
+    });
+};
+// polyfilled smooth scrolling for IE, Edge & Safari
+var smoothScrollTo = function (to, duration) {
+    if (!document)
+        return;
+    var element = document.scrollingElement || document.documentElement, start = element.scrollTop, change = to - start, startDate = +new Date();
+    // t = current time
+    // b = start value
+    // c = change in value
+    // d = duration
+    var easeInOutQuad = function (t, b, c, d) {
+        t /= d / 2;
+        if (t < 1)
+            return (c / 2) * t * t + b;
+        t--;
+        return (-c / 2) * (t * (t - 2) - 1) + b;
+    };
+    var animateScroll = function () {
+        var currentDate = +new Date();
+        var currentTime = currentDate - startDate;
+        element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration));
+        if (currentTime < duration) {
+            requestAnimationFrame(animateScroll);
+        }
+        else {
+            element.scrollTop = to;
+        }
+    };
+    animateScroll();
+};
+// detect support for the behavior property in ScrollOptions
+// smooth scrolling stub
+var scrollToElem = function (elemSelector, padOffsets) {
+    if (padOffsets === void 0) { padOffsets = [0, 0]; }
+    if (!document)
+        return;
+    var supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style || {};
+    if (!elemSelector) {
+        return;
+    }
+    var elem = document.querySelector(elemSelector);
+    if (elem) {
+        if (supportsNativeSmoothScroll) {
+            nativeSmoothScrollTo(elem, padOffsets[0]);
+        }
+        else {
+            smoothScrollTo(elem.offsetTop + padOffsets[0], 600);
+        }
+    }
+};
+exports.scrollToElem = scrollToElem;
+//# sourceMappingURL=scroll.js.map

package/dist/lib/utils/pollyfils/scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../../src/lib/utils/pollyfils/scroll.ts"],"names":[],"mappings":";;;AAAA,sDAAsD;AACtD,sDAAsD;AACtD,IAAM,oBAAoB,GAAG,UAAC,IAAI,EAAE,GAAO;IAAP,oBAAA,EAAA,OAAO;IACzC,IAAI,CAAC,MAAM;QAAE,OAAM;IACnB,MAAM,CAAC,MAAM,CAAC;QACZ,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,GAAG;KACjE,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,oDAAoD;AACpD,IAAM,cAAc,GAAG,UAAC,EAAE,EAAE,QAAQ;IAClC,IAAI,CAAC,QAAQ;QAAE,OAAM;IACrB,IAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,IAAI,QAAQ,CAAC,eAAe,EACnE,KAAK,GAAG,OAAO,CAAC,SAAS,EACzB,MAAM,GAAG,EAAE,GAAG,KAAK,EACnB,SAAS,GAAG,CAAC,IAAI,IAAI,EAAE,CAAA;IAEzB,mBAAmB;IACnB,kBAAkB;IAClB,sBAAsB;IACtB,eAAe;IACf,IAAM,aAAa,GAAG,UAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC/B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACV,IAAI,CAAC,GAAG,CAAC;YAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACrC,CAAC,EAAE,CAAA;QACH,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;IACzC,CAAC,CAAA;IAED,IAAM,aAAa,GAAG;QACpB,IAAM,WAAW,GAAG,CAAC,IAAI,IAAI,EAAE,CAAA;QAC/B,IAAM,WAAW,GAAG,WAAW,GAAG,SAAS,CAAA;QAC3C,OAAO,CAAC,SAAS,GAAG,QAAQ,CAC1B,aAAa,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,CACpD,CAAA;QACD,IAAI,WAAW,GAAG,QAAQ,EAAE;YAC1B,qBAAqB,CAAC,aAAa,CAAC,CAAA;SACrC;aAAM;YACL,OAAO,CAAC,SAAS,GAAG,EAAE,CAAA;SACvB;IACH,CAAC,CAAA;IACD,aAAa,EAAE,CAAA;AACjB,CAAC,CAAA;AAED,4DAA4D;AAE5D,wBAAwB;AACjB,IAAM,YAAY,GAAG,UAAC,YAAY,EAAE,UAAmB;IAAnB,2BAAA,EAAA,cAAc,CAAC,EAAE,CAAC,CAAC;IAC5D,IAAI,CAAC,QAAQ;QAAE,OAAM;IACrB,IAAM,0BAA0B,GAC9B,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,IAAI,EAAE,CAAA;IAC1D,IAAI,CAAC,YAAY,EAAE;QACjB,OAAM;KACP;IAED,IAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;IACjD,IAAI,IAAI,EAAE;QACR,IAAI,0BAA0B,EAAE;YAC9B,oBAAoB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;SAC1C;aAAM;YACL,cAAc,CAAC,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;SACpD;KACF;AACH,CAAC,CAAA;AAhBY,QAAA,YAAY,gBAgBxB"}

package/dist/lib/utils/stopPropagation.d.ts

@@ -0,0 +1 @@
+export declare function stopPropagation(event: any): void;

package/dist/lib/utils/stopPropagation.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stopPropagation = void 0;
+function stopPropagation(event) {
+    var _a;
+    var tryCalls = [
+        event === null || event === void 0 ? void 0 : event.stopPropagation.bind(event),
+        event === null || event === void 0 ? void 0 : event.preventDefault.bind(event),
+        (_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation.bind(event.nativeEvent),
+    ];
+    for (var _i = 0, tryCalls_1 = tryCalls; _i < tryCalls_1.length; _i++) {
+        var call = tryCalls_1[_i];
+        try {
+            call();
+        }
+        catch (e) { }
+    }
+}
+exports.stopPropagation = stopPropagation;
+//# sourceMappingURL=stopPropagation.js.map

package/dist/lib/utils/stopPropagation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stopPropagation.js","sourceRoot":"","sources":["../../../src/lib/utils/stopPropagation.ts"],"names":[],"mappings":";;;AAEA,SAAgB,eAAe,CAAC,KAAU;;IACxC,IAAM,QAAQ,GAAG;QACf,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;QAClC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;QACjC,MAAA,KAAK,CAAC,WAAW,0CAAE,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAgB;KACnF,CAAA;IAED,KAAmB,UAAQ,EAAR,qBAAQ,EAAR,sBAAQ,EAAR,IAAQ,EAAE;QAAxB,IAAM,IAAI,iBAAA;QACb,IAAI;YACF,IAAI,EAAE,CAAA;SACP;QAAC,OAAO,CAAC,EAAE,GAAE;KACf;AACH,CAAC;AAZD,0CAYC"}

package/dist/lib/utils/test.d.ts

@@ -0,0 +1 @@
+export declare const getTestId: (props: Record<string, any>) => any;

package/dist/lib/utils/test.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTestId = void 0;
+var common_1 = require("@codeleap/common");
+var getTestId = function (props) {
+    var id = (props === null || props === void 0 ? void 0 : props.testId) || (props === null || props === void 0 ? void 0 : props['data-testid']) || (props === null || props === void 0 ? void 0 : props.id) || (props === null || props === void 0 ? void 0 : props.debugName);
+    if (common_1.TypeGuards.isString(id)) {
+        id = id === null || id === void 0 ? void 0 : id.replace(/\s/g, '_').toLowerCase();
+    }
+    return id;
+};
+exports.getTestId = getTestId;
+//# sourceMappingURL=test.js.map

package/dist/lib/utils/test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../../src/lib/utils/test.ts"],"names":[],"mappings":";;;AAAA,2CAA6C;AAEtC,IAAM,SAAS,GAAG,UAAC,KAA0B;IAClD,IAAI,EAAE,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,MAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,aAAa,CAAC,CAAA,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAA,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAA,CAAA;IAEjF,IAAI,mBAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;QAC3B,EAAE,GAAG,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA;KAC3C;IAED,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AARY,QAAA,SAAS,aAQrB"}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './utility';

package/dist/types/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./utility"), exports);
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAAyB"}

package/dist/types/utility.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CSSInterpolation } from '@emotion/css';
+export type StylesOf<C extends string> = Partial<Record<C, CSSInterpolation>>;
+type WithChildren<T> = T & {
+    children?: React.ReactNode;
+};
+export type ElementMap = {
+    'select': WithChildren<JSX.IntrinsicElements['select']>;
+    'input': WithChildren<JSX.IntrinsicElements['input']>;
+    'textarea': WithChildren<JSX.IntrinsicElements['textarea']>;
+    'button': WithChildren<JSX.IntrinsicElements['button']>;
+    'form': WithChildren<JSX.IntrinsicElements['form']>;
+    'label': WithChildren<JSX.IntrinsicElements['label']>;
+    'a': WithChildren<JSX.IntrinsicElements['a']>;
+    'img': WithChildren<JSX.IntrinsicElements['img']>;
+    'div': WithChildren<JSX.IntrinsicElements['div']>;
+    'span': WithChildren<JSX.IntrinsicElements['span']>;
+    'p': WithChildren<JSX.IntrinsicElements['p']>;
+    'section': WithChildren<JSX.IntrinsicElements['section']>;
+    'header': WithChildren<JSX.IntrinsicElements['header']>;
+    'footer': WithChildren<JSX.IntrinsicElements['footer']>;
+    'nav': WithChildren<JSX.IntrinsicElements['nav']>;
+    'article': WithChildren<JSX.IntrinsicElements['article']>;
+    'ul': WithChildren<JSX.IntrinsicElements['ul']>;
+    'ol': WithChildren<JSX.IntrinsicElements['ol']>;
+    'aside': WithChildren<JSX.IntrinsicElements['aside']>;
+};
+export type NativeHTMLElement = keyof ElementMap;
+export type HTMLProps<T extends NativeHTMLElement> = ElementMap[T];
+export type ComponentWithDefaultProps<P> = ((props: P) => JSX.Element) & {
+    defaultProps?: Partial<P>;
+};
+export type ComponentCommonProps = {
+    debugName: string;
+};
+export type SelectProperties<T extends Record<string | number | symbol, any>, K extends keyof T> = {
+    [P in K]: T[K];
+};
+export {};

package/dist/types/utility.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=utility.js.map

package/dist/types/utility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility.js","sourceRoot":"","sources":["../../src/types/utility.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "4.0.2",
+  "version": "4.2.1",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -9,17 +9,17 @@
   },
   "license": "UNLICENSED",
   "devDependencies": {
-    "@codeleap/config": "*",
-    "@codeleap/common": "*",
-    "@emotion/react": "link:../../apps/web/node_modules/@emotion/react",
-    "@types/react-slick": "^0.23.10",
-    "react": "link:../../apps/web/node_modules/react"
+    "@codeleap/common": "4.2.1",
+    "@codeleap/config": "4.2.1",
+    "@codeleap/styles": "4.2.1",
+    "@types/react-slick": "^0.23.10"
   },
   "scripts": {
     "build": "rm -rf ./dist && tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "dependencies": {
+    "@fastify/deepmerge": "1.3.0",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slider": "1.1.1",
     "@radix-ui/react-tooltip": "^1.0.6",
@@ -27,23 +27,22 @@
     "framer-motion": "^10.10.0",
     "masonic": "^3.7.0",
     "react-autosize-textarea": "^7.1.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-colorful": "^5.6.1",
     "react-datepicker": "^4.20.0",
-    "react-circular-progressbar": "^2.1.0",
     "react-dropzone": "^14.2.3",
     "react-image-crop": "^10.1.8",
     "react-input-mask": "^2.0.4",
-    "react-number-format": "^5.2.1",
+    "react-number-format": "^5.4.2",
     "react-select": "^5.7.3",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",
     "uuid": "^8.3.2",
-    "zustand": "^4.4.1",
-    "@fastify/deepmerge": "1.3.0"
+    "zustand": "^4.4.1"
   },
   "peerDependencies": {
-    "@codeleap/common": "*",
-    "@codeleap/styles": "*",
+    "@codeleap/common": "4.2.1",
+    "@codeleap/styles": "4.2.1",
     "@emotion/react": "11.10.6",
     "@reach/router": "^1.3.4",
     "axios": "1.3.5",
@@ -54,4 +53,4 @@
     "react-select": "*",
     "typescript": "5.0.4"
   }
-}
+}

package/package.json.bak

@@ -0,0 +1,56 @@
+{
+  "name": "@codeleap/web",
+  "version": "4.2.1",
+  "main": "src/index.ts",
+  "repository": {
+    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
+    "type": "git",
+    "directory": "packages/web"
+  },
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@codeleap/common": "workspace:*",
+    "@codeleap/config": "workspace:*",
+    "@codeleap/styles": "workspace:*",
+    "@types/react-slick": "^0.23.10"
+  },
+  "scripts": {
+    "build": "rm -rf ./dist && tsc --build",
+    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
+  },
+  "dependencies": {
+    "@fastify/deepmerge": "1.3.0",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-slider": "1.1.1",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@tiptap/react": "2.1.16",
+    "framer-motion": "^10.10.0",
+    "masonic": "^3.7.0",
+    "react-autosize-textarea": "^7.1.0",
+    "react-circular-progressbar": "^2.1.0",
+    "react-colorful": "^5.6.1",
+    "react-datepicker": "^4.20.0",
+    "react-dropzone": "^14.2.3",
+    "react-image-crop": "^10.1.8",
+    "react-input-mask": "^2.0.4",
+    "react-number-format": "^5.4.2",
+    "react-select": "^5.7.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
+    "uuid": "^8.3.2",
+    "zustand": "^4.4.1"
+  },
+  "peerDependencies": {
+    "@codeleap/common": "workspace:*",
+    "@codeleap/styles": "workspace:*",
+    "@emotion/react": "11.10.6",
+    "@reach/router": "^1.3.4",
+    "axios": "1.3.5",
+    "gatsby-plugin-intl": "^0.3.3",
+    "react": "18.1.0",
+    "react-dom": "18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-select": "*",
+    "typescript": "5.0.4"
+  }
+}

package/src/components/Collapse/index.tsx

@@ -26,10 +26,9 @@ export const Collapse = (props: CollapseProps) => {
       animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
       transition={{ duration: 0.2 }}
       {...rest}
-      style={{
-        ...styles.wrapper,
-        ...(open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']),
-      }}
+      style={open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']}
+      // @ts-expect-error css type
+      css={[styles.wrapper, open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']]}
     >
       {children}
     </motion.div>

package/src/components/EmptyPlaceholder/index.tsx

@@ -27,6 +27,7 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
     imageWrapperProps,
     indicatorProps,
     debugName,
+    ImageComponent,
   } = {
     ...EmptyPlaceholder.defaultProps,
     ...props,
@@ -39,11 +40,14 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
   const activityIndicatorStyles = useNestedStylesByKey('loader', styles)
 
   const _Image = React.useMemo(() => {
-    if (TypeGuards.isString(image)) {
-      return <img
+
+    if (!TypeGuards.isNil(image)) {
+
+      return <ImageComponent
         {...imageProps}
-        src={image as HTMLImageElement['src']}
-        // @ts-expect-error
+        // @ts-ignore
+        source={image as HTMLImageElement['src']}
+
         css={styles.image}
       />
     }
@@ -102,7 +106,7 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
 EmptyPlaceholder.styleRegistryName = 'EmptyPlaceholder'
 EmptyPlaceholder.elements = ['wrapper', 'loader', 'title', 'description', 'image', 'imageWrapper', 'icon']
 EmptyPlaceholder.rootElement = 'wrapper'
-
+EmptyPlaceholder.ImageComponent = 'img'
 EmptyPlaceholder.withVariantTypes = <S extends AnyRecord>(styles: S) => {
   return EmptyPlaceholder as (props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX
 }

package/src/components/EmptyPlaceholder/types.ts

@@ -29,4 +29,5 @@ export type EmptyPlaceholderProps =
     wrapperProps?: ViewProps
     imageWrapperProps?: ViewProps
     indicatorProps?: Partial<ActivityIndicatorProps>
+    ImageComponent?: React.ComponentType
   }

package/src/components/List/ListLayout.tsx

@@ -56,6 +56,7 @@ export const ListLayout = (props: ListLayoutProps) => {
     ListLoadingIndicatorComponent,
     scrollableRef,
     showFooter = true,
+    wrapperProps,
   } = props
 
   const getKeyStyle = (key: ListParts) => mergeStyles([
@@ -67,7 +68,7 @@ export const ListLayout = (props: ListLayoutProps) => {
   const showIndicator = (isFetching || isFetchingNextPage) && !TypeGuards.isNil(ListLoadingIndicatorComponent)
 
   return (
-    <View style={getKeyStyle('wrapper')} ref={scrollableRef}>
+    <View style={getKeyStyle('wrapper')} ref={scrollableRef} {...wrapperProps}>
       {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
 
       {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : null}

package/src/components/List/index.tsx

@@ -33,6 +33,7 @@ export function List(props: ListProps) {
     reloadTimeout,
     showFooter,
     style,
+    layoutWrapperProps,
   } = allProps
 
   const styles = useStylesFor(List.styleRegistryName, style)
@@ -75,6 +76,7 @@ export function List(props: ListProps) {
     <ListLayout
       {...allProps}
       {...layoutProps}
+      wrapperProps={layoutWrapperProps}
       styles={styles}
       showFooter={reloadingLayout ? false : showFooter}
     >

package/src/components/List/types.ts

@@ -12,6 +12,7 @@ export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollR
   styles: StylesOf<ListComposition>
   children?: React.ReactNode
   showFooter?: boolean
+  wrapperProps?: Partial<ViewProps>
 }
 
 export type ListRefreshControlComponent = Partial<ListLayoutProps> & {
@@ -64,4 +65,5 @@ export type ListProps<T extends ListItem = ListItem> =
     masonryProps?: Partial<ListMasonryProps<T>>
     reloadTimeout?: number
     showFooter?: boolean
+    layoutWrapperProps?: Partial<ViewProps>
   }

package/src/components/Select/index.tsx

@@ -29,7 +29,9 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
     debugName,
   } = props
 
-  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.style ?? {}) })
+  const optionProps = props?.data?.itemProps
+
+  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (optionProps?.style ?? itemProps?.style ?? {}) })
 
   let _Component = null
 
@@ -41,6 +43,7 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
         rightIcon={isSelected && selectedIcon}
         debugName={debugName}
         {...itemProps}
+        {...optionProps}
         style={styles}
       />
     )
@@ -162,7 +165,7 @@ const defaultFormatPlaceholderNoItems = (props: PlaceholderProps & { text: strin
 }
 
 export const Select = forwardRef<HTMLInputElement, SelectProps>(
- <T extends string | number = string, Multi extends boolean = false>
+  <T extends string | number = string, Multi extends boolean = false>
   (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
 
     type Option = FormTypes.Option<T>
@@ -221,7 +224,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const _innerInputRef = useRef<any>(null)
     const innerInputRef = selectRef || _innerInputRef
-    const innerWrapperRef = useRef(null)
+    const innerWrapperRef = useRef<HTMLDivElement>(null)
 
     const hasSelectedOptionState = !TypeGuards.isNil(_selectedOption) && TypeGuards.isFunction(_setSelectedOption)
 
@@ -259,11 +262,12 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       loadingStyles,
       inputMultiValueStyles,
       menuWrapperStyles,
-      // @ts-expect-error @verify
+      // @ts-expect-error
     } = useSelectStyles({ ...props, styleRegistryName: Select.styleRegistryName }, {
       error: !!hasError,
       focused: isFocused,
       disabled: isDisabled,
+      parentWidth: innerWrapperRef?.current?.clientWidth,
     })
 
     useImperativeHandle(inputRef, () => {
@@ -410,6 +414,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           tabSelectsValue={false}
           tabIndex={0}
           backspaceRemovesValue={true}
+          menuPortalTarget={typeof document === 'undefined' ? undefined : document.body}
           {...otherProps}
           {..._props}
           onKeyDown={isFocused ? handleKeyDown : null}
@@ -424,7 +429,6 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           defaultOptions={loadOptionsOnMount}
           ref={innerInputRef}
           closeMenuOnSelect={closeOnSelect}
-          menuPortalTarget={innerWrapperRef.current}
           placeholder={(loadOptionsOnMount && !loadedOptions) ? loadingMessage : placeholder}
           isDisabled={isDisabled}
           isClearable={clearable}
@@ -467,7 +471,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
         />
       </InputBase>
     )
- }) as StyledComponentWithProps<SelectProps>
+  }) as StyledComponentWithProps<SelectProps>
 
 Select.styleRegistryName = 'Select'
 

package/src/components/Select/styles.ts

@@ -49,6 +49,7 @@ export type ComponentState = {
   error?: boolean
   focused?: boolean
   disabled?: boolean
+  parentWidth?: number
 }
 
 export type OptionState = {
@@ -60,7 +61,7 @@ export type OptionState = {
 export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStylesProps, state: ComponentState) {
   const { style } = props
 
-  const { error, focused, disabled } = state
+  const { error, focused, disabled, parentWidth } = state
 
   const styles = useStylesFor(props?.styleRegistryName, style)
 
@@ -121,10 +122,18 @@ export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStyles
     wrapper: stylesKey('itemsWrapper'),
   }
 
+  const parseMenuPortalStyles = (baseStyles: CSSObjectWithLabel) => {
+    return {
+      ...baseStyles,
+      width: parentWidth,
+      left: `calc(${baseStyles.left}px - ((${parentWidth}px - ${baseStyles.width}px) / 2))`
+    }
+  }
+
   const reactSelectStyles: StylesConfig<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>> = {
     container: (baseStyles) => stylesKey('inputContainer', baseStyles),
     control: () => stylesKey('inputContainer'),
-    menuPortal: (baseStyles) => stylesKey('listPortal', baseStyles),
+    menuPortal: (baseStyles) => stylesKey('listPortal', parseMenuPortalStyles(baseStyles)),
     menu: (baseStyles) => stylesKey('listWrapper', baseStyles),
     menuList: (baseStyles) => stylesKey('list', baseStyles),
     group: () => ({}),

package/src/components/Select/types.ts

@@ -27,7 +27,7 @@ type DynamicSelectProps<T, Multi extends boolean> =
   >)
 
 export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'style'> & {
-  options: FormTypes.Options<T>
+  options: FormTypes.Options<T> & { itemProps?: ButtonProps }
   value: SelectValue<T, Multi>
   onValueChange?: (value: SelectValue<T, Multi>) => void
   multiple?: Multi
@@ -45,6 +45,7 @@ export type ComponentPartProps = {
 export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonProps & {
   optionsStyles: (state: OptionState) => OptionState['baseStyles']
   selectedIcon?: string
+  data: OptionProps['data'] & { itemProps?: ButtonProps}
   itemProps?: ButtonProps
   styles?: OptionState['baseStyles']
 }

package/src/lib/hooks/useCropPicker.ts

@@ -16,6 +16,8 @@ export type UseCropPickerProps = Partial<ReactCropProps> & {
   ref: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef>
 }
 
+type ImageType = 'png' | 'jpeg' | 'webp'
+
 export function readImage(file: File | Blob): Promise<ImageReading> {
   const reader = new FileReader()
   return new Promise<ImageReading>((resolve) => {
@@ -28,7 +30,7 @@ export function readImage(file: File | Blob): Promise<ImageReading> {
   })
 }
 
-export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blob]> {
+export function cropImage(image: ImageReading, crop: Crop, type: ImageType): Promise<[string, Blob]> {
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d', { alpha: true })
 
@@ -61,7 +63,7 @@ export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blo
       readImage(blob).then(cropped => {
         resolve([cropped.src, blob])
       }).catch(reject)
-    }, 'image/png')
+    }, `image/${type}`)
   })
 }
 
@@ -93,9 +95,9 @@ export function useCropPicker({
     setTimeout(() => setImage(null), 500)
   }
 
-  const onConfirmCrop = async () => {
+  const onConfirmCrop = async (imageType: ImageType = 'jpeg') => {
     setIsLoading(true)
-    const [preview, croppedFile] = await cropImage(image, relativeCrop)
+    const [preview, croppedFile] = await cropImage(image, relativeCrop, imageType)
     onResolved([
       {
         file: new File([croppedFile], 'cropped.jpg'),