@itcase/ui-core 1.10.84 → 1.10.86

package/dist/cjs/context/index.js

@@ -1,11 +1,26 @@
 'use strict';
 
+var Notifications = require('./Notifications/Notifications.js');
+var UIProvider = require('./UIProvider/UIProvider.js');
+var UrlAssetPrefix = require('./UrlAssetPrefix/UrlAssetPrefix.js');
 var UserDeviceContext = require('./UserDeviceContext/UserDeviceContext.js');
-var UIProviderApp = require('./UIProviderApp/UIProviderApp.js');
-require('react');
 require('react/jsx-runtime');
+require('react');
+require('uuid');
+require('@itcase/common');
+require('lodash-es/camelCase');
+require('../hooks/useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../utils/setViewportProperty.js');
+require('./UserDeviceContext/UserDeviceContext.helpers.js');
 
 
 
+exports.NotificationsProvider = Notifications.NotificationsProvider;
+exports.statusToAppearanceList = Notifications.statusToAppearanceList;
+exports.useNotifications = Notifications.useNotifications;
+exports.useNotificationsAPI = Notifications.useNotificationsAPI;
+exports.UIProvider = UIProvider.UIProvider;
+exports.UrlAssetPrefixContext = UrlAssetPrefix.UrlAssetPrefixContext;
+exports.UrlAssetPrefixProvider = UrlAssetPrefix.UrlAssetPrefixProvider;
 exports.useUserDeviceContext = UserDeviceContext.useUserDeviceContext;
-exports.UIProviderApp = UIProviderApp.UIProviderApp;

package/dist/cjs/hooks/index.js

@@ -1,18 +1,31 @@
 'use strict';
 
+var useActiveClasses = require('./useActiveClasses/useActiveClasses.js');
 var useAppearanceConfig = require('./useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useDeviceTargetClass = require('./useDeviceTargetClass/useDeviceTargetClass.js');
+var useMediaQueries = require('./useMediaQueries/useMediaQueries.js');
+var styleAttributes = require('./useStyles/styleAttributes.js');
+var styleAttributes_helpers = require('./useStyles/styleAttributes.helpers.js');
+var useStyles = require('./useStyles/useStyles.js');
+require('clsx');
+require('./useActiveClasses/useActiveClasses.helpers.js');
 require('react');
 require('lodash-es/camelCase');
 require('lodash-es/castArray');
 require('lodash-es/upperFirst');
 require('../context/UserDeviceContext/UserDeviceContext.js');
-require('./useStyles/styleAttributes.js');
-require('./useStyles/styleAttributes.helpers.js');
 require('lodash-es/kebabCase');
 require('lodash-es/maxBy');
+require('react-responsive');
 
 
 
+exports.useActiveClasses = useActiveClasses.useActiveClasses;
 exports.useAppearanceConfig = useAppearanceConfig.useAppearanceConfig;
 exports.useDevicePropsGenerator = useDevicePropsGenerator.useDevicePropsGenerator;
+exports.useDeviceTargetClass = useDeviceTargetClass.useDeviceTargetClass;
+exports.useMediaQueries = useMediaQueries.useMediaQueries;
+exports.styleAttributes = styleAttributes.styleAttributes;
+exports.getStyleAttributeKey = styleAttributes_helpers.getStyleAttributeKey;
+exports.useStyles = useStyles.useStyles;

package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -20,7 +20,8 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
         }
         if (isDisabled) {
             return (componentConfig?.appearance?.disabled ||
-                componentConfig?.appearance?.disabledPrimary);
+                componentConfig?.appearance?.disabledPrimary ||
+                {});
         }
         return {};
     }, [appearance, componentConfig?.appearance, isDisabled]);

