@codeleap/web 2.0.0 → 2.3.12

package/dist/components/Modal/index.js

@@ -1,120 +1,120 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.ModalContent = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var common_1 = require("@codeleap/common");
-var react_1 = require("react");
-var react_dom_1 = __importDefault(require("react-dom"));
-var uuid_1 = require("uuid");
-var Button_1 = require("../Button");
-var View_1 = require("../View");
-var Text_1 = require("../Text");
-var Overlay_1 = require("../Overlay");
-__exportStar(require("./styles"), exports);
-function focusModal(event, id) {
-    event.preventDefault();
-    var modal = document.getElementById(id);
-    if (modal) {
-        modal.focus();
-    }
-}
-var ModalContent = function (modalProps) {
-    var children = modalProps.children, _a = modalProps.closable, closable = _a === void 0 ? true : _a, visible = modalProps.visible, _b = modalProps.title, title = _b === void 0 ? '' : _b, toggle = modalProps.toggle, id = modalProps.id, responsiveVariants = modalProps.responsiveVariants, variants = modalProps.variants, styles = modalProps.styles, _c = modalProps.showClose, showClose = _c === void 0 ? true : _c, footer = modalProps.footer, props = __rest(modalProps, ["children", "closable", "visible", "title", "toggle", "id", "responsiveVariants", "variants", "styles", "showClose", "footer"]);
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Modal', {
-        responsiveVariants: responsiveVariants,
-        variants: variants,
-        styles: styles,
-    });
-    (0, common_1.onUpdate)(function () {
-        if (visible) {
-            document.body.style.overflow = 'hidden';
-        }
-        else {
-            document.body.style.overflow = 'auto';
-        }
-    }, [visible]);
-    function closeOnEscPress(e) {
-        if (e.key === 'Escape') {
-            toggle();
-        }
-    }
-    (0, react_1.useLayoutEffect)(function () {
-        var modal = document.getElementById(id);
-        if (modal) {
-            modal.focus();
-        }
-    }, [id]);
-    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ "aria-hidden": !visible, css: variantStyles.wrapper, className: visible ? 'visible' : '' }, { children: [(0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { visible: visible, onPress: closable ? toggle : function () { }, css: variantStyles.overlay }), (0, jsx_runtime_1.jsxs)(View_1.View, __assign({ component: 'section', css: __assign({}, variantStyles.box), className: 'content', onKeyDown: closeOnEscPress, tabIndex: 0, id: id, "aria-modal": true, role: 'dialog', "aria-describedby": "".concat(id, "-title"), "aria-label": 'Close the modal by presing Escape key' }, props, { children: [(title || showClose) && ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ component: 'header', className: 'modal-header header', id: "".concat(id, "-title"), css: variantStyles.header }, { children: [typeof title === 'string' ? (0, jsx_runtime_1.jsx)(Text_1.Text, { text: title, css: variantStyles.title }) : title, showClose && closable && ((0, jsx_runtime_1.jsx)(Button_1.Button, { rightIcon: 'close', variants: ['icon'], onPress: toggle, css: variantStyles.closeButton }))] }))), (0, jsx_runtime_1.jsx)(View_1.View, __assign({ css: variantStyles.body }, { children: children })), footer && ((0, jsx_runtime_1.jsx)(View_1.View, __assign({ component: 'footer', css: variantStyles.footer }, { children: footer })))] }))] })));
-};
-exports.ModalContent = ModalContent;
-var Modal = function (_a) {
-    var accessible = _a.accessible, props = __rest(_a, ["accessible"]);
-    var modalId = (0, react_1.useRef)((0, uuid_1.v4)());
-    (0, react_1.useEffect)(function () {
-        if (accessible) {
-            var currentId_1 = modalId.current;
-            var appRoot_1 = document.body;
-            appRoot_1.addEventListener('focusin', function (e) { return focusModal(e, currentId_1); });
-            return function () { return appRoot_1.removeEventListener('focusin', function (e) { return focusModal(e, currentId_1); }); };
-        }
-    }, []);
-    (0, react_1.useEffect)(function () {
-        if (accessible) {
-            var appRoot = document.body;
-            appRoot.setAttribute('aria-hidden', "".concat(props.visible));
-            appRoot.setAttribute('tabindex', "".concat(-1));
-        }
-    }, [props.visible]);
-    if (accessible) {
-        if (props.visible) {
-            document.body.style.overflow = 'hidden';
-            return react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(exports.ModalContent, __assign({}, props, { id: modalId.current })), document.body);
-        }
-        else {
-            document.body.style.overflow = 'visible';
-            return null;
-        }
-    }
-    return (0, jsx_runtime_1.jsx)(exports.ModalContent, __assign({}, props, { id: modalId.current }));
-};
-exports.Modal = Modal;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = exports.ModalContent = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var common_1 = require("@codeleap/common");
+var react_1 = require("react");
+var react_dom_1 = __importDefault(require("react-dom"));
+var uuid_1 = require("uuid");
+var Button_1 = require("../Button");
+var View_1 = require("../View");
+var Text_1 = require("../Text");
+var Overlay_1 = require("../Overlay");
+__exportStar(require("./styles"), exports);
+function focusModal(event, id) {
+    event.preventDefault();
+    var modal = document.getElementById(id);
+    if (modal) {
+        modal.focus();
+    }
+}
+var ModalContent = function (modalProps) {
+    var children = modalProps.children, _a = modalProps.closable, closable = _a === void 0 ? true : _a, visible = modalProps.visible, _b = modalProps.title, title = _b === void 0 ? '' : _b, toggle = modalProps.toggle, id = modalProps.id, responsiveVariants = modalProps.responsiveVariants, variants = modalProps.variants, styles = modalProps.styles, _c = modalProps.showClose, showClose = _c === void 0 ? true : _c, footer = modalProps.footer, props = __rest(modalProps, ["children", "closable", "visible", "title", "toggle", "id", "responsiveVariants", "variants", "styles", "showClose", "footer"]);
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Modal', {
+        responsiveVariants: responsiveVariants,
+        variants: variants,
+        styles: styles,
+    });
+    (0, common_1.onUpdate)(function () {
+        if (visible) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+    }, [visible]);
+    function closeOnEscPress(e) {
+        if (e.key === 'Escape') {
+            toggle();
+        }
+    }
+    (0, react_1.useLayoutEffect)(function () {
+        var modal = document.getElementById(id);
+        if (modal) {
+            modal.focus();
+        }
+    }, [id]);
+    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ "aria-hidden": !visible, css: variantStyles.wrapper, className: visible ? 'visible' : '' }, { children: [(0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { visible: visible, onPress: closable ? toggle : function () { }, css: variantStyles.overlay }), (0, jsx_runtime_1.jsxs)(View_1.View, __assign({ component: 'section', css: __assign({}, variantStyles.box), className: 'content', onKeyDown: closeOnEscPress, tabIndex: 0, id: id, "aria-modal": true, role: 'dialog', "aria-describedby": "".concat(id, "-title"), "aria-label": 'Close the modal by presing Escape key' }, props, { children: [(title || showClose) && ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ component: 'header', className: 'modal-header header', id: "".concat(id, "-title"), css: variantStyles.header }, { children: [typeof title === 'string' ? (0, jsx_runtime_1.jsx)(Text_1.Text, { text: title, css: variantStyles.title }) : title, showClose && closable && ((0, jsx_runtime_1.jsx)(Button_1.Button, { rightIcon: 'close', variants: ['icon'], onPress: toggle, css: variantStyles.closeButton }))] }))), (0, jsx_runtime_1.jsx)(View_1.View, __assign({ css: variantStyles.body }, { children: children })), footer && ((0, jsx_runtime_1.jsx)(View_1.View, __assign({ component: 'footer', css: variantStyles.footer }, { children: footer })))] }))] })));
+};
+exports.ModalContent = ModalContent;
+var Modal = function (_a) {
+    var accessible = _a.accessible, props = __rest(_a, ["accessible"]);
+    var modalId = (0, react_1.useRef)((0, uuid_1.v4)());
+    (0, react_1.useEffect)(function () {
+        if (accessible) {
+            var currentId_1 = modalId.current;
+            var appRoot_1 = document.body;
+            appRoot_1.addEventListener('focusin', function (e) { return focusModal(e, currentId_1); });
+            return function () { return appRoot_1.removeEventListener('focusin', function (e) { return focusModal(e, currentId_1); }); };
+        }
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (accessible) {
+            var appRoot = document.body;
+            appRoot.setAttribute('aria-hidden', "".concat(props.visible));
+            appRoot.setAttribute('tabindex', "".concat(-1));
+        }
+    }, [props.visible]);
+    if (accessible) {
+        if (props.visible) {
+            document.body.style.overflow = 'hidden';
+            return react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(exports.ModalContent, __assign({}, props, { id: modalId.current })), document.body);
+        }
+        else {
+            document.body.style.overflow = 'visible';
+            return null;
+        }
+    }
+    return (0, jsx_runtime_1.jsx)(exports.ModalContent, __assign({}, props, { id: modalId.current }));
+};
+exports.Modal = Modal;
 //# sourceMappingURL=index.js.map

