@toptal/picasso-container 3.1.3-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.22 → 3.1.3-alpha-MP-669-first-batch-of-rework-c1fb81067.24

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

@@ -7,14 +7,11 @@ 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';
+declare type BorderedType<V extends VariantType> = V extends BorderableType ? boolean : never;
 export interface Props<V extends VariantType = VariantType> extends StandardProps, HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
     /** Content of Container */
     children?: ReactNode;
-    /**
-     * Whether container should act as inline element `display: inline-block`
-     *
-     * @default false
-     */
+    /** Whether container should act as inline element `display: inline-block` */
     inline?: boolean;
     /** Use flexbox */
     flex?: boolean;
@@ -27,20 +24,12 @@ export interface Props<V extends VariantType = VariantType> extends StandardProp
     /** 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
-     *
-     * @default false
-     */
+    bordered?: BorderedType<V>;
+    /** Whether container has 8px border-radius applied or not */
     rounded?: boolean;
     /** Style variant of Notification */
     variant?: V;
-    /**
-     * Component used for the root node
-     *
-     * @default div
-     */
+    /** Component used for the root node */
     as?: ContainerType;
     /** Text align of the inner text */
     align?: PropTypes.Alignment;
@@ -57,12 +46,20 @@ export interface Props<V extends VariantType = VariantType> extends StandardProp
     /** Gap between elements for a flex container */
     gap?: SpacingType;
 }
