@toptal/picasso-provider 3.3.1 → 3.4.0

package/Picasso/PicassoProvider.js

@@ -1,6 +1,6 @@
 import { createTheme } from '@material-ui/core/styles';
 import { deepmerge } from '@material-ui/utils';
-import { palette, layout, breakpoints, screens, transitions, typography, sizes, shadows, } from './config';
+import { palette, layout, breakpoints, screens, transitions, typography, sizes, shadows, spacings, } from './config';
 const picasso = {
     palette,
     layout,
@@ -27,6 +27,7 @@ const picasso = {
             notched: false,
         },
     },
+    spacings,
 };
 class Provider {
     constructor(theme) {

package/Picasso/PicassoProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PicassoProvider.js","sourceRoot":"","sources":["../../src/Picasso/PicassoProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C,OAAO,EACL,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,EACP,WAAW,EACX,UAAU,EACV,KAAK,EACL,OAAO,GACR,MAAM,UAAU,CAAA;AAEjB,MAAM,OAAO,GAAiB;IAC5B,OAAO;IACP,MAAM;IACN,WAAW;IACX,KAAK;IACL,WAAW;IACX,OAAO;IACP,OAAO;IACP,UAAU;IACV,MAAM,EAAE;QACN,OAAO,EAAE,IAAI;KACd;IACD,KAAK,EAAE;QACL,aAAa,EAAE;YACb,aAAa,EAAE,IAAI;SACpB;QACD,OAAO,EAAE;YACP,cAAc,EAAE,IAAI;SACrB;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,IAAI;SACb;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE,KAAK;SACf;KACF;CACF,CAAA;AAED,MAAM,QAAQ;IAGZ,YAAY,KAAY;QACtB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACpB,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,OAAO,CAAA;IAC7C,CAAC;IAED,QAAQ,CAAC,WAAiD;QACxD,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAE3C,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAA;IACxC,CAAC;IAED,oBAAoB,CAAC,WAA+B;QAClD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE,CAAA;QAE5C,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;QAErC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;IAClC,CAAC;IAED,WAAW,CAAC,KAAmB;QAC7B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAC3C,CAAC;CACF;AAED,MAAM,eAAe,GAAG,IAAI,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA;AAE1D,eAAe,eAAe,CAAA"}
+{"version":3,"file":"PicassoProvider.js","sourceRoot":"","sources":["../../src/Picasso/PicassoProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C,OAAO,EACL,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,EACP,WAAW,EACX,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,GACT,MAAM,UAAU,CAAA;AAEjB,MAAM,OAAO,GAAiB;IAC5B,OAAO;IACP,MAAM;IACN,WAAW;IACX,KAAK;IACL,WAAW;IACX,OAAO;IACP,OAAO;IACP,UAAU;IACV,MAAM,EAAE;QACN,OAAO,EAAE,IAAI;KACd;IACD,KAAK,EAAE;QACL,aAAa,EAAE;YACb,aAAa,EAAE,IAAI;SACpB;QACD,OAAO,EAAE;YACP,cAAc,EAAE,IAAI;SACrB;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,IAAI;SACb;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE,KAAK;SACf;KACF;IACD,QAAQ;CACT,CAAA;AAED,MAAM,QAAQ;IAGZ,YAAY,KAAY;QACtB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACpB,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,OAAO,CAAA;IAC7C,CAAC;IAED,QAAQ,CAAC,WAAiD;QACxD,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAE3C,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAA;IACxC,CAAC;IAED,oBAAoB,CAAC,WAA+B;QAClD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE,CAAA;QAE5C,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;QAErC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;IAClC,CAAC;IAED,WAAW,CAAC,KAAmB;QAC7B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAC3C,CAAC;CACF;AAED,MAAM,eAAe,GAAG,IAAI,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA;AAE1D,eAAe,eAAe,CAAA"}

package/Picasso/config/index.d.ts

@@ -6,3 +6,5 @@ export { default as sizes } from './sizes';
 export { default as breakpoints, PicassoBreakpoints, screens, isScreenSize, breakpointsList, useScreenSize, useBreakpoint, useScreens, BreakpointKeys, } from './breakpoints';
 export { default as layout } from './layout';
 export { default as shadows } from './shadows';
+export { default as spacings, SpacingEnum, isResponsiveSpacing, isPicassoSpacing, } from './spacings';
+export type { Sizes, SizeType, SpacingType, ResponsiveSpacingType, DeprecatedSpacingType, PicassoSpacing, } from './spacings';

package/Picasso/config/index.js

@@ -6,4 +6,5 @@ export { default as sizes } from './sizes';
 export { default as breakpoints, PicassoBreakpoints, screens, isScreenSize, breakpointsList, useScreenSize, useBreakpoint, useScreens, } from './breakpoints';
 export { default as layout } from './layout';
 export { default as shadows } from './shadows';
+export { default as spacings, SpacingEnum, isResponsiveSpacing, isPicassoSpacing, } from './spacings';
 //# sourceMappingURL=index.js.map

package/Picasso/config/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Picasso/config/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,eAAe,EACf,aAAa,EACb,aAAa,EACb,UAAU,GAEX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Picasso/config/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,eAAe,EACf,aAAa,EACb,aAAa,EACb,UAAU,GAEX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,WAAW,EACX,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,YAAY,CAAA"}

package/Picasso/config/spacings.d.ts

@@ -0,0 +1,39 @@
+import type { BreakpointKeys } from './breakpoints';
+declare type PicassoSpacingValues = 0 | 0.25 | 0.5 | 0.75 | 1 | 1.5 | 2 | 2.5 | 3;
+export declare type Sizes = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export declare type SizeType<T extends Sizes> = T;
+/** @deprecated **/
+export declare type DeprecatedSpacingType = number | SizeType<'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>;
+export declare type ResponsiveSpacingType = {
+    [key in BreakpointKeys]?: PicassoSpacing;
+};
+export declare type SpacingType = PicassoSpacing | DeprecatedSpacingType | ResponsiveSpacingType;
+export declare enum SpacingEnum {
+    xsmall = 0.5,
+    small = 1,
+    medium = 1.5,
+    large = 2,
+    xlarge = 2.5
+}
+declare class PicassoSpacing {
+    #private;
+    private constructor();
+    static create(value: PicassoSpacingValues, index: number): PicassoSpacing;
+    indexOf(): number;
+    valueOf(): PicassoSpacingValues;
+    toString(): string;
+}
+export type { PicassoSpacing };
+export declare const isPicassoSpacing: (spacing: SpacingType) => spacing is PicassoSpacing;
+export declare const isResponsiveSpacing: (spacing: SpacingType) => spacing is ResponsiveSpacingType;
+export declare const SPACING_0: PicassoSpacing;
+export declare const SPACING_1: PicassoSpacing;
+export declare const SPACING_2: PicassoSpacing;
+export declare const SPACING_3: PicassoSpacing;
+export declare const SPACING_4: PicassoSpacing;
+export declare const SPACING_6: PicassoSpacing;
+export declare const SPACING_8: PicassoSpacing;
+export declare const SPACING_10: PicassoSpacing;
+export declare const SPACING_12: PicassoSpacing;
+declare const _default: Record<string, PicassoSpacing>;
+export default _default;

package/Picasso/config/spacings.js

@@ -0,0 +1,64 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _PicassoSpacing_value, _PicassoSpacing_index;
+export var SpacingEnum;
+(function (SpacingEnum) {
+    SpacingEnum[SpacingEnum["xsmall"] = 0.5] = "xsmall";
+    SpacingEnum[SpacingEnum["small"] = 1] = "small";
+    SpacingEnum[SpacingEnum["medium"] = 1.5] = "medium";
+    SpacingEnum[SpacingEnum["large"] = 2] = "large";
+    SpacingEnum[SpacingEnum["xlarge"] = 2.5] = "xlarge";
+})(SpacingEnum || (SpacingEnum = {}));
+class PicassoSpacing {
+    constructor(value, index) {
+        _PicassoSpacing_value.set(this, void 0);
+        _PicassoSpacing_index.set(this, void 0);
+        __classPrivateFieldSet(this, _PicassoSpacing_value, value, "f");
+        __classPrivateFieldSet(this, _PicassoSpacing_index, index, "f");
+    }
+    static create(value, index) {
+        return new PicassoSpacing(value, index);
+    }
+    indexOf() {
+        return __classPrivateFieldGet(this, _PicassoSpacing_index, "f");
+    }
+    valueOf() {
+        return __classPrivateFieldGet(this, _PicassoSpacing_value, "f");
+    }
+    toString() {
+        return __classPrivateFieldGet(this, _PicassoSpacing_value, "f").toString();
+    }
+}
+_PicassoSpacing_value = new WeakMap(), _PicassoSpacing_index = new WeakMap();
+export const isPicassoSpacing = (spacing) => spacing instanceof PicassoSpacing;
+export const isResponsiveSpacing = (spacing) => typeof spacing == 'object' && !isPicassoSpacing(spacing);
+export const SPACING_0 = PicassoSpacing.create(0, 0);
+export const SPACING_1 = PicassoSpacing.create(0.25, 1);
+export const SPACING_2 = PicassoSpacing.create(0.5, 2);
+export const SPACING_3 = PicassoSpacing.create(0.75, 3);
+export const SPACING_4 = PicassoSpacing.create(1, 4);
+export const SPACING_6 = PicassoSpacing.create(1.5, 6);
+export const SPACING_8 = PicassoSpacing.create(2, 8);
+export const SPACING_10 = PicassoSpacing.create(2.5, 10);
+export const SPACING_12 = PicassoSpacing.create(3, 12);
+export default {
+    SPACING_0,
+    SPACING_1,
+    SPACING_2,
+    SPACING_3,
+    SPACING_4,
+    SPACING_6,
+    SPACING_8,
+    SPACING_10,
+    SPACING_12,
+};
+//# sourceMappingURL=spacings.js.map

package/Picasso/config/spacings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacings.js","sourceRoot":"","sources":["../../../src/Picasso/config/spacings.ts"],"names":[],"mappings":";;;;;;;;;;;;AA4BA,MAAM,CAAN,IAAY,WAMX;AAND,WAAY,WAAW;IACrB,mDAAY,CAAA;IACZ,+CAAS,CAAA;IACT,mDAAY,CAAA;IACZ,+CAAS,CAAA;IACT,mDAAY,CAAA;AACd,CAAC,EANW,WAAW,KAAX,WAAW,QAMtB;AAED,MAAM,cAAc;IAIlB,YAAoB,KAA2B,EAAE,KAAa;QAH9D,wCAA4B;QAC5B,wCAAc;QAGZ,uBAAA,IAAI,yBAAU,KAAK,MAAA,CAAA;QACnB,uBAAA,IAAI,yBAAU,KAAK,MAAA,CAAA;IACrB,CAAC;IAED,MAAM,CAAC,MAAM,CAAC,KAA2B,EAAE,KAAa;QACtD,OAAO,IAAI,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IACzC,CAAC;IAED,OAAO;QACL,OAAO,uBAAA,IAAI,6BAAO,CAAA;IACpB,CAAC;IAED,OAAO;QACL,OAAO,uBAAA,IAAI,6BAAO,CAAA;IACpB,CAAC;IAED,QAAQ;QACN,OAAO,uBAAA,IAAI,6BAAO,CAAC,QAAQ,EAAE,CAAA;IAC/B,CAAC;CACF;;AAID,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,OAAoB,EACO,EAAE,CAAC,OAAO,YAAY,cAAc,CAAA;AAEjE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,OAAoB,EACc,EAAE,CACpC,OAAO,OAAO,IAAI,QAAQ,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;AAE1D,MAAM,CAAC,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACpD,MAAM,CAAC,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AACvD,MAAM,CAAC,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;AACtD,MAAM,CAAC,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AACvD,MAAM,CAAC,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACpD,MAAM,CAAC,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;AACtD,MAAM,CAAC,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACpD,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;AACxD,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;AAEtD,eAAe;IACb,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,UAAU;IACV,UAAU;CACuB,CAAA"}

package/Picasso/config/theme.d.ts

@@ -1,11 +1,20 @@
 import type { BreakpointKeys } from './breakpoints';
 import type { Layout } from './layout';
 import type { Sizes } from './sizes';
+import type spacings from './spacings';
+import type { PicassoSpacing } from './spacings';
 declare module '@material-ui/core/styles' {
     interface Theme {
         layout: Layout;
         sizes: Sizes;
         screens: (...sizes: BreakpointKeys[]) => string;
+        spacings: Record<keyof typeof spacings, PicassoSpacing>;
+    }
+    interface ThemeOptions {
+        layout?: Layout;
+        sizes?: Sizes;
+        screens?: (...sizes: BreakpointKeys[]) => string;
+        spacings?: Record<keyof typeof spacings, PicassoSpacing>;
     }
     interface ThemeOptions {
         layout?: Layout;

package/Picasso/utils/index.d.ts

@@ -1,2 +1,4 @@
 export * from './generate-random-string';
 export * from './get-serverside-stylesheets';
+export * from './spacings';
+export * from './responsive-styles';

package/Picasso/utils/index.js

@@ -1,3 +1,5 @@
 export * from './generate-random-string';
 export * from './get-serverside-stylesheets';
+export * from './spacings';
+export * from './responsive-styles';
 //# sourceMappingURL=index.js.map

package/Picasso/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Picasso/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Picasso/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,YAAY,CAAA;AAC1B,cAAc,qBAAqB,CAAA"}

package/Picasso/utils/responsive-styles/create-jss-variable-class-names.d.ts

@@ -0,0 +1,19 @@
+import type { BreakpointKeys } from '../../config';
+import type { ResponsiveCssProp } from './types';
+/**
+ * Creates a CSS class for a given breakpoint and CSS property
+ * that sets the value of the CSS property to the value of the CSS variable
+ * for that breakpoint and CSS property.
+ *
+ * Simplified example, for `margin-top` CSS property and `xs` breakpoint:
+ * ```css
+ * .xs--margin-top {
+ *    margin-top: var(--picasso-responsive--xs--margin-top);
+ * }
+ * ```
+ */
+export declare const createJssVariableClassNames: (breakpoint: BreakpointKeys, cssProp: ResponsiveCssProp) => {
+    [x: string]: {
+        [x: string]: string;
+    };
+};

package/Picasso/utils/responsive-styles/create-jss-variable-class-names.js

@@ -0,0 +1,24 @@
+import { toClassName } from './to-class-name';
+import { toCssVariableName } from './to-css-variable-name';
+/**
+ * Creates a CSS class for a given breakpoint and CSS property
+ * that sets the value of the CSS property to the value of the CSS variable
+ * for that breakpoint and CSS property.
+ *
+ * Simplified example, for `margin-top` CSS property and `xs` breakpoint:
+ * ```css
+ * .xs--margin-top {
+ *    margin-top: var(--picasso-responsive--xs--margin-top);
+ * }
+ * ```
+ */
+export const createJssVariableClassNames = (breakpoint, cssProp) => {
+    const className = toClassName(breakpoint, cssProp);
+    const variable = `var(${toCssVariableName(breakpoint, cssProp)})`;
+    return {
+        [className]: {
+            [cssProp]: variable,
+        },
+    };
+};
+//# sourceMappingURL=create-jss-variable-class-names.js.map

package/Picasso/utils/responsive-styles/create-jss-variable-class-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-jss-variable-class-names.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/create-jss-variable-class-names.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG1D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,UAA0B,EAC1B,OAA0B,EAC1B,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;IAClD,MAAM,QAAQ,GAAG,OAAO,iBAAiB,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAA;IAEjE,OAAO;QACL,CAAC,SAAS,CAAC,EAAE;YACX,CAAC,OAAO,CAAC,EAAE,QAAQ;SACpB;KACF,CAAA;AACH,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.d.ts

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

package/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.js

@@ -0,0 +1,14 @@
+import { createJssVariableClassNames } from './create-jss-variable-class-names';
+describe('createJssVariableClassNames', () => {
+    it('returns an object with the correct class name and CSS property', () => {
+        const breakpoint = 'md';
+        const cssProp = 'padding';
+        const expectedClassName = 'md--padding';
+        const expectedVariable = 'var(--picasso-responsive--md--padding)';
+        const result = createJssVariableClassNames(breakpoint, cssProp);
+        expect(Object.keys(result)).toHaveLength(1);
+        expect(result[expectedClassName]).toBeDefined();
+        expect(result[expectedClassName][cssProp]).toEqual(expectedVariable);
+    });
+});
+//# sourceMappingURL=create-jss-variable-class-names.test.js.map

package/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-jss-variable-class-names.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAA;AAE/E,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC3C,EAAE,CAAC,gEAAgE,EAAE,GAAG,EAAE;QACxE,MAAM,UAAU,GAAG,IAAI,CAAA;QACvB,MAAM,OAAO,GAAG,SAAS,CAAA;QAEzB,MAAM,iBAAiB,GAAG,aAAa,CAAA;QACvC,MAAM,gBAAgB,GAAG,wCAAwC,CAAA;QAEjE,MAAM,MAAM,GAAG,2BAA2B,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;QAE/D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QAC3C,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,EAAE,CAAA;QAC/C,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;IACtE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/create-media-queries.d.ts

@@ -0,0 +1,17 @@
+import type { Theme } from '@material-ui/core/styles';
+import type { ResponsiveCssProp } from './types';
+/**
+ * Creates a CSS class for *every* breakpoint and a given CSS property
+ * containing a media query for that breakpoint and sets the value of the CSS property
+ * to the value of the CSS variable for that breakpoint and CSS property.
+ *
+ * Simplified example, for `margin-top` CSS property and `xs` breakpoint:
+ * ```css
+ * @media (min-width: 0px) {
+ *   .xs--margin-top {
+ *     margin-top: var(--picasso-responsive--xs--margin-top);
+ *   }
+ * }
+ * ```
+ */
+export declare const createMediaQueries: (cssProp: ResponsiveCssProp, theme: Theme) => Record<string, {}>;

package/Picasso/utils/responsive-styles/create-media-queries.js

@@ -0,0 +1,24 @@
+import { createJssVariableClassNames } from './create-jss-variable-class-names';
+/**
+ * Creates a CSS class for *every* breakpoint and a given CSS property
+ * containing a media query for that breakpoint and sets the value of the CSS property
+ * to the value of the CSS variable for that breakpoint and CSS property.
+ *
+ * Simplified example, for `margin-top` CSS property and `xs` breakpoint:
+ * ```css
+ * @media (min-width: 0px) {
+ *   .xs--margin-top {
+ *     margin-top: var(--picasso-responsive--xs--margin-top);
+ *   }
+ * }
+ * ```
+ */
+export const createMediaQueries = (cssProp, theme) => {
+    const mediaQueries = {};
+    for (const breakpoint of [...theme.breakpoints.keys].reverse()) {
+        mediaQueries[theme.breakpoints.up(breakpoint)] =
+            createJssVariableClassNames(breakpoint, cssProp);
+    }
+    return mediaQueries;
+};
+//# sourceMappingURL=create-media-queries.js.map

package/Picasso/utils/responsive-styles/create-media-queries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-media-queries.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/create-media-queries.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAA;AAG/E;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,OAA0B,EAC1B,KAAY,EACZ,EAAE;IACF,MAAM,YAAY,GAAuB,EAAE,CAAA;IAE3C,KAAK,MAAM,UAAU,IAAI,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;QAC9D,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;YAC5C,2BAA2B,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;KACnD;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/create-media-queries.test.d.ts

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

package/Picasso/utils/responsive-styles/create-media-queries.test.js

@@ -0,0 +1,27 @@
+import { createMediaQueries } from './create-media-queries';
+describe('createMediaQueries', () => {
+    it('returns media queries with the correct class names and CSS properties', () => {
+        const cssProp = 'padding';
+        const theme = {
+            breakpoints: {
+                keys: ['sm', 'md'],
+                up: (breakpoint) => `@media (min-width: ${breakpoint})`,
+            },
+        };
+        const expectedMediaQueries = {
+            '@media (min-width: md)': {
+                'md--padding': {
+                    padding: 'var(--picasso-responsive--md--padding)',
+                },
+            },
+            '@media (min-width: sm)': {
+                'sm--padding': {
+                    padding: 'var(--picasso-responsive--sm--padding)',
+                },
+            },
+        };
+        const result = createMediaQueries(cssProp, theme);
+        expect(result).toEqual(expectedMediaQueries);
+    });
+});
+//# sourceMappingURL=create-media-queries.test.js.map

package/Picasso/utils/responsive-styles/create-media-queries.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-media-queries.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/create-media-queries.test.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,uEAAuE,EAAE,GAAG,EAAE;QAC/E,MAAM,OAAO,GAAG,SAAS,CAAA;QACzB,MAAM,KAAK,GAAG;YACZ,WAAW,EAAE;gBACX,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;gBAClB,EAAE,EAAE,CAAC,UAAkB,EAAE,EAAE,CAAC,sBAAsB,UAAU,GAAG;aAChE;SACF,CAAA;QAED,MAAM,oBAAoB,GAAG;YAC3B,wBAAwB,EAAE;gBACxB,aAAa,EAAE;oBACb,OAAO,EAAE,wCAAwC;iBAClD;aACF;YACD,wBAAwB,EAAE;gBACxB,aAAa,EAAE;oBACb,OAAO,EAAE,wCAAwC;iBAClD;aACF;SACF,CAAA;QAED,MAAM,MAAM,GAAG,kBAAkB,CAAC,OAAO,EAAE,KAAc,CAAC,CAAA;QAE1D,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/create-variable-values-jss.d.ts

@@ -0,0 +1,7 @@
+import type { ResponsiveSpacingType } from '../../config';
+import type { ResponsiveCssProp } from './types';
+/**
+ * Creates a CSS class setting the picasso responsive CSS variable of the given CSS property
+ * for all breakpoints on the responsive spacing value
+ */
+export declare const createVariableValuesJss: (spacing: ResponsiveSpacingType, prop: ResponsiveCssProp) => Record<string, string>;

package/Picasso/utils/responsive-styles/create-variable-values-jss.js

@@ -0,0 +1,14 @@
+import { spacingToRem } from '../spacings';
+import { toCssVariableName } from './to-css-variable-name';
+/**
+ * Creates a CSS class setting the picasso responsive CSS variable of the given CSS property
+ * for all breakpoints on the responsive spacing value
+ */
+export const createVariableValuesJss = (spacing, prop) => {
+    const styles = {};
+    for (const [brk, value] of Object.entries(spacing)) {
+        styles[toCssVariableName(brk, prop)] = spacingToRem(value);
+    }
+    return styles;
+};
+//# sourceMappingURL=create-variable-values-jss.js.map

package/Picasso/utils/responsive-styles/create-variable-values-jss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-variable-values-jss.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/create-variable-values-jss.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG1D;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EAC9B,IAAuB,EACvB,EAAE;IACF,MAAM,MAAM,GAA2B,EAAE,CAAA;IAEzC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAClD,MAAM,CAAC,iBAAiB,CAAC,GAAqB,EAAE,IAAI,CAAC,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;KAC7E;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/create-variable-values-jss.test.d.ts

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

package/Picasso/utils/responsive-styles/create-variable-values-jss.test.js

@@ -0,0 +1,20 @@
+import { SPACING_2, SPACING_4, SPACING_6 } from '../../config/spacings';
+import { createVariableValuesJss } from './create-variable-values-jss';
+describe('createVariableValuesJss', () => {
+    it('returns an object with the correct variable names and values', () => {
+        const spacing = {
+            sm: SPACING_2,
+            md: SPACING_4,
+            lg: SPACING_6,
+        };
+        const prop = 'margin';
+        const expectedStyles = {
+            '--picasso-responsive--lg--margin': '1.5rem',
+            '--picasso-responsive--md--margin': '1rem',
+            '--picasso-responsive--sm--margin': '0.5rem',
+        };
+        const result = createVariableValuesJss(spacing, prop);
+        expect(result).toEqual(expectedStyles);
+    });
+});
+//# sourceMappingURL=create-variable-values-jss.test.js.map

package/Picasso/utils/responsive-styles/create-variable-values-jss.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-variable-values-jss.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/create-variable-values-jss.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAEtE,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,8DAA8D,EAAE,GAAG,EAAE;QACtE,MAAM,OAAO,GAAG;YACd,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;SACd,CAAA;QAED,MAAM,IAAI,GAAG,QAAQ,CAAA;QAErB,MAAM,cAAc,GAAG;YACrB,kCAAkC,EAAE,QAAQ;YAC5C,kCAAkC,EAAE,MAAM;YAC1C,kCAAkC,EAAE,QAAQ;SAC7C,CAAA;QAED,MAAM,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QAErD,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/default-css-prop.d.ts

@@ -0,0 +1,9 @@
+import type { ResponsiveSpacingType, SpacingType } from '../../config';
+import type { ResponsiveCssProp } from './types';
+/**
+ * Just the default for a value that is not responsive
+ * Just set the prop directly on all media queries
+ */
+export declare const defaultCssProp: (value: Exclude<SpacingType, ResponsiveSpacingType>, prop: ResponsiveCssProp) => {
+    [x: string]: string;
+};

package/Picasso/utils/responsive-styles/default-css-prop.js

@@ -0,0 +1,10 @@
+import { kebabToCamelCase } from '../../../utils';
+import { spacingToRem } from '../spacings';
+/**
+ * Just the default for a value that is not responsive
+ * Just set the prop directly on all media queries
+ */
+export const defaultCssProp = (value, prop) => ({
+    [kebabToCamelCase(prop)]: spacingToRem(value),
+});
+//# sourceMappingURL=default-css-prop.js.map

package/Picasso/utils/responsive-styles/default-css-prop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-css-prop.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/default-css-prop.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGjD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAkD,EAClD,IAAuB,EACvB,EAAE,CAAC,CAAC;IACJ,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC;CAC9C,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/default-css-prop.test.d.ts

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

package/Picasso/utils/responsive-styles/default-css-prop.test.js

@@ -0,0 +1,13 @@
+import { defaultCssProp } from './default-css-prop';
+describe('defaultCssProp', () => {
+    it('returns an object with the kebab-case CSS property converted to camelCase and the value converted to rem format', () => {
+        const value = 8;
+        const prop = 'margin';
+        const expectedStyles = {
+            margin: '8rem',
+        };
+        const result = defaultCssProp(value, prop);
+        expect(result).toEqual(expectedStyles);
+    });
+});
+//# sourceMappingURL=default-css-prop.test.js.map

package/Picasso/utils/responsive-styles/default-css-prop.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-css-prop.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/default-css-prop.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,iHAAiH,EAAE,GAAG,EAAE;QACzH,MAAM,KAAK,GAAG,CAAC,CAAA;QACf,MAAM,IAAI,GAAG,QAAQ,CAAA;QACrB,MAAM,cAAc,GAAG;YACrB,MAAM,EAAE,MAAM;SACf,CAAA;QAED,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QAE1C,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/generate-variable-inline-styles.d.ts

@@ -0,0 +1,2 @@
+import type { ResponsiveCssSpacings } from './types';
+export declare const generateVariableInlineStyles: <K extends string>(props: readonly K[], values: ResponsiveCssSpacings<K>) => Record<string, string>;

package/Picasso/utils/responsive-styles/generate-variable-inline-styles.js

@@ -0,0 +1,16 @@
+import { isResponsiveSpacing } from '../../config';
+import { createVariableValuesJss } from './create-variable-values-jss';
+import { defaultCssProp } from './default-css-prop';
+export const generateVariableInlineStyles = (props, values) => {
+    const styles = {};
+    for (const prop of props) {
+        const value = values[prop];
+        if (value) {
+            Object.assign(styles, isResponsiveSpacing(value)
+                ? createVariableValuesJss(value, prop)
+                : defaultCssProp(value, prop));
+        }
+    }
+    return styles;
+};
+//# sourceMappingURL=generate-variable-inline-styles.js.map

package/Picasso/utils/responsive-styles/generate-variable-inline-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-variable-inline-styles.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/generate-variable-inline-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAGnD,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,KAAmB,EACnB,MAAgC,EAChC,EAAE;IACF,MAAM,MAAM,GAA2B,EAAE,CAAA;IAEzC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;QAE1B,IAAI,KAAK,EAAE;YACT,MAAM,CAAC,MAAM,CACX,MAAM,EACN,mBAAmB,CAAC,KAAK,CAAC;gBACxB,CAAC,CAAC,uBAAuB,CAAC,KAAK,EAAE,IAAI,CAAC;gBACtC,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,CAChC,CAAA;SACF;KACF;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.d.ts

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

package/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.js

@@ -0,0 +1,18 @@
+import { SPACING_4, SPACING_8 } from '../../config/spacings';
+import { generateVariableInlineStyles } from './generate-variable-inline-styles';
+describe('generateVariableInlineStyles', () => {
+    it('returns an object with inline styles based on the provided props and values', () => {
+        const props = ['margin', 'padding'];
+        const values = {
+            margin: SPACING_8,
+            padding: SPACING_4,
+        };
+        const expectedInlineStyles = {
+            margin: '2rem',
+            padding: '1rem',
+        };
+        const result = generateVariableInlineStyles(props, values);
+        expect(result).toEqual(expectedInlineStyles);
+    });
+});
+//# sourceMappingURL=generate-variable-inline-styles.test.js.map

package/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-variable-inline-styles.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAA;AAEhF,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC5C,EAAE,CAAC,6EAA6E,EAAE,GAAG,EAAE;QACrF,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;QACnC,MAAM,MAAM,GAAG;YACb,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;SACnB,CAAA;QACD,MAAM,oBAAoB,GAAG;YAC3B,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;SAChB,CAAA;QAED,MAAM,MAAM,GAAG,4BAA4B,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;QAE1D,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.d.ts

@@ -0,0 +1,7 @@
+import type { ResponsiveCssSpacings } from './types';
+/**
+ * Filter which media queries CSS classes should be applied,
+ * we want to the element to fallback to the previous layer, so we only apply
+ * the media queries that are explicitly set on spacing value
+ */
+export declare const getBreakpointClassNamesToUse: <K extends string>(props: readonly K[], propSizes: ResponsiveCssSpacings<K>) => string[];

package/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.js

@@ -0,0 +1,20 @@
+import { isResponsiveSpacing } from '../../config';
+import { toClassName } from './to-class-name';
+/**
+ * Filter which media queries CSS classes should be applied,
+ * we want to the element to fallback to the previous layer, so we only apply
+ * the media queries that are explicitly set on spacing value
+ */
+export const getBreakpointClassNamesToUse = (props, propSizes) => {
+    const classNames = new Set();
+    for (const prop of props) {
+        const spacing = propSizes[prop];
+        if (spacing && isResponsiveSpacing(spacing)) {
+            Object.keys(spacing)
+                .map(brk => toClassName(brk, prop))
+                .forEach(classNames.add, classNames);
+        }
+    }
+    return [...classNames];
+};
+//# sourceMappingURL=get-breakpoint-class-names-to-use.js.map

package/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-breakpoint-class-names-to-use.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,KAAmB,EACnB,SAAmC,EACnC,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAA;IAEpC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;QAE/B,IAAI,OAAO,IAAI,mBAAmB,CAAC,OAAO,CAAC,EAAE;YAC3C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;iBACjB,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,GAAqB,EAAE,IAAI,CAAC,CAAC;iBACpD,OAAO,CAAC,UAAU,CAAC,GAAG,EAAE,UAAU,CAAC,CAAA;SACvC;KACF;IAED,OAAO,CAAC,GAAG,UAAU,CAAC,CAAA;AACxB,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.d.ts

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

package/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.js

@@ -0,0 +1,18 @@
+import { SPACING_1, SPACING_2, SPACING_4 } from '../../config/spacings';
+import { getBreakpointClassNamesToUse } from './get-breakpoint-class-names-to-use';
+describe('getBreakpointClassNamesToUse', () => {
+    it('returns an array of unique classNames based on the provided props and propSizes', () => {
+        const props = ['margin', 'padding'];
+        const propSizes = {
+            margin: SPACING_1,
+            padding: {
+                sm: SPACING_2,
+                md: SPACING_4,
+            },
+        };
+        const expectedClassNames = ['sm--padding', 'md--padding'];
+        const result = getBreakpointClassNamesToUse(props, propSizes);
+        expect(result).toEqual(expectedClassNames);
+    });
+});
+//# sourceMappingURL=get-breakpoint-class-names-to-use.test.js.map

package/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-breakpoint-class-names-to-use.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACvE,OAAO,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAA;AAElF,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC5C,EAAE,CAAC,iFAAiF,EAAE,GAAG,EAAE;QACzF,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;QACnC,MAAM,SAAS,GAAG;YAChB,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE;gBACP,EAAE,EAAE,SAAS;gBACb,EAAE,EAAE,SAAS;aACd;SACF,CAAA;QACD,MAAM,kBAAkB,GAAG,CAAC,aAAa,EAAE,aAAa,CAAC,CAAA;QAEzD,MAAM,MAAM,GAAG,4BAA4B,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;QAE7D,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/index.d.ts

@@ -0,0 +1 @@
+export { default as makeResponsiveSpacingProps } from './make-responsive-spacing-props';

package/Picasso/utils/responsive-styles/index.js

@@ -0,0 +1,2 @@
+export { default as makeResponsiveSpacingProps } from './make-responsive-spacing-props';
+//# sourceMappingURL=index.js.map

package/Picasso/utils/responsive-styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,iCAAiC,CAAA"}

package/Picasso/utils/responsive-styles/make-responsive-spacing-props.d.ts

@@ -0,0 +1,6 @@
+import type { ResponsiveCssSpacings } from './types';
+declare const makeResponsiveSpacingProps: <K extends string>(props: readonly K[], name: string) => (propValues: ResponsiveCssSpacings<K>) => {
+    className: string;
+    style: Record<string, string>;
+};
+export default makeResponsiveSpacingProps;

package/Picasso/utils/responsive-styles/make-responsive-spacing-props.js

@@ -0,0 +1,21 @@
+import cx from 'classnames';
+import { makeStyles } from '@material-ui/core';
+import { mediaQueriesClasses } from './media-queries-classes';
+import { getBreakpointClassNamesToUse } from './get-breakpoint-class-names-to-use';
+import { generateVariableInlineStyles } from './generate-variable-inline-styles';
+const makeResponsiveSpacingProps = (props, name) => {
+    const useStyles = makeStyles((theme) => mediaQueriesClasses(props, theme), {
+        name: name,
+    });
+    const useResponsiveClassNames = (propValues) => {
+        const classes = useStyles();
+        const mediaQueries = getBreakpointClassNamesToUse(props, propValues);
+        return {
+            className: cx(...mediaQueries.map(brkClassName => classes[brkClassName])),
+            style: generateVariableInlineStyles(props, propValues),
+        };
+    };
+    return useResponsiveClassNames;
+};
+export default makeResponsiveSpacingProps;
+//# sourceMappingURL=make-responsive-spacing-props.js.map

package/Picasso/utils/responsive-styles/make-responsive-spacing-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-responsive-spacing-props.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/make-responsive-spacing-props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,OAAO,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAA;AAClF,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAA;AAEhF,MAAM,0BAA0B,GAAG,CACjC,KAAmB,EACnB,IAAY,EACZ,EAAE;IACF,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,KAAY,EAAE,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,EACnD;QACE,IAAI,EAAE,IAAI;KACX,CACF,CAAA;IAED,MAAM,uBAAuB,GAAG,CAAC,UAAoC,EAAE,EAAE;QACvE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;QAC3B,MAAM,YAAY,GAAG,4BAA4B,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;QAEpE,OAAO;YACL,SAAS,EAAE,EAAE,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;YACzE,KAAK,EAAE,4BAA4B,CAAC,KAAK,EAAE,UAAU,CAAC;SACvD,CAAA;IACH,CAAC,CAAA;IAED,OAAO,uBAAuB,CAAA;AAChC,CAAC,CAAA;AAED,eAAe,0BAA0B,CAAA"}

package/Picasso/utils/responsive-styles/media-queries-classes.d.ts

@@ -0,0 +1,6 @@
+import type { Theme } from '@material-ui/core';
+/**
+ * Just aggregate all the media queries classes
+ * for all responsive props passed
+ */
+export declare const mediaQueriesClasses: <K extends string>(responsiveProps: readonly K[], theme: Theme) => Record<string, Record<string, string>>;

package/Picasso/utils/responsive-styles/media-queries-classes.js

@@ -0,0 +1,16 @@
+import { createMediaQueries } from './create-media-queries';
+/**
+ * Just aggregate all the media queries classes
+ * for all responsive props passed
+ */
+export const mediaQueriesClasses = (responsiveProps, theme) => {
+    const mediaQueries = {};
+    for (const prop of responsiveProps) {
+        const newMediaQueries = createMediaQueries(prop, theme);
+        for (const [brk, value] of Object.entries(newMediaQueries)) {
+            mediaQueries[brk] = Object.assign(Object.assign({}, mediaQueries[brk]), value);
+        }
+    }
+    return mediaQueries;
+};
+//# sourceMappingURL=media-queries-classes.js.map

package/Picasso/utils/responsive-styles/media-queries-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-queries-classes.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/media-queries-classes.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,eAA6B,EAC7B,KAAY,EACZ,EAAE;IACF,MAAM,YAAY,GAA2C,EAAE,CAAA;IAE/D,KAAK,MAAM,IAAI,IAAI,eAAe,EAAE;QAClC,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QAEvD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;YAC1D,YAAY,CAAC,GAAG,CAAC,mCACZ,YAAY,CAAC,GAAG,CAAC,GACjB,KAAK,CACT,CAAA;SACF;KACF;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/media-queries-classes.test.d.ts

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

package/Picasso/utils/responsive-styles/media-queries-classes.test.js

@@ -0,0 +1,27 @@
+import { mediaQueriesClasses } from './media-queries-classes';
+describe('mediaQueriesClasses', () => {
+    it('returns an object with media queries classes based on the responsive props and theme', () => {
+        const responsiveProps = ['margin'];
+        const theme = {
+            breakpoints: {
+                keys: ['sm', 'md'],
+                up: (breakpoint) => `@media (min-width: ${breakpoint})`,
+            },
+        };
+        const expectedMediaQueries = {
+            '@media (min-width: md)': {
+                'md--margin': {
+                    margin: 'var(--picasso-responsive--md--margin)',
+                },
+            },
+            '@media (min-width: sm)': {
+                'sm--margin': {
+                    margin: 'var(--picasso-responsive--sm--margin)',
+                },
+            },
+        };
+        const result = mediaQueriesClasses(responsiveProps, theme);
+        expect(result).toEqual(expectedMediaQueries);
+    });
+});
+//# sourceMappingURL=media-queries-classes.test.js.map

package/Picasso/utils/responsive-styles/media-queries-classes.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-queries-classes.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/media-queries-classes.test.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,sFAAsF,EAAE,GAAG,EAAE;QAC9F,MAAM,eAAe,GAAG,CAAC,QAAQ,CAAC,CAAA;QAClC,MAAM,KAAK,GAAG;YACZ,WAAW,EAAE;gBACX,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;gBAClB,EAAE,EAAE,CAAC,UAAkB,EAAE,EAAE,CAAC,sBAAsB,UAAU,GAAG;aAChE;SACF,CAAA;QAED,MAAM,oBAAoB,GAAG;YAC3B,wBAAwB,EAAE;gBACxB,YAAY,EAAE;oBACZ,MAAM,EAAE,uCAAuC;iBAChD;aACF;YACD,wBAAwB,EAAE;gBACxB,YAAY,EAAE;oBACZ,MAAM,EAAE,uCAAuC;iBAChD;aACF;SACF,CAAA;QAED,MAAM,MAAM,GAAG,mBAAmB,CAAC,eAAe,EAAE,KAAc,CAAC,CAAA;QAEnE,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/to-class-name.d.ts

@@ -0,0 +1,3 @@
+import type { BreakpointKeys } from '../../config';
+import type { ResponsiveCssProp } from './types';
+export declare const toClassName: (breakpoint: BreakpointKeys, prop: ResponsiveCssProp) => string;

package/Picasso/utils/responsive-styles/to-class-name.js

@@ -0,0 +1,4 @@
+export const toClassName = (breakpoint, prop) => {
+    return `${breakpoint}--${prop}`;
+};
+//# sourceMappingURL=to-class-name.js.map

package/Picasso/utils/responsive-styles/to-class-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-class-name.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/to-class-name.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,UAA0B,EAC1B,IAAuB,EACvB,EAAE;IACF,OAAO,GAAG,UAAU,KAAK,IAAI,EAAE,CAAA;AACjC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/to-class-name.test.d.ts

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

package/Picasso/utils/responsive-styles/to-class-name.test.js

@@ -0,0 +1,11 @@
+import { toClassName } from './to-class-name';
+describe('toClassName', () => {
+    it('returns a string with the breakpoint and prop separated by a double dash', () => {
+        const breakpoint = 'md';
+        const prop = 'color';
+        const expectedClassName = 'md--color';
+        const result = toClassName(breakpoint, prop);
+        expect(result).toBe(expectedClassName);
+    });
+});
+//# sourceMappingURL=to-class-name.test.js.map

package/Picasso/utils/responsive-styles/to-class-name.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-class-name.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/to-class-name.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,0EAA0E,EAAE,GAAG,EAAE;QAClF,MAAM,UAAU,GAAG,IAAI,CAAA;QACvB,MAAM,IAAI,GAAG,OAAO,CAAA;QACpB,MAAM,iBAAiB,GAAG,WAAW,CAAA;QAErC,MAAM,MAAM,GAAG,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;QAE5C,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/to-css-variable-name.d.ts

@@ -0,0 +1,3 @@
+import type { BreakpointKeys } from '../../config';
+import type { ResponsiveCssProp } from './types';
+export declare const toCssVariableName: (breakpoint: BreakpointKeys, prop: ResponsiveCssProp) => string;

package/Picasso/utils/responsive-styles/to-css-variable-name.js

@@ -0,0 +1,4 @@
+export const toCssVariableName = (breakpoint, prop) => {
+    return `--picasso-responsive--${breakpoint}--${prop}`;
+};
+//# sourceMappingURL=to-css-variable-name.js.map

package/Picasso/utils/responsive-styles/to-css-variable-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-css-variable-name.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/to-css-variable-name.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,UAA0B,EAC1B,IAAuB,EACvB,EAAE;IACF,OAAO,yBAAyB,UAAU,KAAK,IAAI,EAAE,CAAA;AACvD,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/to-css-variable-name.test.d.ts

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

package/Picasso/utils/responsive-styles/to-css-variable-name.test.js

@@ -0,0 +1,11 @@
+import { toCssVariableName } from './to-css-variable-name';
+describe('toCssVariableName', () => {
+    it('returns a string in the correct format with the breakpoint and prop', () => {
+        const breakpoint = 'md';
+        const prop = 'color';
+        const expectedCssVariableName = '--picasso-responsive--md--color';
+        const result = toCssVariableName(breakpoint, prop);
+        expect(result).toBe(expectedCssVariableName);
+    });
+});
+//# sourceMappingURL=to-css-variable-name.test.js.map

package/Picasso/utils/responsive-styles/to-css-variable-name.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-css-variable-name.test.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/to-css-variable-name.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE1D,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,qEAAqE,EAAE,GAAG,EAAE;QAC7E,MAAM,UAAU,GAAG,IAAI,CAAA;QACvB,MAAM,IAAI,GAAG,OAAO,CAAA;QACpB,MAAM,uBAAuB,GAAG,iCAAiC,CAAA;QAEjE,MAAM,MAAM,GAAG,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;QAElD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/Picasso/utils/responsive-styles/types.d.ts

@@ -0,0 +1,5 @@
+import type { SpacingType } from '../../config';
+export declare type ResponsiveCssProp = string;
+export declare type ResponsiveCssSpacings<K extends ResponsiveCssProp> = {
+    [k in K]: SpacingType | undefined;
+};

package/Picasso/utils/responsive-styles/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/Picasso/utils/responsive-styles/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/Picasso/utils/responsive-styles/types.ts"],"names":[],"mappings":""}

package/Picasso/utils/spacings.d.ts

@@ -0,0 +1,3 @@
+import type { ResponsiveSpacingType, SpacingType } from '../config/spacings';
+declare const spacingToRem: (spacing: Exclude<SpacingType, ResponsiveSpacingType>) => string;
+export { spacingToRem };

package/Picasso/utils/spacings.js

@@ -0,0 +1,9 @@
+import { SpacingEnum, isPicassoSpacing } from '../config/spacings';
+const spacingToRem = (spacing) => {
+    if (typeof spacing == 'number' || isPicassoSpacing(spacing)) {
+        return `${spacing.valueOf()}rem`;
+    }
+    return `${SpacingEnum[spacing]}rem`;
+};
+export { spacingToRem };
+//# sourceMappingURL=spacings.js.map

package/Picasso/utils/spacings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacings.js","sourceRoot":"","sources":["../../../src/Picasso/utils/spacings.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAElE,MAAM,YAAY,GAAG,CACnB,OAAoD,EAC5C,EAAE;IACV,IAAI,OAAO,OAAO,IAAI,QAAQ,IAAI,gBAAgB,CAAC,OAAO,CAAC,EAAE;QAC3D,OAAO,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,CAAA;KACjC;IAED,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAA;AACrC,CAAC,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/Picasso/utils/spacings.test.d.ts

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

package/Picasso/utils/spacings.test.js

@@ -0,0 +1,35 @@
+import { spacingToRem } from './spacings';
+import { SPACING_0, SPACING_1, SPACING_2, SPACING_3, SPACING_4, SPACING_6, SPACING_8, SPACING_10, SPACING_12, } from '../config/spacings';
+describe('spacingUtils', () => {
+    describe('spacingToRem', () => {
+        describe('when spacing is a number', () => {
+            it('converts to rem', () => {
+                expect(spacingToRem(1)).toBe('1rem');
+                expect(spacingToRem(2.5)).toBe('2.5rem');
+            });
+        });
+        describe('when spacing is a valid Picasso spacing', () => {
+            it('converts to rem', () => {
+                expect(spacingToRem(SPACING_0)).toBe('0rem');
+                expect(spacingToRem(SPACING_1)).toBe('0.25rem');
+                expect(spacingToRem(SPACING_2)).toBe('0.5rem');
+                expect(spacingToRem(SPACING_3)).toBe('0.75rem');
+                expect(spacingToRem(SPACING_4)).toBe('1rem');
+                expect(spacingToRem(SPACING_6)).toBe('1.5rem');
+                expect(spacingToRem(SPACING_8)).toBe('2rem');
+                expect(spacingToRem(SPACING_10)).toBe('2.5rem');
+                expect(spacingToRem(SPACING_12)).toBe('3rem');
+            });
+        });
+        describe('when spacing is a string Picasso spacing', () => {
+            it('converts to rem', () => {
+                expect(spacingToRem('xsmall')).toBe('0.5rem');
+                expect(spacingToRem('small')).toBe('1rem');
+                expect(spacingToRem('medium')).toBe('1.5rem');
+                expect(spacingToRem('large')).toBe('2rem');
+                expect(spacingToRem('xlarge')).toBe('2.5rem');
+            });
+        });
+    });
+});
+//# sourceMappingURL=spacings.test.js.map

package/Picasso/utils/spacings.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacings.test.js","sourceRoot":"","sources":["../../../src/Picasso/utils/spacings.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,UAAU,GACX,MAAM,oBAAoB,CAAA;AAE3B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;QAC5B,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;YACxC,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;gBACzB,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;gBACpC,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YAC1C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,yCAAyC,EAAE,GAAG,EAAE;YACvD,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;gBACzB,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC5C,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;gBAC/C,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC9C,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;gBAC/C,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC5C,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC9C,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC5C,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC/C,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAC/C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,0CAA0C,EAAE,GAAG,EAAE;YACxD,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;gBACzB,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC7C,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC1C,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC7C,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC1C,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YAC/C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/index.d.ts

@@ -1,6 +1,7 @@
 export { default, FixViewport, FontsLoader, NotificationsProvider, NotificationsProviderProps, PicassoLight, } from './Picasso';
-export { useScreenSize, isScreenSize, useBreakpoint, breakpointsList, useScreens, colors, gradients, palette, layout, breakpoints, screens, transitions, typography, sizes, shadows, PicassoBreakpoints, BreakpointKeys, } from './Picasso/config';
+export { useScreenSize, isScreenSize, useBreakpoint, breakpointsList, useScreens, colors, gradients, palette, layout, breakpoints, screens, transitions, typography, sizes, shadows, PicassoBreakpoints, BreakpointKeys, spacings, SpacingEnum, isResponsiveSpacing, } from './Picasso/config';
+export type { Sizes, SizeType, SpacingType, ResponsiveSpacingType, DeprecatedSpacingType, PicassoSpacing, } from './Picasso/config';
 export { default as PicassoProvider } from './Picasso/PicassoProvider';
 export { usePicassoRoot, usePageTopBar, useAppConfig, useDrawer, useSidebar, useCurrentBreakpointRange, usePreventPageWidthChangeOnScrollbar, RootContext, } from './Picasso/RootContext';
-export { generateRandomString, generateRandomStringOrGetEmptyInTest, getServersideStylesheets, } from './Picasso/utils';
+export * from './Picasso/utils';
 export { default as Favicon } from './Favicon';

package/index.js

@@ -1,7 +1,7 @@
 export { default, FixViewport, FontsLoader, NotificationsProvider, PicassoLight, } from './Picasso';
-export { useScreenSize, isScreenSize, useBreakpoint, breakpointsList, useScreens, colors, gradients, palette, layout, breakpoints, screens, transitions, typography, sizes, shadows, PicassoBreakpoints, } from './Picasso/config';
+export { useScreenSize, isScreenSize, useBreakpoint, breakpointsList, useScreens, colors, gradients, palette, layout, breakpoints, screens, transitions, typography, sizes, shadows, PicassoBreakpoints, spacings, SpacingEnum, isResponsiveSpacing, } from './Picasso/config';
 export { default as PicassoProvider } from './Picasso/PicassoProvider';
 export { usePicassoRoot, usePageTopBar, useAppConfig, useDrawer, useSidebar, useCurrentBreakpointRange, usePreventPageWidthChangeOnScrollbar, RootContext, } from './Picasso/RootContext';
-export { generateRandomString, generateRandomStringOrGetEmptyInTest, getServersideStylesheets, } from './Picasso/utils';
+export * from './Picasso/utils';
 export { default as Favicon } from './Favicon';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,WAAW,EACX,WAAW,EACX,qBAAqB,EAErB,YAAY,GACb,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,UAAU,EACV,MAAM,EACN,SAAS,EACT,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,EACP,WAAW,EACX,UAAU,EACV,KAAK,EACL,OAAO,EACP,kBAAkB,GAEnB,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAEtE,OAAO,EACL,cAAc,EACd,aAAa,EACb,YAAY,EACZ,SAAS,EACT,UAAU,EACV,yBAAyB,EACzB,oCAAoC,EACpC,WAAW,GACZ,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EACL,oBAAoB,EACpB,oCAAoC,EACpC,wBAAwB,GACzB,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,WAAW,EACX,WAAW,EACX,qBAAqB,EAErB,YAAY,GACb,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,UAAU,EACV,MAAM,EACN,SAAS,EACT,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,EACP,WAAW,EACX,UAAU,EACV,KAAK,EACL,OAAO,EACP,kBAAkB,EAElB,QAAQ,EACR,WAAW,EACX,mBAAmB,GACpB,MAAM,kBAAkB,CAAA;AAWzB,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAEtE,OAAO,EACL,cAAc,EACd,aAAa,EACb,YAAY,EACZ,SAAS,EACT,UAAU,EACV,yBAAyB,EACzB,oCAAoC,EACpC,WAAW,GACZ,MAAM,uBAAuB,CAAA;AAE9B,cAAc,iBAAiB,CAAA;AAE/B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-provider",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "Picasso provider",
   "author": "Toptal",
   "license": "MIT",

package/utils/index.d.ts

@@ -1 +1,3 @@
 export { default as isBrowser } from './is-browser';
+export { default as kebabToCamelCase } from './kebab-to-camel-case';
+export { default as snakeToCamelCase } from './snake-to-camel-case';

package/utils/index.js

@@ -1,2 +1,4 @@
 export { default as isBrowser } from './is-browser';
+export { default as kebabToCamelCase } from './kebab-to-camel-case';
+export { default as snakeToCamelCase } from './snake-to-camel-case';
 //# sourceMappingURL=index.js.map

package/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA"}

package/utils/kebab-to-camel-case.d.ts

@@ -0,0 +1,2 @@
+declare const kebabToCamelCase: (str: string) => string;
+export default kebabToCamelCase;

package/utils/kebab-to-camel-case.js

@@ -0,0 +1,3 @@
+const kebabToCamelCase = (str) => str.replace(/-([a-z])/g, (substring) => substring[1].toUpperCase());
+export default kebabToCamelCase;
+//# sourceMappingURL=kebab-to-camel-case.js.map

package/utils/kebab-to-camel-case.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kebab-to-camel-case.js","sourceRoot":"","sources":["../../src/utils/kebab-to-camel-case.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAE,EAAE,CACvC,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,SAAiB,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAA;AAE7E,eAAe,gBAAgB,CAAA"}

package/utils/kebab-to-camel-case.test.d.ts

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

package/utils/kebab-to-camel-case.test.js

@@ -0,0 +1,7 @@
+import kebabToCamelCase from './kebab-to-camel-case';
+describe('kebabToCamelCase()', () => {
+    it('transforms kebab-case to camelCase', () => {
+        expect(kebabToCamelCase('test-text-in-kebab')).toBe('testTextInKebab');
+    });
+});
+//# sourceMappingURL=kebab-to-camel-case.test.js.map

package/utils/kebab-to-camel-case.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kebab-to-camel-case.test.js","sourceRoot":"","sources":["../../src/utils/kebab-to-camel-case.test.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,uBAAuB,CAAA;AAEpD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;IACxE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/utils/snake-to-camel-case.d.ts

@@ -0,0 +1,2 @@
+declare const snakeToCamelCase: (snakeCase: string, capitalise?: boolean) => string;
+export default snakeToCamelCase;

package/utils/snake-to-camel-case.js

@@ -0,0 +1,14 @@
+const snakeToCamelCase = (snakeCase, capitalise = false) => {
+    const words = snakeCase.toLowerCase().split('_');
+    const camelCase = words
+        .map((word, index) => {
+        if (!capitalise && index === 0) {
+            return word;
+        }
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+        .join('');
+    return camelCase;
+};
+export default snakeToCamelCase;
+//# sourceMappingURL=snake-to-camel-case.js.map

package/utils/snake-to-camel-case.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snake-to-camel-case.js","sourceRoot":"","sources":["../../src/utils/snake-to-camel-case.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,CAAC,SAAiB,EAAE,UAAU,GAAG,KAAK,EAAU,EAAE;IACzE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAChD,MAAM,SAAS,GAAG,KAAK;SACpB,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QACnB,IAAI,CAAC,UAAU,IAAI,KAAK,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAI,CAAA;SACZ;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACrD,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAA;IAEX,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/utils/snake-to-camel-case.test.d.ts

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

package/utils/snake-to-camel-case.test.js

@@ -0,0 +1,30 @@
+import { default as snakeToCamelCase } from './snake-to-camel-case';
+describe('snakeToCamelCase', () => {
+    it('converts a capitalized snake case string to camel case', () => {
+        const snakeCaseString = 'CAPITALISED_SNAKE_CASE';
+        const expectedCamelCaseString = 'capitalisedSnakeCase';
+        const result = snakeToCamelCase(snakeCaseString);
+        expect(result).toBe(expectedCamelCaseString);
+    });
+    it('converts a single word to camel case', () => {
+        const snakeCaseString = 'SINGLE';
+        const expectedCamelCaseString = 'single';
+        const result = snakeToCamelCase(snakeCaseString);
+        expect(result).toBe(expectedCamelCaseString);
+    });
+    it('converts an empty string to an empty camel case string', () => {
+        const snakeCaseString = '';
+        const expectedCamelCaseString = '';
+        const result = snakeToCamelCase(snakeCaseString);
+        expect(result).toBe(expectedCamelCaseString);
+    });
+    describe('when "capitalise" is true', () => {
+        it('capitalises first word', () => {
+            const snakeCaseString = 'SOME_TEST_TEXT1';
+            const expectedCamelCaseString = 'SomeTestText1';
+            const result = snakeToCamelCase(snakeCaseString, true);
+            expect(result).toBe(expectedCamelCaseString);
+        });
+    });
+});
+//# sourceMappingURL=snake-to-camel-case.test.js.map

package/utils/snake-to-camel-case.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snake-to-camel-case.test.js","sourceRoot":"","sources":["../../src/utils/snake-to-camel-case.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAEnE,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;QAChE,MAAM,eAAe,GAAG,wBAAwB,CAAA;QAChD,MAAM,uBAAuB,GAAG,sBAAsB,CAAA;QAEtD,MAAM,MAAM,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAA;QAEhD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,eAAe,GAAG,QAAQ,CAAA;QAChC,MAAM,uBAAuB,GAAG,QAAQ,CAAA;QAExC,MAAM,MAAM,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAA;QAEhD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;QAChE,MAAM,eAAe,GAAG,EAAE,CAAA;QAC1B,MAAM,uBAAuB,GAAG,EAAE,CAAA;QAElC,MAAM,MAAM,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAA;QAEhD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACzC,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;YAChC,MAAM,eAAe,GAAG,iBAAiB,CAAA;YACzC,MAAM,uBAAuB,GAAG,eAAe,CAAA;YAE/C,MAAM,MAAM,GAAG,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAA;YAEtD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}