@mrshmllw/smores-react 2.12.6 → 2.13.0

package/dist/Box/Box.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
+export declare const ResponsiveProps: any;

package/dist/Box/Box.stories.js

@@ -1,10 +1,14 @@
 import React from 'react';
+import { Text } from '../Text';
+import { Icon } from '../Icon';
 import { Box } from './Box';
+import { theme } from '../theme';
 export default {
     title: 'Box',
     component: Box,
 };
-const Template = (props) => React.createElement(Box, Object.assign({}, props), "Some lovely content.");
+const Template = (props) => (React.createElement(Box, Object.assign({}, props),
+    React.createElement(Text, null, "Some lovely content.")));
 export const Default = Template.bind({});
 Default.args = {
     flex: true,
@@ -19,4 +23,16 @@ Default.argTypes = {
     as: { table: { disable: true } },
     forwardedAs: { table: { disable: true } },
 };
+const Card = () => (React.createElement(Box, { px: { small: '12px', medium: '24px' }, pt: { small: '8px', medium: '16px' }, pb: { small: '24px', medium: '32px' }, style: { backgroundColor: theme.colors.background, borderRadius: 8 } },
+    React.createElement(Box, { flex: true, direction: { small: 'column', medium: 'row' }, gap: { small: { custom: 2 }, medium: '8px' }, alignItems: { medium: 'center' }, mb: "8px" },
+        React.createElement(Icon, { render: "help-aboutus", size: 24 }),
+        React.createElement(Text, { typo: "heading-small" }, "Card content.")),
+    React.createElement(Text, { color: "subtext" }, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.")));
+const ResponsiveTemplate = () => {
+    return (React.createElement(Box, { flex: true, direction: { small: 'column', medium: 'row' }, gap: { small: '12px', medium: '16px' } },
+        React.createElement(Card, null),
+        React.createElement(Card, null),
+        React.createElement(Card, null)));
+};
+export const ResponsiveProps = ResponsiveTemplate.bind({});
 //# sourceMappingURL=Box.stories.js.map

package/dist/Box/Box.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../src/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AAErC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,oBAAC,GAAG,oBAAK,KAAK,0BAA4B,CAAA;AAEhF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,YAAY;IAC5B,UAAU,EAAE,aAAa;IACzB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;CACV,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA"}
+{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../src/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,CACpC,oBAAC,GAAG,oBAAK,KAAK;IACZ,oBAAC,IAAI,+BAA4B,CAC7B,CACP,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,YAAY;IAC5B,UAAU,EAAE,aAAa;IACzB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;CACV,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA;AAED,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,oBAAC,GAAG,IACF,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACrC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EACpC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACrC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC,EAAE;IAEpE,oBAAC,GAAG,IACF,IAAI,QACJ,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAC7C,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAC5C,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAChC,EAAE,EAAC,KAAK;QAER,oBAAC,IAAI,IAAC,MAAM,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI;QACxC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,oBAAqB,CAC3C;IACN,oBAAC,IAAI,IAAC,KAAK,EAAC,SAAS,8JAId,CACH,CACP,CAAA;AAED,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,OAAO,CACL,oBAAC,GAAG,IACF,IAAI,QACJ,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAC7C,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;QAEtC,oBAAC,IAAI,OAAG;QACR,oBAAC,IAAI,OAAG;QACR,oBAAC,IAAI,OAAG,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/utils/flex.d.ts

@@ -1,12 +1,17 @@
+import { ResponsiveProp } from './responsiveProp';
+import { SpacingProp } from './space';
 type FlexFN = (arg: FlexProps) => string;
 export interface FlexProps {
-    direction?: 'column' | 'column-reverse' | 'row' | 'row-reverse';
+    direction?: ResponsiveProp<'column' | 'column-reverse' | 'row' | 'row-reverse'>;
     wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
     flex?: boolean;
     flow?: string;
-    justifyContent?: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
-    alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
-    alignContent?: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
+    justifyContent?: ResponsiveProp<'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly'>;
+    alignItems?: ResponsiveProp<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>;
+    alignContent?: ResponsiveProp<'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch'>;
+    gap?: ResponsiveProp<SpacingProp>;
+    rowGap?: ResponsiveProp<SpacingProp>;
+    columnGap?: ResponsiveProp<SpacingProp>;
 }
 export declare const flex: FlexFN;
 export {};

package/dist/utils/flex.js

@@ -1,13 +1,32 @@
+import { resolveResponsiveProp } from './responsiveProp';
+import { resolveSpacing } from './space';
 export const flex = (props) => {
-    const { flex, direction, wrap, flow, justifyContent, alignItems, alignContent, } = props;
+    const { flex, direction, wrap, flow, justifyContent, alignItems, alignContent, gap, columnGap, rowGap, } = props;
     return `
     ${flex ? `display: flex;` : ''}
-    ${direction ? `flex-direction: ${direction};` : ''}
+    ${direction
+        ? resolveResponsiveProp(direction, (value) => `flex-direction: ${value};`)
+        : ''}
     ${wrap ? `flex-wrap: ${wrap};` : ''}
     ${flow ? `flex-flow: ${flow};` : ''}
-    ${justifyContent ? `justify-content: ${justifyContent};` : ''}
-    ${alignItems ? `align-items: ${alignItems};` : ''}
-    ${alignContent ? `align-content: ${alignContent};` : ''}
+    ${justifyContent
+        ? resolveResponsiveProp(justifyContent, (value) => `justify-content: ${value};`)
+        : ''}
+    ${alignItems
+        ? resolveResponsiveProp(alignItems, (value) => `align-items: ${value};`)
+        : ''}
+    ${alignContent
+        ? resolveResponsiveProp(alignContent, (value) => `align-content: ${value};`)
+        : ''}
+    ${gap
+        ? resolveResponsiveProp(gap, (value) => `gap: ${resolveSpacing(value)};`)
+        : ''}
+    ${columnGap
+        ? resolveResponsiveProp(columnGap, (value) => `column-gap: ${resolveSpacing(value)};`)
+        : ''}
+    ${rowGap
+        ? resolveResponsiveProp(rowGap, (value) => `row-gap: ${resolveSpacing(value)};`)
+        : ''}
   `;
 };
 //# sourceMappingURL=flex.js.map

package/dist/utils/flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/utils/flex.tsx"],"names":[],"mappings":"AAwBA,MAAM,CAAC,MAAM,IAAI,GAAW,CAAC,KAAgB,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,UAAU,EACV,YAAY,GACb,GAAG,KAAK,CAAA;IAET,OAAO;MACH,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;MAC5B,SAAS,CAAC,CAAC,CAAC,mBAAmB,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE;MAChD,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MACjC,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MACjC,cAAc,CAAC,CAAC,CAAC,oBAAoB,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE;MAC3D,UAAU,CAAC,CAAC,CAAC,gBAAgB,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,YAAY,CAAC,CAAC,CAAC,kBAAkB,YAAY,GAAG,CAAC,CAAC,CAAC,EAAE;GACxD,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/utils/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAkB,MAAM,kBAAkB,CAAA;AACxE,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAA;AAoCrD,MAAM,CAAC,MAAM,IAAI,GAAW,CAAC,KAAgB,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,GAAG,EACH,SAAS,EACT,MAAM,GACP,GAAG,KAAK,CAAA;IAET,OAAO;MACH,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;MAE5B,SAAS;QACP,CAAC,CAAC,qBAAqB,CACnB,SAAS,EACT,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,KAAK,GAAG,CACvC;QACH,CAAC,CAAC,EACN;MACE,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MACjC,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MAEjC,cAAc;QACZ,CAAC,CAAC,qBAAqB,CACnB,cAAc,EACd,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB,KAAK,GAAG,CACxC;QACH,CAAC,CAAC,EACN;MAEE,UAAU;QACR,CAAC,CAAC,qBAAqB,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,KAAK,GAAG,CAAC;QACxE,CAAC,CAAC,EACN;MAEE,YAAY;QACV,CAAC,CAAC,qBAAqB,CACnB,YAAY,EACZ,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,KAAK,GAAG,CACtC;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,cAAc,CAAC,KAAK,CAAC,GAAG,CAC5C;QACH,CAAC,CAAC,EACN;MAEE,SAAS;QACP,CAAC,CAAC,qBAAqB,CACnB,SAAS,EACT,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,cAAc,CAAC,KAAK,CAAC,GAAG,CACnD;QACH,CAAC,CAAC,EACN;MAEE,MAAM;QACJ,CAAC,CAAC,qBAAqB,CACnB,MAAM,EACN,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,cAAc,CAAC,KAAK,CAAC,GAAG,CAChD;QACH,CAAC,CAAC,EACN;GACD,CAAA;AACH,CAAC,CAAA"}

package/dist/utils/responsiveProp.d.ts

@@ -0,0 +1,12 @@
+declare const breakpointToMinPxMapping: {
+    small: number;
+    medium: number;
+    large: number;
+};
+type Breakpoint = keyof typeof breakpointToMinPxMapping;
+type PropByBreakpoint<PropValue> = {
+    [key in Breakpoint]?: PropValue;
+};
+export type ResponsiveProp<PropValue> = PropValue | PropByBreakpoint<PropValue>;
+export declare const resolveResponsiveProp: <PropValue>(value: ResponsiveProp<PropValue>, styleTemplate: (value: PropValue) => string) => string;
+export {};

package/dist/utils/responsiveProp.js

@@ -0,0 +1,31 @@
+const breakpointToMinPxMapping = {
+    small: 0,
+    medium: 768,
+    large: 1024,
+};
+const breakpointList = Object.keys(breakpointToMinPxMapping);
+const isPropByBreakpoint = (value) => {
+    return (typeof value === 'object' &&
+        value !== null &&
+        breakpointList.includes(Object.keys(value)[0]));
+};
+export const resolveResponsiveProp = (value, styleTemplate) => {
+    if (!isPropByBreakpoint(value)) {
+        return `
+      @media (min-width: ${breakpointToMinPxMapping.small}px) {
+        ${styleTemplate(value)}
+      }
+    `;
+    }
+    const breakpointUsed = Object.keys(value);
+    let style = '';
+    breakpointUsed.forEach((breakpoint) => {
+        style += `
+        @media (min-width: ${breakpointToMinPxMapping[breakpoint]}px) {
+          ${styleTemplate(value[breakpoint])}
+        }
+      `;
+    });
+    return style;
+};
+//# sourceMappingURL=responsiveProp.js.map

package/dist/utils/responsiveProp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveProp.js","sourceRoot":"","sources":["../../src/utils/responsiveProp.ts"],"names":[],"mappings":"AAAA,MAAM,wBAAwB,GAAG;IAC/B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,IAAI;CACqB,CAAA;AAGlC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,wBAAwB,CAAiB,CAAA;AAK5E,MAAM,kBAAkB,GAAG,CACzB,KAAgC,EACM,EAAE;IACxC,OAAO,CACL,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAQ,CAAC,CACtD,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,KAAgC,EAChC,aAA2C,EAC3C,EAAE;IACF,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;QAC9B,OAAO;2BACgB,wBAAwB,CAAC,KAAK;UAC/C,aAAa,CAAC,KAAK,CAAC;;KAEzB,CAAA;KACF;IAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAiB,CAAA;IAEzD,IAAI,KAAK,GAAG,EAAE,CAAA;IACd,cAAc,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;QACpC,KAAK,IAAI;6BACgB,wBAAwB,CAAC,UAAU,CAAC;YACrD,aAAa,CAAC,KAAK,CAAC,UAAU,CAAE,CAAC;;OAEtC,CAAA;IACL,CAAC,CAAC,CAAA;IAEF,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/utils/space.d.ts

@@ -1,24 +1,26 @@
+import { ResponsiveProp } from './responsiveProp';
 type Spacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px';
-type SpacingProp = '0' | Spacing | {
+export type SpacingProp = '0' | Spacing | {
     custom: number | string;
 };
+export declare const resolveSpacing: (value: SpacingProp | 'auto') => string;
 export interface MarginProps {
-    m?: SpacingProp;
-    mx?: SpacingProp | 'auto';
-    my?: SpacingProp;
-    ml?: SpacingProp;
-    mr?: SpacingProp;
-    mt?: SpacingProp;
-    mb?: SpacingProp;
+    m?: ResponsiveProp<SpacingProp>;
+    mx?: ResponsiveProp<SpacingProp | 'auto'>;
+    my?: ResponsiveProp<SpacingProp>;
+    ml?: ResponsiveProp<SpacingProp>;
+    mr?: ResponsiveProp<SpacingProp>;
+    mt?: ResponsiveProp<SpacingProp>;
+    mb?: ResponsiveProp<SpacingProp>;
 }
 export interface PaddingProps {
-    p?: SpacingProp;
-    px?: SpacingProp;
-    py?: SpacingProp;
-    pl?: SpacingProp;
-    pr?: SpacingProp;
-    pt?: SpacingProp;
-    pb?: SpacingProp;
+    p?: ResponsiveProp<SpacingProp>;
+    px?: ResponsiveProp<SpacingProp>;
+    py?: ResponsiveProp<SpacingProp>;
+    pl?: ResponsiveProp<SpacingProp>;
+    pr?: ResponsiveProp<SpacingProp>;
+    pt?: ResponsiveProp<SpacingProp>;
+    pb?: ResponsiveProp<SpacingProp>;
 }
 export declare const margin: (props: MarginProps) => string;
 export declare const padding: (props: PaddingProps) => string;

package/dist/utils/space.js

@@ -1,4 +1,5 @@
-const resolveSpacing = (value) => {
+import { resolveResponsiveProp } from './responsiveProp';
+export const resolveSpacing = (value) => {
     if (typeof value === 'string') {
         return value;
     }
@@ -10,45 +11,65 @@ const resolveSpacing = (value) => {
 export const margin = (props) => {
     const { m, mx, my, ml, mr, mt, mb } = props;
     return `
-    ${m ? `margin: ${resolveSpacing(m)};` : ''}
+    ${m
+        ? resolveResponsiveProp(m, (value) => `margin: ${resolveSpacing(value)};`)
+        : ''}
     ${mx
-        ? `
-      margin-left: ${resolveSpacing(mx)};
-      margin-right: ${resolveSpacing(mx)};
-    `
+        ? resolveResponsiveProp(mx, (value) => `
+        margin-left: ${resolveSpacing(value)};
+        margin-right: ${resolveSpacing(value)};
+      `)
         : ''}
     ${my
-        ? `
-      margin-top: ${resolveSpacing(my)};
-      margin-bottom: ${resolveSpacing(my)};
-    `
-        : ''}
-    ${ml ? `margin-left: ${resolveSpacing(ml)};` : ''}
-    ${mr ? `margin-right: ${resolveSpacing(mr)};` : ''}
-    ${mt ? `margin-top: ${resolveSpacing(mt)};` : ''}
-    ${mb ? `margin-bottom: ${resolveSpacing(mb)};` : ''}
+        ? resolveResponsiveProp(my, (value) => `
+        margin-top: ${resolveSpacing(value)};
+        margin-bottom: ${resolveSpacing(value)};
+      `)
+        : ''}
+    ${ml
+        ? resolveResponsiveProp(ml, (value) => `margin-left: ${resolveSpacing(value)};`)
+        : ''}
+    ${mr
+        ? resolveResponsiveProp(mr, (value) => `margin-right: ${resolveSpacing(value)};`)
+        : ''}
+    ${mt
+        ? resolveResponsiveProp(mt, (value) => `margin-top: ${resolveSpacing(value)};`)
+        : ''}
+    ${mb
+        ? resolveResponsiveProp(mb, (value) => `margin-bottom: ${resolveSpacing(value)};`)
+        : ''}
   `;
 };
 export const padding = (props) => {
     const { p, px, py, pl, pr, pt, pb } = props;
     return `
-    ${p ? `padding: ${resolveSpacing(p)};` : ''}
+    ${p
+        ? resolveResponsiveProp(p, (value) => `padding: ${resolveSpacing(value)};`)
+        : ''}
     ${px
-        ? `
-      padding-left: ${resolveSpacing(px)};
-      padding-right: ${resolveSpacing(px)};
-    `
+        ? resolveResponsiveProp(px, (value) => `
+        padding-left: ${resolveSpacing(value)};
+        padding-right: ${resolveSpacing(value)};
+      `)
         : ''}
     ${py
-        ? `
-      padding-top: ${resolveSpacing(py)};
-      padding-bottom: ${resolveSpacing(py)};
-    `
-        : ''}
-    ${pl ? `padding-left: ${resolveSpacing(pl)};` : ''}
-    ${pr ? `padding-right: ${resolveSpacing(pr)};` : ''}
-    ${pt ? `padding-top: ${resolveSpacing(pt)};` : ''}
-    ${pb ? `padding-bottom: ${resolveSpacing(pb)};` : ''}
+        ? resolveResponsiveProp(py, (value) => `
+        padding-top: ${resolveSpacing(value)};
+        padding-bottom: ${resolveSpacing(value)};
+      `)
+        : ''}
+    ${pl
+        ? resolveResponsiveProp(pl, (value) => `padding-left: ${resolveSpacing(value)};`)
+        : ''}
+    ${pr
+        ? resolveResponsiveProp(pr, (value) => `padding-right: ${resolveSpacing(value)};`)
+        : ''}
+    ${pt
+        ? resolveResponsiveProp(pt, (value) => `padding-top: ${resolveSpacing(value)};`)
+        : ''}
+    ${pb
+        ? resolveResponsiveProp(pb, (value) => `padding-bottom: ${resolveSpacing(value)};`)
+        : ''}
   `;
 };
 //# sourceMappingURL=space.js.map

package/dist/utils/space.js.map

@@ -1 +1 @@
-{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"AAIA,MAAM,cAAc,GAAG,CAAC,KAA2B,EAAE,EAAE;IACrD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAA;KACb;IAED,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE;QACpC,OAAO,KAAK,CAAC,MAAM,CAAA;KACpB;IAED,OAAO,GAAG,KAAK,CAAC,MAAM,IAAI,CAAA;AAC5B,CAAC,CAAA;AAsBD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAU,EAAE;IACnD,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAA;IAE3C,OAAO;MACH,CAAC,CAAC,CAAC,CAAC,WAAW,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAExC,EAAE;QACA,CAAC,CAAC;qBACW,cAAc,CAAC,EAAE,CAAC;sBACjB,cAAc,CAAC,EAAE,CAAC;KACnC;QACG,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC;oBACU,cAAc,CAAC,EAAE,CAAC;uBACf,cAAc,CAAC,EAAE,CAAC;KACpC;QACG,CAAC,CAAC,EACN;MACE,EAAE,CAAC,CAAC,CAAC,gBAAgB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,EAAE,CAAC,CAAC,CAAC,iBAAiB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAChD,EAAE,CAAC,CAAC,CAAC,eAAe,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAC9C,EAAE,CAAC,CAAC,CAAC,kBAAkB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;GACpD,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAU,EAAE;IACrD,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAA;IAE3C,OAAO;MACH,CAAC,CAAC,CAAC,CAAC,YAAY,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAEzC,EAAE;QACA,CAAC,CAAC;sBACY,cAAc,CAAC,EAAE,CAAC;uBACjB,cAAc,CAAC,EAAE,CAAC;KACpC;QACG,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC;qBACW,cAAc,CAAC,EAAE,CAAC;wBACf,cAAc,CAAC,EAAE,CAAC;KACrC;QACG,CAAC,CAAC,EACN;MACE,EAAE,CAAC,CAAC,CAAC,iBAAiB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAChD,EAAE,CAAC,CAAC,CAAC,kBAAkB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MACjD,EAAE,CAAC,CAAC,CAAC,gBAAgB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,EAAE,CAAC,CAAC,CAAC,mBAAmB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;GACrD,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "2.12.6",
+  "version": "2.13.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [

package/dist/Dropdown/__tests__/Dropdown.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Dropdown/__tests__/Dropdown.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import 'jest-styled-components';
-import { Dropdown } from '../Dropdown';
-const days = [
-    {
-        label: 'Monday',
-        value: 'MONDAY',
-    },
-    {
-        label: 'Tuesday',
-        value: 'TUESDAY',
-    },
-    {
-        label: 'Wednesday',
-        value: 'WEDNESDAY',
-    },
-    {
-        label: 'Thursday',
-        value: 'THURSDAY',
-    },
-    {
-        label: 'Friday',
-        value: 'FRIDAY',
-    },
-    {
-        label: 'Saturday',
-        value: 'SATURDAY',
-    },
-    {
-        label: 'Sunday',
-        value: 'SUNDAY',
-    },
-];
-const daysWithGroups = [
-    {
-        label: 'Monday',
-        value: 'MONDAY',
-        optionGroupLabel: 'Weekday',
-    },
-    {
-        label: 'Tuesday',
-        value: 'TUESDAY',
-        optionGroupLabel: 'Weekday',
-    },
-    {
-        label: 'Wednesday',
-        value: 'WEDNESDAY',
-        optionGroupLabel: 'Weekday',
-    },
-    {
-        label: 'Thursday',
-        value: 'THURSDAY',
-        optionGroupLabel: 'Weekday',
-    },
-    {
-        label: 'Friday',
-        value: 'FRIDAY',
-        optionGroupLabel: 'Weekday',
-    },
-    {
-        label: 'Saturday',
-        value: 'SATURDAY',
-        optionGroupLabel: 'Weekend',
-    },
-    {
-        label: 'Sunday',
-        value: 'SUNDAY',
-        optionGroupLabel: 'Weekend',
-    },
-];
-test('rendersDropdown', () => {
-    const { container } = render(React.createElement(Dropdown, { list: days }));
-    expect(container.firstChild).toMatchSnapshot();
-});
-test('rendersDropdownWithGroups', () => {
-    const { container } = render(React.createElement(Dropdown, { list: daysWithGroups }));
-    expect(container.firstChild).toMatchSnapshot();
-});
-//# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown/__tests__/Dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/Dropdown/__tests__/Dropdown.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,IAAI,GAAG;IACX;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,cAAc,GAAG;IACrB;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;QAClB,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;QACjB,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;QACjB,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,SAAS;KAC5B;CACF,CAAA;AAED,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC3B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAA;IAEtD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA;AAEF,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,QAAQ,IAAC,IAAI,EAAE,cAAc,GAAI,CAAC,CAAA;IAEhE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}