+/**
+ * Separate component is needed for proper Storybook props display
+ */
+export declare const ContainerFunction: {
+    <V extends "transparent" | "red" | "green" | "white" | "yellow" | "blue" | "grey">({ as, inline, rounded, bordered, ref, ...props }: Props<V> & {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
 declare type ContainerProps = {
     <V extends VariantType = VariantType>(props: Props<V> & {
         ref?: Ref<HTMLDivElement> | null;
     }): ReactElement;
     displayName?: string;
-    defaultProps?: Partial<Props<VariantType>>;
 };
 /**
  * Container component used for spacing 2 elements

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,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;IACpB;;;;OAIG;IACH,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;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAA;IACX;;;;OAIG;IACH,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,cA0FvB,CAAA;AAID,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,aAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,CAAC,SAAS,cAAc,GAC/D,OAAO,GACP,KAAK,CAAA;AACT,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;IACpB,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,YAAY,CAAC,CAAC,CAAC,CAAA;IAC1B,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;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;CAyF7B,CAAA;AAID,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;CACrB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,cAGL,CAAA;AAInB,eAAe,SAAS,CAAA;AACxB,YAAY,EAAE,WAAW,EAAE,CAAA"}

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

@@ -10,19 +10,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { documentable, forwardRef } from '@toptal/picasso-utils';
+import { forwardRef } from '@toptal/picasso-utils';
 import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { alignmentClasses, variantClassesByColor } from './styles';
 import { getSpacingClasses, getSpacingStyles } from './utils';
 /**
- * Container component used for spacing 2 elements
+ * Separate component is needed for proper Storybook props display
  */
-export const Container = documentable(forwardRef((_a, ref) => {
-    var { as = 'div', inline = false, rounded = false } = _a, props = __rest(_a, ["as", "inline", "rounded"]);
-    const { children, className, flex, direction, alignItems, justifyContent, bordered = false, wrap, style, variant, align, top, bottom, left, right, padded, gap, 
+export const ContainerFunction = function ContainerFunction(_a) {
+    var { as = 'div', inline = false, rounded = false, bordered = false, ref } = _a, props = __rest(_a, ["as", "inline", "rounded", "bordered", "ref"]);
+    const { children, className, flex, direction, alignItems, justifyContent, wrap, style, variant, align, 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", "flex", "direction", "alignItems", "justifyContent", "bordered", "wrap", "style", "variant", "align", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
+    classes: externalClasses } = props, rest = __rest(props, ["children", "className", "flex", "direction", "alignItems", "justifyContent", "wrap", "style", "variant", "align", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
     const Component = as;
     const spacingProps = { gap, padded, top, bottom, right, left };
     const isBorderedVariant = !variant || variant === 'white' || variant === 'transparent';
@@ -35,12 +35,15 @@ export const Container = documentable(forwardRef((_a, 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], wrap && alignmentClasses.wrap[wrap], bordered &&
-            isBorderedVariant &&
-            'border border-solid border-gray-200', rounded && 'rounded-md', getDisplayValue(inline, flex), direction &&
+    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' &&
             alignmentClasses.direction[direction], className), style: Object.assign(Object.assign({}, getSpacingStyles(spacingProps)), style) }), children));
-}));
+};
+ContainerFunction.displayName = 'ContainerFunction';
+/**
+ * Container component used for spacing 2 elements
+ */
+export const Container = forwardRef((props, ref) => ContainerFunction(Object.assign(Object.assign({}, props), { ref })));
 Container.displayName = 'Container';
 export default Container;
 //# sourceMappingURL=Container.js.map

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;AAuE7D;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAmB,YAAY,CACnD,UAAU,CACR,CACE,EAAmE,EACnE,GAA+B,EAC/B,EAAE;QAFF,EAAE,EAAE,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,OAAsB,EAAjB,KAAK,cAAvD,2BAAyD,CAAF;IAGvD,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,UAAU,EACV,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,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,EAtBH,6LAsBL,CAAQ,CAAA;IAET,MAAM,SAAS,GAAG,EAAE,CAAA;IAEpB,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,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,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,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;AAsD7D;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,iBAAiB,CAEzD,EAOgD;QAPhD,EACA,EAAE,GAAG,KAAK,EACV,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAwB,EACnC,GAAG,OAE6C,EAD7C,KAAK,cANR,8CAOD,CADS;IAER,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,UAAU,EACV,cAAc,EACd,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,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,EArBH,iLAqBL,CAAQ,CAAA;IAET,MAAM,SAAS,GAAG,EAAE,CAAA;IAEpB,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,IAAI,iBAAiB,IAAI,qCAAqC,EACtE,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,CAAA;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;AASnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAmB,UAAU,CACjD,CAAwB,KAAe,EAAE,GAA+B,EAAE,EAAE,CAC1E,iBAAiB,iCAAM,KAAK,KAAE,GAAG,IAAG,CACrB,CAAA;AAEnB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-container",
-  "version": "3.1.3-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.22+e1cd7f6d1",
+  "version": "3.1.3-alpha-MP-669-first-batch-of-rework-c1fb81067.24+c1fb81067",
   "description": "Toptal UI components library - Container",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "bugs": {
@@ -26,7 +26,7 @@
     "prepublishOnly": "yarn build:package"
   },
   "dependencies": {
-    "@toptal/picasso-utils": "3.1.1-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.22+e1cd7f6d1"
+    "@toptal/picasso-utils": "3.1.1-alpha-MP-669-first-batch-of-rework-c1fb81067.24+c1fb81067"
   },
   "peerDependencies": {
     "@toptal/picasso-provider": "*",
@@ -35,8 +35,8 @@
     "react": ">=16.12.0 < 19.0.0"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.1-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.289+e1cd7f6d1",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-MP-669-first-batch-of-rework-e1cd7f6d1.368+e1cd7f6d1"
+    "@toptal/picasso-provider": "5.0.1-alpha-MP-669-first-batch-of-rework-c1fb81067.291+c1fb81067",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-MP-669-first-batch-of-rework-c1fb81067.370+c1fb81067"
   },
   "publishConfig": {
     "access": "public"
@@ -46,5 +46,5 @@
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "e1cd7f6d145874c583419c992840043ba6ac330b"
+  "gitHead": "c1fb81067638a739fa725a4befdad405a78db876"
 }

package/src/Container/Container.tsx

@@ -4,7 +4,7 @@ import type { SpacingType } from '@toptal/picasso-provider'
 import type { StandardProps } from '@toptal/picasso-shared'
 import type { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react'
 import React from 'react'
-import { documentable, forwardRef } from '@toptal/picasso-utils'
+import { forwardRef } from '@toptal/picasso-utils'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import type { AlignItemsType, JustifyContentType, VariantType } from './styles'
@@ -19,16 +19,15 @@ type WrapType = 'wrap' | 'nowrap' | 'wrap-reverse'
 
 type BorderableType = 'transparent' | 'white'
 
+type BorderedType<V extends VariantType> = V extends BorderableType
+  ? boolean
+  : never
 export interface Props<V extends VariantType = VariantType>
   extends StandardProps,
     HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
   /** Content of Container */
   children?: ReactNode
-  /**
-   * Whether container should act as inline element `display: inline-block`
-   *
-   * @default false
-   */
+  /** Whether container should act as inline element `display: inline-block` */
   inline?: boolean
   /** Use flexbox */
   flex?: boolean
@@ -41,20 +40,12 @@ export interface Props<V extends VariantType = VariantType>
   /** 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
-   *
-   * @default false
-   */
+  bordered?: BorderedType<V>
+  /** Whether container has 8px border-radius applied or not */
   rounded?: boolean
   /** Style variant of Notification */
   variant?: V
-  /**
-   * Component used for the root node
-   *
-   * @default div
-   */
+  /** Component used for the root node */
   as?: ContainerType
   /** Text align of the inner text */
   align?: PropTypes.Alignment
@@ -72,108 +63,116 @@ export interface Props<V extends VariantType = VariantType>
   gap?: SpacingType
 }
 
+/**
+ * Separate component is needed for proper Storybook props display
+ */
+export const ContainerFunction = function ContainerFunction<
+  V extends VariantType
+>({
+  as = 'div',
+  inline = false,
+  rounded = false,
+  bordered = false as BorderedType<V>,
+  ref,
+  ...props
+}: Props<V> & { ref?: Ref<HTMLDivElement> | null }) {
+  const {
+    children,
+    className,
+    flex,
+    direction,
+    alignItems,
+    justifyContent,
+    wrap,
+    style,
+    variant,
+    align,
+    top,
+    bottom,
+    left,
+    right,
+    padded,
+    gap,
+    // Avoid passing external classes inside the rest props
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    classes: externalClasses,
+    ...rest
+  } = props
+
+  const Component = as
+
+  const spacingProps = { gap, padded, top, bottom, right, left }
+  const isBorderedVariant =
+    !variant || variant === 'white' || variant === 'transparent'
+
+  const getDisplayValue = (
+    isInline: boolean | undefined,
+    isFlex: boolean | undefined
+  ) => {
+    return isFlex
+      ? isInline
+        ? 'inline-flex'
+        : 'flex'
+      : isInline
+      ? 'inline-block'
+      : ''
+  }
+
+  return (
+    <Component
+      {...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' &&
+          alignmentClasses.direction[direction],
+
+        className
+      )}
+      style={{
+        // used for deprecated spacing props (typeof number)
+        ...getSpacingStyles(spacingProps),
+        ...style,
+      }}
+    >
+      {children}
+    </Component>
+  )
+}
+
+ContainerFunction.displayName = 'ContainerFunction'
+
 type ContainerProps = {
   <V extends VariantType = VariantType>(
     props: Props<V> & { ref?: Ref<HTMLDivElement> | null }
   ): ReactElement
   displayName?: string
-  defaultProps?: Partial<Props<VariantType>>
 }
 
 /**
  * Container component used for spacing 2 elements
  */
-export const Container: ContainerProps = documentable(
-  forwardRef<Props, HTMLDivElement>(
-    <V extends VariantType>(
-      { as = 'div', inline = false, rounded = false, ...props }: Props<V>,
-      ref: Ref<HTMLDivElement> | null
-    ) => {
-      const {
-        children,
-        className,
-        flex,
-        direction,
-        alignItems,
-        justifyContent,
-        bordered = false,
-        wrap,
-        style,
-        variant,
-        align,
-        top,
-        bottom,
-        left,
-        right,
-        padded,
-        gap,
-        // Avoid passing external classes inside the rest props
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        classes: externalClasses,
-        ...rest
-      } = props
-
-      const Component = as
-
-      const spacingProps = { gap, padded, top, bottom, right, left }
-      const isBorderedVariant =
-        !variant || variant === 'white' || variant === 'transparent'
-
-      const getDisplayValue = (
-        isInline: boolean | undefined,
-        isFlex: boolean | undefined
-      ) => {
-        return isFlex
-          ? isInline
-            ? 'inline-flex'
-            : 'flex'
-          : isInline
-          ? 'inline-block'
-          : ''
-      }
-
-      return (
-        <Component
-          {...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' &&
-              alignmentClasses.direction[direction],
-
-            className
-          )}
-          style={{
-            // used for deprecated spacing props (typeof number)
-            ...getSpacingStyles(spacingProps),
-            ...style,
-          }}
-        >
-          {children}
-        </Component>
-      )
-    }
-  ) as ContainerProps
-)
+export const Container: ContainerProps = forwardRef<Props, HTMLDivElement>(
+  <V extends VariantType>(props: Props<V>, ref: Ref<HTMLDivElement> | null) =>
+    ContainerFunction({ ...props, ref })
+) as ContainerProps
 
 Container.displayName = 'Container'
 

package/src/Container/story/index.jsx

@@ -1,4 +1,4 @@
-import { Container } from '../Container'
+import { ContainerFunction } from '../Container'
 import PicassoBook from '~/.storybook/components/PicassoBook'
 
 const page = PicassoBook.section('Layout').createPage(
@@ -9,9 +9,16 @@ const page = PicassoBook.section('Layout').createPage(
   `
 )
 
-page
-  .createTabChapter('Props')
-  .addComponentDocs({ component: Container, name: 'Container' })
+page.createTabChapter('Props').addComponentDocs({
+  component: ContainerFunction,
+  name: 'ContainerFunction',
+  additionalDocs: {
+    bordered: {
+      type: 'boolean',
+      defaultValue: 'false',
+    },
+  },
+})
 
 page
   .createChapter()