fix: Fix default modifiers type (#2704)

Fixes: #2703  

Fixed issue with default modifiers type:

```ts
const textStencil = createStencil({
  base: {},
  modifiers: {
    "type": {
      "title.large": {}
    }
  }
});

const labelStencil = createStencil({
  extends: textStencil,
  base: {},
  modifiers: {variant: {"inverse": {}}}
  // the next line shows issue
  // that type `{type: "title.large"}` is not compatible with `{variant: {"inverse": {}}}`
  defaultModifiers: {type: "title.large"}
}

[category:Components]

modules/preview-react/radio/lib/RadioText.tsx

@@ -34,8 +34,9 @@ const radioTextStencil = createStencil({
       },
     },
   ],
-  // @ts-ignore
-  defaultModifiers: {typeLevel: 'subtext.large'},
+  defaultModifiers: {
+    typeLevel: 'subtext.large',
+  },
 });
 
 export const RadioText = createSubcomponent('span')({

modules/styling/lib/cs.ts

@@ -985,13 +985,21 @@ export interface StencilConfig<
    * Modifiers are optional. If you need a modifier to always be defined, a default modifier value
    * will be used when a modifier is `undefined`
    */
-  defaultModifiers?: {[K in keyof M]?: keyof M[K]};
+  defaultModifiers?: [E] extends [never]
+    ? StencilDefaultModifierReturn<M>
+    : E extends BaseStencil<infer ME, any, any, any>
+    ? StencilDefaultModifierReturn<M & ME>
+    : undefined;
 }
 
 type StencilModifierReturn<M extends StencilModifierConfig<V>, V extends DefaultedVarsShape> = {
   [K1 in keyof M]: {[K2 in keyof M[K1]]: string};
 };
 
+type StencilDefaultModifierReturn<M> = {
+  [K1 in keyof M]?: keyof M[K1];
+};
+
 export interface BaseStencil<
   M extends StencilModifierConfig<V>,
   V extends DefaultedVarsShape,
@@ -1026,7 +1034,9 @@ export interface Stencil<
   modifiers: [E] extends [BaseStencil<infer ME, infer VE, any, any>]
     ? StencilModifierReturn<ME & M, VE & V>
     : StencilModifierReturn<M, V>;
-  defaultModifiers: {[K in keyof M]?: keyof M[K]};
+  defaultModifiers: [E] extends [BaseStencil<infer ME, any, any, any>]
+    ? StencilDefaultModifierReturn<ME & M>
+    : StencilDefaultModifierReturn<M>;
 }
 
 type VariableValuesStencil<V extends DefaultedVarsShape> = V extends Record<string, string>

modules/styling/spec/cs.spec.tsx

@@ -975,6 +975,35 @@ describe('cs', () => {
         });
       });
 
+      it('should set default modifiers using base modifiers', () => {
+        const baseStencil = createStencil({
+          base: {},
+          modifiers: {
+            size: {
+              large: {width: '100rem'},
+            },
+          },
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          base: {},
+          modifiers: {
+            extra: {
+              true: {},
+            },
+          },
+          defaultModifiers: {size: 'large'},
+        });
+
+        // calling the stencil
+        type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
+        expectTypeOf<Args>().toEqualTypeOf<{
+          size?: 'large';
+          extra?: boolean;
+        }>();
+      });
+
       it('should extend variables', () => {
         const baseStencil = createStencil({
           vars: {