@toptal/picasso-container 3.0.1 → 3.1.0

package/dist-package/src/Container/Container.d.ts

@@ -5,6 +5,7 @@ import type { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
 import type { AlignItemsType, JustifyContentType, VariantType } from './styles';
 declare type ContainerType = 'div' | 'span';
 declare type DirectionType = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+declare type WrapType = 'wrap' | 'nowrap' | 'wrap-reverse';
 declare type BorderableType = 'transparent' | 'white';
 export interface Props<V extends VariantType = VariantType> extends StandardProps, HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
     /** Content of Container */
@@ -19,6 +20,8 @@ export interface Props<V extends VariantType = VariantType> extends StandardProp
     alignItems?: AlignItemsType;
     /** Defines the justify-content style property */
     justifyContent?: JustifyContentType;
+    /** Defines flex-wrap style property */
+    wrap?: WrapType;
     /** Whether (`white`, `transparent`) container has border or not */
     bordered?: V extends BorderableType ? boolean : never;
     /** Whether container has 8px border-radius applied or not */

package/dist-package/src/Container/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAKzE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAI/E,aAAK,aAAa,GAAG,KAAK,GAAG,MAAM,CAAA;AAEnC,aAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;AAExE,aAAK,cAAc,GAAG,aAAa,GAAG,OAAO,CAAA;AAE7C,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACxD,SAAQ,aAAa,EACnB,cAAc,CAAC,cAAc,GAAG,eAAe,CAAC;IAClD,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yBAAyB;IACzB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,iDAAiD;IACjD,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,SAAS,cAAc,GAAG,OAAO,GAAG,KAAK,CAAA;IACrD,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,uCAAuC;IACvC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAA;IAC3B,wDAAwD;IACxD,GAAG,CAAC,EAAE,WAAW,CAAA;IACjB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,yDAAyD;IACzD,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,gDAAgD;IAChD,GAAG,CAAC,EAAE,WAAW,CAAA;CAClB;AAED,aAAK,cAAc,GAAG;IACpB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAClC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA;KAAE,GACrD,YAAY,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;CAC3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,cAwFvB,CAAA;AASD,eAAe,SAAS,CAAA;AACxB,YAAY,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAKzE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAI/E,aAAK,aAAa,GAAG,KAAK,GAAG,MAAM,CAAA;AAEnC,aAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;AAExE,aAAK,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,CAAA;AAElD,aAAK,cAAc,GAAG,aAAa,GAAG,OAAO,CAAA;AAE7C,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACxD,SAAQ,aAAa,EACnB,cAAc,CAAC,cAAc,GAAG,eAAe,CAAC;IAClD,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yBAAyB;IACzB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,iDAAiD;IACjD,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,SAAS,cAAc,GAAG,OAAO,GAAG,KAAK,CAAA;IACrD,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,uCAAuC;IACvC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAA;IAC3B,wDAAwD;IACxD,GAAG,CAAC,EAAE,WAAW,CAAA;IACjB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,yDAAyD;IACzD,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,gDAAgD;IAChD,GAAG,CAAC,EAAE,WAAW,CAAA;CAClB;AAED,aAAK,cAAc,GAAG;IACpB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAClC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA;KAAE,GACrD,YAAY,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;CAC3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,cA2FvB,CAAA;AASD,eAAe,SAAS,CAAA;AACxB,YAAY,EAAE,WAAW,EAAE,CAAA"}

package/dist-package/src/Container/Container.js

@@ -18,10 +18,10 @@ import { getSpacingClasses, getSpacingStyles } from './utils';
  * Container component used for spacing 2 elements
  */
 export const Container = documentable(forwardRef((props, ref) => {
-    const { children, className, inline, flex, direction, alignItems, justifyContent, style, bordered = false, rounded = false, variant, align, as: Component = inline ? 'span' : 'div', top, bottom, left, right, padded, gap, 
+    const { children, className, inline, flex, direction, alignItems, justifyContent, wrap, style, bordered = false, rounded = false, variant, align, as: Component = inline ? 'span' : 'div', top, bottom, left, right, padded, gap, 
     // Avoid passing external classes inside the rest props
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    classes: externalClasses } = props, rest = __rest(props, ["children", "className", "inline", "flex", "direction", "alignItems", "justifyContent", "style", "bordered", "rounded", "variant", "align", "as", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
+    classes: externalClasses } = props, rest = __rest(props, ["children", "className", "inline", "flex", "direction", "alignItems", "justifyContent", "wrap", "style", "bordered", "rounded", "variant", "align", "as", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
     const spacingProps = { gap, padded, top, bottom, right, left };
     const isBorderedVariant = !variant || variant === 'white' || variant === 'transparent';
     const getDisplayValue = (isInline, isFlex) => {
@@ -33,7 +33,7 @@ export const Container = documentable(forwardRef((props, ref) => {
                 ? 'inline-block'
                 : '';
     };
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: twMerge(variant && variantClassesByColor[variant], getSpacingClasses(spacingProps), typeof align === 'string' && alignmentClasses.textAlign[align], alignItems && alignmentClasses.alignItems[alignItems], justifyContent && alignmentClasses.justifyContent[justifyContent], bordered &&
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: twMerge(variant && variantClassesByColor[variant], getSpacingClasses(spacingProps), typeof align === 'string' && alignmentClasses.textAlign[align], alignItems && alignmentClasses.alignItems[alignItems], justifyContent && alignmentClasses.justifyContent[justifyContent], wrap && alignmentClasses.wrap[wrap], bordered &&
             isBorderedVariant &&
             'border border-solid border-gray-200', rounded && 'rounded-md', getDisplayValue(inline, flex), direction &&
             direction !== 'row' &&

package/dist-package/src/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":";;;;;;;;;;;AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAwD7D;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAmB,YAAY,CACnD,UAAU,CACR,CACE,KAAe,EACf,GAA+B,EAC/B,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,IAAI,EACJ,SAAS,EACT,UAAU,EACV,cAAc,EACd,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,EACP,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACvC,GAAG,EACH,MAAM,EACN,IAAI,EACJ,KAAK,EACL,MAAM,EACN,GAAG;IACH,uDAAuD;IACvD,sDAAsD;IACtD,OAAO,EAAE,eAAe,KAEtB,KAAK,EADJ,IAAI,UACL,KAAK,EAxBH,gNAwBL,CAAQ,CAAA;IAET,MAAM,YAAY,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;IAC9D,MAAM,iBAAiB,GACrB,CAAC,OAAO,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,aAAa,CAAA;IAE9D,MAAM,eAAe,GAAG,CACtB,QAA6B,EAC7B,MAA2B,EAC3B,EAAE;QACF,OAAO,MAAM;YACX,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,aAAa;gBACf,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,EAAE,CAAA;IACR,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,OAAO,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAEzC,iBAAiB,CAAC,YAAY,CAAC,EAE/B,OAAO,KAAK,KAAK,QAAQ,IAAI,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,EAE9D,UAAU,IAAI,gBAAgB,CAAC,UAAU,CAAC,UAAU,CAAC,EAErD,cAAc,IAAI,gBAAgB,CAAC,cAAc,CAAC,cAAc,CAAC,EAEjE,QAAQ;YACN,iBAAiB;YACjB,qCAAqC,EACvC,OAAO,IAAI,YAAY,EAEvB,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,EAE7B,SAAS;YACP,SAAS,KAAK,KAAK;YACnB,gBAAgB,CAAC,SAAS,CAAC,SAAS,CAAC,EAEvC,SAAS,CACV,EACD,KAAK,kCAEA,gBAAgB,CAAC,YAAY,CAAC,GAC9B,KAAK,MAGT,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACgB,CACpB,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,SAAS,CAAC,YAAY,GAAG;IACvB,EAAE,EAAE,KAAK;IACT,MAAM,EAAE,KAAK;CACd,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":";;;;;;;;;;;AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AA4D7D;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAmB,YAAY,CACnD,UAAU,CACR,CACE,KAAe,EACf,GAA+B,EAC/B,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,IAAI,EACJ,SAAS,EACT,UAAU,EACV,cAAc,EACd,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,EACP,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACvC,GAAG,EACH,MAAM,EACN,IAAI,EACJ,KAAK,EACL,MAAM,EACN,GAAG;IACH,uDAAuD;IACvD,sDAAsD;IACtD,OAAO,EAAE,eAAe,KAEtB,KAAK,EADJ,IAAI,UACL,KAAK,EAzBH,wNAyBL,CAAQ,CAAA;IAET,MAAM,YAAY,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;IAC9D,MAAM,iBAAiB,GACrB,CAAC,OAAO,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,aAAa,CAAA;IAE9D,MAAM,eAAe,GAAG,CACtB,QAA6B,EAC7B,MAA2B,EAC3B,EAAE;QACF,OAAO,MAAM;YACX,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,aAAa;gBACf,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,EAAE,CAAA;IACR,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,OAAO,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAEzC,iBAAiB,CAAC,YAAY,CAAC,EAE/B,OAAO,KAAK,KAAK,QAAQ,IAAI,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,EAE9D,UAAU,IAAI,gBAAgB,CAAC,UAAU,CAAC,UAAU,CAAC,EAErD,cAAc,IAAI,gBAAgB,CAAC,cAAc,CAAC,cAAc,CAAC,EAEjE,IAAI,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAEnC,QAAQ;YACN,iBAAiB;YACjB,qCAAqC,EACvC,OAAO,IAAI,YAAY,EAEvB,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,EAE7B,SAAS;YACP,SAAS,KAAK,KAAK;YACnB,gBAAgB,CAAC,SAAS,CAAC,SAAS,CAAC,EAEvC,SAAS,CACV,EACD,KAAK,kCAEA,gBAAgB,CAAC,YAAY,CAAC,GAC9B,KAAK,MAGT,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACgB,CACpB,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,SAAS,CAAC,YAAY,GAAG;IACvB,EAAE,EAAE,KAAK;IACT,MAAM,EAAE,KAAK;CACd,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist-package/src/Container/styles.d.ts

@@ -32,6 +32,11 @@ export declare const alignmentClasses: {
         readonly 'row-reverse': "flex-row-reverse";
         readonly 'column-reverse': "flex-col-reverse";
     };
+    readonly wrap: {
+        readonly wrap: "flex-wrap";
+        readonly 'wrap-reverse': "flex-wrap-reverse";
+        readonly nowrap: "flex-nowrap";
+    };
 };
 export declare const variantClassesByColor: Record<VariantType, string>;
 export {};

package/dist-package/src/Container/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Container/styles.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,kBAAkB,sEAMd,CAAA;AAEV,QAAA,MAAM,sBAAsB,gGAOlB,CAAA;AAEV,QAAA,MAAM,iBAAiB,6EAQb,CAAA;AAEV,oBAAY,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,oBAAY,cAAc,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChE,oBAAY,kBAAkB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAExE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnB,CAAA;AAEV,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAQ7D,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Container/styles.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,kBAAkB,sEAMd,CAAA;AAEV,QAAA,MAAM,sBAAsB,gGAOlB,CAAA;AAEV,QAAA,MAAM,iBAAiB,6EAQb,CAAA;AAEV,oBAAY,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,oBAAY,cAAc,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChE,oBAAY,kBAAkB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAExE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCnB,CAAA;AAEV,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAQ7D,CAAA"}

package/dist-package/src/Container/styles.js

@@ -50,6 +50,11 @@ export const alignmentClasses = {
         'row-reverse': 'flex-row-reverse',
         'column-reverse': 'flex-col-reverse',
     },
+    wrap: {
+        wrap: 'flex-wrap',
+        'wrap-reverse': 'flex-wrap-reverse',
+        nowrap: 'flex-nowrap',
+    },
 };
 export const variantClassesByColor = {
     white: 'bg-white',

package/dist-package/src/Container/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Container/styles.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG;IACzB,YAAY;IACZ,UAAU;IACV,QAAQ;IACR,SAAS;IACT,UAAU;CACF,CAAA;AAEV,MAAM,sBAAsB,GAAG;IAC7B,YAAY;IACZ,UAAU;IACV,QAAQ;IACR,eAAe;IACf,cAAc;IACd,cAAc;CACN,CAAA;AAEV,MAAM,iBAAiB,GAAG;IACxB,aAAa;IACb,KAAK;IACL,OAAO;IACP,OAAO;IACP,QAAQ;IACR,MAAM;IACN,MAAM;CACE,CAAA;AAMV,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,UAAU,EAAE;QACV,YAAY,EAAE,aAAa;QAC3B,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,cAAc;QACtB,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,gBAAgB;KAC3B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,sBAAsB;QAC/B,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,aAAa;QACrB,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,cAAc;KACxB;IACD,cAAc,EAAE;QACd,MAAM,EAAE,gBAAgB;QACxB,YAAY,EAAE,eAAe;QAC7B,UAAU,EAAE,aAAa;QACzB,eAAe,EAAE,iBAAiB;QAClC,cAAc,EAAE,gBAAgB;QAChC,cAAc,EAAE,gBAAgB;KACjC;IACD,SAAS,EAAE;QACT,MAAM,EAAE,UAAU;QAClB,aAAa,EAAE,kBAAkB;QACjC,gBAAgB,EAAE,kBAAkB;KACrC;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,qBAAqB,GAAgC;IAChE,KAAK,EAAE,UAAU;IACjB,GAAG,EAAE,+CAA+C;IACpD,KAAK,EAAE,mDAAmD;IAC1D,MAAM,EAAE,qDAAqD;IAC7D,IAAI,EAAE,iDAAiD;IACvD,IAAI,EAAE,iDAAiD;IACvD,WAAW,EAAE,EAAE;CAChB,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Container/styles.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG;IACzB,YAAY;IACZ,UAAU;IACV,QAAQ;IACR,SAAS;IACT,UAAU;CACF,CAAA;AAEV,MAAM,sBAAsB,GAAG;IAC7B,YAAY;IACZ,UAAU;IACV,QAAQ;IACR,eAAe;IACf,cAAc;IACd,cAAc;CACN,CAAA;AAEV,MAAM,iBAAiB,GAAG;IACxB,aAAa;IACb,KAAK;IACL,OAAO;IACP,OAAO;IACP,QAAQ;IACR,MAAM;IACN,MAAM;CACE,CAAA;AAMV,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,UAAU,EAAE;QACV,YAAY,EAAE,aAAa;QAC3B,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,cAAc;QACtB,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,gBAAgB;KAC3B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,sBAAsB;QAC/B,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,aAAa;QACrB,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,cAAc;KACxB;IACD,cAAc,EAAE;QACd,MAAM,EAAE,gBAAgB;QACxB,YAAY,EAAE,eAAe;QAC7B,UAAU,EAAE,aAAa;QACzB,eAAe,EAAE,iBAAiB;QAClC,cAAc,EAAE,gBAAgB;QAChC,cAAc,EAAE,gBAAgB;KACjC;IACD,SAAS,EAAE;QACT,MAAM,EAAE,UAAU;QAClB,aAAa,EAAE,kBAAkB;QACjC,gBAAgB,EAAE,kBAAkB;KACrC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,WAAW;QACjB,cAAc,EAAE,mBAAmB;QACnC,MAAM,EAAE,aAAa;KACtB;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,qBAAqB,GAAgC;IAChE,KAAK,EAAE,UAAU;IACjB,GAAG,EAAE,+CAA+C;IACpD,KAAK,EAAE,mDAAmD;IAC1D,MAAM,EAAE,qDAAqD;IAC7D,IAAI,EAAE,iDAAiD;IACvD,IAAI,EAAE,iDAAiD;IACvD,WAAW,EAAE,EAAE;CAChB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-container",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Toptal UI components library - Container",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "bugs": {

package/src/Container/Container.tsx

@@ -15,6 +15,8 @@ type ContainerType = 'div' | 'span'
 
 type DirectionType = 'row' | 'column' | 'row-reverse' | 'column-reverse'
 
+type WrapType = 'wrap' | 'nowrap' | 'wrap-reverse'
+
 type BorderableType = 'transparent' | 'white'
 
 export interface Props<V extends VariantType = VariantType>
@@ -33,6 +35,8 @@ export interface Props<V extends VariantType = VariantType>
   alignItems?: AlignItemsType
   /** Defines the justify-content style property */
   justifyContent?: JustifyContentType
+  /** Defines flex-wrap style property */
+  wrap?: WrapType
   /** Whether (`white`, `transparent`) container has border or not */
   bordered?: V extends BorderableType ? boolean : never
   /** Whether container has 8px border-radius applied or not */
@@ -82,6 +86,7 @@ export const Container: ContainerProps = documentable(
         direction,
         alignItems,
         justifyContent,
+        wrap,
         style,
         bordered = false,
         rounded = false,
@@ -132,6 +137,8 @@ export const Container: ContainerProps = documentable(
 
             justifyContent && alignmentClasses.justifyContent[justifyContent],
 
+            wrap && alignmentClasses.wrap[wrap],
+
             bordered &&
               isBorderedVariant &&
               'border border-solid border-gray-200',

package/src/Container/story/Wrap.example.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Container, Grid, Typography } from '@toptal/picasso'
+
+const LargeContent = () => {
+  return (
+    <>
+      <Container variant='red' padded='xlarge'>
+        1
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        2
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        3
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        4
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        5
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        6
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        7
+      </Container>
+    </>
+  )
+}
+
+const Example = () => (
+  <Grid>
+    <Grid.Item sm={6} style={{ overflow: 'hidden' }}>
+      <Typography variant='heading' size='medium'>
+        Default (nowrap)
+      </Typography>
+
+      <Container top='small' flex gap='xlarge'>
+        <LargeContent />
+      </Container>
+    </Grid.Item>
+    <Grid.Item sm={6} style={{ overflow: 'hidden' }}>
+      <Typography variant='heading' size='medium'>
+        Explicit nowrap
+      </Typography>
+
+      <Container top='small' flex gap='xlarge' wrap='nowrap'>
+        <LargeContent />
+      </Container>
+    </Grid.Item>
+    <Grid.Item sm={6}>
+      <Typography variant='heading' size='medium'>
+        Wrap
+      </Typography>
+      <Container top='small' flex gap='xlarge' wrap='wrap'>
+        <LargeContent />
+      </Container>
+    </Grid.Item>
+    <Grid.Item sm={6}>
+      <Typography variant='heading' size='medium'>
+        Wrap (reverse)
+      </Typography>
+
+      <Container top='small' flex gap='xlarge' wrap='wrap-reverse'>
+        <LargeContent />
+      </Container>
+    </Grid.Item>
+  </Grid>
+)
+
+export default Example

package/src/Container/story/index.jsx

@@ -4,7 +4,7 @@ import PicassoBook from '~/.storybook/components/PicassoBook'
 const page = PicassoBook.section('Layout').createPage(
   'Container',
   `Use Container to add space between 2 elements.
-  
+
   ${PicassoBook.createSourceLink(__filename)}
   `
 )
@@ -66,3 +66,4 @@ Spacing is aligned with BASE design and gets transformed into **rem** units in f
     'TextAlign',
     'base/Container'
   )
+  .addExample('Container/story/Wrap.example.tsx', 'Wrap', 'base/Container')

package/src/Container/styles.ts

@@ -57,6 +57,11 @@ export const alignmentClasses = {
     'row-reverse': 'flex-row-reverse',
     'column-reverse': 'flex-col-reverse',
   },
+  wrap: {
+    wrap: 'flex-wrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+    nowrap: 'flex-nowrap',
+  },
 } as const
 
 export const variantClassesByColor: Record<VariantType, string> = {