@lmb-it/kitsconcerto-native 0.1.289 → 0.1.291

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 : undefined}\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 : undefined}\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,7 @@ 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/resolvers.js';
 import '../../../packages/types/src/Theme/alphaColors.js';
 import '../../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';

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 : undefined}\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 : undefined}\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/resolvers.cjs');
 require('../packages/types/src/Theme/alphaColors.cjs');
 
 function expandShadow(value, _resolveToken) {

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/resolvers.js';
 import '../packages/types/src/Theme/alphaColors.js';
 
 function expandShadow(value, _resolveToken) {

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,7 @@ 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/resolvers.cjs');
 require('../packages/types/src/Theme/alphaColors.cjs');
 require('../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('i18next');

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,7 @@ 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/resolvers.js';
 import '../packages/types/src/Theme/alphaColors.js';
 import '../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import 'i18next';

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

@@ -134,6 +134,7 @@ var index_native$1f = require('./packages/types/src/Css/map/index.cjs');
 var index_native$j = require('./packages/types/src/Css/constants/breakpoints/index.cjs');
 var shadows = require('./packages/types/src/Theme/shadows.cjs');
 var defaultTheme = require('./packages/types/src/Theme/defaultTheme.cjs');
+var semanticTokenNames = require('./packages/types/src/Theme/semanticTokenNames.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');
@@ -363,6 +364,7 @@ exports.setActiveNativeShadows = shadows.setActiveNativeShadows;
 exports.shadowNative = shadows.shadowNative;
 exports.shadowWeb = shadows.shadowWeb;
 exports.defaultTheme = defaultTheme.defaultTheme;
+exports.SEMANTIC_TOKEN_NAMES = semanticTokenNames.SEMANTIC_TOKEN_NAMES;
 exports.defaultSeverityTheme = defaultSeverityTheme.defaultSeverityTheme;
 exports.deepMerge = extendTheme.deepMerge;
 exports.extendTheme = extendTheme.extendTheme;

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

@@ -1639,6 +1639,38 @@ declare function expandShadowNative(name: string): Record<string, any>;
 
 declare const defaultTheme: IKitsTheme;
 
+/**
+ * The names of every built-in semantic token, as a plain list.
+ *
+ * ⛔ IT IS ITS OWN MODULE SO THAT KNOWING A NAME DOES NOT COST THE THEME.
+ * The first fix for the drift below derived this set from
+ * `Object.keys(defaultTheme.semanticTokens)` — correct, drift-proof, and it
+ * pulled the whole 55 KB default theme into every primitive that imports
+ * `Box`, because the `Object.keys` call runs at module initialisation and a
+ * bundler cannot drop what is read. `apps/web/src/Factory/css/theme.ts` says
+ * in its first line that it uses a narrow subpath import precisely to avoid
+ * that, and the derivation defeated it. Codex measured the cost.
+ *
+ * So the NAMES live here — a string array, nothing imported — and the theme's
+ * values live where they always did. Both files that need the names take this
+ * one instead.
+ *
+ * ⛔ AND DRIFT IS CAUGHT BY A TEST, NOT BY HOPE. This list and
+ * `defaultTheme.semanticTokens` are two things that must agree, and the last
+ * time two such lists existed they agreed with EACH OTHER for months while
+ * both drifted from the theme — 45 identical names in two files, each
+ * carrying the instruction "KEEP IN SYNC", each missing the same four:
+ * `surface-muted`, `warning-text`, `success-text` and `brand-text`. A token
+ * the theme defines and the resolver rejects falls through as raw CSS,
+ * fails `CSS.supports`, and renders NOTHING — silently, and
+ * indistinguishable from a styling decision. It is why the tab chips could
+ * not be given a theme-aware default.
+ *
+ * `packages/types/tests/theme/aTabChipFollowsTheTheme.test.ts` asserts the
+ * two agree, in both directions, on every run.
+ */
+declare const SEMANTIC_TOKEN_NAMES: readonly string[];
+
 /**
  * Severity colour map — drives `useSeverityColors(severity)`, which is
  * consumed by Badge, Button (severity prop), and any other component
@@ -4903,11 +4935,11 @@ export interface ITabsProps<K extends string = string> extends IStyleClasses {
     activeBadgeBackground?: string;
     /** Badge pill text colour on the active chip (theme token). @default "text-primary" */
     activeBadgeTextColor?: string;
-    /** Badge pill background on inactive chips (theme token). @default "gray.200" */
+    /** Badge pill background on inactive chips (theme token). @default "surface-card" */
     inactiveBadgeBackground?: string;
     /** Badge pill text colour on inactive chips (theme token). @default "text-secondary" */
     inactiveBadgeTextColor?: string;
-    /** Background of inactive chips (theme token). @default "gray.100" */
+    /** Background of inactive chips (theme token). @default "surface-muted" */
     inactiveBackground?: string;
     /** Text colour of inactive chips (theme token). @default "text-secondary" */
     inactiveTextColor?: string;
@@ -15740,5 +15772,5 @@ declare const localeFiles: {
     };
 };
 
-export { ALPHA_COLOR_VARS, ALPHA_STEPS, ALPHA_TOKEN_NAMES, AccentEdge, CustomAccordion as Accordion, ActionCard, Alert, AlertDescription, AlertIcon, AlertTitle, KitsAnimatePresence as AnimatePresence, AnyFile, Avatar, AvatarStack, Badge, Banner, BottomTabBar, Box, BreadCrumb, BreadcrumbProvider, Button, Card, Carousel, Center, ChatBubble, Chip, CircularProgress, Collapse, CommandPalette, Container, CustomPopover, DEFAULT_NATIVE_SHADOWS, DataView, DataViewContext, DateSeparator, Delta, DetailList as DetailsList, Divider, Donut, DotGrid, EDateFormat, EKeyFilter, Editable, EmptyState, FIELD_LABEL_MARGIN, FIELD_MARGIN, Flex, Form, FormSelect, GUTTER, Gallery, Gauge, Form as GoForm, Datatable as GoTable, KitsGrid as Grid, KitsGridItem as GridItem, GroupedBars, HELPER_TEXT_MARGIN, HStack, Heading, Icon, IconMap, Image, ImageCropper, KitsInputSwitch as InputSwitch, KeyboardNavContext, KitsAutoComplete, KitsBarChart, KitsCascadeSelect, KitsCheckbox as KitsCheckboxes, KitsConfirm, KitsConfirmPopup, KitsContainer, KitsInputCalendar as KitsDatepicker, KitsDialogControlled as KitsDialog, KitsDropdown, FilePicker as KitsFilePicker, KitsInputColorPicker, KitsInputLocation, KitsInputMask, KitsInputNumber, KitsInputPassword, KitsInputText, KitsInputTextarea, KitsLineChart, KitsListBox, KitsMultiSelect, KitsPhoneComponent, KitsRadar, KitsRadio as KitsRadios, RadiusPicker as KitsRadiusPicker, KitsSliders, KitsThemeProvider, KitsToast, KitsTreeSelect, Label, Legend, Link, List, ListItem, Loader, LocaleContext, LocaleContextProvider, MainContext, MainContextProvider, MapTile, MessageComposer, MessageReceipt, MetricCard, KitsMultiSelect as MultiSelect, PermissionsProvider, PersonCard, ProgressBar, RadiusPicker, RankedList, ReducedMotionProvider, Rise, SHADOW_PRESET_KEYS, SPACER, KitsScrollView as ScrollView, SegmentedControl, FormSelect as Select, SelectButton, Skeleton$1 as Skeleton, SkeletonRows, Skeleton as SkeletonText, Sparkline, StackedBars, StatCard, StatGroup, StatePill, StatusCard, Stepper, Striped, Svg, TableContext, Tabs, Text, ThemeContextProvider, Timeline, Tip, Tooltip, Translate, KitsTreeSelect as TreeSelect, TreeView, TriStateCheckbox, TypingIndicator, VStack, Wash, WidgetPanel, borderProperties, breakpoints, capitalizeFirstLetter, checkExtAgainstAccepted, checkNameDuplication, colorWithAlpha, dateTimeFormat, deepMerge, defaultSeverityTheme, defaultTheme, downloadCanvas, dynamicList, expandShadowNative, extendTheme, fileTypeIcon, fileValidation, filesExt, filesMemes, filesTypes, flattenSlotStyles, fontSizeMapping, formFileValidation, formatNumber, getActiveNativeShadows, getCombinedChildIds, getCustomDateTime, getDateElements, getDefaultValues, getMeme, getParams, getPropertyByPath, getType, getTypes, getURLParams, hasCropEncoder, imagesExt, imagesMemes, imagesTypes, isAlphaToken, isNumber, isSemanticToken, isShadowPreset, isThemeToken, isToday, isValidURL, kitsMotion, listingProperties, localeFiles, allProperties as mapCssProperties, mergeRefs, nonPxProperties, propertiesWithoutCssEquivalent, pxProperties, resolveStyleRecord, resolveTokenValue, schemaBuilder, setActiveNativeShadows, setCropEncoder, shadowNative, shadowWeb, sizeMapping, sizingProperties, timeAgo, timeSince, toMemes, useAllSeverityColors, useBreadcrumb, useBreadcrumbTrail, useComponentDefaults, useCountUp, useDataView, useDialog, useDisclosure, useEnter, useFieldLogic, useFocusStyles, useFormFieldKeyboardNav, useFormManager, useKeyboardNav, useKeyboardNavProvider, useKitsColorScheme, useKitsConcerto, useKitsTheme, useLanguage, useMeasuredWidth, useNativeColorMap, usePermissions, usePopup, useReducedMotion, useResolvedElementStyles, useResolvedStyle, useRtlLineHeight, useScrollState, useSelectionController, useSeverityColors, useTable, useTheme, useThemedFont, useToast };
+export { ALPHA_COLOR_VARS, ALPHA_STEPS, ALPHA_TOKEN_NAMES, AccentEdge, CustomAccordion as Accordion, ActionCard, Alert, AlertDescription, AlertIcon, AlertTitle, KitsAnimatePresence as AnimatePresence, AnyFile, Avatar, AvatarStack, Badge, Banner, BottomTabBar, Box, BreadCrumb, BreadcrumbProvider, Button, Card, Carousel, Center, ChatBubble, Chip, CircularProgress, Collapse, CommandPalette, Container, CustomPopover, DEFAULT_NATIVE_SHADOWS, DataView, DataViewContext, DateSeparator, Delta, DetailList as DetailsList, Divider, Donut, DotGrid, EDateFormat, EKeyFilter, Editable, EmptyState, FIELD_LABEL_MARGIN, FIELD_MARGIN, Flex, Form, FormSelect, GUTTER, Gallery, Gauge, Form as GoForm, Datatable as GoTable, KitsGrid as Grid, KitsGridItem as GridItem, GroupedBars, HELPER_TEXT_MARGIN, HStack, Heading, Icon, IconMap, Image, ImageCropper, KitsInputSwitch as InputSwitch, KeyboardNavContext, KitsAutoComplete, KitsBarChart, KitsCascadeSelect, KitsCheckbox as KitsCheckboxes, KitsConfirm, KitsConfirmPopup, KitsContainer, KitsInputCalendar as KitsDatepicker, KitsDialogControlled as KitsDialog, KitsDropdown, FilePicker as KitsFilePicker, KitsInputColorPicker, KitsInputLocation, KitsInputMask, KitsInputNumber, KitsInputPassword, KitsInputText, KitsInputTextarea, KitsLineChart, KitsListBox, KitsMultiSelect, KitsPhoneComponent, KitsRadar, KitsRadio as KitsRadios, RadiusPicker as KitsRadiusPicker, KitsSliders, KitsThemeProvider, KitsToast, KitsTreeSelect, Label, Legend, Link, List, ListItem, Loader, LocaleContext, LocaleContextProvider, MainContext, MainContextProvider, MapTile, MessageComposer, MessageReceipt, MetricCard, KitsMultiSelect as MultiSelect, PermissionsProvider, PersonCard, ProgressBar, RadiusPicker, RankedList, ReducedMotionProvider, Rise, SEMANTIC_TOKEN_NAMES, SHADOW_PRESET_KEYS, SPACER, KitsScrollView as ScrollView, SegmentedControl, FormSelect as Select, SelectButton, Skeleton$1 as Skeleton, SkeletonRows, Skeleton as SkeletonText, Sparkline, StackedBars, StatCard, StatGroup, StatePill, StatusCard, Stepper, Striped, Svg, TableContext, Tabs, Text, ThemeContextProvider, Timeline, Tip, Tooltip, Translate, KitsTreeSelect as TreeSelect, TreeView, TriStateCheckbox, TypingIndicator, VStack, Wash, WidgetPanel, borderProperties, breakpoints, capitalizeFirstLetter, checkExtAgainstAccepted, checkNameDuplication, colorWithAlpha, dateTimeFormat, deepMerge, defaultSeverityTheme, defaultTheme, downloadCanvas, dynamicList, expandShadowNative, extendTheme, fileTypeIcon, fileValidation, filesExt, filesMemes, filesTypes, flattenSlotStyles, fontSizeMapping, formFileValidation, formatNumber, getActiveNativeShadows, getCombinedChildIds, getCustomDateTime, getDateElements, getDefaultValues, getMeme, getParams, getPropertyByPath, getType, getTypes, getURLParams, hasCropEncoder, imagesExt, imagesMemes, imagesTypes, isAlphaToken, isNumber, isSemanticToken, isShadowPreset, isThemeToken, isToday, isValidURL, kitsMotion, listingProperties, localeFiles, allProperties as mapCssProperties, mergeRefs, nonPxProperties, propertiesWithoutCssEquivalent, pxProperties, resolveStyleRecord, resolveTokenValue, schemaBuilder, setActiveNativeShadows, setCropEncoder, shadowNative, shadowWeb, sizeMapping, sizingProperties, timeAgo, timeSince, toMemes, useAllSeverityColors, useBreadcrumb, useBreadcrumbTrail, useComponentDefaults, useCountUp, useDataView, useDialog, useDisclosure, useEnter, useFieldLogic, useFocusStyles, useFormFieldKeyboardNav, useFormManager, useKeyboardNav, useKeyboardNavProvider, useKitsColorScheme, useKitsConcerto, useKitsTheme, useLanguage, useMeasuredWidth, useNativeColorMap, usePermissions, usePopup, useReducedMotion, 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, CropAspect, CropErrorReason, CropHandle, CropMaskShape, CropOutputFormat, CropRotation, 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, IAccentEdgeProps, IAccordionElementSlots, IAccordionProps, IActionCardProps, IAddressComponentValue, IAddressExperianFormat, IAddressFormat, IAddressFormatResults, IAddressSearchResults, IAlertComponent, IAlertProps, IAlignment, IAnimation, IAutoCompleteCore, IAutoCompleteElement, IAvatarElementSlots, IAvatarProps, IAvatarStackElementSlots, IAvatarStackProps, IBadgeProps, IBannerProps, IBarChartProps, IBaseValidation, IBasicSectionProps, IBg, IBodyTemplate, IBodyTemplateIcon, IBorder, IBottomTabBarElementSlots, IBottomTabBarProps, IBoxComponent, IBreadcrumbCrumb, IBreadcrumbProps, 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, IChipInputSlots, IChipProps, ICircularProgressProps, ICollapseProps, IColorPicker, IColumn, IColumnBase, ICombined, ICommandPaletteGroup, ICommandPaletteItem, ICommandPaletteProps, IComponentThemeConfig, IConditionGroupProps, IConditionRowProps, IConditionRule, IConditionsSectionProps, IConfirmDialogProps, IConfirmPopupProps, IContainer, IContainerCardProps, IContainerProps, IContextValues, ICountrySearchResults, ICropEncoder, ICropError, ICropFrame, ICropOutput, ICropPoint, ICropRect, ICropResizeOptions, ICropResult, ICropSize, ICropTransform, 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, IDeltaProps, IDetailItem, IDetailListProps, IDialogButton, IDialogProps, IDialogRef, IDialogState, IDisplay, IDividerComponent, IDonutProps, IDonutSegment, IDotGridProps, 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, IGaugeProps, IGrid, IGridCellStyle, IGridComponent, IGridItem, IGridItemComponent, IGroup, IGroupCardProps, IGroupElementSlots, IGroupSettings, IGroupedBarsDatum, IGroupedBarsProps, IHeaderElementSlots, IHeadingComponent, IIconProps, IImageComponent, IImageCropperHandle, IImageCropperProps, IImageCropperSlots, IImagesExtTypeKeys, IInteractivity, IKeyedColumn, IKitsAnimation, IKitsBarChartDatum, IKitsBarChartProps, IKitsCheckboxProps, IKitsComponentDefaults, IKitsContainer, IKitsDialogControlled, IKitsInputCalendar, IKitsInputColorPicker, IKitsInputLocation, IKitsInputMask, IKitsInputNumber, IKitsInputPassword, IKitsInputRating, IKitsInputSwitch, IKitsInputText, IKitsInputTextarea, IKitsLineChartProps, IKitsLineChartSeries, IKitsPhoneInput, IKitsRadioProps, IKitsTheme, IKitsThemeColors, IKitsThemeConfig, IKitsThemeContextValues, IKitsThemeFontSizes, IKitsThemeFontWeights, IKitsThemeFonts, IKitsThemeLineHeights, IKitsThemeRadii, IKitsThemeShadows, IKitsThemeSpacing, IKitsToastRef, ILabelElement, ILabelProps, ILanguage, ILayout, ILegendItem, ILegendProps, ILineChartProps, ILinkComponent, ILinkOverrides, IList, IListBoxCore, IListBoxElement, IListBoxSelect, IListItem, IListing, ILoaderProps, ILoadingIndicatorContext, ILocaleContextProps, ILocaleContextValues, ILocation, ILocationDetailsResponse, ILocationResponse, IMainContextProps, IMainContextValues, IMapTilePoint, IMapTileProps, IMemes, IMenuItem, IMessageComposerElementSlots, IMessageComposerProps, IMessageReceiptElementSlots, IMessageReceiptProps, IMessages, IMetricCardProps, IMinusButton, IModalComponent, IModalFormProps, IMultiSelect, IMultiSelectCore, IMultiSelectSlots, IMultiselect, IMultiselectFilter, INativeShadow, INonCrossPlatformTypes, INumberFilter, INumberInput, INumberProps, INumberValidation, IObjectGroup, IOneOfTypes, IOptionItem, IOptionsEditorProps, IOptionsSource, IPageISection, IPaginationRequest, IPaginationResponse, IPaginatorLabels, IPaletteItemProps, IPaletteProps, IPanelCustomSlot, IPassword, IPasswordProps, IPersonCardProps, IPhone, IPhoneFilter, IPhoneObjectValue, IPhoneValidationResults, IPhoneValue, IPieChartProps, IPlusButton, IPolarAreaChartProps, IPopoverProps, IProgressBarElementSlots, IProgressBarProps, IPropertiesPanelProps, IRTLDetection, IRadarChartProps, IRadarProps, IRadarSeries, IRadioCheckboxListItem, IRadioGroup, IRadioSlots, IRadiusPickerEvents, IRadiusPickerField, IRadiusPickerI18n, IRadiusPickerProps, IRangeFilter, IRankedListProps, IRankedListRow, IRef, IRepeatableSettings, IResponsiveElement, IRiseProps, ISVGComponent, IScrollViewComponent, ISegmentedControlOption, ISegmentedControlProps, ISelect, ISelectBase, ISelectCore, ISelectElement, ISelectSlots, ISelectType, ISelectedFile, ISelectedFileType, ISelectionValidation, ISeverityColorSlots, ISeverityThemeMap, IShadowDefinition, IShadowValue, ISidebarElementSlots, ISizing, ISkeleton, ISkeletonRowsProps, ISkeletonText, ISliderProps, ISpacing, ISparklineProps, IStackProps, IStackedBarsDatum, IStackedBarsProps, IStatCardElementSlots, IStatCardProps, IStatGroupElementSlots, IStatGroupProps, IStatePillProps, IStatisticsProps, IStats, IStatusCardProps, IStepperElementSlots, IStepperProps, IStripedProps, IStyleClasses, ISwitch, ISwitchSlots, ITabBarItem, ITabItem, ITableElementSlots, ITableFlatConfig, ITabsElementSlots, ITabsProps, ITags, IText, ITextComponent, ITextFieldProps, ITextFilter, ITextInput, ITextInputProps, ITextInputSlots, ITextValidation, ITextarea, IThemeContextProps, IThemeContextValues, ITimelineElementSlots, ITimelineItem, ITimelineProps, ITipProps, IToastAction, IToastFunction, IToastOptions, IToastParams, IToolbarProps, ITransforms, ITransition, ITranslatableInputProps, ITranslatableText, ITranslateComponent, ITreeItem, ITreeSelect, ITreeSelectCore, ITreeSelectElement, ITreeSelectNode, ITreeViewProps, ITriStateFilter, ITypingIndicatorElementSlots, ITypingIndicatorProps, IUnkeyedColumn, IUseCountUpOptions, IUseFormReturn, IUserAvatar, IValidationSectionProps, IWashProps, IWidgetBarIncomingProp, IWidgetChartContextProps, IWidgetChartProp, IWidgetData, IWidgetDoughnutIncomingProp, IWidgetLineIncomingProp, IWidgetPanelProps, IWidgetPieIncomingProp, IWidgetPolarAreaIncomingProp, IWidgetRadarIncomingProp, IconName, IconType, InputTextFieldProps, KitsBreakpoint, KitsConditionalObject, KitsDevice, KitsMotion, 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, TExternalFilterLabelMode, TFiltersLayout, TIsoFormat, TItemsPerRow, TKeyFilter, TLocationProvider, TPaginatorAlign, 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

@@ -132,6 +132,7 @@ export { borderProperties, listingProperties, default as mapCssProperties, nonPx
 export { FIELD_LABEL_MARGIN, FIELD_MARGIN, GUTTER, HELPER_TEXT_MARGIN, SPACER, breakpoints } from './packages/types/src/Css/constants/breakpoints/index.js';
 export { DEFAULT_NATIVE_SHADOWS, SHADOW_PRESET_KEYS, expandShadowNative, getActiveNativeShadows, isShadowPreset, setActiveNativeShadows, shadowNative, shadowWeb } from './packages/types/src/Theme/shadows.js';
 export { defaultTheme } from './packages/types/src/Theme/defaultTheme.js';
+export { SEMANTIC_TOKEN_NAMES } from './packages/types/src/Theme/semanticTokenNames.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';

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,7 @@ 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/resolvers.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');

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,7 @@ 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/resolvers.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';

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,7 @@ 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/resolvers.cjs');
 require('../../packages/types/src/Theme/alphaColors.cjs');
 require('../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
 require('../../apps/mobile/src/Factory/DimensionsContext.cjs');

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,7 @@ 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/resolvers.js';
 import '../../packages/types/src/Theme/alphaColors.js';
 import '../../apps/mobile/src/Factory/helpers/cssVarMap.js';
 import '../../apps/mobile/src/Factory/DimensionsContext.js';

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,7 @@ 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/resolvers.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');

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,7 @@ 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/resolvers.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';

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,7 @@ 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/resolvers.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');

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,7 @@ 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/resolvers.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';

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,7 @@ 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/resolvers.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');

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,7 @@ 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/resolvers.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';