package/dist/cjs/storybook/createAppearanceOptions/createAppearanceOptions.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const createAppearanceOptions = (appearanceMap, appearanceSourceMap) => {
+    const excludedAppearanceKeys = new Set(Object.values(appearanceSourceMap).flatMap((appearanceGroupSource) => Object.keys(appearanceGroupSource)));
+    const optionsMap = {
+        appearance: Object.keys(appearanceMap).filter((key) => !excludedAppearanceKeys.has(key)),
+        ...Object.fromEntries(Object.entries(appearanceSourceMap).map(([variantName, appearanceGroupSource]) => [
+            variantName,
+            Object.keys(appearanceGroupSource),
+        ])),
+    };
+    const getAppearanceOptions = (optionName) => optionsMap[optionName];
+    return { getAppearanceOptions };
+};
+
+exports.createAppearanceOptions = createAppearanceOptions;

package/dist/cjs/storybook/createAppearanceOptions/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var createAppearanceOptions = require('./createAppearanceOptions.js');
+
+
+
+exports.createAppearanceOptions = createAppearanceOptions.createAppearanceOptions;

package/dist/cjs/storybook/createComponentGallery/createComponentGallery.js

@@ -0,0 +1,132 @@
+'use strict';
+
+const DEFAULT_TIER_ORDER = [
+    'Primary',
+    'Secondary',
+    'Tertiary',
+    'Quaternary',
+    'MutedPrimary',
+    'MutedSecondary',
+    'MutedTertiary',
+    'MutedQuaternary',
+];
+const sortByOrder = (keys, order) => [...keys].sort((left, right) => {
+    const leftIndex = order.indexOf(left);
+    const rightIndex = order.indexOf(right);
+    if (leftIndex === -1 && rightIndex === -1) {
+        return left.localeCompare(right);
+    }
+    if (leftIndex === -1) {
+        return 1;
+    }
+    if (rightIndex === -1) {
+        return -1;
+    }
+    return leftIndex - rightIndex;
+});
+const matchAppearanceGroup = (appearance, appearanceList) => {
+    if (appearanceList.includes(appearance)) {
+        return appearance;
+    }
+    const matchedGroup = [...appearanceList]
+        .sort((left, right) => right.length - left.length)
+        .find((group) => appearance === group ||
+        appearance.startsWith(`${group} `) ||
+        appearance.startsWith(group));
+    return matchedGroup ?? appearance.split(' ')[0] ?? appearance;
+};
+const resolveTierForAppearance = (tier, tiersForAppearance) => {
+    if (tiersForAppearance.includes(tier)) {
+        return tier;
+    }
+    return tiersForAppearance[0] ?? tier;
+};
+const createComponentGallery = ({ size, src, appearanceGroups, appearanceOrder, shape, sizeOrder, style, tierOrder = DEFAULT_TIER_ORDER, }) => {
+    const appearanceList = appearanceOrder
+        ? sortByOrder(Object.keys(appearanceGroups), appearanceOrder)
+        : Object.keys(appearanceGroups);
+    const tiersByAppearance = Object.fromEntries(Object.entries(appearanceGroups).map(([appearance, group]) => [
+        appearance,
+        sortByOrder(Object.keys(group).map((key) => key.slice(appearance.length)), tierOrder),
+    ]));
+    const appearanceTierOptions = sortByOrder([...new Set(Object.values(tiersByAppearance).flat())], tierOrder);
+    const resolveAppearanceKey = (appearanceGroup, tier) => `${appearanceGroup}${tier}`;
+    const normalizeAppearanceGroup = (appearance) => matchAppearanceGroup(appearance, appearanceList);
+    const resolveTier = (appearance, tier) => {
+        const appearanceGroup = normalizeAppearanceGroup(appearance);
+        const tiersForAppearance = tiersByAppearance[appearanceGroup] ?? [];
+        return resolveTierForAppearance(tier, tiersForAppearance);
+    };
+    const sizeKeys = sortByOrder(Object.keys(size), sizeOrder ?? Object.keys(size));
+    const styleOptions = Object.keys(style);
+    const shapeOptions = Object.keys(shape);
+    const appearanceTypeOptions = appearanceList.flatMap((appearanceGroup) => (tiersByAppearance[appearanceGroup] ?? []).map((tierName) => resolveAppearanceKey(appearanceGroup, tierName)));
+    const argTypes = {
+        appearance: {
+            name: 'Appearance',
+            control: 'select',
+            options: appearanceList,
+        },
+        shape: {
+            name: 'Shape',
+            control: 'radio',
+            options: shapeOptions,
+        },
+        style: {
+            name: 'Style',
+            control: 'radio',
+            options: styleOptions,
+        },
+        tier: {
+            name: 'Tier',
+            control: 'select',
+            options: appearanceTierOptions,
+        },
+        ...(src && {
+            src: {
+                control: 'select',
+                options: [...src],
+            },
+        }),
+    };
+    const resolved = {
+        normalizeAppearanceGroup,
+        resolveAppearanceKey,
+        resolveTier,
+        sizeKeys,
+        tiersByAppearance,
+    };
+    const itemsCount = appearanceList.reduce((count, appearanceGroup) => count +
+        (tiersByAppearance[appearanceGroup]?.length ?? 0) * sizeKeys.length, 0);
+    const getAppearanceOptions = (optionName) => {
+        switch (optionName) {
+            case 'appearanceType':
+                return appearanceTypeOptions;
+            case 'appearanceShape':
+                return shapeOptions;
+            case 'appearanceSize':
+                return sizeKeys;
+            case 'appearanceStyle':
+                return styleOptions;
+            default: {
+                const exhaustiveCheck = optionName;
+                return exhaustiveCheck;
+            }
+        }
+    };
+    return {
+        appearanceList,
+        appearanceTierOptions,
+        appearanceTypeOptions,
+        argTypes,
+        itemsCount,
+        resolved,
+        shapeOptions,
+        sizeKeys,
+        styleOptions,
+        tiersByAppearance,
+        getAppearanceOptions,
+    };
+};
+
+exports.createComponentGallery = createComponentGallery;

