@lmb-it/kitsconcerto-native 0.1.243 → 0.1.244

package/form-renderer/components/layout/FieldWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.cjs","sources":["../../../../../src/form-renderer/components/layout/FieldWrapper.native.tsx"],"sourcesContent":["// components/layout/FieldWrapper.native.tsx\n\nimport React, {useCallback, useEffect, useMemo, useRef} from \"react\";\nimport type {FieldValues} from \"react-hook-form\";\nimport {useWatch} from \"react-hook-form\";\nimport {useFieldLogic} from \"../../hooks\";\nimport type {FieldWrapperProps, GroupFieldConfigs} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../_compat\";\nimport {createStyleContext, resolveResponsiveValue} from \"@lmb-it/kitsconcertomobile\";\n\n/**\n * Native layout contract:\n * - Container MUST be flex-row + flex-wrap\n * - Grid semantics are approximated via percentages\n *\n * Supported mappings:\n * - columns           -> virtual column count\n * - colSpan           -> width %\n * - colOffset         -> marginLeft %\n * - columnGap         -> item horizontal padding\n * - rowGap            -> item vertical padding\n * - rowSpan           -> minHeight approximation\n *\n * Ignored (grid-only semantics):\n * - templateAreas\n * - area\n * - gridTemplateRows\n * - gridTemplateColumns\n * - rowStart / rowEnd\n * - colStart / colEnd\n */\n\nconst DEFAULT_COLUMNS = 12;\nconst DEFAULT_ROW_HEIGHT = 56;\n\nexport const FieldWrapper = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        setFocusedField,\n                                                        focusedField,\n                                                        children,\n                                                        grid,\n                                                        onGridChange,\n                                                        groupField,\n                                                    }: FieldWrapperProps<T>) => {\n    /* ---------------- helpers (no hooks) ---------------- */\n\n    const currentLayout = useRef<any>(null);\n    const resolveDepPath = (dep: string, groupField?: GroupFieldConfigs<T>['groupField']): string => {\n        if (!groupField || groupField.index === undefined || groupField.index < 0) return dep;\n\n        const parts = dep.split(\".\");\n        const {name, index} = groupField;\n\n        // Must be \"<groupRef>.current.<field...>\"\n        if (parts.length < 2 || parts[1] !== \"current\") return dep;\n\n        // Group-relative deps are authored against the group's own id\n        // (e.g. \"addresses.current.x\"). When the group is nested inside an\n        // Object the live `name` is the fully-qualified dotted path\n        // (e.g. \"addressGroup.addresses\"), so match the dep's first segment\n        // against EITHER the full name or its trailing segment, then rebuild\n        // against the fully-qualified name so useWatch hits the real path.\n        const nameLast = name.includes(\".\") ? name.slice(name.lastIndexOf(\".\") + 1) : name;\n        if (parts[0] !== name && parts[0] !== nameLast) return dep;\n\n        return [name, String(index), ...parts.slice(2)].join(\".\");\n    };\n\n    const flattenPaths = (obj: any, prefix = ''): string[] =>\n        Object.keys(obj ?? {}).flatMap((key) => {\n            const path = prefix ? `${prefix}.${key}` : key;\n            return typeof obj[key] === 'object' && obj[key] !== null\n                ? [path, ...flattenPaths(obj[key], path)]\n                : [path];\n        });\n\n    // 1. Determine which fields to watch for changes.\n    const dependencies = useMemo(() => {\n        const deps = new Set<string>([...(element.deps ?? []), ...(element.logic?.deps ?? [])]);\n\n        if (deps.has('*')) {\n            return flattenPaths(getValues());\n        }\n\n        return Array.from(deps).map((d) => resolveDepPath(d, groupField));\n    }, [element, groupField]);\n\n\n    // 2. Efficiently watch only the necessary fields.\n    const watchedValues = useWatch({\n        name: dependencies as any,\n        compute:(fieldValue)=>{\n            return fieldValue\n        },\n        exact:true,\n        disabled:dependencies.length === 0\n    });\n\n    useEffect(() => {\n        // console.log('watchedValues', watchedValues)\n    }, [watchedValues]);\n    // This single hook provides all the necessary logic and state for the field.\n    const fieldLogic = useFieldLogic({element, control, getValues, isFocused: focusedField === element.id, groupField, watchedValues});\n\n    const {\n        field,\n        isShown,\n        layout,\n        style:elementStyle,\n        animation\n    } = fieldLogic;\n    const isFocused = focusedField === field.name;\n\n    const onFocus = useCallback(() => setFocusedField(field.name), [setFocusedField, field.name]);\n    const onBlur: React.FocusEventHandler<any> = useCallback((event) => {\n        const cl = event.target['className'];\n        // @ts-ignore\n        if(!cl || cl.includes(`${element.id}_option_item`) || cl.includes(`p-multiselect-filter`)){\n            return;\n        }\n        setFocusedField('');\n        field.onBlur(); // Call the original onBlur from react-hook-form\n    }, [setFocusedField, field.onBlur]);\n\n    // Grid layout effect — MUST be before any conditional return (Rules of Hooks)\n    useEffect(() => {\n        if(layout.colSpan && currentLayout.current != JSON.stringify(layout)){\n            const ctx = createStyleContext();\n\n            const colSpan = resolveResponsiveValue<string | number>(layout.colSpan, ctx);\n\n            onGridChange?.(colSpan?.toString() ?? '12')\n\n            currentLayout.current = JSON.stringify(layout)\n        }\n\n    }, [layout]);\n\n    // If the logic dictates this field should not be shown, render nothing.\n    if (!isShown || !children) {\n        return null;\n    }\n\n\n\n    // @ts-ignore\n    return <Flex {...elementStyle?.container} {...animation}\n                 zIndex={isFocused ? 1000 : ('auto' as unknown as number)}\n                 w={'100%'} onTouchStart={onFocus}>\n        {children(fieldLogic)}\n    </Flex>\n};\n"],"names":["useRef","groupField","useMemo","useWatch","useEffect","useFieldLogic","useCallback","createStyleContext","resolveResponsiveValue","jsx","Flex"],"mappings":"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"}
+{"version":3,"file":"FieldWrapper.cjs","sources":["../../../../../src/form-renderer/components/layout/FieldWrapper.native.tsx"],"sourcesContent":["// components/layout/FieldWrapper.native.tsx\n\nimport React, {useCallback, useEffect, useMemo, useRef} from \"react\";\nimport type {FieldValues} from \"react-hook-form\";\nimport {useWatch} from \"react-hook-form\";\nimport {useFieldLogic} from \"../../hooks\";\nimport type {FieldWrapperProps, GroupFieldConfigs} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../_compat\";\nimport {createStyleContext, resolveResponsiveValue} from \"@lmb-it/kitsconcertomobile\";\n\n/**\n * Native layout contract:\n * - Container MUST be flex-row + flex-wrap\n * - Grid semantics are approximated via percentages\n *\n * Supported mappings:\n * - columns           -> virtual column count\n * - colSpan           -> width %\n * - colOffset         -> marginLeft %\n * - columnGap         -> item horizontal padding\n * - rowGap            -> item vertical padding\n * - rowSpan           -> minHeight approximation\n *\n * Ignored (grid-only semantics):\n * - templateAreas\n * - area\n * - gridTemplateRows\n * - gridTemplateColumns\n * - rowStart / rowEnd\n * - colStart / colEnd\n */\n\nconst DEFAULT_COLUMNS = 12;\nconst DEFAULT_ROW_HEIGHT = 56;\n\nexport const FieldWrapper = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        setFocusedField,\n                                                        focusedField,\n                                                        children,\n                                                        grid,\n                                                        onGridChange,\n                                                        groupField,\n                                                    }: FieldWrapperProps<T>) => {\n    /* ---------------- helpers (no hooks) ---------------- */\n\n    const currentLayout = useRef<any>(null);\n    const resolveDepPath = (dep: string, groupField?: GroupFieldConfigs<T>['groupField']): string => {\n        if (!groupField || groupField.index === undefined || groupField.index < 0) return dep;\n\n        const parts = dep.split(\".\");\n        const {name, index} = groupField;\n\n        // Must be \"<groupRef>.current.<field...>\"\n        if (parts.length < 2 || parts[1] !== \"current\") return dep;\n\n        // Group-relative deps are authored against the group's own id\n        // (e.g. \"addresses.current.x\"). When the group is nested inside an\n        // Object the live `name` is the fully-qualified dotted path\n        // (e.g. \"addressGroup.addresses\"), so match the dep's first segment\n        // against EITHER the full name or its trailing segment, then rebuild\n        // against the fully-qualified name so useWatch hits the real path.\n        const nameLast = name.includes(\".\") ? name.slice(name.lastIndexOf(\".\") + 1) : name;\n        if (parts[0] !== name && parts[0] !== nameLast) return dep;\n\n        return [name, String(index), ...parts.slice(2)].join(\".\");\n    };\n\n    const flattenPaths = (obj: any, prefix = ''): string[] =>\n        Object.keys(obj ?? {}).flatMap((key) => {\n            const path = prefix ? `${prefix}.${key}` : key;\n            return typeof obj[key] === 'object' && obj[key] !== null\n                ? [path, ...flattenPaths(obj[key], path)]\n                : [path];\n        });\n\n    // 1. Determine which fields to watch for changes.\n    const dependencies = useMemo(() => {\n        const deps = new Set<string>([...(element.deps ?? []), ...(element.logic?.deps ?? [])]);\n\n        if (deps.has('*')) {\n            return flattenPaths(getValues());\n        }\n\n        return Array.from(deps).map((d) => resolveDepPath(d, groupField));\n    }, [element, groupField]);\n\n\n    // 2. Efficiently watch only the necessary fields.\n    const watchedValues = useWatch({\n        name: dependencies as any,\n        compute:(fieldValue)=>{\n            return fieldValue\n        },\n        exact:true,\n        disabled:dependencies.length === 0\n    });\n\n    useEffect(() => {\n        // console.log('watchedValues', watchedValues)\n    }, [watchedValues]);\n    // This single hook provides all the necessary logic and state for the field.\n    const fieldLogic = useFieldLogic({element, control, getValues, isFocused: focusedField === element.id, groupField, watchedValues});\n\n    const {\n        field,\n        isShown,\n        layout,\n        style:elementStyle,\n        animation\n    } = fieldLogic;\n    const isFocused = focusedField === field.name;\n\n    const onFocus = useCallback(() => setFocusedField(field.name), [setFocusedField, field.name]);\n    const onBlur: React.FocusEventHandler<any> = useCallback((event) => {\n        const cl = event.target['className'];\n        // @ts-ignore\n        if(!cl || cl.includes(`${element.id}_option_item`) || cl.includes(`p-multiselect-filter`)){\n            return;\n        }\n        setFocusedField('');\n        field.onBlur(); // Call the original onBlur from react-hook-form\n    }, [setFocusedField, field.onBlur]);\n\n    // Grid layout effect — MUST be before any conditional return (Rules of Hooks)\n    useEffect(() => {\n        if(layout.colSpan && currentLayout.current != JSON.stringify(layout)){\n            const ctx = createStyleContext();\n\n            const colSpan = resolveResponsiveValue<string | number>(layout.colSpan, ctx);\n\n            onGridChange?.(colSpan?.toString() ?? '12')\n\n            currentLayout.current = JSON.stringify(layout)\n        }\n\n    }, [layout]);\n\n    // If the logic dictates this field should not be shown, render nothing.\n    if (!isShown || !children) {\n        return null;\n    }\n\n\n\n    // @ts-ignore\n    return <Flex {...elementStyle?.container} {...animation}\n                 zIndex={isFocused ? 1000 : ('auto' as unknown as number)}\n                 w={'100%'} onTouchStart={onFocus}>\n        {children(fieldLogic)}\n    </Flex>\n};\n"],"names":["useRef","groupField","useMemo","useWatch","useEffect","useFieldLogic","useCallback","createStyleContext","resolveResponsiveValue","jsx","Flex"],"mappings":"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"}

package/form-renderer/components/layout/FieldWrapper.js

@@ -62,6 +62,8 @@ import '../../../packages/types/src/Components/Molecules/Form/FilePicker/types/f
 import '../../../packages/types/src/Css/map/index.js';
 import '../../../packages/types/src/Theme/shadows.js';
 import '../../../packages/types/src/Theme/defaultTheme.js';
+import '../../../packages/types/src/Theme/alphaColors.js';
+import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';
 import 'react-i18next';
 import '../../../apps/mobile/src/Core/AutoComplete/index.js';

