@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/FullBleed/FullBleed.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { Box, BoxProps } from "../Box";
+
+/** FullBleedProps */
+
+/**
+ * Utility to break out of parent containers
+ */
+export var FullBleed = styled(Box).withConfig({
+  displayName: "FullBleed",
+  componentId: "sc-g9qwfe-0"
+})([""]);
+FullBleed.defaultProps = {
+  position: "relative",
+  left: "50%",
+  right: "50%",
+  width: "100vw",
+  maxWidth: "100vw",
+  marginLeft: "-50vw",
+  marginRight: "-50vw"
+};
+//# sourceMappingURL=FullBleed.js.map

package/dist/esm/elements/FullBleed/FullBleed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullBleed.js","names":["styled","Box","BoxProps","FullBleed","withConfig","displayName","componentId","defaultProps","position","left","right","width","maxWidth","marginLeft","marginRight"],"sources":["../../../../src/elements/FullBleed/FullBleed.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** FullBleedProps */\nexport type FullBleedProps = BoxProps\n\n/**\n * Utility to break out of parent containers\n */\nexport const FullBleed = styled(Box)``\n\nFullBleed.defaultProps = {\n  position: \"relative\",\n  left: \"50%\",\n  right: \"50%\",\n  width: \"100vw\",\n  maxWidth: \"100vw\",\n  marginLeft: \"-50vw\",\n  marginRight: \"-50vw\",\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGH,MAAM,CAACC,GAAG,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAEtCH,SAAS,CAACI,YAAY,GAAG;EACvBC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,OAAO;EACdC,QAAQ,EAAE,OAAO;EACjBC,UAAU,EAAE,OAAO;EACnBC,WAAW,EAAE;AACf,CAAC"}

package/dist/esm/elements/FullBleed/FullBleed.story.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box } from "../Box";
+import { Text } from "../Text";
+import { FullBleed } from "./FullBleed";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: FullBleed,
+  title: "Components/FullBleed",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A component that breaks out of its container to span the full width of the viewport."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    bg: "blue10",
+    px: 2,
+    py: 1,
+    children: /*#__PURE__*/React.createElement(Text, {
+      my: 2,
+      variant: "sm-display"
+    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis.")
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(Box, {
+      bg: "mono5",
+      maxWidth: 900,
+      mx: "auto",
+      px: 2,
+      py: 1
+    }, /*#__PURE__*/React.createElement(Text, {
+      my: 2,
+      variant: "sm-display"
+    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis."), /*#__PURE__*/React.createElement(FullBleed, args), /*#__PURE__*/React.createElement(Text, {
+      my: 2,
+      variant: "sm-display"
+    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis."));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "FullBleed component breaking out of its container."
+      }
+    }
+  }
+};
+//# sourceMappingURL=FullBleed.story.js.map

package/dist/esm/elements/FullBleed/FullBleed.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullBleed.story.js","names":["React","Box","Text","FullBleed","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","bg","px","py","children","createElement","my","variant","render","maxWidth","mx","story"],"sources":["../../../../src/elements/FullBleed/FullBleed.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { FullBleed } from \"./FullBleed\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: FullBleed,\n  title: \"Components/FullBleed\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A component that breaks out of its container to span the full width of the viewport.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    bg: \"blue10\",\n    px: 2,\n    py: 1,\n    children: (\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n    ),\n  },\n  render: (args) => (\n    <Box bg=\"mono5\" maxWidth={900} mx=\"auto\" px={2} py={1}>\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n\n      <FullBleed {...args} />\n\n      <Text my={2} variant=\"sm-display\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia\n        temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit\n        accusamus, libero quod, ipsum nisi non nihil praesentium, optio\n        cupiditate adipisci omnis.\n      </Text>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"FullBleed component breaking out of its container.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,SAAS;AAClB,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,SAAS;EACpBG,KAAK,EAAE,sBAAsB;EAC7BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,EAAE,EAAE,QAAQ;IACZC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,CAAC;IACLC,QAAQ,eACNlB,KAAA,CAAAmB,aAAA,CAACjB,IAAI;MAACkB,EAAE,EAAE,CAAE;MAACC,OAAO,EAAC;IAAY,GAAC,uOAKlC;EAEJ,CAAC;EACDC,MAAM,EAAE,SAARA,MAAMA,CAAGR,IAAI;IAAA,oBACXd,KAAA,CAAAmB,aAAA,CAAClB,GAAG;MAACc,EAAE,EAAC,OAAO;MAACQ,QAAQ,EAAE,GAAI;MAACC,EAAE,EAAC,MAAM;MAACR,EAAE,EAAE,CAAE;MAACC,EAAE,EAAE;IAAE,gBACpDjB,KAAA,CAAAmB,aAAA,CAACjB,IAAI;MAACkB,EAAE,EAAE,CAAE;MAACC,OAAO,EAAC;IAAY,GAAC,uOAKlC,CAAO,eAEPrB,KAAA,CAAAmB,aAAA,CAAChB,SAAS,EAAKW,IAAI,CAAI,eAEvBd,KAAA,CAAAmB,aAAA,CAACjB,IAAI;MAACkB,EAAE,EAAE,CAAE;MAACC,OAAO,EAAC;IAAY,GAAC,uOAKlC,CAAO,CACH;EAAA,CACP;EACDb,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXe,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/FullBleed/index.js

@@ -0,0 +1,2 @@
+export * from "./FullBleed";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/FullBleed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/FullBleed/index.ts"],"sourcesContent":["export * from \"./FullBleed\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/GridColumns/GridColumns.js

@@ -0,0 +1,68 @@
+var _excluded = ["span", "start", "wrap"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo } from "react";
+import styled from "styled-components";
+import { gridColumn, GridColumnProps } from "styled-system";
+import { Box, BoxProps } from "../Box";
+import { CSSGrid, CSSGridProps } from "../CSSGrid";
+import { calculateGridColumn, ColumnCell, GRID_COLUMN_FULL_WIDTHS } from "./calculateGridColumn";
+
+/** GridColumns implements `Box` and the common grid properties */
+
+/**
+ * A 12-column fluid grid
+ */
+export var GridColumns = styled(CSSGrid).withConfig({
+  displayName: "GridColumns",
+  componentId: "sc-1g9p6xx-0"
+})(["grid-template-columns:repeat(12,1fr);"]);
+GridColumns.defaultProps = {
+  gridColumnGap: [1, 2],
+  gridRowGap: [1, 2]
+};
+var Cell = styled(Box).withConfig({
+  displayName: "GridColumns__Cell",
+  componentId: "sc-1g9p6xx-1"
+})(["", ""], gridColumn);
+
+/** Column implements `Box` and `gridColumn` */
+
+/**
+ * A column sits within the GridColumns and spans the columns,
+ * sitting between gutters.
+ */
+export var Column = function Column(_ref) {
+  var span = _ref.span,
+    start = _ref.start,
+    wrap = _ref.wrap,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var gridColumnValue = useMemo(function () {
+    return calculateGridColumn({
+      span: span,
+      start: start
+    });
+  }, [span, start]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cell, _extends({
+    gridColumn: gridColumnValue
+  }, rest)), wrap && /*#__PURE__*/React.createElement(ColumnWrap, {
+    gridColumnValue: gridColumnValue
+  }));
+};
+var ColumnWrap = function ColumnWrap(_ref2) {
+  var gridColumnValue = _ref2.gridColumnValue;
+  return /*#__PURE__*/React.createElement(Cell
+  // Spans the remainder of the columns until the end
+  , {
+    gridColumn: ["auto / -1"]
+    // Hides the break if the value presented is going to span the full
+    // width of the column anyway. Prevents duplicated row gaps.
+    ,
+    display: gridColumnValue.map(function (value) {
+      return GRID_COLUMN_FULL_WIDTHS.includes(value) ? "none" : "block";
+    })
+  });
+};
+ColumnWrap.displayName = "ColumnWrap";
+//# sourceMappingURL=GridColumns.js.map