package/dist/cjs/storybook/createComponentGallery/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var createComponentGallery = require('./createComponentGallery.js');
+
+
+
+exports.createComponentGallery = createComponentGallery.createComponentGallery;

package/dist/cjs/storybook/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var createAppearanceOptions = require('./createAppearanceOptions/createAppearanceOptions.js');
+var createComponentGallery = require('./createComponentGallery/createComponentGallery.js');
+
+
+
+exports.createAppearanceOptions = createAppearanceOptions.createAppearanceOptions;
+exports.createComponentGallery = createComponentGallery.createComponentGallery;

package/dist/context/index.js

@@ -1,4 +1,13 @@
+export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI } from './Notifications/Notifications.js';
+export { UIProvider } from './UIProvider/UIProvider.js';
+export { UrlAssetPrefixContext, UrlAssetPrefixProvider } from './UrlAssetPrefix/UrlAssetPrefix.js';
 export { useUserDeviceContext } from './UserDeviceContext/UserDeviceContext.js';
-export { UIProviderApp } from './UIProviderApp/UIProviderApp.js';
-import 'react';
 import 'react/jsx-runtime';
+import 'react';
+import 'uuid';
+import '@itcase/common';
+import 'lodash-es/camelCase';
+import '../hooks/useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../utils/setViewportProperty.js';
+import './UserDeviceContext/UserDeviceContext.helpers.js';

package/dist/hooks/index.js

@@ -1,11 +1,18 @@
+export { useActiveClasses } from './useActiveClasses/useActiveClasses.js';
 export { useAppearanceConfig } from './useAppearanceConfig/useAppearanceConfig.js';
 export { useDevicePropsGenerator } from './useDevicePropsGenerator/useDevicePropsGenerator.js';