package/dist/components/Modal/styles.d.ts

@@ -1,56 +1,56 @@
-import { ModalComposition } from '@codeleap/common';
-export declare const WebModalStyles: {
-    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    OSAlert: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    roundish: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    dynamicHandler: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-};
+import { ModalComposition } from '@codeleap/common';
+export declare const WebModalStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    OSAlert: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    roundish: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    dynamicHandler: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+};

package/dist/components/Modal/styles.js

@@ -1,36 +1,36 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebModalStyles = void 0;
-var common_1 = require("@codeleap/common");
-var createModalStyle = (0, common_1.createDefaultVariantFactory)();
-var transitionDuration = '0.3s';
-exports.WebModalStyles = __assign(__assign({}, common_1.ModalStyles), { default: createModalStyle(function (theme) {
-        var defaultStyles = common_1.ModalStyles.default(theme);
-        return __assign(__assign({}, defaultStyles), { wrapper: __assign(__assign({}, defaultStyles.wrapper), { transition: "visibility 0.01s ease", transitionDelay: transitionDuration, '& .content': {
-                    transform: 'scale(0)',
-                    transition: "transform ".concat(transitionDuration, " ease"),
-                }, '&.visible': {
-                    visibility: 'visible',
-                    transitionDelay: '0s',
-                }, '&.visible .content': {
-                    visibility: 'visible',
-                    transform: 'scale(1)',
-                }, '&.visible .overlay': {
-                    opacity: 0.5,
-                } }), box: __assign(__assign({}, defaultStyles.box), { width: '45vw' }), overlay: __assign(__assign({}, defaultStyles.overlay), { transition: "opacity ".concat(transitionDuration, " ease") }), title: __assign(__assign({}, (0, common_1.assignTextStyle)('h3')(theme).text), theme.spacing.marginBottom(1)) });
-    }), OSAlert: createModalStyle(function (theme) {
-        var defaults = common_1.ModalStyles.default(theme);
-        return __assign(__assign({}, defaults), { body: __assign(__assign(__assign(__assign(__assign({}, defaults.body), theme.presets.column), theme.presets.alignCenter), theme.presets.justifyCenter), theme.spacing.padding(2)), footer: __assign(__assign(__assign(__assign(__assign({}, defaults.footer), theme.presets.row), theme.presets.justifyEnd), theme.spacing.padding(1)), theme.spacing.gap(2)) });
-    }) });
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebModalStyles = void 0;
+var common_1 = require("@codeleap/common");
+var createModalStyle = (0, common_1.createDefaultVariantFactory)();
+var transitionDuration = '0.3s';
+exports.WebModalStyles = __assign(__assign({}, common_1.ModalStyles), { default: createModalStyle(function (theme) {
+        var defaultStyles = common_1.ModalStyles.default(theme);
+        return __assign(__assign({}, defaultStyles), { wrapper: __assign(__assign({}, defaultStyles.wrapper), { transition: "visibility 0.01s ease", transitionDelay: transitionDuration, '& .content': {
+                    transform: 'scale(0)',
+                    transition: "transform ".concat(transitionDuration, " ease"),
+                }, '&.visible': {
+                    visibility: 'visible',
+                    transitionDelay: '0s',
+                }, '&.visible .content': {
+                    visibility: 'visible',
+                    transform: 'scale(1)',
+                }, '&.visible .overlay': {
+                    opacity: 0.5,
+                } }), box: __assign(__assign({}, defaultStyles.box), { width: '45vw' }), overlay: __assign(__assign({}, defaultStyles.overlay), { transition: "opacity ".concat(transitionDuration, " ease") }), title: __assign(__assign({}, (0, common_1.assignTextStyle)('h3')(theme).text), theme.spacing.marginBottom(1)) });
+    }), OSAlert: createModalStyle(function (theme) {
+        var defaults = common_1.ModalStyles.default(theme);
+        return __assign(__assign({}, defaults), { body: __assign(__assign(__assign(__assign(__assign({}, defaults.body), theme.presets.column), theme.presets.alignCenter), theme.presets.justifyCenter), theme.spacing.padding(2)), footer: __assign(__assign(__assign(__assign(__assign({}, defaults.footer), theme.presets.row), theme.presets.justifyEnd), theme.spacing.padding(1)), theme.spacing.gap(2)) });
+    }) });
 //# sourceMappingURL=styles.js.map