package/dist/esm/elements/GridColumns/GridColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridColumns.js","names":["React","useMemo","styled","gridColumn","GridColumnProps","Box","BoxProps","CSSGrid","CSSGridProps","calculateGridColumn","ColumnCell","GRID_COLUMN_FULL_WIDTHS","GridColumns","withConfig","displayName","componentId","defaultProps","gridColumnGap","gridRowGap","Cell","Column","_ref","span","start","wrap","rest","_objectWithoutProperties","_excluded","gridColumnValue","createElement","Fragment","_extends","ColumnWrap","_ref2","display","map","value","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n  calculateGridColumn,\n  ColumnCell,\n  GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid)`\n  grid-template-columns: repeat(12, 1fr);\n`\n\nGridColumns.defaultProps = {\n  gridColumnGap: [1, 2],\n  gridRowGap: [1, 2],\n}\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n  ${gridColumn}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n  /** denotes whether or not to break to a new row after column */\n  wrap?: boolean\n  children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<React.PropsWithChildren<ColumnProps>> = ({\n  span,\n  start,\n  wrap,\n  ...rest\n}) => {\n  const gridColumnValue = useMemo(() => {\n    return calculateGridColumn({ span, start })\n  }, [span, start])\n\n  return (\n    <>\n      <Cell gridColumn={gridColumnValue} {...rest} />\n      {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n    </>\n  )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ gridColumnValue: string[] }>> = ({\n  gridColumnValue,\n}) => {\n  return (\n    <Cell\n      // Spans the remainder of the columns until the end\n      gridColumn={[\"auto / -1\"]}\n      // Hides the break if the value presented is going to span the full\n      // width of the column anyway. Prevents duplicated row gaps.\n      display={gridColumnValue.map((value) => {\n        return GRID_COLUMN_FULL_WIDTHS.includes(value) ? \"none\" : \"block\"\n      })}\n    />\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,UAAU,EAAEC,eAAe,QAAQ,eAAe;AAC3D,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,OAAO,EAAEC,YAAY;AAC9B,SACEC,mBAAmB,EACnBC,UAAU,EACVC,uBAAuB;;AAGzB;;AAGA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAGV,MAAM,CAACK,OAAO,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6CAEzC;AAEDH,WAAW,CAACI,YAAY,GAAG;EACzBC,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EACrBC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC;AACnB,CAAC;AAID,IAAMC,IAAI,GAAGjB,MAAM,CAACG,GAAG,CAAC,CAAAQ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACpBZ,UAAU,CACb;;AAED;;AAOA;AACA;AACA;AACA;AACA,OAAO,IAAMiB,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAK7D;EAAA,IAJJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACDC,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,IAAMC,eAAe,GAAG3B,OAAO,CAAC,YAAM;IACpC,OAAOQ,mBAAmB,CAAC;MAAEa,IAAI,EAAJA,IAAI;MAAEC,KAAK,EAALA;IAAM,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACD,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEjB,oBACEvB,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAA8B,QAAA,qBACE9B,KAAA,CAAA6B,aAAA,CAACV,IAAI,EAAAY,QAAA;IAAC5B,UAAU,EAAEyB;EAAgB,GAAKH,IAAI,EAAI,EAC9CD,IAAI,iBAAIxB,KAAA,CAAA6B,aAAA,CAACG,UAAU;IAACJ,eAAe,EAAEA;EAAgB,EAAG,CACxD;AAEP,CAAC;AAED,IAAMI,UAA4E,GAAG,SAA/EA,UAA4EA,CAAAC,KAAA,EAE5E;EAAA,IADJL,eAAe,GAAAK,KAAA,CAAfL,eAAe;EAEf,oBACE5B,KAAA,CAAA6B,aAAA,CAACV;EACC;EAAA;IACAhB,UAAU,EAAE,CAAC,WAAW;IACxB;IACA;IAAA;IACA+B,OAAO,EAAEN,eAAe,CAACO,GAAG,CAAC,UAACC,KAAK,EAAK;MACtC,OAAOzB,uBAAuB,CAAC0B,QAAQ,CAACD,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO;IACnE,CAAC;EAAE,EACH;AAEN,CAAC;AAdKJ,UAA4E,CAAAlB,WAAA"}

package/dist/esm/elements/GridColumns/GridColumns.story.js

@@ -0,0 +1,222 @@
+import React from "react";
+import { Box } from "../Box";
+import { Text } from "../Text";
+import { Column, GridColumns } from "./GridColumns";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var IPSUM = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto deleniti recusandae ullam laudantium ut reiciendis, doloribus qui sequi id ea, ad suscipit eos placeat magnam consequatur sunt, quaerat eius saepe.";
+var GridColumnsDebug = function GridColumnsDebug() {
+  return /*#__PURE__*/React.createElement(GridColumns, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    style: {
+      pointerEvents: "none"
+    }
+  }, Array.from(Array(12)).map(function (_, i) {
+    return /*#__PURE__*/React.createElement(Column, {
+      key: i,
+      span: [1],
+      bg: "rgba(255, 0, 0, 0.05)",
+      height: "100%"
+    });
+  }));
+};
+GridColumnsDebug.displayName = "GridColumnsDebug";
+export default {
+  component: GridColumns,
+  title: "Components/GridColumns",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A CSS Grid-based layout system that provides responsive columns with configurable spans and gutters."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var RealWorldExample = {
+  args: {
+    position: "relative",
+    m: 2,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GridColumnsDebug, null), /*#__PURE__*/React.createElement(Column, {
+      span: 6,
+      wrap: true
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: "h1",
+      variant: "xl"
+    }, "Page Title Long Enough So As To Line Break")), /*#__PURE__*/React.createElement(Column, {
+      span: 6
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: "h2",
+      variant: "lg-display",
+      mb: 1
+    }, "Page subtitle"), /*#__PURE__*/React.createElement(Text, null, IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      span: 5,
+      start: 8
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display",
+      mb: 1
+    }, "Featured content"), /*#__PURE__*/React.createElement(Box, {
+      bg: "mono10",
+      borderRadius: 4,
+      height: 400
+    })))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "A real-world example showing typical page layout with grid columns."
+      }
+    }
+  }
+};
+export var KitchenSink = {
+  args: {
+    border: "1px solid blue",
+    position: "relative",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GridColumnsDebug, null), /*#__PURE__*/React.createElement(Column, {
+      border: "1px solid red",
+      span: 4
+    }, /*#__PURE__*/React.createElement(Text, null, IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      border: "1px solid red",
+      span: 4
+    }, /*#__PURE__*/React.createElement(Text, null, IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      border: "1px solid green",
+      span: 4
+    }, /*#__PURE__*/React.createElement(Text, null, IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      border: "1px solid red",
+      span: 4,
+      wrap: true
+    }, /*#__PURE__*/React.createElement(Text, null, IPSUM, " ", IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      bg: "mono100",
+      span: [6]
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "mono0"
+    }, "This remains 2-columns at all breakpoints")), /*#__PURE__*/React.createElement(Column, {
+      bg: "mono100",
+      span: [6]
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "mono0"
+    }, "This remains 2-columns at all breakpoints")), /*#__PURE__*/React.createElement(Column, {
+      bg: "mono100",
+      span: 6
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "mono0"
+    }, "These are 2-columns at large breakpoints, and 1 at mobile")), /*#__PURE__*/React.createElement(Column, {
+      bg: "mono100",
+      span: 6
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "mono0"
+    }, "These are 2-columns at large breakpoints, and 1 at mobile")), /*#__PURE__*/React.createElement(Column, {
+      start: [2, 3, 4],
+      span: [9, 6, 3],
+      height: 300,
+      bg: "mono10",
+      borderRadius: 4
+    }), /*#__PURE__*/React.createElement(Column, {
+      height: 200,
+      bg: "purple100",
+      span: [12, 6],
+      start: [1, 4],
+      wrap: true
+    }), /*#__PURE__*/React.createElement(Column, {
+      bg: "mono100",
+      start: 4
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "mono0"
+    }, IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      border: "1px solid red",
+      span: 4,
+      start: 1
+    }, /*#__PURE__*/React.createElement(Text, null, IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      border: "1px solid red",
+      span: 4,
+      start: 6
+    }, /*#__PURE__*/React.createElement(Text, null, IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      border: "1px solid red",
+      span: 2,
+      start: 11
+    }, /*#__PURE__*/React.createElement(Text, null, IPSUM)), /*#__PURE__*/React.createElement(Column, {
+      bg: "red",
+      span: 1,
+      start: 1,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/React.createElement(Column, {
+      bg: "red",
+      span: 1,
+      start: 2,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/React.createElement(Column, {
+      bg: "red",
+      span: 1,
+      start: 3,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/React.createElement(Column, {
+      bg: "red",
+      span: 1,
+      start: 4,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/React.createElement(Column, {
+      bg: "red",
+      span: 1,
+      start: 5,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/React.createElement(Column, {
+      bg: "red",
+      span: 1,
+      start: 6,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/React.createElement(Column, {
+      bg: "red",
+      span: 1,
+      start: 7,
+      height: 100,
+      wrap: true
+    }), /*#__PURE__*/React.createElement(Column, {
+      gridColumn: "3 / 9",
+      bg: "purple100"
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "mono0"
+    }, "A custom grid-column value")))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Comprehensive example showing various column configurations and layouts."
+      }
+    }
+  }
+};
+export var CustomGutters = {
+  args: {
+    gridColumnGap: 4,
+    gridRowGap: 1,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(Array(12)).map(function (_, i) {
+      return /*#__PURE__*/React.createElement(Column, {
+        key: i,
+        span: 2,
+        bg: "mono10",
+        height: 100
+      });
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Grid columns with custom row and column gap spacing."
+      }
+    }
+  }
+};
+//# sourceMappingURL=GridColumns.story.js.map

package/dist/esm/elements/GridColumns/GridColumns.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridColumns.story.js","names":["React","Box","Text","Column","GridColumns","STORYBOOK_PROPS_BLOCKLIST","IPSUM","GridColumnsDebug","createElement","position","top","left","width","height","style","pointerEvents","Array","from","map","_","i","key","span","bg","displayName","component","title","tags","parameters","docs","description","controls","exclude","RealWorldExample","args","m","children","Fragment","wrap","as","variant","mb","start","borderRadius","story","KitchenSink","border","color","gridColumn","CustomGutters","gridColumnGap","gridRowGap"],"sources":["../../../../src/elements/GridColumns/GridColumns.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Column, GridColumns } from \"./GridColumns\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst IPSUM =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto deleniti recusandae ullam laudantium ut reiciendis, doloribus qui sequi id ea, ad suscipit eos placeat magnam consequatur sunt, quaerat eius saepe.\"\n\nconst GridColumnsDebug = () => (\n  <GridColumns\n    position=\"absolute\"\n    top={0}\n    left={0}\n    width=\"100%\"\n    height=\"100%\"\n    style={{ pointerEvents: \"none\" }}\n  >\n    {Array.from(Array(12)).map((_, i) => (\n      <Column key={i} span={[1]} bg=\"rgba(255, 0, 0, 0.05)\" height=\"100%\" />\n    ))}\n  </GridColumns>\n)\n\nexport default {\n  component: GridColumns,\n  title: \"Components/GridColumns\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A CSS Grid-based layout system that provides responsive columns with configurable spans and gutters.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const RealWorldExample = {\n  args: {\n    position: \"relative\",\n    m: 2,\n    children: (\n      <>\n        <GridColumnsDebug />\n        <Column span={6} wrap>\n          <Text as=\"h1\" variant=\"xl\">\n            Page Title Long Enough So As To Line Break\n          </Text>\n        </Column>\n        <Column span={6}>\n          <Text as=\"h2\" variant=\"lg-display\" mb={1}>\n            Page subtitle\n          </Text>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column span={5} start={8}>\n          <Text variant=\"sm-display\" mb={1}>\n            Featured content\n          </Text>\n          <Box bg=\"mono10\" borderRadius={4} height={400} />\n        </Column>\n      </>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"A real-world example showing typical page layout with grid columns.\",\n      },\n    },\n  },\n}\n\nexport const KitchenSink = {\n  args: {\n    border: \"1px solid blue\",\n    position: \"relative\",\n    children: (\n      <>\n        <GridColumnsDebug />\n        <Column border=\"1px solid red\" span={4}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={4}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid green\" span={4}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={4} wrap>\n          <Text>\n            {IPSUM} {IPSUM}\n          </Text>\n        </Column>\n        <Column bg=\"mono100\" span={[6]}>\n          <Text color=\"mono0\">This remains 2-columns at all breakpoints</Text>\n        </Column>\n        <Column bg=\"mono100\" span={[6]}>\n          <Text color=\"mono0\">This remains 2-columns at all breakpoints</Text>\n        </Column>\n        <Column bg=\"mono100\" span={6}>\n          <Text color=\"mono0\">\n            These are 2-columns at large breakpoints, and 1 at mobile\n          </Text>\n        </Column>\n        <Column bg=\"mono100\" span={6}>\n          <Text color=\"mono0\">\n            These are 2-columns at large breakpoints, and 1 at mobile\n          </Text>\n        </Column>\n        <Column\n          start={[2, 3, 4]}\n          span={[9, 6, 3]}\n          height={300}\n          bg=\"mono10\"\n          borderRadius={4}\n        />\n        <Column\n          height={200}\n          bg=\"purple100\"\n          span={[12, 6]}\n          start={[1, 4]}\n          wrap\n        />\n        <Column bg=\"mono100\" start={4}>\n          <Text color=\"mono0\">{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={4} start={1}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={4} start={6}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column border=\"1px solid red\" span={2} start={11}>\n          <Text>{IPSUM}</Text>\n        </Column>\n        <Column bg=\"red\" span={1} start={1} height={100} wrap />\n        <Column bg=\"red\" span={1} start={2} height={100} wrap />\n        <Column bg=\"red\" span={1} start={3} height={100} wrap />\n        <Column bg=\"red\" span={1} start={4} height={100} wrap />\n        <Column bg=\"red\" span={1} start={5} height={100} wrap />\n        <Column bg=\"red\" span={1} start={6} height={100} wrap />\n        <Column bg=\"red\" span={1} start={7} height={100} wrap />\n        <Column gridColumn=\"3 / 9\" bg=\"purple100\">\n          <Text color=\"mono0\">A custom grid-column value</Text>\n        </Column>\n      </>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Comprehensive example showing various column configurations and layouts.\",\n      },\n    },\n  },\n}\n\nexport const CustomGutters = {\n  args: {\n    gridColumnGap: 4,\n    gridRowGap: 1,\n    children: (\n      <>\n        {Array.from(Array(12)).map((_, i) => (\n          <Column key={i} span={2} bg=\"mono10\" height={100} />\n        ))}\n      </>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Grid columns with custom row and column gap spacing.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,MAAM,EAAEC,WAAW;AAC5B,SAASC,yBAAyB;AAElC,IAAMC,KAAK,GACT,yNAAyN;AAE3N,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA;EAAA,oBACpBP,KAAA,CAAAQ,aAAA,CAACJ,WAAW;IACVK,QAAQ,EAAC,UAAU;IACnBC,GAAG,EAAE,CAAE;IACPC,IAAI,EAAE,CAAE;IACRC,KAAK,EAAC,MAAM;IACZC,MAAM,EAAC,MAAM;IACbC,KAAK,EAAE;MAAEC,aAAa,EAAE;IAAO;EAAE,GAEhCC,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,EAAE,CAAC,CAAC,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;IAAA,oBAC9BpB,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACkB,GAAG,EAAED,CAAE;MAACE,IAAI,EAAE,CAAC,CAAC,CAAE;MAACC,EAAE,EAAC,uBAAuB;MAACV,MAAM,EAAC;IAAM,EAAG;EAAA,CACvE,CAAC,CACU;AAAA,CACf;AAbKN,gBAAgB,CAAAiB,WAAA;AAetB,eAAe;EACbC,SAAS,EAAErB,WAAW;EACtBsB,KAAK,EAAE,wBAAwB;EAC/BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAE3B;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAM4B,gBAAgB,GAAG;EAC9BC,IAAI,EAAE;IACJzB,QAAQ,EAAE,UAAU;IACpB0B,CAAC,EAAE,CAAC;IACJC,QAAQ,eACNpC,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAqC,QAAA,qBACErC,KAAA,CAAAQ,aAAA,CAACD,gBAAgB,OAAG,eACpBP,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACmB,IAAI,EAAE,CAAE;MAACgB,IAAI;IAAA,gBACnBtC,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAACqC,EAAE,EAAC,IAAI;MAACC,OAAO,EAAC;IAAI,GAAC,4CAE3B,CAAO,CACA,eACTxC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACmB,IAAI,EAAE;IAAE,gBACdtB,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAACqC,EAAE,EAAC,IAAI;MAACC,OAAO,EAAC,YAAY;MAACC,EAAE,EAAE;IAAE,GAAC,eAE1C,CAAO,eACPzC,KAAA,CAAAQ,aAAA,CAACN,IAAI,QAAEI,KAAK,CAAQ,CACb,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACmB,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE;IAAE,gBACxB1C,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAACsC,OAAO,EAAC,YAAY;MAACC,EAAE,EAAE;IAAE,GAAC,kBAElC,CAAO,eACPzC,KAAA,CAAAQ,aAAA,CAACP,GAAG;MAACsB,EAAE,EAAC,QAAQ;MAACoB,YAAY,EAAE,CAAE;MAAC9B,MAAM,EAAE;IAAI,EAAG,CAC1C;EAGf,CAAC;EACDe,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXc,KAAK,EACH;MACJ;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBX,IAAI,EAAE;IACJY,MAAM,EAAE,gBAAgB;IACxBrC,QAAQ,EAAE,UAAU;IACpB2B,QAAQ,eACNpC,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAqC,QAAA,qBACErC,KAAA,CAAAQ,aAAA,CAACD,gBAAgB,OAAG,eACpBP,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAAC2C,MAAM,EAAC,eAAe;MAACxB,IAAI,EAAE;IAAE,gBACrCtB,KAAA,CAAAQ,aAAA,CAACN,IAAI,QAAEI,KAAK,CAAQ,CACb,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAAC2C,MAAM,EAAC,eAAe;MAACxB,IAAI,EAAE;IAAE,gBACrCtB,KAAA,CAAAQ,aAAA,CAACN,IAAI,QAAEI,KAAK,CAAQ,CACb,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAAC2C,MAAM,EAAC,iBAAiB;MAACxB,IAAI,EAAE;IAAE,gBACvCtB,KAAA,CAAAQ,aAAA,CAACN,IAAI,QAAEI,KAAK,CAAQ,CACb,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAAC2C,MAAM,EAAC,eAAe;MAACxB,IAAI,EAAE,CAAE;MAACgB,IAAI;IAAA,gBAC1CtC,KAAA,CAAAQ,aAAA,CAACN,IAAI,QACFI,KAAK,EAAC,GAAC,EAACA,KAAK,CACT,CACA,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,SAAS;MAACD,IAAI,EAAE,CAAC,CAAC;IAAE,gBAC7BtB,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAAC6C,KAAK,EAAC;IAAO,GAAC,2CAAyC,CAAO,CAC7D,eACT/C,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,SAAS;MAACD,IAAI,EAAE,CAAC,CAAC;IAAE,gBAC7BtB,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAAC6C,KAAK,EAAC;IAAO,GAAC,2CAAyC,CAAO,CAC7D,eACT/C,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,SAAS;MAACD,IAAI,EAAE;IAAE,gBAC3BtB,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAAC6C,KAAK,EAAC;IAAO,GAAC,2DAEpB,CAAO,CACA,eACT/C,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,SAAS;MAACD,IAAI,EAAE;IAAE,gBAC3BtB,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAAC6C,KAAK,EAAC;IAAO,GAAC,2DAEpB,CAAO,CACA,eACT/C,KAAA,CAAAQ,aAAA,CAACL,MAAM;MACLuC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE;MACjBpB,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE;MAChBT,MAAM,EAAE,GAAI;MACZU,EAAE,EAAC,QAAQ;MACXoB,YAAY,EAAE;IAAE,EAChB,eACF3C,KAAA,CAAAQ,aAAA,CAACL,MAAM;MACLU,MAAM,EAAE,GAAI;MACZU,EAAE,EAAC,WAAW;MACdD,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAE;MACdoB,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAE;MACdJ,IAAI;IAAA,EACJ,eACFtC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,SAAS;MAACmB,KAAK,EAAE;IAAE,gBAC5B1C,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAAC6C,KAAK,EAAC;IAAO,GAAEzC,KAAK,CAAQ,CAC3B,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAAC2C,MAAM,EAAC,eAAe;MAACxB,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE;IAAE,gBAC/C1C,KAAA,CAAAQ,aAAA,CAACN,IAAI,QAAEI,KAAK,CAAQ,CACb,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAAC2C,MAAM,EAAC,eAAe;MAACxB,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE;IAAE,gBAC/C1C,KAAA,CAAAQ,aAAA,CAACN,IAAI,QAAEI,KAAK,CAAQ,CACb,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAAC2C,MAAM,EAAC,eAAe;MAACxB,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE;IAAG,gBAChD1C,KAAA,CAAAQ,aAAA,CAACN,IAAI,QAAEI,KAAK,CAAQ,CACb,eACTN,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,KAAK;MAACD,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE,CAAE;MAAC7B,MAAM,EAAE,GAAI;MAACyB,IAAI;IAAA,EAAG,eACxDtC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,KAAK;MAACD,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE,CAAE;MAAC7B,MAAM,EAAE,GAAI;MAACyB,IAAI;IAAA,EAAG,eACxDtC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,KAAK;MAACD,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE,CAAE;MAAC7B,MAAM,EAAE,GAAI;MAACyB,IAAI;IAAA,EAAG,eACxDtC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,KAAK;MAACD,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE,CAAE;MAAC7B,MAAM,EAAE,GAAI;MAACyB,IAAI;IAAA,EAAG,eACxDtC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,KAAK;MAACD,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE,CAAE;MAAC7B,MAAM,EAAE,GAAI;MAACyB,IAAI;IAAA,EAAG,eACxDtC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,KAAK;MAACD,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE,CAAE;MAAC7B,MAAM,EAAE,GAAI;MAACyB,IAAI;IAAA,EAAG,eACxDtC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAACoB,EAAE,EAAC,KAAK;MAACD,IAAI,EAAE,CAAE;MAACoB,KAAK,EAAE,CAAE;MAAC7B,MAAM,EAAE,GAAI;MAACyB,IAAI;IAAA,EAAG,eACxDtC,KAAA,CAAAQ,aAAA,CAACL,MAAM;MAAC6C,UAAU,EAAC,OAAO;MAACzB,EAAE,EAAC;IAAW,gBACvCvB,KAAA,CAAAQ,aAAA,CAACN,IAAI;MAAC6C,KAAK,EAAC;IAAO,GAAC,4BAA0B,CAAO,CAC9C;EAGf,CAAC;EACDnB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXc,KAAK,EACH;MACJ;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMK,aAAa,GAAG;EAC3Bf,IAAI,EAAE;IACJgB,aAAa,EAAE,CAAC;IAChBC,UAAU,EAAE,CAAC;IACbf,QAAQ,eACNpC,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAqC,QAAA,QACGrB,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,EAAE,CAAC,CAAC,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;MAAA,oBAC9BpB,KAAA,CAAAQ,aAAA,CAACL,MAAM;QAACkB,GAAG,EAAED,CAAE;QAACE,IAAI,EAAE,CAAE;QAACC,EAAE,EAAC,QAAQ;QAACV,MAAM,EAAE;MAAI,EAAG;IAAA,CACrD,CAAC;EAGR,CAAC;EACDe,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXc,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/GridColumns/calculateGridColumn.js

@@ -0,0 +1,77 @@
+/** Number of columns a cell may span */
+
+/** Column number to begin a cell at */
+
+/** The number of columns */
+export var NUMBER_OF_COLUMNS = 12;
+/** Position of the first column, 1-based */
+export var FIRST_COLUMN_POSITION = 1;
+/** Position of the last column, 1-based */
+export var LAST_COLUMN_POSITION = NUMBER_OF_COLUMNS + 1;
+var normalizeValue = function normalizeValue(_ref) {
+  var left = _ref.left,
+    right = _ref.right,
+    fallback = _ref.fallback;
+  if (typeof left === "undefined") return [];
+
+  // If we have responsive values for `right`, then we presumably
+  // want to keep the `left` the same across them
+  if (typeof left === "number" && typeof right !== "number" && typeof right !== "undefined") {
+    return [left];
+  }
+
+  // If we have a single value for `left`, collapse it to full-width at
+  // the mobile breakpoint, otherwise respect the responsive values.
+  return typeof left === "number" ? [fallback, left] : left;
+};
+var valueAtOrLast = function valueAtOrLast(xs, i) {
+  return xs[i] !== null && xs[i] !== undefined ? xs[i] : xs[xs.length - 1];
+};
+
+/**
+ * Builds a value for `gridColumn` based on the assumptions laid out
+ * by our 12-column grid.
+ */
+export var calculateGridColumn = function calculateGridColumn(_ref2) {
+  var columnSpan = _ref2.span,
+    columnStart = _ref2.start;
+  var spans = normalizeValue({
+    left: columnSpan,
+    right: columnStart,
+    fallback: NUMBER_OF_COLUMNS
+  });
+  var starts = normalizeValue({
+    left: columnStart,
+    right: columnSpan,
+    fallback: FIRST_COLUMN_POSITION
+  });
+
+  // Nothing set, return default
+  if (spans.length === 0 && starts.length === 0) {
+    return [];
+  }
+
+  // More starts than spans, favor start
+  if (starts.length > spans.length) {
+    return starts.map(function (start, i) {
+      var span = valueAtOrLast(spans, i);
+      if (span && span + start > LAST_COLUMN_POSITION) {
+        throw new Error("`span` and `start` must fit within the grid");
+      }
+      return span ? "".concat(start, " / span ").concat(span) : "".concat(start, " / -1");
+    });
+  }
+
+  // Starts and spans, or spans and the only start
+  return spans.map(function (span, i) {
+    var start = valueAtOrLast(starts, i);
+    if (start && start + span > LAST_COLUMN_POSITION) {
+      throw new Error("`span` and `start` must fit within the grid");
+    }
+    return start ? "".concat(start, " / span ").concat(span) : "span ".concat(span);
+  });
+};
+
+/** Hardcoded list of full-width column spans */
+export var GRID_COLUMN_FULL_WIDTHS = ["1 / -1", "1 / 12", "1 / span 12", "span 12"];
+//# sourceMappingURL=calculateGridColumn.js.map

package/dist/esm/elements/GridColumns/calculateGridColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateGridColumn.js","names":["NUMBER_OF_COLUMNS","FIRST_COLUMN_POSITION","LAST_COLUMN_POSITION","normalizeValue","_ref","left","right","fallback","valueAtOrLast","xs","i","undefined","length","calculateGridColumn","_ref2","columnSpan","span","columnStart","start","spans","starts","map","Error","concat","GRID_COLUMN_FULL_WIDTHS"],"sources":["../../../../src/elements/GridColumns/calculateGridColumn.tsx"],"sourcesContent":["/** Number of columns a cell may span */\nexport type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n/** Column number to begin a cell at */\nexport type ColumnStart = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n\nexport interface ColumnCell {\n  /** number (between 1 and 12) of columns to span */\n  span?: ColumnSpan | ColumnSpan[]\n  /** number (between 1 and 12) of columns to begin at */\n  start?: ColumnStart | ColumnStart[]\n}\n\n/** The number of columns */\nexport const NUMBER_OF_COLUMNS = 12\n/** Position of the first column, 1-based */\nexport const FIRST_COLUMN_POSITION = 1\n/** Position of the last column, 1-based */\nexport const LAST_COLUMN_POSITION = NUMBER_OF_COLUMNS + 1\n\nconst normalizeValue = <T extends number>({\n  left,\n  right,\n  fallback,\n}: {\n  left?: T | T[]\n  right?: T | T[]\n  fallback: T\n}): T[] => {\n  if (typeof left === \"undefined\") return [] as T[]\n\n  // If we have responsive values for `right`, then we presumably\n  // want to keep the `left` the same across them\n  if (\n    typeof left === \"number\" &&\n    (typeof right !== \"number\" && typeof right !== \"undefined\")\n  ) {\n    return [left]\n  }\n\n  // If we have a single value for `left`, collapse it to full-width at\n  // the mobile breakpoint, otherwise respect the responsive values.\n  return typeof left === \"number\" ? [fallback, left] : left\n}\n\nconst valueAtOrLast = <T extends unknown>(xs: T[], i: number) => {\n  return xs[i] !== null && xs[i] !== undefined ? xs[i] : xs[xs.length - 1]\n}\n\n/**\n * Builds a value for `gridColumn` based on the assumptions laid out\n * by our 12-column grid.\n */\nexport const calculateGridColumn = ({\n  span: columnSpan,\n  start: columnStart,\n}: ColumnCell) => {\n  const spans = normalizeValue({\n    left: columnSpan,\n    right: columnStart,\n    fallback: NUMBER_OF_COLUMNS,\n  })\n\n  const starts = normalizeValue({\n    left: columnStart,\n    right: columnSpan,\n    fallback: FIRST_COLUMN_POSITION,\n  })\n\n  // Nothing set, return default\n  if (spans.length === 0 && starts.length === 0) {\n    return []\n  }\n\n  // More starts than spans, favor start\n  if (starts.length > spans.length) {\n    return starts.map((start, i) => {\n      const span = valueAtOrLast(spans, i)\n      if (span && span + start > LAST_COLUMN_POSITION) {\n        throw new Error(\"`span` and `start` must fit within the grid\")\n      }\n      return span ? `${start} / span ${span}` : `${start} / -1`\n    })\n  }\n\n  // Starts and spans, or spans and the only start\n  return spans.map((span, i) => {\n    const start = valueAtOrLast(starts, i)\n\n    if (start && start + span > LAST_COLUMN_POSITION) {\n      throw new Error(\"`span` and `start` must fit within the grid\")\n    }\n\n    return start ? `${start} / span ${span}` : `span ${span}`\n  })\n}\n\n/** Hardcoded list of full-width column spans */\nexport const GRID_COLUMN_FULL_WIDTHS = [\n  \"1 / -1\",\n  \"1 / 12\",\n  \"1 / span 12\",\n  \"span 12\",\n]\n"],"mappings":"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"}

package/dist/esm/elements/GridColumns/index.js

@@ -0,0 +1,3 @@
+export { ColumnSpan, ColumnStart } from "./calculateGridColumn";
+export * from "./GridColumns";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/GridColumns/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ColumnSpan","ColumnStart"],"sources":["../../../../src/elements/GridColumns/index.ts"],"sourcesContent":["export { ColumnSpan, ColumnStart } from \"./calculateGridColumn\"\nexport * from \"./GridColumns\"\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,WAAW;AAChC"}

package/dist/esm/elements/HTML/HTML.js

@@ -0,0 +1,48 @@
+var _excluded = ["html"],
+  _excluded2 = ["children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { themeGet } from "@styled-system/theme-get";
+import React, { HTMLAttributes } from "react";
+import styled, { css } from "styled-components";
+import { Text, TextProps } from "../Text";
+
+/**
+ * HTML
+ */
+
+/**
+ * Sets reasonable defaults for tags that we might encounter in Markdown output.
+ */
+export var htmlMixin = css(["h1,h2,h3,h4,h5,ul,ol,p,blockquote,pre,hr{margin:", " 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}hr{height:1px;width:100%;border:0;background-color:", ";}"], themeGet("space.1"), themeGet("colors.mono10"));
+var Container = styled(Text).withConfig({
+  displayName: "HTML__Container",
+  componentId: "sc-1im40xc-0"
+})(["", ""], htmlMixin);
+Container.defaultProps = {
+  variant: "sm"
+};
+
+/**
+ * Sets reasonable defaults for tags that we might encounter in Markdown output.
+ * If `html` prop is passed; it's set as innerHTML, otherwise contents are wrapped
+ * with default HTML styling.
+ */
+export var HTML = function HTML(props) {
+  if ("html" in props) {
+    var html = props.html,
+      htmlRest = _objectWithoutProperties(props, _excluded);
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      dangerouslySetInnerHTML: {
+        __html: html
+      }
+    }, htmlRest));
+  }
+  var children = props.children,
+    childrenRest = _objectWithoutProperties(props, _excluded2);
+  return /*#__PURE__*/React.createElement(Container, childrenRest, children);
+};
+HTML.displayName = "HTML";
+HTML.displayName = "HTML";
+//# sourceMappingURL=HTML.js.map

package/dist/esm/elements/HTML/HTML.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.js","names":["themeGet","React","HTMLAttributes","styled","css","Text","TextProps","htmlMixin","Container","withConfig","displayName","componentId","defaultProps","variant","HTML","props","html","htmlRest","_objectWithoutProperties","_excluded","createElement","_extends","dangerouslySetInnerHTML","__html","children","childrenRest","_excluded2"],"sources":["../../../../src/elements/HTML/HTML.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { HTMLAttributes } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\n/**\n * HTML\n */\nexport type HTMLProps = TextProps &\n  HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement> &\n  ({ html: string } | { children: React.ReactNode })\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n */\nexport const htmlMixin = css`\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  ul,\n  ol,\n  p,\n  blockquote,\n  pre,\n  hr {\n    margin: ${themeGet(\"space.1\")} 0;\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  hr {\n    height: 1px;\n    width: 100%;\n    border: 0;\n    background-color: ${themeGet(\"colors.mono10\")};\n  }\n`\n\nconst Container = styled(Text)`\n  ${htmlMixin}\n`\n\nContainer.defaultProps = {\n  variant: \"sm\",\n}\n\n/**\n * Sets reasonable defaults for tags that we might encounter in Markdown output.\n * If `html` prop is passed; it's set as innerHTML, otherwise contents are wrapped\n * with default HTML styling.\n */\nexport const HTML: React.FC<React.PropsWithChildren<HTMLProps>> = (props) => {\n  if (\"html\" in props) {\n    const { html, ...htmlRest } = props\n    return (\n      <Container dangerouslySetInnerHTML={{ __html: html }} {...htmlRest} />\n    )\n  }\n\n  const { children, ...childrenRest } = props\n  return <Container {...childrenRest}>{children}</Container>\n}\n\nHTML.displayName = \"HTML\"\n"],"mappings":";;;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,IAAIC,cAAc,QAAQ,OAAO;AAC7C,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,IAAI,EAAEC,SAAS;;AAExB;AACA;AACA;;AAKA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGH,GAAG,kLAYdJ,QAAQ,CAAC,SAAS,CAAC,EAeTA,QAAQ,CAAC,eAAe,CAAC,CAEhD;AAED,IAAMQ,SAAS,GAAGL,MAAM,CAACE,IAAI,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC1BJ,SAAS,CACZ;AAEDC,SAAS,CAACI,YAAY,GAAG;EACvBC,OAAO,EAAE;AACX,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAkD,GAAG,SAArDA,IAAkDA,CAAIC,KAAK,EAAK;EAC3E,IAAI,MAAM,IAAIA,KAAK,EAAE;IACnB,IAAQC,IAAI,GAAkBD,KAAK,CAA3BC,IAAI;MAAKC,QAAQ,GAAAC,wBAAA,CAAKH,KAAK,EAAAI,SAAA;IACnC,oBACElB,KAAA,CAAAmB,aAAA,CAACZ,SAAS,EAAAa,QAAA;MAACC,uBAAuB,EAAE;QAAEC,MAAM,EAAEP;MAAK;IAAE,GAAKC,QAAQ,EAAI;EAE1E;EAEA,IAAQO,QAAQ,GAAsBT,KAAK,CAAnCS,QAAQ;IAAKC,YAAY,GAAAP,wBAAA,CAAKH,KAAK,EAAAW,UAAA;EAC3C,oBAAOzB,KAAA,CAAAmB,aAAA,CAACZ,SAAS,EAAKiB,YAAY,EAAGD,QAAQ,CAAa;AAC5D,CAAC;AAVYV,IAAkD,CAAAJ,WAAA;AAY/DI,IAAI,CAACJ,WAAW,GAAG,MAAM"}