+export { useDeviceTargetClass } from './useDeviceTargetClass/useDeviceTargetClass.js';
+export { useMediaQueries } from './useMediaQueries/useMediaQueries.js';
+export { styleAttributes } from './useStyles/styleAttributes.js';
+export { getStyleAttributeKey } from './useStyles/styleAttributes.helpers.js';
+export { useStyles } from './useStyles/useStyles.js';
+import 'clsx';
+import './useActiveClasses/useActiveClasses.helpers.js';
 import 'react';
 import 'lodash-es/camelCase';
 import 'lodash-es/castArray';
 import 'lodash-es/upperFirst';
 import '../context/UserDeviceContext/UserDeviceContext.js';
-import './useStyles/styleAttributes.js';
-import './useStyles/styleAttributes.helpers.js';
 import 'lodash-es/kebabCase';
 import 'lodash-es/maxBy';
+import 'react-responsive';

package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -18,7 +18,8 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
         }
         if (isDisabled) {
             return (componentConfig?.appearance?.disabled ||
-                componentConfig?.appearance?.disabledPrimary);
+                componentConfig?.appearance?.disabledPrimary ||
+                {});
         }
         return {};
     }, [appearance, componentConfig?.appearance, isDisabled]);

package/dist/storybook/createAppearanceOptions/createAppearanceOptions.js

@@ -0,0 +1,14 @@
+const createAppearanceOptions = (appearanceMap, appearanceSourceMap) => {
+    const excludedAppearanceKeys = new Set(Object.values(appearanceSourceMap).flatMap((appearanceGroupSource) => Object.keys(appearanceGroupSource)));
+    const optionsMap = {
+        appearance: Object.keys(appearanceMap).filter((key) => !excludedAppearanceKeys.has(key)),
+        ...Object.fromEntries(Object.entries(appearanceSourceMap).map(([variantName, appearanceGroupSource]) => [
+            variantName,
+            Object.keys(appearanceGroupSource),
+        ])),
+    };
+    const getAppearanceOptions = (optionName) => optionsMap[optionName];
+    return { getAppearanceOptions };
+};
+
+export { createAppearanceOptions };

package/dist/storybook/createAppearanceOptions/index.js

@@ -0,0 +1 @@
+export { createAppearanceOptions } from './createAppearanceOptions.js';

package/dist/storybook/createComponentGallery/createComponentGallery.js

