@nodestrap/navbar - npm Package Compare versions

Comparing version 4.0.8 to 4.0.9

dist/Navbar.d.ts

@@ -8,6 +8,6 @@ import { default as React } from 'react';
 export { useCurrentActive };
-export declare const markActive: () => import("@cssfn/cssfn").StyleCollection;
-export declare const dontMarkActive: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesThemeDefault: (themeName?: ThemeName | null) => import("@cssfn/cssfn").StyleCollection;
-export declare const usesThemeActive: (themeName?: ThemeName | null) => import("@cssfn/cssfn").StyleCollection;
+export declare const markActive: () => import("@cssfn/cssfn").Rule;
+export declare const dontMarkActive: () => import("@cssfn/cssfn").Rule;
+export declare const usesThemeDefault: (themeName?: ThemeName | null) => import("@cssfn/cssfn").Rule;
+export declare const usesThemeActive: (themeName?: ThemeName | null) => import("@cssfn/cssfn").Rule;
 export interface CompactState {
@@ -26,16 +26,16 @@ compact?: boolean;
 }
-export declare const usesMenusAnim: () => readonly [() => import("@cssfn/cssfn").StyleCollection, import("@cssfn/css-var").ReadonlyRefs<MenusAnimVars>, import("@cssfn/css-var").ReadonlyDecls<MenusAnimVars>];
-export declare const usesWrapperLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesItemLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesSecondaryLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesLogoLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesTogglerLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesMenusLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesMenusCompactLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesMenuLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesMenuVariants: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesMenuStates: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesNavbarLayout: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesNavbarVariants: () => import("@cssfn/cssfn").StyleCollection;
-export declare const usesNavbarStates: () => import("@cssfn/cssfn").StyleCollection;
+export declare const usesMenusAnim: () => readonly [() => import("@cssfn/cssfn").Rule, import("@cssfn/css-var").ReadonlyRefs<MenusAnimVars>, import("@cssfn/css-var").ReadonlyDecls<MenusAnimVars>];
+export declare const usesWrapperLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesItemLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesSecondaryLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesLogoLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesTogglerLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesMenusLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesMenusCompactLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesMenuLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesMenuVariants: () => import("@cssfn/cssfn").Rule;
+export declare const usesMenuStates: () => import("@cssfn/cssfn").Rule;
+export declare const usesNavbarLayout: () => import("@cssfn/cssfn").Rule;
+export declare const usesNavbarVariants: () => import("@cssfn/cssfn").Rule;
+export declare const usesNavbarStates: () => import("@cssfn/cssfn").Rule;
 export declare const useNavbarSheet: import("@cssfn/types").Factory<import("jss").Classes<"main">>;