package/dist/components/Overlay.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { ComponentVariants, OverlayComposition, OverlayStyles, SmartOmit, StylesOf } from '@codeleap/common';
-import { TouchableProps } from './Touchable';
-import { ViewProps } from './View';
-export declare type OverlayProps = {
-    visible?: boolean;
-    styles?: StylesOf<OverlayComposition>;
-    onPress?: TouchableProps<'div'>['onClick'];
-} & ComponentVariants<typeof OverlayStyles> & Partial<SmartOmit<ViewProps<'div'>, 'variants' | 'responsiveVariants'>>;
-export declare const Overlay: React.FC<OverlayProps>;
+/// <reference types="react" />
+import { ComponentVariants, OverlayComposition, OverlayStyles, SmartOmit, StylesOf } from '@codeleap/common';
+import { TouchableProps } from './Touchable';
+import { ViewProps } from './View';
+export declare type OverlayProps = {
+    visible?: boolean;
+    styles?: StylesOf<OverlayComposition>;
+    onPress?: TouchableProps<'div'>['onClick'];
+} & ComponentVariants<typeof OverlayStyles> & Partial<SmartOmit<ViewProps<'div'>, 'variants' | 'responsiveVariants'>>;
+export declare const Overlay: React.FC<OverlayProps>;