@@ -0,0 +1,130 @@
+const DEFAULT_TIER_ORDER = [
+    'Primary',
+    'Secondary',
+    'Tertiary',
+    'Quaternary',
+    'MutedPrimary',
+    'MutedSecondary',
+    'MutedTertiary',
+    'MutedQuaternary',
+];
+const sortByOrder = (keys, order) => [...keys].sort((left, right) => {
+    const leftIndex = order.indexOf(left);
+    const rightIndex = order.indexOf(right);
+    if (leftIndex === -1 && rightIndex === -1) {
+        return left.localeCompare(right);
+    }
+    if (leftIndex === -1) {
+        return 1;
+    }
+    if (rightIndex === -1) {
+        return -1;
+    }
+    return leftIndex - rightIndex;
+});
+const matchAppearanceGroup = (appearance, appearanceList) => {
+    if (appearanceList.includes(appearance)) {
+        return appearance;
+    }
+    const matchedGroup = [...appearanceList]
+        .sort((left, right) => right.length - left.length)
+        .find((group) => appearance === group ||
+        appearance.startsWith(`${group} `) ||
+        appearance.startsWith(group));
+    return matchedGroup ?? appearance.split(' ')[0] ?? appearance;
+};
+const resolveTierForAppearance = (tier, tiersForAppearance) => {
+    if (tiersForAppearance.includes(tier)) {
+        return tier;
+    }
+    return tiersForAppearance[0] ?? tier;
+};
+const createComponentGallery = ({ size, src, appearanceGroups, appearanceOrder, shape, sizeOrder, style, tierOrder = DEFAULT_TIER_ORDER, }) => {
+    const appearanceList = appearanceOrder
+        ? sortByOrder(Object.keys(appearanceGroups), appearanceOrder)
+        : Object.keys(appearanceGroups);
+    const tiersByAppearance = Object.fromEntries(Object.entries(appearanceGroups).map(([appearance, group]) => [
+        appearance,
+        sortByOrder(Object.keys(group).map((key) => key.slice(appearance.length)), tierOrder),
+    ]));
+    const appearanceTierOptions = sortByOrder([...new Set(Object.values(tiersByAppearance).flat())], tierOrder);
+    const resolveAppearanceKey = (appearanceGroup, tier) => `${appearanceGroup}${tier}`;
+    const normalizeAppearanceGroup = (appearance) => matchAppearanceGroup(appearance, appearanceList);
+    const resolveTier = (appearance, tier) => {
+        const appearanceGroup = normalizeAppearanceGroup(appearance);
+        const tiersForAppearance = tiersByAppearance[appearanceGroup] ?? [];
+        return resolveTierForAppearance(tier, tiersForAppearance);
+    };
+    const sizeKeys = sortByOrder(Object.keys(size), sizeOrder ?? Object.keys(size));
+    const styleOptions = Object.keys(style);
+    const shapeOptions = Object.keys(shape);
+    const appearanceTypeOptions = appearanceList.flatMap((appearanceGroup) => (tiersByAppearance[appearanceGroup] ?? []).map((tierName) => resolveAppearanceKey(appearanceGroup, tierName)));
+    const argTypes = {
+        appearance: {
+            name: 'Appearance',
+            control: 'select',
+            options: appearanceList,
+        },
+        shape: {
+            name: 'Shape',
+            control: 'radio',
+            options: shapeOptions,
+        },
+        style: {
+            name: 'Style',
+            control: 'radio',
+            options: styleOptions,
+        },
+        tier: {
+            name: 'Tier',
+            control: 'select',
+            options: appearanceTierOptions,
+        },
+        ...(src && {
+            src: {
+                control: 'select',
+                options: [...src],
+            },
+        }),
+    };
+    const resolved = {
+        normalizeAppearanceGroup,
+        resolveAppearanceKey,
+        resolveTier,
+        sizeKeys,
+        tiersByAppearance,
+    };
+    const itemsCount = appearanceList.reduce((count, appearanceGroup) => count +
+        (tiersByAppearance[appearanceGroup]?.length ?? 0) * sizeKeys.length, 0);
+    const getAppearanceOptions = (optionName) => {
+        switch (optionName) {
+            case 'appearanceType':
+                return appearanceTypeOptions;
+            case 'appearanceShape':
+                return shapeOptions;
+            case 'appearanceSize':
+                return sizeKeys;
+            case 'appearanceStyle':
+                return styleOptions;
+            default: {
+                const exhaustiveCheck = optionName;
+                return exhaustiveCheck;
+            }
+        }
+    };
+    return {
+        appearanceList,
+        appearanceTierOptions,
+        appearanceTypeOptions,
+        argTypes,
+        itemsCount,
+        resolved,
+        shapeOptions,
+        sizeKeys,
+        styleOptions,
+        tiersByAppearance,
+        getAppearanceOptions,
+    };
+};
+
+export { createComponentGallery };

package/dist/storybook/createComponentGallery/index.js

@@ -0,0 +1 @@
+export { createComponentGallery } from './createComponentGallery.js';

package/dist/storybook/index.js

@@ -0,0 +1,2 @@
+export { createAppearanceOptions } from './createAppearanceOptions/createAppearanceOptions.js';
+export { createComponentGallery } from './createComponentGallery/createComponentGallery.js';

package/dist/types/hooks/index.d.ts

@@ -2,5 +2,6 @@ export type { DeviceBreakpoint, WithDeviceProps, WithDeviceVariants, } from '../
 export * from './useActiveClasses';
 export * from './useAppearanceConfig';
 export * from './useDevicePropsGenerator';
