@toptal/picasso-container 3.1.3-alpha-MP-669-first-batch-of-rework-c1fb81067.24 → 3.1.3-alpha-MP-669-remove-default-props-dkjf3234-7db07b500.31

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

@@ -7,7 +7,6 @@ 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;
@@ -24,7 +23,7 @@ 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?: BorderedType<V>;
+    bordered?: V extends BorderableType ? boolean : never;
     /** Whether container has 8px border-radius applied or not */
     rounded?: boolean;
     /** Style variant of Notification */
@@ -46,20 +45,12 @@ 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,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"}
+{"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

@@ -10,20 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { forwardRef } from '@toptal/picasso-utils';
+import { documentable, forwardRef } from '@toptal/picasso-utils';
 import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { alignmentClasses, variantClassesByColor } from './styles';
 import { getSpacingClasses, getSpacingStyles } from './utils';
 /**
- * Separate component is needed for proper Storybook props display
+ * Container component used for spacing 2 elements
  */
-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, 
+export const Container = documentable(forwardRef((props, ref) => {
+    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", "flex", "direction", "alignItems", "justifyContent", "wrap", "style", "variant", "align", "top", "bottom", "left", "right", "padded", "gap", "classes"]);
-    const Component = as;
+    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) => {
@@ -35,15 +33,16 @@ export const ContainerFunction = function ContainerFunction(_a) {
                 ? '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';
+Container.defaultProps = {
+    as: 'div',
+    inline: false,
+};
 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,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"}
+{"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/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const DEFAULT_INLINE = false;
+export declare const DEFAULT_AS = "div";
+export declare const DEFAULT_BORDERED = false;
+export declare const DEFAULT_ROUNDED = false;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/Container/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,QAAQ,CAAA;AACnC,eAAO,MAAM,UAAU,QAAQ,CAAA;AAC/B,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AACrC,eAAO,MAAM,eAAe,QAAQ,CAAA"}

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

@@ -0,0 +1,5 @@
+export const DEFAULT_INLINE = false;
+export const DEFAULT_AS = 'div';
+export const DEFAULT_BORDERED = false;
+export const DEFAULT_ROUNDED = false;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/Container/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAA;AACnC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAA;AACrC,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-container",
-  "version": "3.1.3-alpha-MP-669-first-batch-of-rework-c1fb81067.24+c1fb81067",
+  "version": "3.1.3-alpha-MP-669-remove-default-props-dkjf3234-7db07b500.31+7db07b500",
   "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-c1fb81067.24+c1fb81067"
+    "@toptal/picasso-utils": "3.1.1-alpha-MP-669-remove-default-props-dkjf3234-7db07b500.31+7db07b500"
   },
   "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-c1fb81067.291+c1fb81067",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-MP-669-first-batch-of-rework-c1fb81067.370+c1fb81067"
+    "@toptal/picasso-provider": "5.0.2-alpha-MP-669-remove-default-props-dkjf3234-7db07b500.10+7db07b500",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-MP-669-remove-default-props-dkjf3234-7db07b500.377+7db07b500"
   },
   "publishConfig": {
     "access": "public"
@@ -46,5 +46,5 @@
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "c1fb81067638a739fa725a4befdad405a78db876"
+  "gitHead": "7db07b500402a91f0c09da3be294305a194fd1e4"
 }

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 { forwardRef } from '@toptal/picasso-utils'
+import { documentable, forwardRef } from '@toptal/picasso-utils'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import type { AlignItemsType, JustifyContentType, VariantType } from './styles'
@@ -19,14 +19,12 @@ 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` */
   inline?: boolean
   /** Use flexbox */
@@ -40,7 +38,7 @@ export interface Props<V extends VariantType = VariantType>
   /** Defines flex-wrap style property */
   wrap?: WrapType
   /** Whether (`white`, `transparent`) container has border or not */
-  bordered?: BorderedType<V>
+  bordered?: V extends BorderableType ? boolean : never
   /** Whether container has 8px border-radius applied or not */
   rounded?: boolean
   /** Style variant of Notification */
@@ -63,118 +61,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 = forwardRef<Props, HTMLDivElement>(
-  <V extends VariantType>(props: Props<V>, ref: Ref<HTMLDivElement> | null) =>
-    ContainerFunction({ ...props, ref })
-) as ContainerProps
+export const Container: ContainerProps = documentable(
+  forwardRef<Props, HTMLDivElement>(
+    <V extends VariantType>(
+      props: Props<V>,
+      ref: Ref<HTMLDivElement> | null
+    ) => {
+      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,
+        ...rest
+      } = props
+
+      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
+)
 
 Container.displayName = 'Container'
 
+Container.defaultProps = {
+  as: 'div',
+  inline: false,
+}
+
 export default Container
 export type { VariantType }

package/src/Container/constants.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_INLINE = false
+export const DEFAULT_AS = 'div'
+export const DEFAULT_BORDERED = false
+export const DEFAULT_ROUNDED = false

package/src/Container/story/index.jsx

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