braid-design-system 0.0.0-gap-stack-20240815054002 → 0.0.0-gap-stack-20240815060712

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # braid-design-system
 
-## 0.0.0-gap-stack-20240815054002
+## 0.0.0-gap-stack-20240815060712
 
 ### Major Changes
 

package/dist/lib/components/Column/Column.cjs

@@ -15,17 +15,7 @@ const Column = ({
   hideAbove,
   ...restProps
 }) => {
-  const {
-    collapseMobile,
-    collapseTablet,
-    collapseDesktop,
-    mobileSpace,
-    tabletSpace,
-    desktopSpace,
-    wideSpace,
-    collapsibleAlignmentChildProps,
-    component
-  } = React.useContext(lib_components_Columns_ColumnsContext_cjs.ColumnsContext);
+  const { component } = React.useContext(lib_components_Columns_ColumnsContext_cjs.ColumnsContext);
   const [hideOnMobile, hideOnTablet, hideOnDesktop, hideOnWide] = lib_utils_resolveResponsiveRangeProps_cjs.resolveResponsiveRangeProps({
     below: hideBelow,
     above: hideAbove
@@ -49,28 +39,7 @@ const Column = ({
         width !== "content" ? lib_components_Column_Column_css_cjs.width[width] : null
       ],
       ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        lib_components_Box_Box_cjs.Box,
-        {
-          component,
-          paddingLeft: lib_utils_optimizeResponsiveArray_cjs.optimizeResponsiveArray([
-            collapseMobile ? "none" : mobileSpace,
-            collapseTablet ? "none" : tabletSpace,
-            collapseDesktop ? "none" : desktopSpace,
-            wideSpace
-          ]),
-          paddingTop: collapseMobile || collapseTablet || collapseDesktop ? lib_utils_optimizeResponsiveArray_cjs.optimizeResponsiveArray([
-            collapseMobile ? mobileSpace : "none",
-            collapseTablet ? tabletSpace : "none",
-            collapseDesktop ? desktopSpace : "none",
-            "none"
-          ]) : void 0,
-          height: "full",
-          ...collapsibleAlignmentChildProps,
-          className: lib_components_Column_Column_css_cjs.columnContent,
-          children
-        }
-      )
+      children
     }
   );
 };

package/dist/lib/components/Column/Column.css.cjs

@@ -3,7 +3,7 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 fileScope.setFileScope("src/lib/components/Column/Column.css.ts", "braid-design-system");
 const column = css.style({}, "column");
