[BUG] default responsive modifier value is not applied correctly.

[andrewtpoe]

EXPECTED BEHAVIOR

When using a modifier using applyStyleModifier in a responsive component, the default modifier should be applied if size is provided but does not match.

This simple example should apply the default modifier value (modifier1):

<Component modifiers={{_: 'modifier1', LG: 'modifier2'}} size="SM" />

ACTUAL BEHAVIOR

Given the scenario above, no modifiers will be applied.

STEPS TO REPRODUCE

• Create a component with multiple modifiers.
• Use the responsive modifiers object pattern to apply modifiers by default, and also to one or more breakpoints.
• Provide a size prop value that does not match any of the keys in the responsive modifiers object.
• Observe that the default modifier styles are not being applied.

SUGGESTED SOLUTION

The logic behind selecting responsive modifiers needs to be improved to handle this scenario. This same logic is repeated in a few other locations as well.

[andrewtpoe]

closed by #49