+export * from './useDeviceTargetClass';
 export * from './useMediaQueries';
 export * from './useStyles';

package/dist/types/hooks/useAppearanceConfig/useAppearanceConfig.d.ts

@@ -1,5 +1,5 @@
 import { AppearanceConfig } from '../useDevicePropsGenerator';
-declare const useAppearanceConfig: <Keys extends string, Config extends Record<'disabled' | 'disabledPrimary' | Keys, AppearanceConfig>>(appearance: string | undefined, componentConfig: {
-    appearance?: Partial<Config>;
+declare const useAppearanceConfig: (appearance: string | undefined, componentConfig: {
+    appearance?: Record<string, object | undefined>;
 }, isDisabled?: boolean) => AppearanceConfig;
 export { useAppearanceConfig };

package/dist/types/storybook/createAppearanceOptions/createAppearanceOptions.d.ts

@@ -0,0 +1,5 @@
+import type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap } from './createAppearanceOptions.interface';
+declare const createAppearanceOptions: <Options extends AppearanceOptionValueMap>(appearanceMap: Record<string, unknown>, appearanceSourceMap: AppearanceOptionSourceMap) => {
+    getAppearanceOptions: <OptionName extends keyof Options>(optionName: OptionName) => AppearanceOptionsByName<Options>[OptionName];
+};
+export { createAppearanceOptions };

package/dist/types/storybook/createAppearanceOptions/createAppearanceOptions.interface.d.ts

@@ -0,0 +1,6 @@
+type AppearanceOptionValueMap = Record<string, string>;
+type AppearanceOptionSourceMap = Record<string, Record<string, unknown>>;
+type AppearanceOptionsByName<Options extends AppearanceOptionValueMap> = {
+    [Key in keyof Options]: Options[Key][];
+};
+export type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap, };

package/dist/types/storybook/createAppearanceOptions/index.d.ts

@@ -0,0 +1,4 @@
+import { createAppearanceOptions } from './createAppearanceOptions';
+import type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap } from './createAppearanceOptions.interface';
+export { createAppearanceOptions };
+export type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap, };

package/dist/types/storybook/createComponentGallery/createComponentGallery.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentGallery, ComponentGalleryOptions } from './createComponentGallery.interface';
+declare const createComponentGallery: ({ size, src, appearanceGroups, appearanceOrder, shape, sizeOrder, style, tierOrder, }: ComponentGalleryOptions) => ComponentGallery;
+export { createComponentGallery };

package/dist/types/storybook/createComponentGallery/createComponentGallery.interface.d.ts

@@ -0,0 +1,59 @@
+interface ComponentGalleryOptions {
+    appearanceGroups: Record<string, ComponentGalleryAppearanceGroup>;
+    appearanceOrder?: string[];
+    shape: Record<string, unknown>;
+    size: Record<string, unknown>;
+    sizeOrder?: string[];
+    src?: readonly string[];
+    style: Record<string, unknown>;
+    tierOrder?: string[];
+}
+type ComponentGalleryArgs = {
+    appearance: string;
+    shape: string;
+    style: string;
+    tier: string;
+};
+type ComponentGalleryResolved = {
+    normalizeAppearanceGroup: (appearance: string) => string;
+    resolveAppearanceKey: (appearanceGroup: string, tier: string) => string;
+    resolveTier: (appearance: string, tier: string) => string;
+    sizeKeys: string[];
+    tiersByAppearance: Record<string, string[]>;
+};
+type ComponentGalleryAppearanceGroup = Record<string, unknown>;
+type ComponentGalleryRenderParams<Args extends ComponentGalleryArgs, Appearance extends string = string> = {
+    appearance: Appearance;
+    appearanceGroup: string;
+    appearanceKey: string;
+    args: Args;
+    sizeKey: string;
+    tier: string;
+};
+type ComponentGalleryAppearanceOptionName = 'appearanceShape' | 'appearanceSize' | 'appearanceStyle' | 'appearanceType';
+type ComponentGalleryArgType = {
+    control: 'radio' | 'select';
+    name?: string;
+    options: string[];
+};
+type ComponentGalleryArgTypes = {
+    appearance: ComponentGalleryArgType;
+    shape: ComponentGalleryArgType;
+    src?: ComponentGalleryArgType;
+    style: ComponentGalleryArgType;
+    tier: ComponentGalleryArgType;
+};
+type ComponentGallery = {
+    appearanceList: string[];
+    appearanceTierOptions: string[];
+    appearanceTypeOptions: string[];
+    argTypes: ComponentGalleryArgTypes;
+    getAppearanceOptions: (optionName: ComponentGalleryAppearanceOptionName) => string[];
+    itemsCount: number;
+    resolved: ComponentGalleryResolved;
+    shapeOptions: string[];
+    sizeKeys: string[];
+    styleOptions: string[];
+    tiersByAppearance: Record<string, string[]>;
+};
+export type { ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved, };