@@ -42,0 +42,0 @@ export declare const cssProps: import("@cssfn/css-config").Refs<{

dist/Navbar.js

@@ -5,7 +5,9 @@ // react:
 // compositions:
-composition, mainComposition, imports, 
-// layouts:
-layout, vars, children, 
+mainComposition, 
+// styles:
+style, vars, imports, 
 // rules:
-rules, states, rule, } from '@cssfn/cssfn'; // cssfn core
+rule, states, fallbacks, 
+//combinators:
+children, } from '@cssfn/cssfn'; // cssfn core
 import { 
@@ -37,3 +39,3 @@ // hooks:
 // hooks:
-markActive as controlMarkActive, usesThemeDefault as controlUsesThemeDefault, usesThemeActive as controlUsesThemeActive, isFocus, isArrive, } from '@nodestrap/control';
+usesThemeDefault as controlUsesThemeDefault, usesThemeActive as controlUsesThemeActive, isFocus, isArrive, } from '@nodestrap/control';
 import { 
@@ -56,11 +58,11 @@ // hooks:
 //#region activePassive
-export const markActive = () => composition([
-    imports([
-        controlMarkActive(),
+export const markActive = () => style({
+    ...imports([
+        outlinedOf(null),
         mildOf(null),
         usesThemeActive(), // switch to active theme
     ]),
-]);
-export const dontMarkActive = () => composition([
-    imports([
+});
+export const dontMarkActive = () => style({
+    ...imports([
         outlinedOf(null),
@@ -70,3 +72,3 @@ mildOf(null),
     ]),
-]);
+});
 // change default parameter from 'secondary' to `null`:
@@ -178,23 +180,23 @@ export const usesThemeDefault = (themeName = null) => controlUsesThemeDefault(themeName);
     return [
-        () => composition([
-            imports([
+        () => style({
+            ...imports([
                 // animations:
                 anim(),
             ]),
-            vars({
+            ...vars({
                 [menusAnimDecls.anim]: animRefs.animNone,
             }),
-            states([
-                isActivating([
-                    vars({
+            ...states([
+                isActivating({
+                    ...vars({
                         [menusAnimDecls.anim]: cssProps.menusAnimActive,
                     }),
-                ]),
-                isPassivating([
-                    vars({
+                }),
+                isPassivating({
+                    ...vars({
                         [menusAnimDecls.anim]: cssProps.menusAnimPassive,
                     }),
-                ]),
+                }),
             ]),
-        ]),
+        }),
         menusAnimRefs,
@@ -214,8 +216,8 @@ menusAnimDecls,
     const [paddings] = usesPadding();
-    return composition([
-        imports([
+    return style({
+        ...imports([
             // spacings:
             paddings(),
         ]),
-        layout({
+        ...style({
             // layouts:
@@ -230,11 +232,9 @@ display: 'flex',
         }),
-    ]);
+    });
 };
 export const usesItemLayout = () => {
-    return composition([
-        layout({
-            // customize:
-            ...usesGeneralProps(usesPrefixedProps(cssProps, 'item')), // apply general cssProps starting with item***
-        }),
-    ]);
+    return style({
+        // customize:
+        ...usesGeneralProps(usesPrefixedProps(cssProps, 'item')), // apply general cssProps starting with item***
+    });
 };
@@ -245,32 +245,26 @@ export const usesSecondaryLayout = () => {
     const [, , paddingDecls] = usesPadding();
-    return composition([
-        layout({
-            // layouts:
-            justifySelf: 'center',
-            alignSelf: 'center',
-            // spacings:
-            [paddingDecls.paddingInline]: '0px',
-            [paddingDecls.paddingBlock]: '0px', // discard padding
-        }),
-    ]);
+    return style({
+        // layouts:
+        justifySelf: 'center',
+        alignSelf: 'center',
+        // spacings:
+        [paddingDecls.paddingInline]: '0px',
+        [paddingDecls.paddingBlock]: '0px', // discard padding
+    });
 };
 export const usesLogoLayout = () => {
-    return composition([
-        layout({
-            // layouts:
-            gridArea: '1 / -3',
-            // customize:
-            ...usesGeneralProps(usesPrefixedProps(cssProps, 'logo')), // apply general cssProps starting with logo***
-        }),
-    ]);
+    return style({
+        // layouts:
+        gridArea: '1 / -3',
+        // customize:
+        ...usesGeneralProps(usesPrefixedProps(cssProps, 'logo')), // apply general cssProps starting with logo***
+    });
 };
 export const usesTogglerLayout = () => {
-    return composition([
-        layout({
-            // layouts:
-            gridArea: '1 / 2',
-            // customize:
-            ...usesGeneralProps(usesPrefixedProps(cssProps, 'toggler')), // apply general cssProps starting with toggler***
-        }),
-    ]);
+    return style({
+        // layouts:
+        gridArea: '1 / 2',
+        // customize:
+        ...usesGeneralProps(usesPrefixedProps(cssProps, 'toggler')), // apply general cssProps starting with toggler***
+    });
 };
@@ -281,44 +275,43 @@ export const usesMenusLayout = () => {
     const [, menusAnimRefs] = usesMenusAnim();
-    return composition([
-        layout({
-            // layouts:
-            gridArea: 'menus',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'end',
-            alignItems: 'stretch',
-            flexWrap: 'nowrap',
-            // animations:
-            anim: menusAnimRefs.anim,
-            // children:
-            ...children('*', [
-                imports([
-                    usesMenuLayout(),
-                    usesMenuVariants(),
-                    usesMenuStates(),
-                ]),
+    return style({
+        // layouts:
+        gridArea: 'menus',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'end',
+        alignItems: 'stretch',
+        flexWrap: 'nowrap',
+        // animations:
+        anim: menusAnimRefs.anim,
+        // children:
+        ...children('*', {
+            ...imports([
+                // layouts:
+                usesMenuLayout(),
+                // variants:
+                usesMenuVariants(),
+                // states:
+                usesMenuStates(),
             ]),
-            // customize:
-            ...usesGeneralProps(usesPrefixedProps(cssProps, 'menus')), // apply general cssProps starting with menus***
         }),
-    ]);
+        // customize:
+        ...usesGeneralProps(usesPrefixedProps(cssProps, 'menus')), // apply general cssProps starting with menus***
+    });
 };
 export const usesMenusCompactLayout = () => {
-    return composition([
-        layout({
-            // layouts:
-            gridArea: '-1 / -3 / -1 / 3',
-            flexDirection: 'column',
-            // backgrounds:
-            backg: 'inherit',
-            // borders:
-            borderBlock: 'inherit',
-            // sizes:
-            // supports for floating menus, fills the entire page's width
-            inlineSize: 'fill-available',
-            fallbacks: {
-                inlineSize: '-moz-available',
-            },
+    return style({
+        // layouts:
+        gridArea: '-1 / -3 / -1 / 3',
+        flexDirection: 'column',
+        // backgrounds:
+        backg: 'inherit',
+        // borders:
+        borderBlock: 'inherit',
+        // sizes:
+        // supports for floating menus, fills the entire page's width
+        inlineSize: 'fill-available',
+        ...fallbacks({
+            inlineSize: '-moz-available',
         }),
-    ]);
+    });
 };
@@ -330,4 +323,4 @@ export const usesMenuLayout = () => {
     const [, , borderRadiusDecls] = usesBorderRadius();
-    return composition([
-        imports([
+    return style({
+        ...imports([
             // layouts:
@@ -339,3 +332,3 @@ usesActionControlLayout(),
         ]),
-        layout({
+        ...style({
             // borders:
@@ -354,49 +347,49 @@ [borderStrokeDecls.borderWidth]: '0px',
         }),
-    ]);
+    });
 };
 export const usesMenuVariants = () => {
-    return composition([
-        imports([
+    return style({
+        ...imports([
             // variants:
             usesActionControlVariants(),
         ]),
-    ]);
+    });
 };
 export const usesMenuStates = () => {
-    return composition([
-        imports([
+    return style({
+        ...imports([
             // states:
             usesActionControlStates(),
         ]),
-        states([
-            isActive([
-                imports([
+        ...states([
+            isActive({
+                ...imports([
                     markActive(),
                 ]),
-            ]),
-            isFocus([
-                imports([
+            }),
+            isFocus({
+                ...imports([
                     dontMarkActive(),
                 ]),
-            ]),
-            isArrive([
-                imports([
+            }),
+            isArrive({
+                ...imports([
                     dontMarkActive(),
                 ]),
-            ]),
-            isPress([
-                imports([
+            }),
+            isPress({
+                ...imports([
                     dontMarkActive(),
                 ]),
-            ]),
+            }),
         ]),
-    ]);
+    });
 };
 export const usesNavbarLayout = () => {
-    return composition([
-        imports([
+    return style({
+        ...imports([
             // layouts:
             usesContainerLayout(),
         ]),
-        layout({
+        ...style({
             // layouts:
@@ -423,32 +416,32 @@ display: 'grid',
             // children:
-            ...children(wrapperElm, [
-                imports([
+            ...children(wrapperElm, {
+                ...imports([
                     usesWrapperLayout(),
                 ]),
-            ]),
-            ...children([logoElm, togglerElm, menusElm], [
-                imports([
+            }),
+            ...children([logoElm, togglerElm, menusElm], {
+                ...imports([
                     usesItemLayout(),
                 ]),
-            ]),
-            ...children([logoElm, togglerElm], [
-                imports([
+            }),
+            ...children([logoElm, togglerElm], {
+                ...imports([
                     usesSecondaryLayout(),
                 ]),
-            ]),
-            ...children(logoElm, [
-                imports([
+            }),
+            ...children(logoElm, {
+                ...imports([
                     usesLogoLayout(),
                 ]),
-            ]),
-            ...children(togglerElm, [
-                imports([
+            }),
+            ...children(togglerElm, {
+                ...imports([
                     usesTogglerLayout(),
                 ]),
-            ]),
-            ...children(menusElm, [
-                imports([
+            }),
+            ...children(menusElm, {
+                ...imports([
                     usesMenusLayout(),
                 ]),
-            ]),
+            }),
             // customize:
@@ -461,3 +454,3 @@ ...usesGeneralProps(cssProps),
         }),
-    ]);
+    });
 };
@@ -467,10 +460,8 @@ export const usesNavbarVariants = () => {
     // layouts:
-    const [sizes] = usesSizeVariant((sizeName) => composition([
-        layout({
-            // overwrites propName = propName{SizeName}:
-            ...overwriteProps(cssDecls, usesSuffixedProps(cssProps, sizeName)),
-        }),
-    ]));
-    return composition([
-        imports([
+    const [sizes] = usesSizeVariant((sizeName) => style({
+        // overwrites propName = propName{SizeName}:
+        ...overwriteProps(cssDecls, usesSuffixedProps(cssProps, sizeName)),
+    }));
+    return style({
+        ...imports([
             // variants:
@@ -481,3 +472,3 @@ usesContainerVariants(),
         ]),
-    ]);
+    });
 };
@@ -488,116 +479,88 @@ export const usesNavbarStates = () => {
     const [menusAnim] = usesMenusAnim();
-    return composition([
-        imports([
+    return style({
+        ...imports([
             // animations:
             menusAnim(),
         ]),
-        states([
-            rule(':not(.compact)', [
-                layout({
+        ...states([
+            rule(':not(.compact)', {
+                // children:
+                ...children([logoElm, togglerElm, menusElm], {
+                    // customize:
+                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'item'), 'full')), // apply general cssProps starting with item*** and ending with ***Full
+                }),
+                ...children(logoElm, {
+                    // customize:
+                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'logo'), 'full')), // apply general cssProps starting with logo*** and ending with ***Full
+                }),
+                ...children(togglerElm, {
+                    // appearances:
+                    display: 'none',
+                    // customize:
+                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'toggler'), 'full')), // apply general cssProps starting with toggler*** and ending with ***Full
+                }),
+                ...children(menusElm, {
                     // children:
-                    ...children([logoElm, togglerElm, menusElm], [
-                        layout({
-                            // customize:
-                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'item'), 'full')), // apply general cssProps starting with item*** and ending with ***Full
-                        }),
-                    ]),
-                    ...children(logoElm, [
-                        layout({
-                            // customize:
-                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'logo'), 'full')), // apply general cssProps starting with logo*** and ending with ***Full
-                        }),
-                    ]),
-                    ...children(togglerElm, [
-                        layout({
-                            // appearances:
-                            display: 'none',
-                            // customize:
-                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'toggler'), 'full')), // apply general cssProps starting with toggler*** and ending with ***Full
-                        }),
-                    ]),
-                    ...children(menusElm, [
-                        layout({
-                            // children:
-                            ...children('*', [
-                                layout({
-                                    // customize:
-                                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'menu'), 'full')), // apply general cssProps starting with menu*** and ending with ***Full
-                                }),
-                            ]),
-                            // customize:
-                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'menus'), 'full')), // apply general cssProps starting with menus*** and ending with ***Full
-                        }),
-                    ]),
+                    ...children('*', {
+                        // customize:
+                        ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'menu'), 'full')), // apply general cssProps starting with menu*** and ending with ***Full
+                    }),
                     // customize:
-                    ...usesGeneralProps(usesSuffixedProps(cssProps, 'full')), // apply general cssProps ending with ***Full
+                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'menus'), 'full')), // apply general cssProps starting with menus*** and ending with ***Full
                 }),
-            ]),
-            rule('.compact', [
-                layout({
-                    // children:
-                    ...children([logoElm, togglerElm, menusElm], [
-                        layout({
-                            // customize:
-                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'item'), 'compact')), // apply general cssProps starting with item*** and ending with ***Compact
-                        }),
+                // customize:
+                ...usesGeneralProps(usesSuffixedProps(cssProps, 'full')), // apply general cssProps ending with ***Full
+            }),
+            rule('.compact', {
+                // children:
+                ...children([logoElm, togglerElm, menusElm], {
+                    // customize:
+                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'item'), 'compact')), // apply general cssProps starting with item*** and ending with ***Compact
+                }),
+                ...children(logoElm, {
+                    // customize:
+                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'logo'), 'compact')), // apply general cssProps starting with logo*** and ending with ***Compact
+                }),
+                ...children(togglerElm, {
+                    // customize:
+                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'toggler'), 'compact')), // apply general cssProps starting with toggler*** and ending with ***Compact
+                }),
+                ...children(menusElm, {
+                    ...imports([
+                        usesMenusCompactLayout(),
                     ]),
-                    ...children(logoElm, [
-                        layout({
+                    ...style({
+                        // children:
+                        ...children('*', {
                             // customize:
-                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'logo'), 'compact')), // apply general cssProps starting with logo*** and ending with ***Compact
+                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'menu'), 'compact')), // apply general cssProps starting with menu*** and ending with ***Compact
                         }),
-                    ]),
-                    ...children(togglerElm, [
-                        layout({
-                            // customize:
-                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'toggler'), 'compact')), // apply general cssProps starting with toggler*** and ending with ***Compact
-                        }),
-                    ]),
-                    ...children(menusElm, [
-                        imports([
-                            usesMenusCompactLayout(),
-                        ]),
-                        layout({
-                            // children:
-                            ...children('*', [
-                                layout({
-                                    // customize:
-                                    ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'menu'), 'compact')), // apply general cssProps starting with menu*** and ending with ***Compact
-                                }),
-                            ]),
-                            // customize:
-                            ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'menus'), 'compact')), // apply general cssProps starting with menus*** and ending with ***Compact
-                        }),
-                    ]),
-                    // customize:
-                    ...usesGeneralProps(usesSuffixedProps(cssProps, 'compact')), // apply general cssProps ending with ***Compact
+                        // customize:
+                        ...usesGeneralProps(usesSuffixedProps(usesPrefixedProps(cssProps, 'menus'), 'compact')), // apply general cssProps starting with menus*** and ending with ***Compact
+                    }),
                 }),
-                rules([
-                    isPassived([
-                        layout({
-                            // children:
-                            ...children(menusElm, [
-                                layout({
-                                    // layouts:
-                                    display: 'none', // hide the menus when on compact mode
-                                }),
-                            ]),
+                ...states([
+                    isPassived({
+                        // children:
+                        ...children(menusElm, {
+                            // layouts:
+                            display: 'none', // hide the menus when on compact mode
                         }),
-                    ]),
+                    }),
                 ]),
-            ]),
+                // customize:
+                ...usesGeneralProps(usesSuffixedProps(cssProps, 'compact')), // apply general cssProps ending with ***Compact
+            }),
         ]),
-    ]);
+    });
 };
 export const useNavbarSheet = createUseSheet(() => [
-    mainComposition([
-        imports([
-            // layouts:
-            usesNavbarLayout(),
-            // variants:
-            usesNavbarVariants(),
-            // states:
-            usesNavbarStates(),
-        ]),
-    ]),
+    mainComposition(imports([
+        // layouts:
+        usesNavbarLayout(),
+        // variants:
+        usesNavbarVariants(),
+        // states:
+        usesNavbarStates(),
+    ])),
 ], /*sheetId :*/ 'xf4hlnf0au'); // an unique salt for SSR support, ensures the server-side & client-side have the same generated class names
@@ -604,0 +567,0 @@ // configs:

package.json

 {
   "name": "@nodestrap/navbar",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "A responsive navigation header. Supports for branding, navigation and more.",
@@ -34,21 +34,21 @@ "type": "module",
   "dependencies": {
-    "@cssfn/css-config": "^1.0.1",
-    "@cssfn/css-types": "^1.0.2",
-    "@cssfn/css-var": "^1.0.3",
-    "@cssfn/cssfn": "^1.0.6",
-    "@cssfn/react-cssfn": "^1.0.9",
-    "@nodestrap/action-control": "^4.0.13",
-    "@nodestrap/basic": "^4.0.4",
-    "@nodestrap/check": "^4.0.3",
-    "@nodestrap/container": "^4.0.5",
-    "@nodestrap/control": "^4.0.5",
-    "@nodestrap/element": "^4.0.2",
-    "@nodestrap/hooks": "^4.0.0",
-    "@nodestrap/indicator": "^4.0.4",
-    "@nodestrap/nav-button": "^4.0.9",
-    "@nodestrap/toggler-menu-button": "^4.0.3",
-    "@nodestrap/utilities": "^4.0.1",
-    "@types/react": "^17.0.37",
+    "@cssfn/css-config": "^1.0.4",
+    "@cssfn/css-types": "^1.0.4",
+    "@cssfn/css-var": "^1.0.4",
+    "@cssfn/cssfn": "^1.0.11",
+    "@cssfn/react-cssfn": "^1.0.11",
+    "@nodestrap/action-control": "^4.0.17",
+    "@nodestrap/basic": "^4.0.7",
+    "@nodestrap/check": "^4.0.4",
+    "@nodestrap/container": "^4.0.15",
+    "@nodestrap/control": "^4.0.8",
+    "@nodestrap/element": "^4.0.7",
+    "@nodestrap/hooks": "^4.0.1",
+    "@nodestrap/indicator": "^4.0.7",
+    "@nodestrap/nav-button": "^4.0.10",
+    "@nodestrap/toggler-menu-button": "^4.0.4",
+    "@nodestrap/utilities": "^4.0.3",
+    "@types/react": "^17.0.39",
     "react": "^17.0.2"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

87268

decreased by-3.8%

Lines of code

1891

decreased by-3.81%

Dependency changes

• Updated@cssfn/css-config@^1.0.4

• Updated@cssfn/css-types@^1.0.4

• Updated@cssfn/css-var@^1.0.4

• Updated@cssfn/cssfn@^1.0.11

• Updated@cssfn/react-cssfn@^1.0.11

• Updated@nodestrap/action-control@^4.0.17

• Updated@nodestrap/basic@^4.0.7

• Updated@nodestrap/check@^4.0.4

• Updated@nodestrap/container@^4.0.15

• Updated@nodestrap/control@^4.0.8

• Updated@nodestrap/element@^4.0.7

• Updated@nodestrap/hooks@^4.0.1

• Updated@nodestrap/indicator@^4.0.7

• Updated@nodestrap/nav-button@^4.0.10

• Updated@nodestrap/toggler-menu-button@^4.0.4

• Updated@nodestrap/utilities@^4.0.3

• Updated@types/react@^17.0.39