package/dist/components/Overlay.js

@@ -1,41 +1,41 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Overlay = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var common_1 = require("@codeleap/common");
-var Touchable_1 = require("./Touchable");
-var View_1 = require("./View");
-var Overlay = function (overlayProps) {
-    var visible = overlayProps.visible, responsiveVariants = overlayProps.responsiveVariants, variants = overlayProps.variants, styles = overlayProps.styles, props = __rest(overlayProps, ["visible", "responsiveVariants", "variants", "styles"]);
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('Overlay', {
-        variants: variants,
-        responsiveVariants: responsiveVariants,
-        styles: styles,
-    });
-    var Component = props.onClick || props.onPress ? Touchable_1.Touchable : View_1.View;
-    return ((0, jsx_runtime_1.jsx)(Component, __assign({ css: __assign(__assign(__assign({}, variantStyles.wrapper), { transition: 'opacity 0.2s ease' }), (visible ? variantStyles['wrapper:visible'] : {})) }, props)));
-};
-exports.Overlay = Overlay;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var common_1 = require("@codeleap/common");
+var Touchable_1 = require("./Touchable");
+var View_1 = require("./View");
+var Overlay = function (overlayProps) {
+    var visible = overlayProps.visible, responsiveVariants = overlayProps.responsiveVariants, variants = overlayProps.variants, styles = overlayProps.styles, props = __rest(overlayProps, ["visible", "responsiveVariants", "variants", "styles"]);
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('Overlay', {
+        variants: variants,
+        responsiveVariants: responsiveVariants,
+        styles: styles,
+    });
+    var Component = props.onClick || props.onPress ? Touchable_1.Touchable : View_1.View;
+    return ((0, jsx_runtime_1.jsx)(Component, __assign({ css: __assign(__assign(__assign({}, variantStyles.wrapper), { transition: 'opacity 0.2s ease' }), (visible ? variantStyles['wrapper:visible'] : {})) }, props)));
+};
+exports.Overlay = Overlay;
 //# sourceMappingURL=Overlay.js.map

package/dist/components/RadioInput/index.d.ts

@@ -1,21 +1,21 @@
-import { ReactNode, ComponentPropsWithoutRef } from 'react';
-import { ComponentVariants, RadioInputComposition, RadioInputStyles, StylesOf } from '@codeleap/common';
-export { WebRadioInputStyles } from './styles';
-declare type RadioItem<T extends unknown = any> = {
-    value: T;
-    label: ReactNode;
-};
-export declare type RadioButtonProps = Omit<ComponentPropsWithoutRef<'input'>, 'style'> & {
-    item: RadioItem;
-    select: () => void;
-    style: StylesOf<RadioInputComposition>;
-};
-export declare type RadioGroupProps<T> = {
-    options: RadioItem<T>[];
-    value: T;
-    onValueChange(value: T): void;
-    label: ReactNode;
-    styles?: StylesOf<RadioInputComposition>;
-} & ComponentVariants<typeof RadioInputStyles>;
-export declare const RadioButton: React.FC<RadioButtonProps>;
-export declare const RadioGroup: <T extends unknown>(radioGroupProps: RadioGroupProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ComponentVariants, RadioInputComposition, RadioInputStyles, StylesOf } from '@codeleap/common';
+export { WebRadioInputStyles } from './styles';
+declare type RadioItem<T extends unknown = any> = {
+    value: T;
+    label: ReactNode;
+};
+export declare type RadioButtonProps = Omit<ComponentPropsWithoutRef<'input'>, 'style'> & {
+    item: RadioItem;
+    select: () => void;
+    style: StylesOf<RadioInputComposition>;
+};
+export declare type RadioGroupProps<T> = {
+    options: RadioItem<T>[];
+    value: T;
+    onValueChange(value: T): void;
+    label: ReactNode;
+    styles?: StylesOf<RadioInputComposition>;
+} & ComponentVariants<typeof RadioInputStyles>;
+export declare const RadioButton: React.FC<RadioButtonProps>;
+export declare const RadioGroup: <T extends unknown>(radioGroupProps: RadioGroupProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;