-const columnContent = css.style({
+css.style({
   selectors: {
     [`${column}:first-child > &`]: {
       paddingTop: 0
@@ -26,5 +26,4 @@ const width = css.styleVariants({
 }, "width");
 fileScope.endFileScope();
 exports.column = column;
-exports.columnContent = columnContent;
 exports.width = width;

package/dist/lib/components/Column/Column.css.mjs

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants } from "@vanilla-extract/css";
 setFileScope("src/lib/components/Column/Column.css.ts", "braid-design-system");
 const column = style({}, "column");
-const columnContent = style({
+style({
   selectors: {
     [`${column}:first-child > &`]: {
       paddingTop: 0
@@ -26,6 +26,5 @@ const width = styleVariants({
 endFileScope();
 export {
   column,
-  columnContent,
   width
 };

package/dist/lib/components/Column/Column.mjs

@@ -5,7 +5,7 @@ import { Box } from "../Box/Box.mjs";
 import { ColumnsContext } from "../Columns/ColumnsContext.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { resolveResponsiveRangeProps } from "../../utils/resolveResponsiveRangeProps.mjs";
-import { column, width, columnContent } from "./Column.css.mjs";
+import { column, width } from "./Column.css.mjs";
 const Column = ({
   children,
   data,
@@ -14,17 +14,7 @@ const Column = ({
   hideAbove,
   ...restProps
 }) => {
-  const {
-    collapseMobile,
-    collapseTablet,
-    collapseDesktop,
-    mobileSpace,
-    tabletSpace,
-    desktopSpace,
-    wideSpace,
-    collapsibleAlignmentChildProps,
-    component
-  } = useContext(ColumnsContext);
+  const { component } = useContext(ColumnsContext);
   const [hideOnMobile, hideOnTablet, hideOnDesktop, hideOnWide] = resolveResponsiveRangeProps({
     below: hideBelow,
     above: hideAbove
@@ -48,28 +38,7 @@ const Column = ({
         width$1 !== "content" ? width[width$1] : null
       ],
       ...buildDataAttributes({ data, validateRestProps: restProps }),
-      children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          component,
-          paddingLeft: optimizeResponsiveArray([
-            collapseMobile ? "none" : mobileSpace,
-            collapseTablet ? "none" : tabletSpace,
-            collapseDesktop ? "none" : desktopSpace,
-            wideSpace
-          ]),
-          paddingTop: collapseMobile || collapseTablet || collapseDesktop ? optimizeResponsiveArray([
-            collapseMobile ? mobileSpace : "none",
-            collapseTablet ? tabletSpace : "none",
-            collapseDesktop ? desktopSpace : "none",
-            "none"
-          ]) : void 0,
-          height: "full",
-          ...collapsibleAlignmentChildProps,
-          className: columnContent,
-          children
-        }
-      )
+      children
     }
   );
 };

package/dist/lib/components/Columns/Columns.cjs

@@ -2,9 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const assert = require("assert");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
 const lib_utils_collapsibleAlignmentProps_cjs = require("../../utils/collapsibleAlignmentProps.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const lib_components_Columns_ColumnsContext_cjs = require("./ColumnsContext.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
@@ -24,21 +22,7 @@ const Columns = ({
     lib_components_Columns_ColumnsContext_cjs.validColumnsComponents.includes(component),
     `Invalid Columns component: '${component}'. Should be one of [${lib_components_Columns_ColumnsContext_cjs.validColumnsComponents.map((c) => `'${c}'`).join(", ")}]`
   );
-  const normalizedSpace = lib_css_atoms_sprinkles_css_cjs.normalizeResponsiveValue(space);
-  const {
-    mobile: mobileSpace = "none",
-    tablet: tabletSpace = mobileSpace,
-    desktop: desktopSpace = tabletSpace,
-    wide: wideSpace = desktopSpace
-  } = normalizedSpace;
-  const {
-    collapsibleAlignmentProps,
-    collapsibleAlignmentChildProps,
-    collapseMobile,
-    collapseTablet,
-    collapseDesktop,
-    orderChildren
-  } = lib_utils_collapsibleAlignmentProps_cjs.resolveCollapsibleAlignmentProps({
+  const { collapsibleAlignmentProps } = lib_utils_collapsibleAlignmentProps_cjs.resolveCollapsibleAlignmentProps({
     collapseBelow,
     align,
     alignY,
@@ -49,28 +33,16 @@ const Columns = ({
     {
       component,
       ...collapsibleAlignmentProps,
-      className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", {
-        mobile: collapseMobile ? "none" : mobileSpace,
-        tablet: collapseTablet ? "none" : tabletSpace,
-        desktop: collapseDesktop ? "none" : desktopSpace,
-        wide: wideSpace
-      }),
+      display: "flex",
+      gap: space,
       ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         lib_components_Columns_ColumnsContext_cjs.ColumnsContext.Provider,
         {
           value: {
-            collapseMobile,
-            collapseTablet,
-            collapseDesktop,
-            mobileSpace,
-            tabletSpace,
-            desktopSpace,
-            wideSpace,
-            collapsibleAlignmentChildProps,
             component
           },
-          children: orderChildren(children)
+          children
         }
       )
     }

package/dist/lib/components/Columns/Columns.mjs

@@ -1,9 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import assert from "assert";
 import { Box } from "../Box/Box.mjs";
-import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
 import { resolveCollapsibleAlignmentProps } from "../../utils/collapsibleAlignmentProps.mjs";
-import { normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { validColumnsComponents, ColumnsContext } from "./ColumnsContext.mjs";
 const Columns = ({
@@ -21,21 +19,7 @@ const Columns = ({
     validColumnsComponents.includes(component),
     `Invalid Columns component: '${component}'. Should be one of [${validColumnsComponents.map((c) => `'${c}'`).join(", ")}]`
   );
-  const normalizedSpace = normalizeResponsiveValue(space);
-  const {
-    mobile: mobileSpace = "none",
-    tablet: tabletSpace = mobileSpace,
-    desktop: desktopSpace = tabletSpace,
-    wide: wideSpace = desktopSpace
-  } = normalizedSpace;
-  const {
-    collapsibleAlignmentProps,
-    collapsibleAlignmentChildProps,
-    collapseMobile,
-    collapseTablet,
-    collapseDesktop,
-    orderChildren
-  } = resolveCollapsibleAlignmentProps({
+  const { collapsibleAlignmentProps } = resolveCollapsibleAlignmentProps({
     collapseBelow,
     align,
     alignY,
@@ -46,28 +30,16 @@ const Columns = ({
     {
       component,
       ...collapsibleAlignmentProps,
-      className: negativeMargin("left", {
-        mobile: collapseMobile ? "none" : mobileSpace,
-        tablet: collapseTablet ? "none" : tabletSpace,
-        desktop: collapseDesktop ? "none" : desktopSpace,
-        wide: wideSpace
-      }),
+      display: "flex",
+      gap: space,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: /* @__PURE__ */ jsx(
         ColumnsContext.Provider,
         {
           value: {
-            collapseMobile,
-            collapseTablet,
-            collapseDesktop,
-            mobileSpace,
-            tabletSpace,
-            desktopSpace,
-            wideSpace,
-            collapsibleAlignmentChildProps,
             component
           },
-          children: orderChildren(children)
+          children
         }
       )
     }

package/dist/lib/components/Columns/ColumnsContext.cjs

@@ -2,14 +2,6 @@
 const React = require("react");
 const validColumnsComponents = ["div", "span"];
 const ColumnsContext = React.createContext({
-  collapseMobile: false,
-  collapseTablet: false,
-  collapseDesktop: false,
-  mobileSpace: "none",
-  tabletSpace: "none",
-  desktopSpace: "none",
-  wideSpace: "none",
-  collapsibleAlignmentChildProps: null,
   component: "div"
 });
 exports.ColumnsContext = ColumnsContext;

package/dist/lib/components/Columns/ColumnsContext.mjs

@@ -1,14 +1,6 @@
 import { createContext } from "react";
 const validColumnsComponents = ["div", "span"];
 const ColumnsContext = createContext({
-  collapseMobile: false,
-  collapseTablet: false,
-  collapseDesktop: false,
-  mobileSpace: "none",
-  tabletSpace: "none",
-  desktopSpace: "none",
-  wideSpace: "none",
-  collapsibleAlignmentChildProps: null,
   component: "div"
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "0.0.0-gap-stack-20240815054002",
+  "version": "0.0.0-gap-stack-20240815060712",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {