@drivy/cobalt 0.44.1 → 0.45.1

package/components/Layout/Components/LayoutStack.js

@@ -2,43 +2,42 @@ import { nanoid } from 'nanoid';
 import React, { Children, cloneElement, isValidElement } from 'react';
 import cx from 'classnames';
 
-const LayoutStackItem = ({ children, isTable, ...props }) => {
+const LayoutStackItem = ({ children, isTable, className, isTableHeader: _isTableHeader, ...props }) => {
     const Comp = isTable ? "tr" : "div";
-    return (React.createElement(Comp, { className: "cobalt-layout-stack__item", ...props }, children));
+    return (React.createElement(Comp, { className: cx("cobalt-layout-stack__item", className), ...props }, children));
 };
-const LayoutStackLinkItem = ({ children, ...hyperlinkProps }) => {
-    return (React.createElement("a", { className: "cobalt-layout-stack__item", ...hyperlinkProps }, children));
+const LayoutStackLinkItem = ({ children, className, ...hyperlinkProps }) => {
+    return (React.createElement("a", { className: cx("cobalt-layout-stack__item", className), ...hyperlinkProps }, children));
 };
 const isStackItem = (child) => {
-    return isValidElement(child) && child.type === LayoutStackItem;
+    return (isValidElement(child) &&
+        (child.type === LayoutStackItem || child.type === LayoutStackLinkItem));
 };
-const LayoutStack = ({ children, isTable, isPageHeader, }) => {
-    const headerElements = [];
-    const bodyElements = [];
-    const content = Children.map(children, (child) => {
-        if (isStackItem(child)) {
-            const newChild = cloneElement(child, { isTable, key: nanoid() });
-            if (newChild.props.isTable) {
-                if (newChild.props.isPageHeader) {
+const LayoutStack = ({ children, isTable, isPageHeader, className, ...props }) => {
+    const classNames = cx("cobalt-layout-stack", {
+        "cobalt-layout--isPageHeader": isPageHeader,
+    }, className);
+    if (isTable) {
+        const headerElements = [];
+        const bodyElements = [];
+        Children.map(children, (child) => {
+            if (isStackItem(child)) {
+                const newChild = cloneElement(child, { isTable: true, key: nanoid() });
+                if (newChild.props.isTableHeader) {
                     headerElements.push(newChild);
                 }
                 else {
                     bodyElements.push(newChild);
                 }
             }
-        }
-        return child;
-    });
-    const className = cx("cobalt-layout-stack", {
-        "cobalt-layout--isPageHeader": isPageHeader,
-    });
-    if (isTable) {
-        return (React.createElement("table", { className: className },
+            return child;
+        });
+        return (React.createElement("table", { className: classNames, ...props },
             !!headerElements.length && React.createElement("thead", null, headerElements),
             React.createElement("tbody", null, bodyElements)));
     }
     else {
-        return React.createElement("div", { className: className }, content);
+        return (React.createElement("div", { className: classNames, ...props }, children));
     }
 };
 LayoutStack.Item = LayoutStackItem;

package/components/Layout/Components/LayoutStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackItemPropsType =\n  | (React.HTMLAttributes<HTMLElement> & {\n      children: React.ReactNode\n      isTable: never\n      isPageHeader: never\n    })\n  | (React.HTMLAttributes<HTMLElement> & {\n      children: React.ReactNode\n      isPageHeader?: boolean\n      isTable?: boolean\n    })\n\ntype LayoutStackLinkItemPropsType =\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    children: React.ReactNode\n    isPageHeader?: boolean\n  }\n\nconst LayoutStackItem = ({\n  children,\n  isTable,\n  ...props\n}: LayoutStackItemPropsType) => {\n  const Comp = isTable ? \"tr\" : \"div\"\n  return (\n    <Comp className=\"cobalt-layout-stack__item\" {...props}>\n      {children}\n    </Comp>\n  )\n}\n\nconst LayoutStackLinkItem = ({\n  children,\n  ...hyperlinkProps\n}: LayoutStackLinkItemPropsType) => {\n  return (\n    <a className=\"cobalt-layout-stack__item\" {...hyperlinkProps}>\n      {children}\n    </a>\n  )\n}\n\nconst isStackItem = (\n  child: React.ReactNode\n): child is React.ReactElement<Omit<LayoutStackItemPropsType, \"children\">> => {\n  return isValidElement(child) && child.type === LayoutStackItem\n}\n\nconst LayoutStack = ({\n  children,\n  isTable,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isTable?: boolean\n  isPageHeader?: boolean\n}) => {\n  const headerElements: React.ReactElement[] = []\n  const bodyElements: React.ReactElement[] = []\n  const content = Children.map(children, (child) => {\n    if (isStackItem(child)) {\n      const newChild = cloneElement(child, { isTable, key: nanoid() })\n      if (newChild.props.isTable) {\n        if (newChild.props.isPageHeader) {\n          headerElements.push(newChild)\n        } else {\n          bodyElements.push(newChild)\n        }\n      }\n    }\n    return child\n  })\n  const className = cx(\"cobalt-layout-stack\", {\n    \"cobalt-layout--isPageHeader\": isPageHeader,\n  })\n  if (isTable) {\n    return (\n      <table className={className}>\n        {!!headerElements.length && <thead>{headerElements}</thead>}\n        <tbody>{bodyElements}</tbody>\n      </table>\n    )\n  } else {\n    return <div className={className}>{content}</div>\n  }\n}\n\nLayoutStack.Item = LayoutStackItem\n\nLayoutStack.LinkItem = LayoutStackLinkItem\n\nexport default LayoutStack\n"],"names":[],"mappings":";;;;AAsBA,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACiB,KAAI;IAC7B,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;AACnC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2BAA2B,EAAA,GAAK,KAAK,EAAA,EAClD,QAAQ,CACJ,EACR;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAC3B,QAAQ,EACR,GAAG,cAAc,EACY,KAAI;IACjC,QACE,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,2BAA2B,EAAK,GAAA,cAAc,EACxD,EAAA,QAAQ,CACP,EACL;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAClB,KAAsB,KACqD;IAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe,CAAA;AAChE,CAAC,CAAA;AAEK,MAAA,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,GAKb,KAAI;IACH,MAAM,cAAc,GAAyB,EAAE,CAAA;IAC/C,MAAM,YAAY,GAAyB,EAAE,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/C,QAAA,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AAChE,YAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE;AAC1B,gBAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE;AAC/B,oBAAA,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC9B;qBAAM;AACL,oBAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC5B;aACF;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAC,CAAA;AACF,IAAA,MAAM,SAAS,GAAG,EAAE,CAAC,qBAAqB,EAAE;AAC1C,QAAA,6BAA6B,EAAE,YAAY;AAC5C,KAAA,CAAC,CAAA;IACF,IAAI,OAAO,EAAE;AACX,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,SAAS,EAAA;AACxB,YAAA,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,cAAc,CAAS;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,YAAY,CAAS,CACvB,EACT;KACF;SAAM;AACL,QAAA,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAG,EAAA,OAAO,CAAO,CAAA;KAClD;AACH,EAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA;AAElC,WAAW,CAAC,QAAQ,GAAG,mBAAmB;;;;"}
+{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackPropsType =\n  | (React.HTMLAttributes<HTMLDivElement> & {\n      children: React.ReactNode\n      isTable: never\n      isPageHeader: never\n    })\n  | (React.HTMLAttributes<HTMLTableElement> & {\n      children: React.ReactNode\n      isPageHeader?: boolean\n      isTable?: boolean\n    })\n\ntype LayoutStackItemPropsType =\n  | (React.HTMLAttributes<HTMLDivElement> & {\n      children: React.ReactNode\n      isTable: never\n      isTableHeader: never\n    })\n  | (React.HTMLAttributes<HTMLTableRowElement> & {\n      children: React.ReactNode\n      isTable?: boolean\n      isTableHeader?: boolean\n    })\n\ntype LayoutStackLinkItemPropsType =\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    children: React.ReactNode\n  }\n\nconst LayoutStackItem = ({\n  children,\n  isTable,\n  className,\n  isTableHeader: _isTableHeader,\n  ...props\n}: LayoutStackItemPropsType) => {\n  const Comp = isTable ? \"tr\" : \"div\"\n  return (\n    <Comp className={cx(\"cobalt-layout-stack__item\", className)} {...props}>\n      {children}\n    </Comp>\n  )\n}\n\nconst LayoutStackLinkItem = ({\n  children,\n  className,\n  ...hyperlinkProps\n}: LayoutStackLinkItemPropsType) => {\n  return (\n    <a\n      className={cx(\"cobalt-layout-stack__item\", className)}\n      {...hyperlinkProps}\n    >\n      {children}\n    </a>\n  )\n}\n\nconst isStackItem = (\n  child: React.ReactNode\n): child is React.ReactElement<Omit<LayoutStackItemPropsType, \"children\">> => {\n  return (\n    isValidElement(child) &&\n    (child.type === LayoutStackItem || child.type === LayoutStackLinkItem)\n  )\n}\n\nconst LayoutStack = ({\n  children,\n  isTable,\n  isPageHeader,\n  className,\n  ...props\n}: LayoutStackPropsType) => {\n  const classNames = cx(\n    \"cobalt-layout-stack\",\n    {\n      \"cobalt-layout--isPageHeader\": isPageHeader,\n    },\n    className\n  )\n  if (isTable) {\n    const headerElements: React.ReactElement[] = []\n    const bodyElements: React.ReactElement[] = []\n    Children.map(children, (child) => {\n      if (isStackItem(child)) {\n        const newChild = cloneElement(child, { isTable: true, key: nanoid() })\n        if (newChild.props.isTableHeader) {\n          headerElements.push(newChild)\n        } else {\n          bodyElements.push(newChild)\n        }\n      }\n      return child\n    })\n    return (\n      <table className={classNames} {...props}>\n        {!!headerElements.length && <thead>{headerElements}</thead>}\n        <tbody>{bodyElements}</tbody>\n      </table>\n    )\n  } else {\n    return (\n      <div className={classNames} {...props}>\n        {children}\n      </div>\n    )\n  }\n}\n\nLayoutStack.Item = LayoutStackItem\n\nLayoutStack.LinkItem = LayoutStackLinkItem\n\nexport default LayoutStack\n"],"names":[],"mappings":";;;;AAiCA,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,aAAa,EAAE,cAAc,EAC7B,GAAG,KAAK,EACiB,KAAI;IAC7B,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;AACnC,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAM,GAAA,KAAK,IACnE,QAAQ,CACJ,EACR;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,cAAc,EACY,KAAI;AACjC,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,KACjD,cAAc,EAAA,EAEjB,QAAQ,CACP,EACL;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAClB,KAAsB,KACqD;AAC3E,IAAA,QACE,cAAc,CAAC,KAAK,CAAC;AACrB,SAAC,KAAK,CAAC,IAAI,KAAK,eAAe,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAmB,CAAC,EACvE;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACa,KAAI;AACzB,IAAA,MAAM,UAAU,GAAG,EAAE,CACnB,qBAAqB,EACrB;AACE,QAAA,6BAA6B,EAAE,YAAY;KAC5C,EACD,SAAS,CACV,CAAA;IACD,IAAI,OAAO,EAAE;QACX,MAAM,cAAc,GAAyB,EAAE,CAAA;QAC/C,MAAM,YAAY,GAAyB,EAAE,CAAA;QAC7C,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/B,YAAA,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACtB,gBAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AACtE,gBAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,EAAE;AAChC,oBAAA,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC9B;qBAAM;AACL,oBAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC5B;aACF;AACD,YAAA,OAAO,KAAK,CAAA;AACd,SAAC,CAAC,CAAA;AACF,QAAA,QACE,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,UAAU,KAAM,KAAK,EAAA;AACpC,YAAA,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,cAAc,CAAS;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,YAAY,CAAS,CACvB,EACT;KACF;SAAM;QACL,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,EAAM,GAAA,KAAK,EAClC,EAAA,QAAQ,CACL,EACP;KACF;AACH,EAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA;AAElC,WAAW,CAAC,QAAQ,GAAG,mBAAmB;;;;"}

package/components/Layout/Surfaces/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import cx from 'classnames';
+
+const getDirectionClasses = (direction) => {
+    const directionClasses = [];
+    if (typeof direction === "string") {
+        directionClasses.push(`c-flex-${direction}`.replace("column", "col"));
+    }
+    else {
+        for (const [key, value] of Object.entries(direction)) {
+            directionClasses.push(`${key}:c-flex-${value}`.replace("column", "col"));
+        }
+    }
+    return directionClasses;
+};
+const Flexible = ({ children, direction = "column", bottomPadding = false, }) => {
+    return (React.createElement("div", { className: cx("cobalt-layout-flexible", getDirectionClasses(direction), {
+            "cobalt-layout--bottomPadding": bottomPadding,
+        }) }, children));
+};
+const FlexibleWithConstraint = ({ children, size, direction = "column", bottomPadding = false, }) => {
+    return (React.createElement("div", { className: cx(`cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`, getDirectionClasses(direction), {
+            "cobalt-layout--bottomPadding": bottomPadding,
+        }) }, children));
+};
+const Fixed = ({ children, width, direction = "column", bottomPadding = false, }) => {
+    return (React.createElement("div", { className: cx(`cobalt-layout-fixed cobalt-layout-fixed--${width}`, getDirectionClasses(direction), {
+            "cobalt-layout--bottomPadding": bottomPadding,
+        }) }, children));
+};
+
+export { Fixed, Flexible, FlexibleWithConstraint };
+//# sourceMappingURL=index.js.map

package/components/Layout/Surfaces/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/Surfaces/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\"\nimport cx from \"classnames\"\nimport { breakpoints } from \"../../../tokens\"\n\nexport type ResponsiveProp<T> = {\n  [key in keyof typeof breakpoints]?: T\n}\n\ntype DirectionProp = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\ntype ResponsiveDirection = ResponsiveProp<DirectionProp>\n\nconst getDirectionClasses = (\n  direction: ResponsiveDirection | DirectionProp\n) => {\n  const directionClasses: string[] = []\n  if (typeof direction === \"string\") {\n    directionClasses.push(`c-flex-${direction}`.replace(\"column\", \"col\"))\n  } else {\n    for (const [key, value] of Object.entries(direction)) {\n      directionClasses.push(`${key}:c-flex-${value}`.replace(\"column\", \"col\"))\n    }\n  }\n  return directionClasses\n}\n\nexport const Flexible = ({\n  children,\n  direction = \"column\",\n  bottomPadding = false,\n}: {\n  children?: ReactNode\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-flexible\", getDirectionClasses(direction), {\n        \"cobalt-layout--bottomPadding\": bottomPadding,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const FlexibleWithConstraint = ({\n  children,\n  size,\n  direction = \"column\",\n  bottomPadding = false,\n}: {\n  children?: ReactNode\n  size: \"small\" | \"medium\" | \"large\"\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n        }\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const Fixed = ({\n  children,\n  width,\n  direction = \"column\",\n  bottomPadding = false,\n}: {\n  children?: ReactNode\n  width: 280 | 420 | 600\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-fixed cobalt-layout-fixed--${width}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n        }\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAWA,MAAM,mBAAmB,GAAG,CAC1B,SAA8C,KAC5C;IACF,MAAM,gBAAgB,GAAa,EAAE,CAAA;AACrC,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,SAAS,CAAE,CAAA,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;KACtE;SAAM;AACL,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AACpD,YAAA,gBAAgB,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,WAAW,KAAK,CAAA,CAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;SACzE;KACF;AACD,IAAA,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;AAEY,MAAA,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,GAKtB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE;AACtE,YAAA,8BAA8B,EAAE,aAAa;AAC9C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH,EAAC;AAEY,MAAA,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,GAMtB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,2EAAA,EAA8E,IAAI,CAAA,CAAE,EACpF,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC9C,SAAA,CACF,EAEA,EAAA,QAAQ,CACL,EACP;AACH,EAAC;AAEY,MAAA,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,GAMtB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,yCAAA,EAA4C,KAAK,CAAA,CAAE,EACnD,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC9C,SAAA,CACF,EAEA,EAAA,QAAQ,CACL,EACP;AACH;;;;"}

package/index.js

@@ -51,6 +51,7 @@ export { default as LayoutSection } from './components/Layout/Components/LayoutS
 export { default as LayoutSectionTitle } from './components/Layout/Components/LayoutSectionTitle.js';
 export { default as LayoutCard } from './components/Layout/Components/LayoutCard.js';
 export { default as LayoutStack } from './components/Layout/Components/LayoutStack.js';
+export { Fixed, Flexible, FlexibleWithConstraint } from './components/Layout/Surfaces/index.js';
 export { default as useBreakpoint } from './hooks/useBreakpoint.js';
 export { getMonthDaysByWeeks, getWeekDays } from './components/Calendar/utils.js';
 export { default as AccountDetailsIcon } from './components/Icon/__generated__/AccountDetailsIcon.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.44.1",
+  "version": "0.45.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -59,7 +59,7 @@
     "@storybook/react": "7.6.20",
     "@storybook/react-webpack5": "7.6.20",
     "@svgr/cli": "7.0.0",
-    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "14.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/fs-extra": "11.0.4",
@@ -80,10 +80,10 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "nested-object-access": "^0.2.5",
-    "np": "10.0.5",
+    "np": "10.0.7",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "7.3.4",
-    "prettier": "3.3.2",
+    "prettier": "3.3.3",
     "raw-loader": "4.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -97,7 +97,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.77.7",
+    "sass": "1.77.8",
     "sass-loader": "13.3.3",
     "sharp": "0.33.4",
     "sharp-cli": "4.2.0",
@@ -107,7 +107,7 @@
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.3.2",
     "ts-jest": "29.2.2",
-    "tsx": "4.11.0",
+    "tsx": "4.16.2",
     "typescript": "5.4.5"
   },
   "keywords": [

package/types/src/components/Layout/Components/LayoutStack.d.ts

@@ -1,24 +1,28 @@
 import React from "react";
-type LayoutStackItemPropsType = (React.HTMLAttributes<HTMLElement> & {
+type LayoutStackPropsType = (React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     isTable: never;
     isPageHeader: never;
-}) | (React.HTMLAttributes<HTMLElement> & {
+}) | (React.HTMLAttributes<HTMLTableElement> & {
     children: React.ReactNode;
     isPageHeader?: boolean;
     isTable?: boolean;
 });
+type LayoutStackItemPropsType = (React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    isTable: never;
+    isTableHeader: never;
+}) | (React.HTMLAttributes<HTMLTableRowElement> & {
+    children: React.ReactNode;
+    isTable?: boolean;
+    isTableHeader?: boolean;
+});
 type LayoutStackLinkItemPropsType = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     children: React.ReactNode;
-    isPageHeader?: boolean;
 };
 declare const LayoutStack: {
-    ({ children, isTable, isPageHeader, }: {
-        children: React.ReactNode;
-        isTable?: boolean;
-        isPageHeader?: boolean;
-    }): React.JSX.Element;
-    Item: ({ children, isTable, ...props }: LayoutStackItemPropsType) => React.JSX.Element;
-    LinkItem: ({ children, ...hyperlinkProps }: LayoutStackLinkItemPropsType) => React.JSX.Element;
+    ({ children, isTable, isPageHeader, className, ...props }: LayoutStackPropsType): React.JSX.Element;
+    Item: ({ children, isTable, className, isTableHeader: _isTableHeader, ...props }: LayoutStackItemPropsType) => React.JSX.Element;
+    LinkItem: ({ children, className, ...hyperlinkProps }: LayoutStackLinkItemPropsType) => React.JSX.Element;
 };
 export default LayoutStack;

package/types/src/index.d.ts

@@ -49,6 +49,7 @@ export { default as Popover } from "./components/Popover";
 export { default as HorizontalList, HorizontalListPaddingBlock, } from "./components/HorizontalList";
 /** Layouts */
 export * from "./components/Layout/Components";
+export * from "./components/Layout/Surfaces";
 /** HOOKS */
 export { default as useBreakpoint } from "./hooks/useBreakpoint";
 /** utils **/