package/form-renderer/components/layout/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","sources":["../../../../../src/form-renderer/components/layout/FieldWrapper.native.tsx"],"sourcesContent":["// components/layout/FieldWrapper.native.tsx\n\nimport React, {useCallback, useEffect, useMemo, useRef} from \"react\";\nimport type {FieldValues} from \"react-hook-form\";\nimport {useWatch} from \"react-hook-form\";\nimport {useFieldLogic} from \"../../hooks\";\nimport type {FieldWrapperProps, GroupFieldConfigs} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../_compat\";\nimport {createStyleContext, resolveResponsiveValue} from \"@lmb-it/kitsconcertomobile\";\n\n/**\n * Native layout contract:\n * - Container MUST be flex-row + flex-wrap\n * - Grid semantics are approximated via percentages\n *\n * Supported mappings:\n * - columns           -> virtual column count\n * - colSpan           -> width %\n * - colOffset         -> marginLeft %\n * - columnGap         -> item horizontal padding\n * - rowGap            -> item vertical padding\n * - rowSpan           -> minHeight approximation\n *\n * Ignored (grid-only semantics):\n * - templateAreas\n * - area\n * - gridTemplateRows\n * - gridTemplateColumns\n * - rowStart / rowEnd\n * - colStart / colEnd\n */\n\nconst DEFAULT_COLUMNS = 12;\nconst DEFAULT_ROW_HEIGHT = 56;\n\nexport const FieldWrapper = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        setFocusedField,\n                                                        focusedField,\n                                                        children,\n                                                        grid,\n                                                        onGridChange,\n                                                        groupField,\n                                                    }: FieldWrapperProps<T>) => {\n    /* ---------------- helpers (no hooks) ---------------- */\n\n    const currentLayout = useRef<any>(null);\n    const resolveDepPath = (dep: string, groupField?: GroupFieldConfigs<T>['groupField']): string => {\n        if (!groupField || groupField.index === undefined || groupField.index < 0) return dep;\n\n        const parts = dep.split(\".\");\n        const {name, index} = groupField;\n\n        // Must be \"<groupRef>.current.<field...>\"\n        if (parts.length < 2 || parts[1] !== \"current\") return dep;\n\n        // Group-relative deps are authored against the group's own id\n        // (e.g. \"addresses.current.x\"). When the group is nested inside an\n        // Object the live `name` is the fully-qualified dotted path\n        // (e.g. \"addressGroup.addresses\"), so match the dep's first segment\n        // against EITHER the full name or its trailing segment, then rebuild\n        // against the fully-qualified name so useWatch hits the real path.\n        const nameLast = name.includes(\".\") ? name.slice(name.lastIndexOf(\".\") + 1) : name;\n        if (parts[0] !== name && parts[0] !== nameLast) return dep;\n\n        return [name, String(index), ...parts.slice(2)].join(\".\");\n    };\n\n    const flattenPaths = (obj: any, prefix = ''): string[] =>\n        Object.keys(obj ?? {}).flatMap((key) => {\n            const path = prefix ? `${prefix}.${key}` : key;\n            return typeof obj[key] === 'object' && obj[key] !== null\n                ? [path, ...flattenPaths(obj[key], path)]\n                : [path];\n        });\n\n    // 1. Determine which fields to watch for changes.\n    const dependencies = useMemo(() => {\n        const deps = new Set<string>([...(element.deps ?? []), ...(element.logic?.deps ?? [])]);\n\n        if (deps.has('*')) {\n            return flattenPaths(getValues());\n        }\n\n        return Array.from(deps).map((d) => resolveDepPath(d, groupField));\n    }, [element, groupField]);\n\n\n    // 2. Efficiently watch only the necessary fields.\n    const watchedValues = useWatch({\n        name: dependencies as any,\n        compute:(fieldValue)=>{\n            return fieldValue\n        },\n        exact:true,\n        disabled:dependencies.length === 0\n    });\n\n    useEffect(() => {\n        // console.log('watchedValues', watchedValues)\n    }, [watchedValues]);\n    // This single hook provides all the necessary logic and state for the field.\n    const fieldLogic = useFieldLogic({element, control, getValues, isFocused: focusedField === element.id, groupField, watchedValues});\n\n    const {\n        field,\n        isShown,\n        layout,\n        style:elementStyle,\n        animation\n    } = fieldLogic;\n    const isFocused = focusedField === field.name;\n\n    const onFocus = useCallback(() => setFocusedField(field.name), [setFocusedField, field.name]);\n    const onBlur: React.FocusEventHandler<any> = useCallback((event) => {\n        const cl = event.target['className'];\n        // @ts-ignore\n        if(!cl || cl.includes(`${element.id}_option_item`) || cl.includes(`p-multiselect-filter`)){\n            return;\n        }\n        setFocusedField('');\n        field.onBlur(); // Call the original onBlur from react-hook-form\n    }, [setFocusedField, field.onBlur]);\n\n    // Grid layout effect — MUST be before any conditional return (Rules of Hooks)\n    useEffect(() => {\n        if(layout.colSpan && currentLayout.current != JSON.stringify(layout)){\n            const ctx = createStyleContext();\n\n            const colSpan = resolveResponsiveValue<string | number>(layout.colSpan, ctx);\n\n            onGridChange?.(colSpan?.toString() ?? '12')\n\n            currentLayout.current = JSON.stringify(layout)\n        }\n\n    }, [layout]);\n\n    // If the logic dictates this field should not be shown, render nothing.\n    if (!isShown || !children) {\n        return null;\n    }\n\n\n\n    // @ts-ignore\n    return <Flex {...elementStyle?.container} {...animation}\n                 zIndex={isFocused ? 1000 : ('auto' as unknown as number)}\n                 w={'100%'} onTouchStart={onFocus}>\n        {children(fieldLogic)}\n    </Flex>\n};\n"],"names":["groupField"],"mappings":"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"}
+{"version":3,"file":"FieldWrapper.js","sources":["../../../../../src/form-renderer/components/layout/FieldWrapper.native.tsx"],"sourcesContent":["// components/layout/FieldWrapper.native.tsx\n\nimport React, {useCallback, useEffect, useMemo, useRef} from \"react\";\nimport type {FieldValues} from \"react-hook-form\";\nimport {useWatch} from \"react-hook-form\";\nimport {useFieldLogic} from \"../../hooks\";\nimport type {FieldWrapperProps, GroupFieldConfigs} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../_compat\";\nimport {createStyleContext, resolveResponsiveValue} from \"@lmb-it/kitsconcertomobile\";\n\n/**\n * Native layout contract:\n * - Container MUST be flex-row + flex-wrap\n * - Grid semantics are approximated via percentages\n *\n * Supported mappings:\n * - columns           -> virtual column count\n * - colSpan           -> width %\n * - colOffset         -> marginLeft %\n * - columnGap         -> item horizontal padding\n * - rowGap            -> item vertical padding\n * - rowSpan           -> minHeight approximation\n *\n * Ignored (grid-only semantics):\n * - templateAreas\n * - area\n * - gridTemplateRows\n * - gridTemplateColumns\n * - rowStart / rowEnd\n * - colStart / colEnd\n */\n\nconst DEFAULT_COLUMNS = 12;\nconst DEFAULT_ROW_HEIGHT = 56;\n\nexport const FieldWrapper = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        setFocusedField,\n                                                        focusedField,\n                                                        children,\n                                                        grid,\n                                                        onGridChange,\n                                                        groupField,\n                                                    }: FieldWrapperProps<T>) => {\n    /* ---------------- helpers (no hooks) ---------------- */\n\n    const currentLayout = useRef<any>(null);\n    const resolveDepPath = (dep: string, groupField?: GroupFieldConfigs<T>['groupField']): string => {\n        if (!groupField || groupField.index === undefined || groupField.index < 0) return dep;\n\n        const parts = dep.split(\".\");\n        const {name, index} = groupField;\n\n        // Must be \"<groupRef>.current.<field...>\"\n        if (parts.length < 2 || parts[1] !== \"current\") return dep;\n\n        // Group-relative deps are authored against the group's own id\n        // (e.g. \"addresses.current.x\"). When the group is nested inside an\n        // Object the live `name` is the fully-qualified dotted path\n        // (e.g. \"addressGroup.addresses\"), so match the dep's first segment\n        // against EITHER the full name or its trailing segment, then rebuild\n        // against the fully-qualified name so useWatch hits the real path.\n        const nameLast = name.includes(\".\") ? name.slice(name.lastIndexOf(\".\") + 1) : name;\n        if (parts[0] !== name && parts[0] !== nameLast) return dep;\n\n        return [name, String(index), ...parts.slice(2)].join(\".\");\n    };\n\n    const flattenPaths = (obj: any, prefix = ''): string[] =>\n        Object.keys(obj ?? {}).flatMap((key) => {\n            const path = prefix ? `${prefix}.${key}` : key;\n            return typeof obj[key] === 'object' && obj[key] !== null\n                ? [path, ...flattenPaths(obj[key], path)]\n                : [path];\n        });\n\n    // 1. Determine which fields to watch for changes.\n    const dependencies = useMemo(() => {\n        const deps = new Set<string>([...(element.deps ?? []), ...(element.logic?.deps ?? [])]);\n\n        if (deps.has('*')) {\n            return flattenPaths(getValues());\n        }\n\n        return Array.from(deps).map((d) => resolveDepPath(d, groupField));\n    }, [element, groupField]);\n\n\n    // 2. Efficiently watch only the necessary fields.\n    const watchedValues = useWatch({\n        name: dependencies as any,\n        compute:(fieldValue)=>{\n            return fieldValue\n        },\n        exact:true,\n        disabled:dependencies.length === 0\n    });\n\n    useEffect(() => {\n        // console.log('watchedValues', watchedValues)\n    }, [watchedValues]);\n    // This single hook provides all the necessary logic and state for the field.\n    const fieldLogic = useFieldLogic({element, control, getValues, isFocused: focusedField === element.id, groupField, watchedValues});\n\n    const {\n        field,\n        isShown,\n        layout,\n        style:elementStyle,\n        animation\n    } = fieldLogic;\n    const isFocused = focusedField === field.name;\n\n    const onFocus = useCallback(() => setFocusedField(field.name), [setFocusedField, field.name]);\n    const onBlur: React.FocusEventHandler<any> = useCallback((event) => {\n        const cl = event.target['className'];\n        // @ts-ignore\n        if(!cl || cl.includes(`${element.id}_option_item`) || cl.includes(`p-multiselect-filter`)){\n            return;\n        }\n        setFocusedField('');\n        field.onBlur(); // Call the original onBlur from react-hook-form\n    }, [setFocusedField, field.onBlur]);\n\n    // Grid layout effect — MUST be before any conditional return (Rules of Hooks)\n    useEffect(() => {\n        if(layout.colSpan && currentLayout.current != JSON.stringify(layout)){\n            const ctx = createStyleContext();\n\n            const colSpan = resolveResponsiveValue<string | number>(layout.colSpan, ctx);\n\n            onGridChange?.(colSpan?.toString() ?? '12')\n\n            currentLayout.current = JSON.stringify(layout)\n        }\n\n    }, [layout]);\n\n    // If the logic dictates this field should not be shown, render nothing.\n    if (!isShown || !children) {\n        return null;\n    }\n\n\n\n    // @ts-ignore\n    return <Flex {...elementStyle?.container} {...animation}\n                 zIndex={isFocused ? 1000 : ('auto' as unknown as number)}\n                 w={'100%'} onTouchStart={onFocus}>\n        {children(fieldLogic)}\n    </Flex>\n};\n"],"names":["groupField"],"mappings":"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"}

package/hooks/shadowPresets.cjs

@@ -8,6 +8,7 @@ require('yup');
 require('../packages/types/src/Css/map/index.cjs');
 var shadows = require('../packages/types/src/Theme/shadows.cjs');
 require('../packages/types/src/Theme/defaultTheme.cjs');
+require('../packages/types/src/Theme/alphaColors.cjs');
 
 function expandShadow(value, _resolveToken) {
   return value ? shadows.expandShadowNative(value) : {};

package/hooks/shadowPresets.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"shadowPresets.cjs","sources":["../../../src/hooks/shadowPresets.native.ts"],"sourcesContent":["import {expandShadowNative} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Cross-platform shadow expansion — NATIVE (iOS + Android).\n *\n * A `shadow: 'md'` style key resolves to the active native shadow scale\n * (`shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`), published\n * by the native KitsThemeProvider from `theme.shadows.md.native` — so\n * overriding the theme overrides the shadow. Unknown values yield `{}` (raw CSS\n * box-shadow strings / `$shadows.*` tokens cannot render on RN).\n *\n * Web counterpart: ./shadowPresets.web.ts.\n */\nexport function expandShadow(\n    value: string,\n    _resolveToken?: (token: string) => string,\n): Record<string, any> {\n    return value ? expandShadowNative(value) : {};\n}\n"],"names":["expandShadowNative"],"mappings":";;;;;;;;;;;AAaO,SAAS,YAAA,CACZ,OACA,aAAA,EACmB;AACnB,EAAA,OAAO,KAAA,GAAQA,0BAAA,CAAmB,KAAK,CAAA,GAAI,EAAC;AAChD;;;;"}
+{"version":3,"file":"shadowPresets.cjs","sources":["../../../src/hooks/shadowPresets.native.ts"],"sourcesContent":["import {expandShadowNative} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Cross-platform shadow expansion — NATIVE (iOS + Android).\n *\n * A `shadow: 'md'` style key resolves to the active native shadow scale\n * (`shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`), published\n * by the native KitsThemeProvider from `theme.shadows.md.native` — so\n * overriding the theme overrides the shadow. Unknown values yield `{}` (raw CSS\n * box-shadow strings / `$shadows.*` tokens cannot render on RN).\n *\n * Web counterpart: ./shadowPresets.web.ts.\n */\nexport function expandShadow(\n    value: string,\n    _resolveToken?: (token: string) => string,\n): Record<string, any> {\n    return value ? expandShadowNative(value) : {};\n}\n"],"names":["expandShadowNative"],"mappings":";;;;;;;;;;;;AAaO,SAAS,YAAA,CACZ,OACA,aAAA,EACmB;AACnB,EAAA,OAAO,KAAA,GAAQA,0BAAA,CAAmB,KAAK,CAAA,GAAI,EAAC;AAChD;;;;"}