package/dist/types/storybook/createComponentGallery/index.d.ts

@@ -0,0 +1,4 @@
+import { createComponentGallery } from './createComponentGallery';
+import type { ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved } from './createComponentGallery.interface';
+export { createComponentGallery };
+export type { ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved, };

package/dist/types/storybook/index.d.ts

@@ -0,0 +1,6 @@
+import { createAppearanceOptions } from './createAppearanceOptions';
+import type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap } from './createAppearanceOptions';
+import { createComponentGallery } from './createComponentGallery';
+import type { ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved } from './createComponentGallery';
+export { createAppearanceOptions, createComponentGallery };
+export type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap, ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-core",
-  "version": "1.10.84",
+  "version": "1.10.86",
   "description": "UI shared components",
   "keywords": [
     "Modal",
@@ -56,6 +56,11 @@
       "import": "./dist/hooks/useStylesReactNative/index.js",
       "require": "./dist/cjs/hooks/useStylesReactNative/index.js"
     },
+    "./storybook": {
+      "types": "./dist/types/storybook/index.d.ts",
+      "import": "./dist/storybook/index.js",
+      "require": "./dist/cjs/storybook/index.js"
+    },
     "./utils": {
       "types": "./dist/types/utils/index.d.ts",
       "import": "./dist/utils/index.js",
@@ -96,7 +101,7 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.4.0",
     "@itcase/common": "^1.2.53",
-    "@itcase/storybook-config": "^1.3.12",
+    "@itcase/storybook-config": "^1.3.13",
     "clsx": "^2.1.1",
     "lodash-es": "^4.18.1",
     "react": "^18.3.1",
@@ -126,15 +131,15 @@
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/luxon": "^3.7.4",
+    "@types/luxon": "^3.7.5",
     "@types/uuid": "^11.0.0",
     "babel-loader": "^10.1.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
-    "rollup": "4.62.4",
+    "rollup": "4.63.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.5.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3"
   },
-  "gitHead": "c79586937c6af8dfd80315c8abd5b0d086acbaab"
+  "gitHead": "1ee5a36744ff147b476c89a70aed69c05509b56a"
 }

package/dist/cjs/context/index2.js