package/hooks/shadowPresets.js

@@ -6,6 +6,7 @@ import 'yup';
 import '../packages/types/src/Css/map/index.js';
 import { expandShadowNative } from '../packages/types/src/Theme/shadows.js';
 import '../packages/types/src/Theme/defaultTheme.js';
+import '../packages/types/src/Theme/alphaColors.js';
 
 function expandShadow(value, _resolveToken) {
   return value ? expandShadowNative(value) : {};

package/hooks/shadowPresets.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadowPresets.js","sources":["../../../src/hooks/shadowPresets.native.ts"],"sourcesContent":["import {expandShadowNative} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Cross-platform shadow expansion — NATIVE (iOS + Android).\n *\n * A `shadow: 'md'` style key resolves to the active native shadow scale\n * (`shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`), published\n * by the native KitsThemeProvider from `theme.shadows.md.native` — so\n * overriding the theme overrides the shadow. Unknown values yield `{}` (raw CSS\n * box-shadow strings / `$shadows.*` tokens cannot render on RN).\n *\n * Web counterpart: ./shadowPresets.web.ts.\n */\nexport function expandShadow(\n    value: string,\n    _resolveToken?: (token: string) => string,\n): Record<string, any> {\n    return value ? expandShadowNative(value) : {};\n}\n"],"names":[],"mappings":";;;;;;;;;AAaO,SAAS,YAAA,CACZ,OACA,aAAA,EACmB;AACnB,EAAA,OAAO,KAAA,GAAQ,kBAAA,CAAmB,KAAK,CAAA,GAAI,EAAC;AAChD;;;;"}
+{"version":3,"file":"shadowPresets.js","sources":["../../../src/hooks/shadowPresets.native.ts"],"sourcesContent":["import {expandShadowNative} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Cross-platform shadow expansion — NATIVE (iOS + Android).\n *\n * A `shadow: 'md'` style key resolves to the active native shadow scale\n * (`shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`), published\n * by the native KitsThemeProvider from `theme.shadows.md.native` — so\n * overriding the theme overrides the shadow. Unknown values yield `{}` (raw CSS\n * box-shadow strings / `$shadows.*` tokens cannot render on RN).\n *\n * Web counterpart: ./shadowPresets.web.ts.\n */\nexport function expandShadow(\n    value: string,\n    _resolveToken?: (token: string) => string,\n): Record<string, any> {\n    return value ? expandShadowNative(value) : {};\n}\n"],"names":[],"mappings":";;;;;;;;;;AAaO,SAAS,YAAA,CACZ,OACA,aAAA,EACmB;AACnB,EAAA,OAAO,KAAA,GAAQ,kBAAA,CAAmB,KAAK,CAAA,GAAI,EAAC;AAChD;;;;"}

package/hooks/useFocusStyles.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../packages/types/src/Css/map/index.cjs');
 require('../packages/types/src/Theme/shadows.cjs');
 require('../packages/types/src/Theme/defaultTheme.cjs');
+require('../packages/types/src/Theme/alphaColors.cjs');
+require('../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('i18next');
 require('react-i18next');
 require('../apps/mobile/src/Core/AutoComplete/index.cjs');

package/hooks/useFocusStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusStyles.cjs","sources":["../../../src/hooks/useFocusStyles.native.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport type {IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {style} from '@lmb-it/kitsconcertomobile';\n\n/**\n * Native focus-style helper.\n * Merges `_focus` styles into the computed style object when `isFocused` is true.\n * Returns a React Native ViewStyle object ready for the `style` prop.\n */\nexport function useFocusStyles(\n    themeStyle: IStyleClasses | undefined,\n    isFocused: boolean,\n) {\n    return useMemo(() => {\n        if (!themeStyle) return {};\n        const {_focus, _hover, ...base} = themeStyle as any;\n        const baseStyle = style(base);\n        if (!isFocused || !_focus) return baseStyle;\n        const focusStyle = style(_focus);\n        return {...baseStyle, ...focusStyle};\n    }, [themeStyle, isFocused]);\n}\n\nexport default useFocusStyles;\n"],"names":["useMemo","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,cAAA,CACZ,YACA,SAAA,EACF;AACE,EAAA,OAAOA,cAAQ,MAAM;AACjB,IAAA,IAAI,CAAC,UAAA,EAAY,OAAO,EAAC;AACzB,IAAA,MAAM,EAAC,MAAA,EAAQ,MAAA,EAAQ,GAAG,MAAI,GAAI,UAAA;AAClC,IAAA,MAAM,SAAA,GAAYC,YAAM,IAAI,CAAA;AAC5B,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,MAAA,EAAQ,OAAO,SAAA;AAClC,IAAA,MAAM,UAAA,GAAaA,YAAM,MAAM,CAAA;AAC/B,IAAA,OAAO,EAAC,GAAG,SAAA,EAAW,GAAG,UAAA,EAAU;AAAA,EACvC,CAAA,EAAG,CAAC,UAAA,EAAY,SAAS,CAAC,CAAA;AAC9B;;;;"}
+{"version":3,"file":"useFocusStyles.cjs","sources":["../../../src/hooks/useFocusStyles.native.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport type {IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {style} from '@lmb-it/kitsconcertomobile';\n\n/**\n * Native focus-style helper.\n * Merges `_focus` styles into the computed style object when `isFocused` is true.\n * Returns a React Native ViewStyle object ready for the `style` prop.\n */\nexport function useFocusStyles(\n    themeStyle: IStyleClasses | undefined,\n    isFocused: boolean,\n) {\n    return useMemo(() => {\n        if (!themeStyle) return {};\n        const {_focus, _hover, ...base} = themeStyle as any;\n        const baseStyle = style(base);\n        if (!isFocused || !_focus) return baseStyle;\n        const focusStyle = style(_focus);\n        return {...baseStyle, ...focusStyle};\n    }, [themeStyle, isFocused]);\n}\n\nexport default useFocusStyles;\n"],"names":["useMemo","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,cAAA,CACZ,YACA,SAAA,EACF;AACE,EAAA,OAAOA,cAAQ,MAAM;AACjB,IAAA,IAAI,CAAC,UAAA,EAAY,OAAO,EAAC;AACzB,IAAA,MAAM,EAAC,MAAA,EAAQ,MAAA,EAAQ,GAAG,MAAI,GAAI,UAAA;AAClC,IAAA,MAAM,SAAA,GAAYC,YAAM,IAAI,CAAA;AAC5B,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,MAAA,EAAQ,OAAO,SAAA;AAClC,IAAA,MAAM,UAAA,GAAaA,YAAM,MAAM,CAAA;AAC/B,IAAA,OAAO,EAAC,GAAG,SAAA,EAAW,GAAG,UAAA,EAAU;AAAA,EACvC,CAAA,EAAG,CAAC,UAAA,EAAY,SAAS,CAAC,CAAA;AAC9B;;;;"}

package/hooks/useFocusStyles.js

@@ -59,6 +59,8 @@ import 'yup';
 import '../packages/types/src/Css/map/index.js';
 import '../packages/types/src/Theme/shadows.js';
 import '../packages/types/src/Theme/defaultTheme.js';
+import '../packages/types/src/Theme/alphaColors.js';
+import '../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';
 import 'react-i18next';
 import '../apps/mobile/src/Core/AutoComplete/index.js';

package/hooks/useFocusStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusStyles.js","sources":["../../../src/hooks/useFocusStyles.native.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport type {IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {style} from '@lmb-it/kitsconcertomobile';\n\n/**\n * Native focus-style helper.\n * Merges `_focus` styles into the computed style object when `isFocused` is true.\n * Returns a React Native ViewStyle object ready for the `style` prop.\n */\nexport function useFocusStyles(\n    themeStyle: IStyleClasses | undefined,\n    isFocused: boolean,\n) {\n    return useMemo(() => {\n        if (!themeStyle) return {};\n        const {_focus, _hover, ...base} = themeStyle as any;\n        const baseStyle = style(base);\n        if (!isFocused || !_focus) return baseStyle;\n        const focusStyle = style(_focus);\n        return {...baseStyle, ...focusStyle};\n    }, [themeStyle, isFocused]);\n}\n\nexport default useFocusStyles;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,cAAA,CACZ,YACA,SAAA,EACF;AACE,EAAA,OAAO,QAAQ,MAAM;AACjB,IAAA,IAAI,CAAC,UAAA,EAAY,OAAO,EAAC;AACzB,IAAA,MAAM,EAAC,MAAA,EAAQ,MAAA,EAAQ,GAAG,MAAI,GAAI,UAAA;AAClC,IAAA,MAAM,SAAA,GAAY,MAAM,IAAI,CAAA;AAC5B,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,MAAA,EAAQ,OAAO,SAAA;AAClC,IAAA,MAAM,UAAA,GAAa,MAAM,MAAM,CAAA;AAC/B,IAAA,OAAO,EAAC,GAAG,SAAA,EAAW,GAAG,UAAA,EAAU;AAAA,EACvC,CAAA,EAAG,CAAC,UAAA,EAAY,SAAS,CAAC,CAAA;AAC9B;;;;"}
+{"version":3,"file":"useFocusStyles.js","sources":["../../../src/hooks/useFocusStyles.native.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport type {IStyleClasses} from '@lmb-it/kitsconcerto-types';\nimport {style} from '@lmb-it/kitsconcertomobile';\n\n/**\n * Native focus-style helper.\n * Merges `_focus` styles into the computed style object when `isFocused` is true.\n * Returns a React Native ViewStyle object ready for the `style` prop.\n */\nexport function useFocusStyles(\n    themeStyle: IStyleClasses | undefined,\n    isFocused: boolean,\n) {\n    return useMemo(() => {\n        if (!themeStyle) return {};\n        const {_focus, _hover, ...base} = themeStyle as any;\n        const baseStyle = style(base);\n        if (!isFocused || !_focus) return baseStyle;\n        const focusStyle = style(_focus);\n        return {...baseStyle, ...focusStyle};\n    }, [themeStyle, isFocused]);\n}\n\nexport default useFocusStyles;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,cAAA,CACZ,YACA,SAAA,EACF;AACE,EAAA,OAAO,QAAQ,MAAM;AACjB,IAAA,IAAI,CAAC,UAAA,EAAY,OAAO,EAAC;AACzB,IAAA,MAAM,EAAC,MAAA,EAAQ,MAAA,EAAQ,GAAG,MAAI,GAAI,UAAA;AAClC,IAAA,MAAM,SAAA,GAAY,MAAM,IAAI,CAAA;AAC5B,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,MAAA,EAAQ,OAAO,SAAA;AAClC,IAAA,MAAM,UAAA,GAAa,MAAM,MAAM,CAAA;AAC/B,IAAA,OAAO,EAAC,GAAG,SAAA,EAAW,GAAG,UAAA,EAAU;AAAA,EACvC,CAAA,EAAG,CAAC,UAAA,EAAY,SAAS,CAAC,CAAA;AAC9B;;;;"}

package/index.cjs

@@ -105,6 +105,7 @@ var defaultTheme = require('./packages/types/src/Theme/defaultTheme.cjs');
 var defaultSeverityTheme = require('./packages/types/src/Theme/defaultSeverityTheme.cjs');
 var extendTheme = require('./packages/types/src/Theme/extendTheme.cjs');
 var resolvers = require('./packages/types/src/Theme/resolvers.cjs');
+var alphaColors = require('./packages/types/src/Theme/alphaColors.cjs');
 var index_native$1 = require('./layout/AnimatePresence/index.cjs');
 var banner_native = require('./components/Banner/banner.cjs');
 var index$2 = require('./layout/Center/index.cjs');
@@ -298,6 +299,10 @@ exports.extendTheme = extendTheme.extendTheme;
 exports.isSemanticToken = resolvers.isSemanticToken;
 exports.isThemeToken = resolvers.isThemeToken;
 exports.resolveTokenValue = resolvers.resolveTokenValue;
+exports.ALPHA_COLOR_VARS = alphaColors.ALPHA_COLOR_VARS;
+exports.ALPHA_STEPS = alphaColors.ALPHA_STEPS;
+exports.ALPHA_TOKEN_NAMES = alphaColors.ALPHA_TOKEN_NAMES;
+exports.isAlphaToken = alphaColors.isAlphaToken;
 exports.AnimatePresence = index_native$1.default;
 exports.Banner = banner_native.default;
 exports.Center = index$2.default;

package/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -1407,6 +1407,37 @@ declare function isSemanticToken(value: string, theme?: IKitsTheme): boolean;
  */
 declare function isThemeToken(value: string): boolean;
 
+/**
+ * Alpha overlay color families — `white-alpha-*` and `black-alpha-*`.
+ *
+ * These back the tokens `ColorValue` already advertises (`white-alpha-10` …
+ * `white-alpha-90`, `black-alpha-10` … `black-alpha-90`). The step (10…90)
+ * IS the alpha percentage, matching the PrimeFlex convention the rest of
+ * `ColorValue` follows (`blue-50…900`, `surface-0…900`).
+ *
+ * This is the SINGLE SOURCE OF TRUTH: both the web CSS-var injector
+ * (`generateCssVariables`) and the native color-map builder
+ * (`buildNativeColorMap`) derive their `--kits-*-alpha-*` entries from
+ * {@link ALPHA_COLOR_VARS}, so the two platforms can never drift.
+ *
+ * LITERAL by design: the values are identical in light and dark theme
+ * builds and must NEVER be routed through dark-mode inversion. They are
+ * overlay / scrim colors — a 60% white scrim over an image has to stay a
+ * 60% white scrim in dark mode, not flip to black.
+ */
+/** Alpha steps (also the alpha percentage of each step). */
+declare const ALPHA_STEPS: readonly [10, 20, 30, 40, 50, 60, 70, 80, 90];
+/**
+ * CSS-variable name → literal rgba value. Keys are the fully-qualified
+ * `--kits-<family>-alpha-<step>` names emitted into `:root` (web) and the
+ * native color map.
+ */
+declare const ALPHA_COLOR_VARS: Record<string, string>;
+/** Bare token names as authored in props, e.g. `'white-alpha-60'`. */
+declare const ALPHA_TOKEN_NAMES: ReadonlySet<string>;
+/** True when `value` is an advertised alpha token (`white-alpha-60`, `black-alpha-90`, …). */
+declare function isAlphaToken(value: string): boolean;
+
 export interface IButtonParams {
     /** The current number of items in the group. */
     total: number;
@@ -13943,5 +13974,5 @@ declare const localeFiles: {
     };
 };
 
-export { CustomAccordion as Accordion, Alert, AlertDescription, AlertIcon, AlertTitle, KitsAnimatePresence as AnimatePresence, AnyFile, Avatar, AvatarStack, Badge, Banner, BottomTabBar, Box, BreadCrumb, Button, Card, Carousel, Center, ChatBubble, Chip, CircularProgress, Collapse, CommandPalette, Container, CustomPopover, DEFAULT_NATIVE_SHADOWS, DataView, DataViewContext, DateSeparator, DetailList as DetailsList, Divider, EDateFormat, EKeyFilter, Editable, EmptyState, FIELD_LABEL_MARGIN, FIELD_MARGIN, Flex, Form, FormSelect, GUTTER, Gallery, Form as GoForm, Datatable as GoTable, KitsGrid as Grid, KitsGridItem as GridItem, HELPER_TEXT_MARGIN, HStack, Heading, Icon, IconMap, Image, KitsInputSwitch as InputSwitch, KeyboardNavContext, KitsAutoComplete, KitsCascadeSelect, KitsCheckbox as KitsCheckboxes, KitsConfirm, KitsConfirmPopup, KitsContainer, KitsInputCalendar as KitsDatepicker, KitsDialogControlled as KitsDialog, KitsDropdown, FilePicker as KitsFilePicker, KitsInputColorPicker, KitsInputLocation, KitsInputMask, KitsInputNumber, KitsInputPassword, KitsInputText, KitsInputTextarea, KitsListBox, KitsMultiSelect, KitsPhoneComponent, KitsRadio as KitsRadios, RadiusPicker as KitsRadiusPicker, KitsSliders, KitsThemeProvider, KitsToast, KitsTreeSelect, Label, Link, List, ListItem, Loader, LocaleContext, LocaleContextProvider, MainContext, MainContextProvider, MessageComposer, MessageReceipt, KitsMultiSelect as MultiSelect, PersonCard, ProgressBar, RadiusPicker, SHADOW_PRESET_KEYS, SPACER, KitsScrollView as ScrollView, SegmentedControl, FormSelect as Select, SelectButton, Skeleton$1 as Skeleton, SkeletonRows, Skeleton as SkeletonText, StatCard, StatGroup, StatePill, Stepper, Svg, TableContext, Tabs, Text, ThemeContextProvider, Timeline, Tooltip, Translate, KitsTreeSelect as TreeSelect, TreeView, TriStateCheckbox, TypingIndicator, VStack, borderProperties, breakpoints, capitalizeFirstLetter, checkExtAgainstAccepted, checkNameDuplication, dateTimeFormat, deepMerge, defaultSeverityTheme, defaultTheme, downloadCanvas, dynamicList, expandShadowNative, extendTheme, fileTypeIcon, fileValidation, filesExt, filesMemes, filesTypes, flattenSlotStyles, fontSizeMapping, formFileValidation, getActiveNativeShadows, getCombinedChildIds, getCustomDateTime, getDateElements, getDefaultValues, getMeme, getParams, getPropertyByPath, getType, getTypes, getURLParams, imagesExt, imagesMemes, imagesTypes, isNumber, isSemanticToken, isShadowPreset, isThemeToken, isToday, isValidURL, listingProperties, localeFiles, allProperties as mapCssProperties, mergeRefs, nonPxProperties, propertiesWithoutCssEquivalent, pxProperties, resolveStyleRecord, resolveTokenValue, schemaBuilder, setActiveNativeShadows, shadowNative, shadowWeb, sizeMapping, sizingProperties, timeAgo, timeSince, toMemes, useAllSeverityColors, useComponentDefaults, useDataView, useDialog, useDisclosure, useFieldLogic, useFocusStyles, useFormFieldKeyboardNav, useFormManager, useKeyboardNav, useKeyboardNavProvider, useKitsColorScheme, useKitsConcerto, useKitsTheme, useLanguage, useNativeColorMap, usePopup, useResolvedElementStyles, useResolvedStyle, useRtlLineHeight, useScrollState, useSelectionController, useSeverityColors, useTable, useTheme, useThemedFont, useToast };
+export { ALPHA_COLOR_VARS, ALPHA_STEPS, ALPHA_TOKEN_NAMES, CustomAccordion as Accordion, Alert, AlertDescription, AlertIcon, AlertTitle, KitsAnimatePresence as AnimatePresence, AnyFile, Avatar, AvatarStack, Badge, Banner, BottomTabBar, Box, BreadCrumb, Button, Card, Carousel, Center, ChatBubble, Chip, CircularProgress, Collapse, CommandPalette, Container, CustomPopover, DEFAULT_NATIVE_SHADOWS, DataView, DataViewContext, DateSeparator, DetailList as DetailsList, Divider, EDateFormat, EKeyFilter, Editable, EmptyState, FIELD_LABEL_MARGIN, FIELD_MARGIN, Flex, Form, FormSelect, GUTTER, Gallery, Form as GoForm, Datatable as GoTable, KitsGrid as Grid, KitsGridItem as GridItem, HELPER_TEXT_MARGIN, HStack, Heading, Icon, IconMap, Image, KitsInputSwitch as InputSwitch, KeyboardNavContext, KitsAutoComplete, KitsCascadeSelect, KitsCheckbox as KitsCheckboxes, KitsConfirm, KitsConfirmPopup, KitsContainer, KitsInputCalendar as KitsDatepicker, KitsDialogControlled as KitsDialog, KitsDropdown, FilePicker as KitsFilePicker, KitsInputColorPicker, KitsInputLocation, KitsInputMask, KitsInputNumber, KitsInputPassword, KitsInputText, KitsInputTextarea, KitsListBox, KitsMultiSelect, KitsPhoneComponent, KitsRadio as KitsRadios, RadiusPicker as KitsRadiusPicker, KitsSliders, KitsThemeProvider, KitsToast, KitsTreeSelect, Label, Link, List, ListItem, Loader, LocaleContext, LocaleContextProvider, MainContext, MainContextProvider, MessageComposer, MessageReceipt, KitsMultiSelect as MultiSelect, PersonCard, ProgressBar, RadiusPicker, SHADOW_PRESET_KEYS, SPACER, KitsScrollView as ScrollView, SegmentedControl, FormSelect as Select, SelectButton, Skeleton$1 as Skeleton, SkeletonRows, Skeleton as SkeletonText, StatCard, StatGroup, StatePill, Stepper, Svg, TableContext, Tabs, Text, ThemeContextProvider, Timeline, Tooltip, Translate, KitsTreeSelect as TreeSelect, TreeView, TriStateCheckbox, TypingIndicator, VStack, borderProperties, breakpoints, capitalizeFirstLetter, checkExtAgainstAccepted, checkNameDuplication, dateTimeFormat, deepMerge, defaultSeverityTheme, defaultTheme, downloadCanvas, dynamicList, expandShadowNative, extendTheme, fileTypeIcon, fileValidation, filesExt, filesMemes, filesTypes, flattenSlotStyles, fontSizeMapping, formFileValidation, getActiveNativeShadows, getCombinedChildIds, getCustomDateTime, getDateElements, getDefaultValues, getMeme, getParams, getPropertyByPath, getType, getTypes, getURLParams, imagesExt, imagesMemes, imagesTypes, isAlphaToken, isNumber, isSemanticToken, isShadowPreset, isThemeToken, isToday, isValidURL, listingProperties, localeFiles, allProperties as mapCssProperties, mergeRefs, nonPxProperties, propertiesWithoutCssEquivalent, pxProperties, resolveStyleRecord, resolveTokenValue, schemaBuilder, setActiveNativeShadows, shadowNative, shadowWeb, sizeMapping, sizingProperties, timeAgo, timeSince, toMemes, useAllSeverityColors, useComponentDefaults, useDataView, useDialog, useDisclosure, useFieldLogic, useFocusStyles, useFormFieldKeyboardNav, useFormManager, useKeyboardNav, useKeyboardNavProvider, useKitsColorScheme, useKitsConcerto, useKitsTheme, useLanguage, useNativeColorMap, usePopup, useResolvedElementStyles, useResolvedStyle, useRtlLineHeight, useScrollState, useSelectionController, useSeverityColors, useTable, useTheme, useThemedFont, useToast };
 export type { AlignmentsValues, AllSlotKeys, AnimationsValues, AvatarShape, AvatarSize, AvatarStatus, BannerAction, BannerStatus, BaseFieldProps, Booleanish, Breakpoint, CallbackProps, ChatBubbleTone, ChatBubbleVariant, ChipSeverity, ChipSize, ColorMode, ColorScale, ColorValue, Colors, ColorsType, ComponentSize, CustomSubmitButtonProps, DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSelectionSingleChangeEvent, DataTableSortMeta, DeepPartial, DetailItemInputType, DynamicValue, ElementProps, EnteringAnimation, ExitingAnimation, ExpandedKeys, FetchError, FetchSuccess, FetchTableDataRes, FetchTablePaginationData, FieldWrapperProps, File$1 as File, FileUploaderTemplate, FileUploaderTemplateParams, FlexAlignmentsValues, FlexValues, FormBooleanEvent, FormBooleanTarget, FormEvent, FormTarget, GroupFieldConfigs, HighSizingValue, IAccordionElementSlots, IAccordionProps, IAddressComponentValue, IAddressExperianFormat, IAddressFormat, IAddressFormatResults, IAddressSearchResults, IAlertComponent, IAlertProps, IAlignment, IAnimation, IAutoCompleteCore, IAutoCompleteElement, IAvatarElementSlots, IAvatarProps, IAvatarStackElementSlots, IAvatarStackProps, IBadgeProps, IBannerProps, IBarChartProps, IBaseValidation, IBasicSectionProps, IBg, IBodyTemplate, IBorder, IBottomTabBarElementSlots, IBottomTabBarProps, IBoxComponent, IBuilderAddressField, IBuilderCheckboxField, IBuilderContainerField, IBuilderDateField, IBuilderField, IBuilderFieldBase, IBuilderFieldExport, IBuilderFileField, IBuilderGroupField, IBuilderMultiselectField, IBuilderNumberField, IBuilderPhoneField, IBuilderRadiosField, IBuilderRadiusPickerField, IBuilderSectionField, IBuilderSelectField, IBuilderSwitchField, IBuilderTagsField, IBuilderTextField, IBuilderTextareaField, IButton, IButtonElementSlots, IButtonParams, IButtonProps, IButtonState, IButtonsFilter, ICanvasProps, ICardComponent, ICardElementSlots, ICarouselElementSlots, ICarouselProps, ICascadeSelect, ICascadeSelectCore, IChatBubbleElementSlots, IChatBubbleProps, ICheckbox, ICheckboxFilter, ICheckboxSlots, IChildren, IChildrenParams, IChipProps, ICircularProgressProps, ICollapseProps, IColorPicker, IColumn, IColumnBase, ICombined, ICommandPaletteGroup, ICommandPaletteItem, ICommandPaletteProps, IComponentThemeConfig, IConditionGroupProps, IConditionRowProps, IConditionRule, IConditionsSectionProps, IConfirmDialogProps, IConfirmPopupProps, IContainer, IContainerCardProps, IContainerProps, IContextValues, ICountrySearchResults, ICssStyling, IDVButtonsFilter, IDVCheckboxFilter, IDVDateFilter, IDVDropdownFilter, IDVFilters, IDVMessages, IDVMultiselectFilter, IDVNumberFilter, IDVPaginationRequest, IDVPaginationResponse, IDVPaginationState, IDVPhoneFilter, IDVRangeFilter, IDVTextFilter, IDVTriStateFilter, IDataTableContextValues, IDataTableProps, IDataViewContextValues, IDataViewProps, IDataViewRefValues, IDatatableRefValues, IDate, IDateFilter, IDateProps, IDateSeparatorElementSlots, IDateSeparatorProps, IDateValidation, IDatepickerSlots, IDetailItem, IDetailListProps, IDialogButton, IDialogProps, IDialogRef, IDialogState, IDisplay, IDividerComponent, IDoughnutChartProps, IDropdownCore, IDropdownFilter, IDropdownSelect, IEditableProps, IEditors, IEffects, IElementBase, IElementSlotConfig, IElementStyle, IEmail, IEmailSearchResults, IEmptyStateElementSlots, IEmptyStateProps, IFieldCardProps, IFieldCondition, IFieldPreviewProps, IFile, IFileUploader, IFileUploaderElement, IFileUploaderTypes, IFileValidation, IFilesExtTypeKeys, IFilters, IFlexAlignment, IFlexComponent, IFormAddon, IFormBuilderInternalState, IFormBuilderMeta, IFormBuilderPayload, IFormBuilderProps, IFormComponent, IFormElement, IFormElementBaseSlots, IFormElementSlots, IFormGrid, IFormListsElements, IFormSelect, IFormSelectElements, IFormSingleElement, IGalleryElementSlots, IGalleryItem, IGalleryProps, IGrid, IGridComponent, IGridItem, IGridItemComponent, IGroup, IGroupCardProps, IGroupElementSlots, IGroupSettings, IHeaderElementSlots, IHeadingComponent, IIconProps, IImageComponent, IImagesExtTypeKeys, IInteractivity, IKeyedColumn, IKitsAnimation, IKitsCheckboxProps, IKitsComponentDefaults, IKitsContainer, IKitsDialogControlled, IKitsInputCalendar, IKitsInputColorPicker, IKitsInputLocation, IKitsInputMask, IKitsInputNumber, IKitsInputPassword, IKitsInputRating, IKitsInputSwitch, IKitsInputText, IKitsInputTextarea, IKitsPhoneInput, IKitsRadioProps, IKitsTheme, IKitsThemeColors, IKitsThemeConfig, IKitsThemeContextValues, IKitsThemeFontSizes, IKitsThemeFontWeights, IKitsThemeFonts, IKitsThemeLineHeights, IKitsThemeRadii, IKitsThemeShadows, IKitsThemeSpacing, IKitsToastRef, ILabelElement, ILabelProps, ILanguage, ILayout, ILineChartProps, ILinkComponent, ILinkOverrides, IList, IListBoxCore, IListBoxElement, IListBoxSelect, IListItem, IListing, ILoaderProps, ILoadingIndicatorContext, ILocaleContextProps, ILocaleContextValues, ILocation, ILocationDetailsResponse, ILocationResponse, IMainContextProps, IMainContextValues, IMemes, IMenuItem, IMessageComposerElementSlots, IMessageComposerProps, IMessageReceiptElementSlots, IMessageReceiptProps, IMessages, IMinusButton, IModalComponent, IModalFormProps, IMultiSelect, IMultiSelectCore, IMultiSelectSlots, IMultiselect, IMultiselectFilter, INativeShadow, INonCrossPlatformTypes, INumberFilter, INumberInput, INumberProps, INumberValidation, IObjectGroup, IOneOfTypes, IOptionItem, IOptionsEditorProps, IOptionsSource, IPageISection, IPaginationRequest, IPaginationResponse, IPaletteItemProps, IPaletteProps, IPanelCustomSlot, IPassword, IPasswordProps, IPersonCardProps, IPhone, IPhoneFilter, IPhoneObjectValue, IPhoneValidationResults, IPhoneValue, IPieChartProps, IPlusButton, IPolarAreaChartProps, IPopoverProps, IProgressBarElementSlots, IProgressBarProps, IPropertiesPanelProps, IRTLDetection, IRadarChartProps, IRadioCheckboxListItem, IRadioGroup, IRadioSlots, IRadiusPickerEvents, IRadiusPickerField, IRadiusPickerI18n, IRadiusPickerProps, IRangeFilter, IRef, IRepeatableSettings, IResponsiveElement, ISVGComponent, IScrollViewComponent, ISegmentedControlOption, ISegmentedControlProps, ISelect, ISelectBase, ISelectCore, ISelectElement, ISelectSlots, ISelectType, ISelectedFile, ISelectedFileType, ISelectionValidation, ISeverityColorSlots, ISeverityThemeMap, IShadowDefinition, IShadowValue, ISidebarElementSlots, ISizing, ISkeleton, ISkeletonRowsProps, ISkeletonText, ISliderProps, ISpacing, IStackProps, IStatCardElementSlots, IStatCardProps, IStatGroupElementSlots, IStatGroupProps, IStatePillProps, IStatisticsProps, IStats, IStepperElementSlots, IStepperProps, IStyleClasses, ISwitch, ISwitchSlots, ITabBarItem, ITabItem, ITableElementSlots, ITableFlatConfig, ITabsElementSlots, ITabsProps, ITags, IText, ITextComponent, ITextFieldProps, ITextFilter, ITextInput, ITextInputProps, ITextInputSlots, ITextValidation, ITextarea, IThemeContextProps, IThemeContextValues, ITimelineElementSlots, ITimelineItem, ITimelineProps, IToastFunction, IToastParams, IToolbarProps, ITransforms, ITransition, ITranslatableInputProps, ITranslatableText, ITranslateComponent, ITreeItem, ITreeSelect, ITreeSelectCore, ITreeSelectElement, ITreeSelectNode, ITreeViewProps, ITriStateFilter, ITypingIndicatorElementSlots, ITypingIndicatorProps, IUnkeyedColumn, IUseFormReturn, IUserAvatar, IValidationSectionProps, IWidgetBarIncomingProp, IWidgetChartContextProps, IWidgetChartProp, IWidgetData, IWidgetDoughnutIncomingProp, IWidgetLineIncomingProp, IWidgetPieIncomingProp, IWidgetPolarAreaIncomingProp, IWidgetRadarIncomingProp, IconName, IconType, InputTextFieldProps, KitsBreakpoint, KitsConditionalObject, KitsDevice, KitsOrientation, KitsPlatform, KitsResponsiveObject, KitsResponsiveValue, KitsThemeOverride, LabelVariant, LatLng, LoadMode, LoadingIndicatorRenderer, LogicFunction, MapInteraction, MeasurementValues, MessageReceiptState, Nullable, Numbering0_12, Numbering0_32, Numberish, OnCenterChange, OnLocationError, OnLocationFound, OnRadiusChange, OnRadiusValueChange, OnSubmitHandler, OnUnitChange, Orientation, PaginationState, PaginatorPageChangeEvent$1 as PaginatorPageChangeEvent, Permissions, PlatformKey, RadiusPickerDisplay, RadiusPickerLayout, RadiusPickerSize, RadiusUnit, RadiusValue, RenderLocationButtonProps, RenderMapProps, RenderSearchBoxProps, SelectFieldProps, SemanticColorTokens, ServerMethod, ServerResponse, ServerSideProps, SetManyOpts, Severity, Shades, ShadowPreset, Shapes, SidesValues, SizingNumbering, SizingValue, StatePillState, StepperVariant, TAcceptedFileType, TBuilderFieldType, TCheckboxRadioMode, TCheckboxRadioSize, TConditionAction, TConditionMatch, TConditionOperator, TDateBoundary, TDynamicFlag, TIsoFormat, TItemsPerRow, TKeyFilter, TLocationProvider, TextLabels, TextProps, ThemedFontKind, TimelineItemStatus, Timeout, TimingNumbering, ToastPosition, ToastSeverity, ToastSize, TooltipDataAttributes, TooltipProps, TreeChangeProps, TreeCheckboxSelectionKeyType, TreeCheckboxSelectionKeys, TreeNode, TreeNodeClickEvent, TreeNodeTemplateOptions, TreeProps, TreeRef, TreeSelectionEvent, Types, UseComponentDefaultsResult, UseDisclosureReturnType, UseFieldLogicElementProps, UseFieldLogicProps, UseFieldLogicReturn, UseFormManagerEvents, UseFormManagerReturn, UseToastApi, ValidationProps, children, clearFunction, downloadableFileResponse, settings1, settings2 };

package/index.js

@@ -103,6 +103,7 @@ export { defaultTheme } from './packages/types/src/Theme/defaultTheme.js';
 export { defaultSeverityTheme } from './packages/types/src/Theme/defaultSeverityTheme.js';
 export { deepMerge, extendTheme } from './packages/types/src/Theme/extendTheme.js';
 export { isSemanticToken, isThemeToken, resolveTokenValue } from './packages/types/src/Theme/resolvers.js';
+export { ALPHA_COLOR_VARS, ALPHA_STEPS, ALPHA_TOKEN_NAMES, isAlphaToken } from './packages/types/src/Theme/alphaColors.js';
 export { default as AnimatePresence } from './layout/AnimatePresence/index.js';
 export { default as Banner } from './components/Banner/banner.js';
 export { default as Center } from './layout/Center/index.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/layout/Center/index.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 var useSeparator = require('../../apps/mobile/src/Factory/useSeparator.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');

package/layout/Center/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/layout/Center/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\n\nconst Center = ({className, children, ref, ...props}:PropsWithChildren<IFlexComponent>) => {\n    // const {cssProps, nativeProps}  = split(props)\n    const {cssProps, nativeProps}  = useSeparator<HTMLDivElement>(props)\n    const { entering, exiting, ...restNativeProps } = nativeProps;\n\n    return (\n        <ResponsiveElement ref={ref} as=\"Center\" entering={entering} exiting={exiting} additionalStyles={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n        }} additionalClasses={className} cssProps={cssProps} nativeProps={restNativeProps} children={children} />\n    )\n}\nexport default Center;\n"],"names":["useSeparator","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,MAAA,GAAS,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAwC;AAEvF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAKA,qBAA6B,KAAK,CAAA;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,iBAAgB,GAAI,WAAA;AAElD,EAAA,sCACKC,yBAAA,EAAA,EAAkB,GAAA,EAAU,IAAG,QAAA,EAAS,QAAA,EAAoB,SAAkB,gBAAA,EAAkB;AAAA,IAC7F,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB;AAAA,KACjB,iBAAA,EAAmB,SAAA,EAAW,QAAA,EAAoB,WAAA,EAAa,iBAAiB,QAAA,EAAoB,CAAA;AAE/G;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/layout/Center/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\n\nconst Center = ({className, children, ref, ...props}:PropsWithChildren<IFlexComponent>) => {\n    // const {cssProps, nativeProps}  = split(props)\n    const {cssProps, nativeProps}  = useSeparator<HTMLDivElement>(props)\n    const { entering, exiting, ...restNativeProps } = nativeProps;\n\n    return (\n        <ResponsiveElement ref={ref} as=\"Center\" entering={entering} exiting={exiting} additionalStyles={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n        }} additionalClasses={className} cssProps={cssProps} nativeProps={restNativeProps} children={children} />\n    )\n}\nexport default Center;\n"],"names":["useSeparator","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,MAAA,GAAS,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAwC;AAEvF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAKA,qBAA6B,KAAK,CAAA;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,iBAAgB,GAAI,WAAA;AAElD,EAAA,sCACKC,yBAAA,EAAA,EAAkB,GAAA,EAAU,IAAG,QAAA,EAAS,QAAA,EAAoB,SAAkB,gBAAA,EAAkB;AAAA,IAC7F,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB;AAAA,KACjB,iBAAA,EAAmB,SAAA,EAAW,QAAA,EAAoB,WAAA,EAAa,iBAAiB,QAAA,EAAoB,CAAA;AAE/G;;;;"}

package/layout/Center/index.js

@@ -57,6 +57,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import useSeparator from '../../apps/mobile/src/Factory/useSeparator.js';
 import '../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';

package/layout/Center/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/layout/Center/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\n\nconst Center = ({className, children, ref, ...props}:PropsWithChildren<IFlexComponent>) => {\n    // const {cssProps, nativeProps}  = split(props)\n    const {cssProps, nativeProps}  = useSeparator<HTMLDivElement>(props)\n    const { entering, exiting, ...restNativeProps } = nativeProps;\n\n    return (\n        <ResponsiveElement ref={ref} as=\"Center\" entering={entering} exiting={exiting} additionalStyles={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n        }} additionalClasses={className} cssProps={cssProps} nativeProps={restNativeProps} children={children} />\n    )\n}\nexport default Center;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,MAAA,GAAS,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAwC;AAEvF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAK,aAA6B,KAAK,CAAA;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,iBAAgB,GAAI,WAAA;AAElD,EAAA,2BACK,iBAAA,EAAA,EAAkB,GAAA,EAAU,IAAG,QAAA,EAAS,QAAA,EAAoB,SAAkB,gBAAA,EAAkB;AAAA,IAC7F,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB;AAAA,KACjB,iBAAA,EAAmB,SAAA,EAAW,QAAA,EAAoB,WAAA,EAAa,iBAAiB,QAAA,EAAoB,CAAA;AAE/G;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/layout/Center/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\n\nconst Center = ({className, children, ref, ...props}:PropsWithChildren<IFlexComponent>) => {\n    // const {cssProps, nativeProps}  = split(props)\n    const {cssProps, nativeProps}  = useSeparator<HTMLDivElement>(props)\n    const { entering, exiting, ...restNativeProps } = nativeProps;\n\n    return (\n        <ResponsiveElement ref={ref} as=\"Center\" entering={entering} exiting={exiting} additionalStyles={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n        }} additionalClasses={className} cssProps={cssProps} nativeProps={restNativeProps} children={children} />\n    )\n}\nexport default Center;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,MAAA,GAAS,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAwC;AAEvF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAK,aAA6B,KAAK,CAAA;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,iBAAgB,GAAI,WAAA;AAElD,EAAA,2BACK,iBAAA,EAAA,EAAkB,GAAA,EAAU,IAAG,QAAA,EAAS,QAAA,EAAoB,SAAkB,gBAAA,EAAkB;AAAA,IAC7F,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB;AAAA,KACjB,iBAAA,EAAmB,SAAA,EAAW,QAAA,EAAoB,WAAA,EAAa,iBAAiB,QAAA,EAAoB,CAAA;AAE/G;;;;"}

package/layout/Container/container.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
 var useSeparator = require('../../apps/mobile/src/Factory/useSeparator.cjs');
 require('i18next');

package/layout/Container/container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"container.cjs","sources":["../../../../src/layout/Container/container.native.tsx"],"sourcesContent":["import React, { type FunctionComponent, type PropsWithChildren, type ReactNode } from \"react\";\nimport {Box, Flex, Heading} from \"../../_compat\";\nimport { useSeparator } from \"../../factory\";\nimport type { IContainerProps } from \"@lmb-it/kitsconcerto-types\";\n\n\n\nconst Container: FunctionComponent<PropsWithChildren<IContainerProps>> = ({\n                                                                              title,\n                                                                              rightElement,\n                                                                              children,\n                                                                              childrenContainerProps = {},\n                                                                              ...props\n                                                                          }) => {\n    const { cssProps, nativeProps } = useSeparator<any>(props);\n\n    return (\n        <Box\n            bgColor=\"surface-0\"\n            borderRadius={8}\n            w=\"full\"\n            overflow=\"hidden\"\n            mb={8}\n            shadow=\"md\"\n            {...cssProps}\n            {...nativeProps}\n        >\n            {(!!title || !!rightElement) && (\n                <Flex\n                    backgroundColor=\"surface-100\"\n                    borderTopLeftRadius={8}\n                    borderTopRightRadius={8}\n                    p={10}\n                    flexDirection=\"row\"\n                    alignItems=\"center\"\n                    h={58}\n                    justifyContent=\"space-between\"\n                >\n                    {!!title && (\n                        <Heading\n                            as=\"h2\"\n                            fontSize=\"lg\"\n                            fontWeight=\"bold\"\n                            fontColor=\"black-alpha-90\"\n                            letterSpacing={0}\n                            fontFamily=\"Poppins,Helvetica,sans-serif\"\n                            m={0}\n                            p={0}\n                        >\n                            {title}\n                        </Heading>\n                    )}\n                    {rightElement}\n                </Flex>\n            )}\n\n            <Flex p={10} flexDirection=\"column\" {...childrenContainerProps}>\n                {children}\n            </Flex>\n        </Box>\n    );\n};\n\nexport default Container;\n"],"names":["useSeparator","jsxs","Box","Flex","jsx","Heading"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAmE,CAAC;AAAA,EACI,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,yBAAyB,EAAC;AAAA,EAC1B,GAAG;AACP,CAAA,KAAM;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAIA,qBAAkB,KAAK,CAAA;AAEzD,EAAA,uBACIC,eAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACG,OAAA,EAAQ,WAAA;AAAA,MACR,YAAA,EAAc,CAAA;AAAA,MACd,CAAA,EAAE,MAAA;AAAA,MACF,QAAA,EAAS,QAAA;AAAA,MACT,EAAA,EAAI,CAAA;AAAA,MACJ,MAAA,EAAO,IAAA;AAAA,MACN,GAAG,QAAA;AAAA,MACH,GAAG,WAAA;AAAA,MAEF,QAAA,EAAA;AAAA,QAAA,CAAA,CAAC,CAAC,KAAA,IAAS,CAAC,CAAC,YAAA,qBACXD,eAAA;AAAA,UAACE,eAAA;AAAA,UAAA;AAAA,YACG,eAAA,EAAgB,aAAA;AAAA,YAChB,mBAAA,EAAqB,CAAA;AAAA,YACrB,oBAAA,EAAsB,CAAA;AAAA,YACtB,CAAA,EAAG,EAAA;AAAA,YACH,aAAA,EAAc,KAAA;AAAA,YACd,UAAA,EAAW,QAAA;AAAA,YACX,CAAA,EAAG,EAAA;AAAA,YACH,cAAA,EAAe,eAAA;AAAA,YAEd,QAAA,EAAA;AAAA,cAAA,CAAC,CAAC,KAAA,oBACCC,cAAA;AAAA,gBAACC,oBAAA;AAAA,gBAAA;AAAA,kBACG,EAAA,EAAG,IAAA;AAAA,kBACH,QAAA,EAAS,IAAA;AAAA,kBACT,UAAA,EAAW,MAAA;AAAA,kBACX,SAAA,EAAU,gBAAA;AAAA,kBACV,aAAA,EAAe,CAAA;AAAA,kBACf,UAAA,EAAW,8BAAA;AAAA,kBACX,CAAA,EAAG,CAAA;AAAA,kBACH,CAAA,EAAG,CAAA;AAAA,kBAEF,QAAA,EAAA;AAAA;AAAA,eACL;AAAA,cAEH;AAAA;AAAA;AAAA,SACL;AAAA,wBAGJD,cAAA,CAACD,mBAAK,CAAA,EAAG,EAAA,EAAI,eAAc,QAAA,EAAU,GAAG,wBACnC,QAAA,EACL;AAAA;AAAA;AAAA,GACJ;AAER;;;;"}
+{"version":3,"file":"container.cjs","sources":["../../../../src/layout/Container/container.native.tsx"],"sourcesContent":["import React, { type FunctionComponent, type PropsWithChildren, type ReactNode } from \"react\";\nimport {Box, Flex, Heading} from \"../../_compat\";\nimport { useSeparator } from \"../../factory\";\nimport type { IContainerProps } from \"@lmb-it/kitsconcerto-types\";\n\n\n\nconst Container: FunctionComponent<PropsWithChildren<IContainerProps>> = ({\n                                                                              title,\n                                                                              rightElement,\n                                                                              children,\n                                                                              childrenContainerProps = {},\n                                                                              ...props\n                                                                          }) => {\n    const { cssProps, nativeProps } = useSeparator<any>(props);\n\n    return (\n        <Box\n            bgColor=\"surface-0\"\n            borderRadius={8}\n            w=\"full\"\n            overflow=\"hidden\"\n            mb={8}\n            shadow=\"md\"\n            {...cssProps}\n            {...nativeProps}\n        >\n            {(!!title || !!rightElement) && (\n                <Flex\n                    backgroundColor=\"surface-100\"\n                    borderTopLeftRadius={8}\n                    borderTopRightRadius={8}\n                    p={10}\n                    flexDirection=\"row\"\n                    alignItems=\"center\"\n                    h={58}\n                    justifyContent=\"space-between\"\n                >\n                    {!!title && (\n                        <Heading\n                            as=\"h2\"\n                            fontSize=\"lg\"\n                            fontWeight=\"bold\"\n                            fontColor=\"black-alpha-90\"\n                            letterSpacing={0}\n                            fontFamily=\"Poppins,Helvetica,sans-serif\"\n                            m={0}\n                            p={0}\n                        >\n                            {title}\n                        </Heading>\n                    )}\n                    {rightElement}\n                </Flex>\n            )}\n\n            <Flex p={10} flexDirection=\"column\" {...childrenContainerProps}>\n                {children}\n            </Flex>\n        </Box>\n    );\n};\n\nexport default Container;\n"],"names":["useSeparator","jsxs","Box","Flex","jsx","Heading"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAmE,CAAC;AAAA,EACI,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,yBAAyB,EAAC;AAAA,EAC1B,GAAG;AACP,CAAA,KAAM;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAIA,qBAAkB,KAAK,CAAA;AAEzD,EAAA,uBACIC,eAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACG,OAAA,EAAQ,WAAA;AAAA,MACR,YAAA,EAAc,CAAA;AAAA,MACd,CAAA,EAAE,MAAA;AAAA,MACF,QAAA,EAAS,QAAA;AAAA,MACT,EAAA,EAAI,CAAA;AAAA,MACJ,MAAA,EAAO,IAAA;AAAA,MACN,GAAG,QAAA;AAAA,MACH,GAAG,WAAA;AAAA,MAEF,QAAA,EAAA;AAAA,QAAA,CAAA,CAAC,CAAC,KAAA,IAAS,CAAC,CAAC,YAAA,qBACXD,eAAA;AAAA,UAACE,eAAA;AAAA,UAAA;AAAA,YACG,eAAA,EAAgB,aAAA;AAAA,YAChB,mBAAA,EAAqB,CAAA;AAAA,YACrB,oBAAA,EAAsB,CAAA;AAAA,YACtB,CAAA,EAAG,EAAA;AAAA,YACH,aAAA,EAAc,KAAA;AAAA,YACd,UAAA,EAAW,QAAA;AAAA,YACX,CAAA,EAAG,EAAA;AAAA,YACH,cAAA,EAAe,eAAA;AAAA,YAEd,QAAA,EAAA;AAAA,cAAA,CAAC,CAAC,KAAA,oBACCC,cAAA;AAAA,gBAACC,oBAAA;AAAA,gBAAA;AAAA,kBACG,EAAA,EAAG,IAAA;AAAA,kBACH,QAAA,EAAS,IAAA;AAAA,kBACT,UAAA,EAAW,MAAA;AAAA,kBACX,SAAA,EAAU,gBAAA;AAAA,kBACV,aAAA,EAAe,CAAA;AAAA,kBACf,UAAA,EAAW,8BAAA;AAAA,kBACX,CAAA,EAAG,CAAA;AAAA,kBACH,CAAA,EAAG,CAAA;AAAA,kBAEF,QAAA,EAAA;AAAA;AAAA,eACL;AAAA,cAEH;AAAA;AAAA;AAAA,SACL;AAAA,wBAGJD,cAAA,CAACD,mBAAK,CAAA,EAAG,EAAA,EAAI,eAAc,QAAA,EAAU,GAAG,wBACnC,QAAA,EACL;AAAA;AAAA;AAAA,GACJ;AAER;;;;"}

package/layout/Container/container.js

@@ -57,6 +57,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../apps/mobile/src/Factory/DimensionsContext.js';
 import useSeparator from '../../apps/mobile/src/Factory/useSeparator.js';
 import 'i18next';

package/layout/Container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sources":["../../../../src/layout/Container/container.native.tsx"],"sourcesContent":["import React, { type FunctionComponent, type PropsWithChildren, type ReactNode } from \"react\";\nimport {Box, Flex, Heading} from \"../../_compat\";\nimport { useSeparator } from \"../../factory\";\nimport type { IContainerProps } from \"@lmb-it/kitsconcerto-types\";\n\n\n\nconst Container: FunctionComponent<PropsWithChildren<IContainerProps>> = ({\n                                                                              title,\n                                                                              rightElement,\n                                                                              children,\n                                                                              childrenContainerProps = {},\n                                                                              ...props\n                                                                          }) => {\n    const { cssProps, nativeProps } = useSeparator<any>(props);\n\n    return (\n        <Box\n            bgColor=\"surface-0\"\n            borderRadius={8}\n            w=\"full\"\n            overflow=\"hidden\"\n            mb={8}\n            shadow=\"md\"\n            {...cssProps}\n            {...nativeProps}\n        >\n            {(!!title || !!rightElement) && (\n                <Flex\n                    backgroundColor=\"surface-100\"\n                    borderTopLeftRadius={8}\n                    borderTopRightRadius={8}\n                    p={10}\n                    flexDirection=\"row\"\n                    alignItems=\"center\"\n                    h={58}\n                    justifyContent=\"space-between\"\n                >\n                    {!!title && (\n                        <Heading\n                            as=\"h2\"\n                            fontSize=\"lg\"\n                            fontWeight=\"bold\"\n                            fontColor=\"black-alpha-90\"\n                            letterSpacing={0}\n                            fontFamily=\"Poppins,Helvetica,sans-serif\"\n                            m={0}\n                            p={0}\n                        >\n                            {title}\n                        </Heading>\n                    )}\n                    {rightElement}\n                </Flex>\n            )}\n\n            <Flex p={10} flexDirection=\"column\" {...childrenContainerProps}>\n                {children}\n            </Flex>\n        </Box>\n    );\n};\n\nexport default Container;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAmE,CAAC;AAAA,EACI,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,yBAAyB,EAAC;AAAA,EAC1B,GAAG;AACP,CAAA,KAAM;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAI,aAAkB,KAAK,CAAA;AAEzD,EAAA,uBACI,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACG,OAAA,EAAQ,WAAA;AAAA,MACR,YAAA,EAAc,CAAA;AAAA,MACd,CAAA,EAAE,MAAA;AAAA,MACF,QAAA,EAAS,QAAA;AAAA,MACT,EAAA,EAAI,CAAA;AAAA,MACJ,MAAA,EAAO,IAAA;AAAA,MACN,GAAG,QAAA;AAAA,MACH,GAAG,WAAA;AAAA,MAEF,QAAA,EAAA;AAAA,QAAA,CAAA,CAAC,CAAC,KAAA,IAAS,CAAC,CAAC,YAAA,qBACX,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACG,eAAA,EAAgB,aAAA;AAAA,YAChB,mBAAA,EAAqB,CAAA;AAAA,YACrB,oBAAA,EAAsB,CAAA;AAAA,YACtB,CAAA,EAAG,EAAA;AAAA,YACH,aAAA,EAAc,KAAA;AAAA,YACd,UAAA,EAAW,QAAA;AAAA,YACX,CAAA,EAAG,EAAA;AAAA,YACH,cAAA,EAAe,eAAA;AAAA,YAEd,QAAA,EAAA;AAAA,cAAA,CAAC,CAAC,KAAA,oBACC,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACG,EAAA,EAAG,IAAA;AAAA,kBACH,QAAA,EAAS,IAAA;AAAA,kBACT,UAAA,EAAW,MAAA;AAAA,kBACX,SAAA,EAAU,gBAAA;AAAA,kBACV,aAAA,EAAe,CAAA;AAAA,kBACf,UAAA,EAAW,8BAAA;AAAA,kBACX,CAAA,EAAG,CAAA;AAAA,kBACH,CAAA,EAAG,CAAA;AAAA,kBAEF,QAAA,EAAA;AAAA;AAAA,eACL;AAAA,cAEH;AAAA;AAAA;AAAA,SACL;AAAA,wBAGJ,GAAA,CAAC,QAAK,CAAA,EAAG,EAAA,EAAI,eAAc,QAAA,EAAU,GAAG,wBACnC,QAAA,EACL;AAAA;AAAA;AAAA,GACJ;AAER;;;;"}
+{"version":3,"file":"container.js","sources":["../../../../src/layout/Container/container.native.tsx"],"sourcesContent":["import React, { type FunctionComponent, type PropsWithChildren, type ReactNode } from \"react\";\nimport {Box, Flex, Heading} from \"../../_compat\";\nimport { useSeparator } from \"../../factory\";\nimport type { IContainerProps } from \"@lmb-it/kitsconcerto-types\";\n\n\n\nconst Container: FunctionComponent<PropsWithChildren<IContainerProps>> = ({\n                                                                              title,\n                                                                              rightElement,\n                                                                              children,\n                                                                              childrenContainerProps = {},\n                                                                              ...props\n                                                                          }) => {\n    const { cssProps, nativeProps } = useSeparator<any>(props);\n\n    return (\n        <Box\n            bgColor=\"surface-0\"\n            borderRadius={8}\n            w=\"full\"\n            overflow=\"hidden\"\n            mb={8}\n            shadow=\"md\"\n            {...cssProps}\n            {...nativeProps}\n        >\n            {(!!title || !!rightElement) && (\n                <Flex\n                    backgroundColor=\"surface-100\"\n                    borderTopLeftRadius={8}\n                    borderTopRightRadius={8}\n                    p={10}\n                    flexDirection=\"row\"\n                    alignItems=\"center\"\n                    h={58}\n                    justifyContent=\"space-between\"\n                >\n                    {!!title && (\n                        <Heading\n                            as=\"h2\"\n                            fontSize=\"lg\"\n                            fontWeight=\"bold\"\n                            fontColor=\"black-alpha-90\"\n                            letterSpacing={0}\n                            fontFamily=\"Poppins,Helvetica,sans-serif\"\n                            m={0}\n                            p={0}\n                        >\n                            {title}\n                        </Heading>\n                    )}\n                    {rightElement}\n                </Flex>\n            )}\n\n            <Flex p={10} flexDirection=\"column\" {...childrenContainerProps}>\n                {children}\n            </Flex>\n        </Box>\n    );\n};\n\nexport default Container;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAmE,CAAC;AAAA,EACI,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,yBAAyB,EAAC;AAAA,EAC1B,GAAG;AACP,CAAA,KAAM;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAI,aAAkB,KAAK,CAAA;AAEzD,EAAA,uBACI,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACG,OAAA,EAAQ,WAAA;AAAA,MACR,YAAA,EAAc,CAAA;AAAA,MACd,CAAA,EAAE,MAAA;AAAA,MACF,QAAA,EAAS,QAAA;AAAA,MACT,EAAA,EAAI,CAAA;AAAA,MACJ,MAAA,EAAO,IAAA;AAAA,MACN,GAAG,QAAA;AAAA,MACH,GAAG,WAAA;AAAA,MAEF,QAAA,EAAA;AAAA,QAAA,CAAA,CAAC,CAAC,KAAA,IAAS,CAAC,CAAC,YAAA,qBACX,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACG,eAAA,EAAgB,aAAA;AAAA,YAChB,mBAAA,EAAqB,CAAA;AAAA,YACrB,oBAAA,EAAsB,CAAA;AAAA,YACtB,CAAA,EAAG,EAAA;AAAA,YACH,aAAA,EAAc,KAAA;AAAA,YACd,UAAA,EAAW,QAAA;AAAA,YACX,CAAA,EAAG,EAAA;AAAA,YACH,cAAA,EAAe,eAAA;AAAA,YAEd,QAAA,EAAA;AAAA,cAAA,CAAC,CAAC,KAAA,oBACC,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACG,EAAA,EAAG,IAAA;AAAA,kBACH,QAAA,EAAS,IAAA;AAAA,kBACT,UAAA,EAAW,MAAA;AAAA,kBACX,SAAA,EAAU,gBAAA;AAAA,kBACV,aAAA,EAAe,CAAA;AAAA,kBACf,UAAA,EAAW,8BAAA;AAAA,kBACX,CAAA,EAAG,CAAA;AAAA,kBACH,CAAA,EAAG,CAAA;AAAA,kBAEF,QAAA,EAAA;AAAA;AAAA,eACL;AAAA,cAEH;AAAA;AAAA;AAAA,SACL;AAAA,wBAGJ,GAAA,CAAC,QAAK,CAAA,EAAG,EAAA,EAAI,eAAc,QAAA,EAAU,GAAG,wBACnC,QAAA,EACL;AAAA;AAAA;AAAA,GACJ;AAER;;;;"}

package/layout/Flex/index.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 var useSeparator = require('../../apps/mobile/src/Factory/useSeparator.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');

package/layout/Flex/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/layout/Flex/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\n\n\nconst Flex = ({ className, children, ref, ...props }:PropsWithChildren<IFlexComponent>) => {\n    const { cssProps, nativeProps } = useSeparator<Record<any, any>>(props);\n    const { scrollable, entering, exiting, ...restNativeProps } = nativeProps;\n\n    return (\n        <ResponsiveElement\n            ref={ref}\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            additionalStyles={{\n                display: \"flex\",\n                flexDirection: \"row\",\n            }}\n            additionalClasses={className}\n            cssProps={cssProps}\n            nativeProps={restNativeProps}\n            children={children}\n        />\n    );\n}\nFlex.displayName = \"Flex\";\nexport default Flex;\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,IAAA,GAAO,CAAC,EAAE,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAM,KAAwC;AACvF,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAIA,qBAA+B,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,QAAA,EAAU,OAAA,EAAS,GAAG,iBAAgB,GAAI,WAAA;AAE9D,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA,EAAkB;AAAA,QACd,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe;AAAA,OACnB;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA,EAAa,eAAA;AAAA,MACb;AAAA;AAAA,GACJ;AAER;AACA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/layout/Flex/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\n\n\nconst Flex = ({ className, children, ref, ...props }:PropsWithChildren<IFlexComponent>) => {\n    const { cssProps, nativeProps } = useSeparator<Record<any, any>>(props);\n    const { scrollable, entering, exiting, ...restNativeProps } = nativeProps;\n\n    return (\n        <ResponsiveElement\n            ref={ref}\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            additionalStyles={{\n                display: \"flex\",\n                flexDirection: \"row\",\n            }}\n            additionalClasses={className}\n            cssProps={cssProps}\n            nativeProps={restNativeProps}\n            children={children}\n        />\n    );\n}\nFlex.displayName = \"Flex\";\nexport default Flex;\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,IAAA,GAAO,CAAC,EAAE,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAM,KAAwC;AACvF,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAIA,qBAA+B,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,QAAA,EAAU,OAAA,EAAS,GAAG,iBAAgB,GAAI,WAAA;AAE9D,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA,EAAkB;AAAA,QACd,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe;AAAA,OACnB;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA,EAAa,eAAA;AAAA,MACb;AAAA;AAAA,GACJ;AAER;AACA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/layout/Flex/index.js

@@ -57,6 +57,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import useSeparator from '../../apps/mobile/src/Factory/useSeparator.js';
 import '../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';

package/layout/Flex/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/layout/Flex/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\n\n\nconst Flex = ({ className, children, ref, ...props }:PropsWithChildren<IFlexComponent>) => {\n    const { cssProps, nativeProps } = useSeparator<Record<any, any>>(props);\n    const { scrollable, entering, exiting, ...restNativeProps } = nativeProps;\n\n    return (\n        <ResponsiveElement\n            ref={ref}\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            additionalStyles={{\n                display: \"flex\",\n                flexDirection: \"row\",\n            }}\n            additionalClasses={className}\n            cssProps={cssProps}\n            nativeProps={restNativeProps}\n            children={children}\n        />\n    );\n}\nFlex.displayName = \"Flex\";\nexport default Flex;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,IAAA,GAAO,CAAC,EAAE,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAM,KAAwC;AACvF,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAI,aAA+B,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,QAAA,EAAU,OAAA,EAAS,GAAG,iBAAgB,GAAI,WAAA;AAE9D,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA,EAAkB;AAAA,QACd,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe;AAAA,OACnB;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA,EAAa,eAAA;AAAA,MACb;AAAA;AAAA,GACJ;AAER;AACA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/layout/Flex/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\n\n\nconst Flex = ({ className, children, ref, ...props }:PropsWithChildren<IFlexComponent>) => {\n    const { cssProps, nativeProps } = useSeparator<Record<any, any>>(props);\n    const { scrollable, entering, exiting, ...restNativeProps } = nativeProps;\n\n    return (\n        <ResponsiveElement\n            ref={ref}\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            additionalStyles={{\n                display: \"flex\",\n                flexDirection: \"row\",\n            }}\n            additionalClasses={className}\n            cssProps={cssProps}\n            nativeProps={restNativeProps}\n            children={children}\n        />\n    );\n}\nFlex.displayName = \"Flex\";\nexport default Flex;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,IAAA,GAAO,CAAC,EAAE,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAM,KAAwC;AACvF,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAI,aAA+B,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,QAAA,EAAU,OAAA,EAAS,GAAG,iBAAgB,GAAI,WAAA;AAE9D,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA,EAAkB;AAAA,QACd,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe;AAAA,OACnB;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA,EAAa,eAAA;AAAA,MACb;AAAA;AAAA,GACJ;AAER;AACA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/layout/HStack/index.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 var useSeparator = require('../../apps/mobile/src/Factory/useSeparator.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');

package/layout/HStack/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/layout/HStack/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IStackProps, IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\ntype IsolatedStack = Omit<IStackProps, keyof IStyleClasses>;\n\n/**\n * Maps the `space` prop to a gap value in dp. Mirrors the Tailwind\n * `gap-1 … gap-8` scale used by the old Gluestack-based hstack styles\n * so visual spacing stays identical for every existing caller.\n */\nconst SPACE_TO_GAP: Record<NonNullable<IStackProps[\"space\"]>, number> = {\n    xs: 4,\n    sm: 8,\n    md: 12,\n    lg: 16,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 28,\n    \"4xl\": 32,\n};\n\n/**\n * HStack (native)\n *\n * Lays children out in a horizontal row with a gap derived from `space`.\n *\n * Implementation note: we render through `ResponsiveElement as=\"Box\"`\n * (a plain React Native View) and force `flexDirection` + `gap` via\n * `cssProps`. The previous implementation delegated to a Gluestack\n * component that applied layout through Nativewind `className` strings\n * (\"flex-row gap-1\") — when Nativewind's class interpreter isn't active\n * across the yalc package boundary, those classes were ignored and the\n * underlying View fell back to its RN default `flexDirection: 'column'`\n * (children stacked vertically). Forcing the layout here via native\n * style props removes that runtime-config dependency entirely.\n *\n * If a caller genuinely wants a different direction, their own\n * `flexDirection=` / `gap=` props (harvested by `useSeparator` into\n * `cssProps`) spread AFTER the defaults and win.\n */\nconst HStack: React.FC<PropsWithChildren<IStackProps>> = (props) => {\n    const {cssProps, nativeProps} = useSeparator<IStackProps>(props);\n    const {\n        space = \"md\",\n        reversed = false,\n        scrollable,\n        children,\n        entering,\n        exiting,\n        ...rest\n    } = nativeProps;\n\n    return (\n        <ResponsiveElement<IsolatedStack>\n            ref={props.ref}\n            as=\"Box\"\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            cssProps={{\n                flexDirection: reversed ? \"row-reverse\" : \"row\",\n                gap: SPACE_TO_GAP[space],\n                ...cssProps,\n            }}\n            //@ts-ignore\n            nativeProps={rest}\n        >\n            {children}\n        </ResponsiveElement>\n    );\n};\n\nexport default HStack;\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAkE;AAAA,EACpE,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAqBA,MAAM,MAAA,GAAmD,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAIA,qBAA0B,KAAK,CAAA;AAC/D,EAAA,MAAM;AAAA,IACF,KAAA,GAAQ,IAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,UAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,WAAA;AAEJ,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,EAAA,EAAG,KAAA;AAAA,MACH,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU;AAAA,QACN,aAAA,EAAe,WAAW,aAAA,GAAgB,KAAA;AAAA,QAC1C,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA,QACvB,GAAG;AAAA,OACP;AAAA,MAEA,WAAA,EAAa,IAAA;AAAA,MAEZ;AAAA;AAAA,GACL;AAER;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/layout/HStack/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IStackProps, IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\ntype IsolatedStack = Omit<IStackProps, keyof IStyleClasses>;\n\n/**\n * Maps the `space` prop to a gap value in dp. Mirrors the Tailwind\n * `gap-1 … gap-8` scale used by the old Gluestack-based hstack styles\n * so visual spacing stays identical for every existing caller.\n */\nconst SPACE_TO_GAP: Record<NonNullable<IStackProps[\"space\"]>, number> = {\n    xs: 4,\n    sm: 8,\n    md: 12,\n    lg: 16,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 28,\n    \"4xl\": 32,\n};\n\n/**\n * HStack (native)\n *\n * Lays children out in a horizontal row with a gap derived from `space`.\n *\n * Implementation note: we render through `ResponsiveElement as=\"Box\"`\n * (a plain React Native View) and force `flexDirection` + `gap` via\n * `cssProps`. The previous implementation delegated to a Gluestack\n * component that applied layout through Nativewind `className` strings\n * (\"flex-row gap-1\") — when Nativewind's class interpreter isn't active\n * across the yalc package boundary, those classes were ignored and the\n * underlying View fell back to its RN default `flexDirection: 'column'`\n * (children stacked vertically). Forcing the layout here via native\n * style props removes that runtime-config dependency entirely.\n *\n * If a caller genuinely wants a different direction, their own\n * `flexDirection=` / `gap=` props (harvested by `useSeparator` into\n * `cssProps`) spread AFTER the defaults and win.\n */\nconst HStack: React.FC<PropsWithChildren<IStackProps>> = (props) => {\n    const {cssProps, nativeProps} = useSeparator<IStackProps>(props);\n    const {\n        space = \"md\",\n        reversed = false,\n        scrollable,\n        children,\n        entering,\n        exiting,\n        ...rest\n    } = nativeProps;\n\n    return (\n        <ResponsiveElement<IsolatedStack>\n            ref={props.ref}\n            as=\"Box\"\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            cssProps={{\n                flexDirection: reversed ? \"row-reverse\" : \"row\",\n                gap: SPACE_TO_GAP[space],\n                ...cssProps,\n            }}\n            //@ts-ignore\n            nativeProps={rest}\n        >\n            {children}\n        </ResponsiveElement>\n    );\n};\n\nexport default HStack;\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAkE;AAAA,EACpE,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAqBA,MAAM,MAAA,GAAmD,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAIA,qBAA0B,KAAK,CAAA;AAC/D,EAAA,MAAM;AAAA,IACF,KAAA,GAAQ,IAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,UAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,WAAA;AAEJ,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACG,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,EAAA,EAAG,KAAA;AAAA,MACH,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU;AAAA,QACN,aAAA,EAAe,WAAW,aAAA,GAAgB,KAAA;AAAA,QAC1C,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA,QACvB,GAAG;AAAA,OACP;AAAA,MAEA,WAAA,EAAa,IAAA;AAAA,MAEZ;AAAA;AAAA,GACL;AAER;;;;"}

package/layout/HStack/index.js

@@ -57,6 +57,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import useSeparator from '../../apps/mobile/src/Factory/useSeparator.js';
 import '../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';

package/layout/HStack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/layout/HStack/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IStackProps, IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\ntype IsolatedStack = Omit<IStackProps, keyof IStyleClasses>;\n\n/**\n * Maps the `space` prop to a gap value in dp. Mirrors the Tailwind\n * `gap-1 … gap-8` scale used by the old Gluestack-based hstack styles\n * so visual spacing stays identical for every existing caller.\n */\nconst SPACE_TO_GAP: Record<NonNullable<IStackProps[\"space\"]>, number> = {\n    xs: 4,\n    sm: 8,\n    md: 12,\n    lg: 16,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 28,\n    \"4xl\": 32,\n};\n\n/**\n * HStack (native)\n *\n * Lays children out in a horizontal row with a gap derived from `space`.\n *\n * Implementation note: we render through `ResponsiveElement as=\"Box\"`\n * (a plain React Native View) and force `flexDirection` + `gap` via\n * `cssProps`. The previous implementation delegated to a Gluestack\n * component that applied layout through Nativewind `className` strings\n * (\"flex-row gap-1\") — when Nativewind's class interpreter isn't active\n * across the yalc package boundary, those classes were ignored and the\n * underlying View fell back to its RN default `flexDirection: 'column'`\n * (children stacked vertically). Forcing the layout here via native\n * style props removes that runtime-config dependency entirely.\n *\n * If a caller genuinely wants a different direction, their own\n * `flexDirection=` / `gap=` props (harvested by `useSeparator` into\n * `cssProps`) spread AFTER the defaults and win.\n */\nconst HStack: React.FC<PropsWithChildren<IStackProps>> = (props) => {\n    const {cssProps, nativeProps} = useSeparator<IStackProps>(props);\n    const {\n        space = \"md\",\n        reversed = false,\n        scrollable,\n        children,\n        entering,\n        exiting,\n        ...rest\n    } = nativeProps;\n\n    return (\n        <ResponsiveElement<IsolatedStack>\n            ref={props.ref}\n            as=\"Box\"\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            cssProps={{\n                flexDirection: reversed ? \"row-reverse\" : \"row\",\n                gap: SPACE_TO_GAP[space],\n                ...cssProps,\n            }}\n            //@ts-ignore\n            nativeProps={rest}\n        >\n            {children}\n        </ResponsiveElement>\n    );\n};\n\nexport default HStack;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAkE;AAAA,EACpE,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAqBA,MAAM,MAAA,GAAmD,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAI,aAA0B,KAAK,CAAA;AAC/D,EAAA,MAAM;AAAA,IACF,KAAA,GAAQ,IAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,UAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,WAAA;AAEJ,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACG,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,EAAA,EAAG,KAAA;AAAA,MACH,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU;AAAA,QACN,aAAA,EAAe,WAAW,aAAA,GAAgB,KAAA;AAAA,QAC1C,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA,QACvB,GAAG;AAAA,OACP;AAAA,MAEA,WAAA,EAAa,IAAA;AAAA,MAEZ;AAAA;AAAA,GACL;AAER;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/layout/HStack/index.native.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from \"react\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\nimport type {IStackProps, IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\ntype IsolatedStack = Omit<IStackProps, keyof IStyleClasses>;\n\n/**\n * Maps the `space` prop to a gap value in dp. Mirrors the Tailwind\n * `gap-1 … gap-8` scale used by the old Gluestack-based hstack styles\n * so visual spacing stays identical for every existing caller.\n */\nconst SPACE_TO_GAP: Record<NonNullable<IStackProps[\"space\"]>, number> = {\n    xs: 4,\n    sm: 8,\n    md: 12,\n    lg: 16,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 28,\n    \"4xl\": 32,\n};\n\n/**\n * HStack (native)\n *\n * Lays children out in a horizontal row with a gap derived from `space`.\n *\n * Implementation note: we render through `ResponsiveElement as=\"Box\"`\n * (a plain React Native View) and force `flexDirection` + `gap` via\n * `cssProps`. The previous implementation delegated to a Gluestack\n * component that applied layout through Nativewind `className` strings\n * (\"flex-row gap-1\") — when Nativewind's class interpreter isn't active\n * across the yalc package boundary, those classes were ignored and the\n * underlying View fell back to its RN default `flexDirection: 'column'`\n * (children stacked vertically). Forcing the layout here via native\n * style props removes that runtime-config dependency entirely.\n *\n * If a caller genuinely wants a different direction, their own\n * `flexDirection=` / `gap=` props (harvested by `useSeparator` into\n * `cssProps`) spread AFTER the defaults and win.\n */\nconst HStack: React.FC<PropsWithChildren<IStackProps>> = (props) => {\n    const {cssProps, nativeProps} = useSeparator<IStackProps>(props);\n    const {\n        space = \"md\",\n        reversed = false,\n        scrollable,\n        children,\n        entering,\n        exiting,\n        ...rest\n    } = nativeProps;\n\n    return (\n        <ResponsiveElement<IsolatedStack>\n            ref={props.ref}\n            as=\"Box\"\n            scrollable={scrollable}\n            entering={entering}\n            exiting={exiting}\n            cssProps={{\n                flexDirection: reversed ? \"row-reverse\" : \"row\",\n                gap: SPACE_TO_GAP[space],\n                ...cssProps,\n            }}\n            //@ts-ignore\n            nativeProps={rest}\n        >\n            {children}\n        </ResponsiveElement>\n    );\n};\n\nexport default HStack;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAkE;AAAA,EACpE,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAqBA,MAAM,MAAA,GAAmD,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAI,aAA0B,KAAK,CAAA;AAC/D,EAAA,MAAM;AAAA,IACF,KAAA,GAAQ,IAAA;AAAA,IACR,QAAA,GAAW,KAAA;AAAA,IACX,UAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAI,WAAA;AAEJ,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACG,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,EAAA,EAAG,KAAA;AAAA,MACH,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU;AAAA,QACN,aAAA,EAAe,WAAW,aAAA,GAAgB,KAAA;AAAA,QAC1C,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA,QACvB,GAAG;AAAA,OACP;AAAA,MAEA,WAAA,EAAa,IAAA;AAAA,MAEZ;AAAA;AAAA,GACL;AAER;;;;"}

package/layout/List/index.cjs

@@ -61,6 +61,8 @@ require('yup');
 require('../../packages/types/src/Css/map/index.cjs');
 require('../../packages/types/src/Theme/shadows.cjs');
 require('../../packages/types/src/Theme/defaultTheme.cjs');
+require('../../packages/types/src/Theme/alphaColors.cjs');
+require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 var useSeparator = require('../../apps/mobile/src/Factory/useSeparator.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');
 require('i18next');

package/layout/List/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/layout/List/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst List =\n    ({className, children, ref, ...props}: PropsWithChildren<IFlexComponent>) => {\n\n        const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n        return (\n            <ResponsiveElement ref={ref}\n                               additionalClasses={className}\n                               cssProps={cssProps}\n                               nativeProps={nativeProps}\n                               as={\"List\"}\n                               children={children}/>\n        )\n    }\n\n\nexport default List;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,IAAA,GACF,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAyC;AAEzE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAKA,qBAAkB,KAAK,CAAA;AAExD,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/layout/List/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst List =\n    ({className, children, ref, ...props}: PropsWithChildren<IFlexComponent>) => {\n\n        const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n        return (\n            <ResponsiveElement ref={ref}\n                               additionalClasses={className}\n                               cssProps={cssProps}\n                               nativeProps={nativeProps}\n                               as={\"List\"}\n                               children={children}/>\n        )\n    }\n\n\nexport default List;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":["useSeparator","jsx","ResponsiveElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,IAAA,GACF,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAyC;AAEzE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAKA,qBAAkB,KAAK,CAAA;AAExD,EAAA,uBACIC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}

package/layout/List/index.js

@@ -57,6 +57,8 @@ import 'yup';
 import '../../packages/types/src/Css/map/index.js';
 import '../../packages/types/src/Theme/shadows.js';
 import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../packages/types/src/Theme/alphaColors.js';
+import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import useSeparator from '../../apps/mobile/src/Factory/useSeparator.js';
 import '../../apps/mobile/src/Factory/DimensionsContext.js';
 import 'i18next';

package/layout/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/layout/List/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst List =\n    ({className, children, ref, ...props}: PropsWithChildren<IFlexComponent>) => {\n\n        const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n        return (\n            <ResponsiveElement ref={ref}\n                               additionalClasses={className}\n                               cssProps={cssProps}\n                               nativeProps={nativeProps}\n                               as={\"List\"}\n                               children={children}/>\n        )\n    }\n\n\nexport default List;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,IAAA,GACF,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAyC;AAEzE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAK,aAAkB,KAAK,CAAA;AAExD,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/layout/List/index.tsx"],"sourcesContent":["import React, {type PropsWithChildren} from 'react'\n\n\nimport type {IFlexComponent} from \"@lmb-it/kitsconcerto-types\";\nimport {ResponsiveElement, useSeparator} from \"../../factory\";\n\nconst List =\n    ({className, children, ref, ...props}: PropsWithChildren<IFlexComponent>) => {\n\n        const {cssProps, nativeProps}  = useSeparator<any>(props)\n\n        return (\n            <ResponsiveElement ref={ref}\n                               additionalClasses={className}\n                               cssProps={cssProps}\n                               nativeProps={nativeProps}\n                               as={\"List\"}\n                               children={children}/>\n        )\n    }\n\n\nexport default List;\n// export default React.memo(Flex, (prevProps, nextProps) => {\n    // return shallowEqual(nextProps, prevProps);\n// })\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,IAAA,GACF,CAAC,EAAC,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,OAAK,KAAyC;AAEzE,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAW,GAAK,aAAkB,KAAK,CAAA;AAExD,EAAA,uBACI,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MAAkB,GAAA;AAAA,MACA,iBAAA,EAAmB,SAAA;AAAA,MACnB,QAAA;AAAA,MACA,WAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ;AAAA;AAAA,GAAmB;AAE9C;;;;"}