@@ -1,26 +0,0 @@
-'use strict';
-
-var Notifications = require('./Notifications/Notifications.js');
-var UIProvider = require('./UIProvider/UIProvider.js');
-var UrlAssetPrefix = require('./UrlAssetPrefix/UrlAssetPrefix.js');
-var UserDeviceContext = require('./UserDeviceContext/UserDeviceContext.js');
-require('react/jsx-runtime');
-require('react');
-require('uuid');
-require('@itcase/common');
-require('lodash-es/camelCase');
-require('../hooks/useMediaQueries/useMediaQueries.js');
-require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('./UserDeviceContext/UserDeviceContext.helpers.js');
-
-
-
-exports.NotificationsProvider = Notifications.NotificationsProvider;
-exports.statusToAppearanceList = Notifications.statusToAppearanceList;
-exports.useNotifications = Notifications.useNotifications;
-exports.useNotificationsAPI = Notifications.useNotificationsAPI;
-exports.UIProvider = UIProvider.UIProvider;
-exports.UrlAssetPrefixContext = UrlAssetPrefix.UrlAssetPrefixContext;
-exports.UrlAssetPrefixProvider = UrlAssetPrefix.UrlAssetPrefixProvider;
-exports.useUserDeviceContext = UserDeviceContext.useUserDeviceContext;

package/dist/cjs/hooks/index2.js

@@ -1,29 +0,0 @@
-'use strict';
-
-var useActiveClasses = require('./useActiveClasses/useActiveClasses.js');
-var useAppearanceConfig = require('./useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useMediaQueries = require('./useMediaQueries/useMediaQueries.js');
-var styleAttributes = require('./useStyles/styleAttributes.js');
-var styleAttributes_helpers = require('./useStyles/styleAttributes.helpers.js');
-var useStyles = require('./useStyles/useStyles.js');
-require('clsx');
-require('./useActiveClasses/useActiveClasses.helpers.js');
-require('react');
-require('lodash-es/camelCase');
-require('lodash-es/castArray');
-require('lodash-es/upperFirst');
-require('../context/UserDeviceContext/UserDeviceContext.js');
-require('lodash-es/kebabCase');
-require('lodash-es/maxBy');
-require('react-responsive');
-
-
-
-exports.useActiveClasses = useActiveClasses.useActiveClasses;
-exports.useAppearanceConfig = useAppearanceConfig.useAppearanceConfig;
-exports.useDevicePropsGenerator = useDevicePropsGenerator.useDevicePropsGenerator;
-exports.useMediaQueries = useMediaQueries.useMediaQueries;
-exports.styleAttributes = styleAttributes.styleAttributes;
-exports.getStyleAttributeKey = styleAttributes_helpers.getStyleAttributeKey;
-exports.useStyles = useStyles.useStyles;

package/dist/context/index2.js

@@ -1,13 +0,0 @@
-export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI } from './Notifications/Notifications.js';
-export { UIProvider } from './UIProvider/UIProvider.js';
-export { UrlAssetPrefixContext, UrlAssetPrefixProvider } from './UrlAssetPrefix/UrlAssetPrefix.js';
-export { useUserDeviceContext } from './UserDeviceContext/UserDeviceContext.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'uuid';
-import '@itcase/common';
-import 'lodash-es/camelCase';
-import '../hooks/useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../utils/setViewportProperty.js';
-import './UserDeviceContext/UserDeviceContext.helpers.js';

package/dist/hooks/index2.js

@@ -1,17 +0,0 @@
-export { useActiveClasses } from './useActiveClasses/useActiveClasses.js';
-export { useAppearanceConfig } from './useAppearanceConfig/useAppearanceConfig.js';
-export { useDevicePropsGenerator } from './useDevicePropsGenerator/useDevicePropsGenerator.js';
-export { useMediaQueries } from './useMediaQueries/useMediaQueries.js';
-export { styleAttributes } from './useStyles/styleAttributes.js';
-export { getStyleAttributeKey } from './useStyles/styleAttributes.helpers.js';
-export { useStyles } from './useStyles/useStyles.js';
-import 'clsx';
-import './useActiveClasses/useActiveClasses.helpers.js';
-import 'react';
-import 'lodash-es/camelCase';
-import 'lodash-es/castArray';
-import 'lodash-es/upperFirst';
-import '../context/UserDeviceContext/UserDeviceContext.js';
-import 'lodash-es/kebabCase';
-import 'lodash-es/maxBy';
-import 'react-responsive';