@purpurds/grid 3.0.0

package/dist/LICENSE.txt

@@ -0,0 +1,31 @@
+Name: classnames
+Version: 2.5.1
+License: MIT
+Private: false
+Description: A simple utility for conditionally joining classNames together
+Repository: git+https://github.com/JedWatson/classnames.git
+Author: Jed Watson
+License Copyright:
+===
+
+The MIT License (MIT)
+
+Copyright (c) 2018 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/col.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+export type ColumnWidthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ColProps = {
+    children: ReactNode;
+    className?: string;
+    ["data-testid"]?: string;
+    width?: ColumnWidthType;
+    widthMd?: ColumnWidthType;
+    widthLg?: ColumnWidthType;
+};
+export declare const Col: ({ children, ["data-testid"]: dataTestId, width, className, widthMd, widthLg, ...props }: ColProps) => React.JSX.Element;
+//# sourceMappingURL=col.d.ts.map

package/dist/col.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.d.ts","sourceRoot":"","sources":["../src/col.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE/E,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,GAAG,4FAQb,QAAQ,sBAgBV,CAAC"}

package/dist/grid.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime");function f(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var g={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(p){(function(){var _={}.hasOwnProperty;function o(){for(var r="",u=0;u<arguments.length;u++){var t=arguments[u];t&&(r=l(r,c(t)))}return r}function c(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return o.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var u="";for(var t in r)_.call(r,t)&&r[t]&&(u=l(u,t));return u}function l(r,u){return u?r?r+" "+u:r+u:r}p.exports?(o.default=o,p.exports=o):window.classNames=o})()})(g);var $=g.exports;const a=f($),m={"purpur-col":"_purpur-col_13t6m_1","purpur-col-12":"_purpur-col-12_13t6m_1","purpur-col-md-12":"_purpur-col-md-12_13t6m_20","purpur-col-lg-12":"_purpur-col-lg-12_13t6m_25","purpur-col-11":"_purpur-col-11_13t6m_29","purpur-col-md-11":"_purpur-col-md-11_13t6m_48","purpur-col-lg-11":"_purpur-col-lg-11_13t6m_53","purpur-col-10":"_purpur-col-10_13t6m_57","purpur-col-md-10":"_purpur-col-md-10_13t6m_76","purpur-col-lg-10":"_purpur-col-lg-10_13t6m_81","purpur-col-9":"_purpur-col-9_13t6m_85","purpur-col-md-9":"_purpur-col-md-9_13t6m_104","purpur-col-lg-9":"_purpur-col-lg-9_13t6m_109","purpur-col-8":"_purpur-col-8_13t6m_113","purpur-col-md-8":"_purpur-col-md-8_13t6m_132","purpur-col-lg-8":"_purpur-col-lg-8_13t6m_137","purpur-col-7":"_purpur-col-7_13t6m_141","purpur-col-md-7":"_purpur-col-md-7_13t6m_160","purpur-col-lg-7":"_purpur-col-lg-7_13t6m_165","purpur-col-6":"_purpur-col-6_13t6m_169","purpur-col-md-6":"_purpur-col-md-6_13t6m_188","purpur-col-lg-6":"_purpur-col-lg-6_13t6m_193","purpur-col-5":"_purpur-col-5_13t6m_197","purpur-col-md-5":"_purpur-col-md-5_13t6m_216","purpur-col-lg-5":"_purpur-col-lg-5_13t6m_221","purpur-col-4":"_purpur-col-4_13t6m_225","purpur-col-md-4":"_purpur-col-md-4_13t6m_244","purpur-col-lg-4":"_purpur-col-lg-4_13t6m_249","purpur-col-3":"_purpur-col-3_13t6m_253","purpur-col-md-3":"_purpur-col-md-3_13t6m_272","purpur-col-lg-3":"_purpur-col-lg-3_13t6m_277","purpur-col-2":"_purpur-col-2_13t6m_281","purpur-col-md-2":"_purpur-col-md-2_13t6m_300","purpur-col-lg-2":"_purpur-col-lg-2_13t6m_305","purpur-col-1":"_purpur-col-1_13t6m_1","purpur-col-md-1":"_purpur-col-md-1_13t6m_20","purpur-col-lg-1":"_purpur-col-lg-1_13t6m_25"},s="purpur-col",w=({children:p,["data-testid"]:_,width:o,className:c,widthMd:l,widthLg:r,...u})=>{const t=a([c,m[s],{[m[`${s}-${o}`]]:o,[m[`${s}-md-${l}`]]:l,[m[`${s}-lg-${r}`]]:r}]);return d.jsx("div",{className:`${t} ${s}`,"data-testid":_,...u,children:p})},y={"purpur-grid":"_purpur-grid_6ht8d_1"},e={"purpur-row":"_purpur-row_13nch_1","purpur-row--sm":"_purpur-row--sm_13nch_28","purpur-row--md":"_purpur-row--md_13nch_31","purpur-row--lg":"_purpur-row--lg_13nch_34","purpur-row--col-gap":"_purpur-row--col-gap_13nch_42"},n="purpur-row",v=({children:p,["data-testid"]:_,spacing:o,className:c,colGap:l,...r})=>{const u=a([c,e[n],{[e[`${n}--${o}`]]:o,[e[`${n}--col-gap`]]:l}]);return d.jsx("div",{className:u,"data-testid":_,...r,children:p})},j="purpur-grid",i=({children:p,className:_,["data-testid"]:o,...c})=>{const l=a([_,y[j]]);return d.jsx("div",{className:l,"data-testid":o,...c,children:p})};i.Col=w;i.Row=v;exports.Grid=i;
+//# sourceMappingURL=grid.cjs.js.map

package/dist/grid.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/col.tsx","../src/row.tsx","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./col.module.scss\";\n\nexport type ColumnWidthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport type ColProps = {\n  children: ReactNode;\n  className?: string;\n  [\"data-testid\"]?: string;\n  width?: ColumnWidthType;\n  widthMd?: ColumnWidthType;\n  widthLg?: ColumnWidthType;\n};\n\nconst rootClassName = \"purpur-col\";\n\nexport const Col = ({\n  children,\n  [\"data-testid\"]: dataTestId,\n  width,\n  className,\n  widthMd,\n  widthLg,\n  ...props\n}: ColProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    {\n      [styles[`${rootClassName}-${width}`]]: width,\n      [styles[`${rootClassName}-md-${widthMd}`]]: widthMd,\n      [styles[`${rootClassName}-lg-${widthLg}`]]: widthLg,\n    },\n  ]);\n\n  return (\n    <div className={`${classes} ${rootClassName}`} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./row.module.scss\";\n\nexport const RowSpacings = {\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n} as const;\n\nexport const RowSpacingSizes = Object.values(RowSpacings);\nexport type RowSpacingsType = (typeof RowSpacings)[keyof typeof RowSpacings];\n\nexport type RowProps = {\n  className?: string;\n  colGap?: boolean;\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  spacing?: RowSpacingsType;\n};\n\nconst rootClassName = \"purpur-row\";\n\nexport const Row = ({\n  children,\n  [\"data-testid\"]: dataTestId,\n  spacing,\n  className,\n  colGap,\n  ...props\n}: RowProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    {\n      [styles[`${rootClassName}--${spacing}`]]: spacing,\n      [styles[`${rootClassName}--col-gap`]]: colGap,\n    },\n  ]);\n\n  return (\n    <div className={classes} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport { Col } from \"./col\";\nimport styles from \"./grid.module.scss\";\nimport { Row } from \"./row\";\n\ntype GridCmp<P> = React.FunctionComponent<P> & {\n  Row: typeof Row;\n  Col: typeof Col;\n};\n\nexport type GridProps = {\n  children: ReactNode;\n  [\"data-testid\"]?: string;\n  className?: string;\n};\n\nexport type { ColumnWidthType } from \"./col\";\n\nconst rootClassName = \"purpur-grid\";\n\nexport const Grid: GridCmp<GridProps> = ({\n  children,\n  className,\n  [\"data-testid\"]: dataTestId,\n  ...props\n}) => {\n  const classes = c([className, styles[rootClassName]]);\n  return (\n    <div className={classes} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n\nGrid.Col = Col;\nGrid.Row = Row;\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","rootClassName","Col","children","dataTestId","width","className","widthMd","widthLg","props","c","styles","jsx","Row","spacing","colGap","Grid"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAWF,CAAG,CAAC,EAE/C,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAOA,EAGR,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAASK,CAAG,GAIpC,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,qqDC5DMU,EAAgB,aAETC,EAAM,CAAC,CAClB,SAAAC,EACA,CAAC,eAAgBC,EACjB,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAAgB,CACd,MAAMjB,EAAUkB,EAAE,CAChBJ,EACAK,EAAOV,CAAa,EACpB,CACE,CAACU,EAAO,GAAGV,CAAa,IAAII,CAAK,EAAE,CAAC,EAAGA,EACvC,CAACM,EAAO,GAAGV,CAAa,OAAOM,CAAO,EAAE,CAAC,EAAGA,EAC5C,CAACI,EAAO,GAAGV,CAAa,OAAOO,CAAO,EAAE,CAAC,EAAGA,CAC9C,CAAA,CACD,EAED,OACGI,EAAAA,IAAA,MAAA,CAAI,UAAW,GAAGpB,CAAO,IAAIS,CAAa,GAAI,cAAaG,EAAa,GAAGK,EACzE,SAAAN,CACH,CAAA,CAEJ,4QCpBMF,EAAgB,aAETY,EAAM,CAAC,CAClB,SAAAV,EACA,CAAC,eAAgBC,EACjB,QAAAU,EACA,UAAAR,EACA,OAAAS,EACA,GAAGN,CACL,IAAgB,CACd,MAAMjB,EAAUkB,EAAE,CAChBJ,EACAK,EAAOV,CAAa,EACpB,CACE,CAACU,EAAO,GAAGV,CAAa,KAAKa,CAAO,EAAE,CAAC,EAAGA,EAC1C,CAACH,EAAO,GAAGV,CAAa,WAAW,CAAC,EAAGc,CACzC,CAAA,CACD,EAGC,OAAAH,MAAC,OAAI,UAAWpB,EAAS,cAAaY,EAAa,GAAGK,EACnD,SAAAN,CACH,CAAA,CAEJ,EC1BMF,EAAgB,cAETe,EAA2B,CAAC,CACvC,SAAAb,EACA,UAAAG,EACA,CAAC,eAAgBF,EACjB,GAAGK,CACL,IAAM,CACJ,MAAMjB,EAAUkB,EAAE,CAACJ,EAAWK,EAAOV,CAAa,CAAC,CAAC,EAElD,OAAAW,MAAC,OAAI,UAAWpB,EAAS,cAAaY,EAAa,GAAGK,EACnD,SAAAN,CACH,CAAA,CAEJ,EAEAa,EAAK,IAAMd,EACXc,EAAK,IAAMH","x_google_ignoreList":[0]}

package/dist/grid.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import { Col } from "./col";
+import { Row } from "./row";
+type GridCmp<P> = React.FunctionComponent<P> & {
+    Row: typeof Row;
+    Col: typeof Col;
+};
+export type GridProps = {
+    children: ReactNode;
+    ["data-testid"]?: string;
+    className?: string;
+};
+export type { ColumnWidthType } from "./col";
+export declare const Grid: GridCmp<GridProps>;
+//# sourceMappingURL=grid.d.ts.map

package/dist/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,KAAK,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAC7C,GAAG,EAAE,OAAO,GAAG,CAAC;IAChB,GAAG,EAAE,OAAO,GAAG,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,YAAY,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAI7C,eAAO,MAAM,IAAI,EAAE,OAAO,CAAC,SAAS,CAYnC,CAAC"}

package/dist/grid.es.js

@@ -0,0 +1,138 @@
+import { jsx as d } from "react/jsx-runtime";
+function f(p) {
+  return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
+}
+var i = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(p) {
+  (function() {
+    var _ = {}.hasOwnProperty;
+    function o() {
+      for (var r = "", u = 0; u < arguments.length; u++) {
+        var t = arguments[u];
+        t && (r = l(r, c(t)));
+      }
+      return r;
+    }
+    function c(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return o.apply(null, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var u = "";
+      for (var t in r)
+        _.call(r, t) && r[t] && (u = l(u, t));
+      return u;
+    }
+    function l(r, u) {
+      return u ? r ? r + " " + u : r + u : r;
+    }
+    p.exports ? (o.default = o, p.exports = o) : window.classNames = o;
+  })();
+})(i);
+var $ = i.exports;
+const a = /* @__PURE__ */ f($), s = {
+  "purpur-col": "_purpur-col_13t6m_1",
+  "purpur-col-12": "_purpur-col-12_13t6m_1",
+  "purpur-col-md-12": "_purpur-col-md-12_13t6m_20",
+  "purpur-col-lg-12": "_purpur-col-lg-12_13t6m_25",
+  "purpur-col-11": "_purpur-col-11_13t6m_29",
+  "purpur-col-md-11": "_purpur-col-md-11_13t6m_48",
+  "purpur-col-lg-11": "_purpur-col-lg-11_13t6m_53",
+  "purpur-col-10": "_purpur-col-10_13t6m_57",
+  "purpur-col-md-10": "_purpur-col-md-10_13t6m_76",
+  "purpur-col-lg-10": "_purpur-col-lg-10_13t6m_81",
+  "purpur-col-9": "_purpur-col-9_13t6m_85",
+  "purpur-col-md-9": "_purpur-col-md-9_13t6m_104",
+  "purpur-col-lg-9": "_purpur-col-lg-9_13t6m_109",
+  "purpur-col-8": "_purpur-col-8_13t6m_113",
+  "purpur-col-md-8": "_purpur-col-md-8_13t6m_132",
+  "purpur-col-lg-8": "_purpur-col-lg-8_13t6m_137",
+  "purpur-col-7": "_purpur-col-7_13t6m_141",
+  "purpur-col-md-7": "_purpur-col-md-7_13t6m_160",
+  "purpur-col-lg-7": "_purpur-col-lg-7_13t6m_165",
+  "purpur-col-6": "_purpur-col-6_13t6m_169",
+  "purpur-col-md-6": "_purpur-col-md-6_13t6m_188",
+  "purpur-col-lg-6": "_purpur-col-lg-6_13t6m_193",
+  "purpur-col-5": "_purpur-col-5_13t6m_197",
+  "purpur-col-md-5": "_purpur-col-md-5_13t6m_216",
+  "purpur-col-lg-5": "_purpur-col-lg-5_13t6m_221",
+  "purpur-col-4": "_purpur-col-4_13t6m_225",
+  "purpur-col-md-4": "_purpur-col-md-4_13t6m_244",
+  "purpur-col-lg-4": "_purpur-col-lg-4_13t6m_249",
+  "purpur-col-3": "_purpur-col-3_13t6m_253",
+  "purpur-col-md-3": "_purpur-col-md-3_13t6m_272",
+  "purpur-col-lg-3": "_purpur-col-lg-3_13t6m_277",
+  "purpur-col-2": "_purpur-col-2_13t6m_281",
+  "purpur-col-md-2": "_purpur-col-md-2_13t6m_300",
+  "purpur-col-lg-2": "_purpur-col-lg-2_13t6m_305",
+  "purpur-col-1": "_purpur-col-1_13t6m_1",
+  "purpur-col-md-1": "_purpur-col-md-1_13t6m_20",
+  "purpur-col-lg-1": "_purpur-col-lg-1_13t6m_25"
+}, m = "purpur-col", w = ({
+  children: p,
+  ["data-testid"]: _,
+  width: o,
+  className: c,
+  widthMd: l,
+  widthLg: r,
+  ...u
+}) => {
+  const t = a([
+    c,
+    s[m],
+    {
+      [s[`${m}-${o}`]]: o,
+      [s[`${m}-md-${l}`]]: l,
+      [s[`${m}-lg-${r}`]]: r
+    }
+  ]);
+  return /* @__PURE__ */ d("div", { className: `${t} ${m}`, "data-testid": _, ...u, children: p });
+}, y = {
+  "purpur-grid": "_purpur-grid_6ht8d_1"
+}, e = {
+  "purpur-row": "_purpur-row_13nch_1",
+  "purpur-row--sm": "_purpur-row--sm_13nch_28",
+  "purpur-row--md": "_purpur-row--md_13nch_31",
+  "purpur-row--lg": "_purpur-row--lg_13nch_34",
+  "purpur-row--col-gap": "_purpur-row--col-gap_13nch_42"
+}, n = "purpur-row", v = ({
+  children: p,
+  ["data-testid"]: _,
+  spacing: o,
+  className: c,
+  colGap: l,
+  ...r
+}) => {
+  const u = a([
+    c,
+    e[n],
+    {
+      [e[`${n}--${o}`]]: o,
+      [e[`${n}--col-gap`]]: l
+    }
+  ]);
+  return /* @__PURE__ */ d("div", { className: u, "data-testid": _, ...r, children: p });
+}, N = "purpur-grid", g = ({
+  children: p,
+  className: _,
+  ["data-testid"]: o,
+  ...c
+}) => {
+  const l = a([_, y[N]]);
+  return /* @__PURE__ */ d("div", { className: l, "data-testid": o, ...c, children: p });
+};
+g.Col = w;
+g.Row = v;
+export {
+  g as Grid
+};
+//# sourceMappingURL=grid.es.js.map

package/dist/grid.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/col.tsx","../src/row.tsx","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./col.module.scss\";\n\nexport type ColumnWidthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport type ColProps = {\n  children: ReactNode;\n  className?: string;\n  [\"data-testid\"]?: string;\n  width?: ColumnWidthType;\n  widthMd?: ColumnWidthType;\n  widthLg?: ColumnWidthType;\n};\n\nconst rootClassName = \"purpur-col\";\n\nexport const Col = ({\n  children,\n  [\"data-testid\"]: dataTestId,\n  width,\n  className,\n  widthMd,\n  widthLg,\n  ...props\n}: ColProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    {\n      [styles[`${rootClassName}-${width}`]]: width,\n      [styles[`${rootClassName}-md-${widthMd}`]]: widthMd,\n      [styles[`${rootClassName}-lg-${widthLg}`]]: widthLg,\n    },\n  ]);\n\n  return (\n    <div className={`${classes} ${rootClassName}`} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./row.module.scss\";\n\nexport const RowSpacings = {\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n} as const;\n\nexport const RowSpacingSizes = Object.values(RowSpacings);\nexport type RowSpacingsType = (typeof RowSpacings)[keyof typeof RowSpacings];\n\nexport type RowProps = {\n  className?: string;\n  colGap?: boolean;\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  spacing?: RowSpacingsType;\n};\n\nconst rootClassName = \"purpur-row\";\n\nexport const Row = ({\n  children,\n  [\"data-testid\"]: dataTestId,\n  spacing,\n  className,\n  colGap,\n  ...props\n}: RowProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    {\n      [styles[`${rootClassName}--${spacing}`]]: spacing,\n      [styles[`${rootClassName}--col-gap`]]: colGap,\n    },\n  ]);\n\n  return (\n    <div className={classes} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport { Col } from \"./col\";\nimport styles from \"./grid.module.scss\";\nimport { Row } from \"./row\";\n\ntype GridCmp<P> = React.FunctionComponent<P> & {\n  Row: typeof Row;\n  Col: typeof Col;\n};\n\nexport type GridProps = {\n  children: ReactNode;\n  [\"data-testid\"]?: string;\n  className?: string;\n};\n\nexport type { ColumnWidthType } from \"./col\";\n\nconst rootClassName = \"purpur-grid\";\n\nexport const Grid: GridCmp<GridProps> = ({\n  children,\n  className,\n  [\"data-testid\"]: dataTestId,\n  ...props\n}) => {\n  const classes = c([className, styles[rootClassName]]);\n  return (\n    <div className={classes} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n\nGrid.Col = Col;\nGrid.Row = Row;\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","rootClassName","Col","children","dataTestId","width","className","widthMd","widthLg","props","c","styles","jsx","Row","spacing","colGap","Grid"],"mappings":";;;;;;;;;;;AAOA,GAAC,WAAY;AAGZ,QAAIA,IAAS,CAAE,EAAC;AAEhB,aAASC,IAAc;AAGtB,eAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,YAAIC,IAAM,UAAUD,CAAC;AACrB,QAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAWF,CAAG,CAAC;AAAA,MAE/C;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAOA;AAGR,UAAI,OAAOA,KAAQ;AAClB,eAAO;AAGR,UAAI,MAAM,QAAQA,CAAG;AACpB,eAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,UAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,eAAOA,EAAI;AAGZ,UAAIF,IAAU;AAEd,eAASK,KAAOH;AACf,QAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAASK,CAAG;AAIpC,aAAOL;AAAA,IACP;AAED,aAASG,EAAaG,GAAOC,GAAU;AACtC,aAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,IAQR;AAED,IAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,EAAA,UAAiBT,KAOjB,OAAO,aAAaA;AAAA,EAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC5DMU,IAAgB,cAETC,IAAM,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,CAAC,gBAAgBC;AAAA,EACjB,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAgB;AACd,QAAMjB,IAAUkB,EAAE;AAAA,IAChBJ;AAAA,IACAK,EAAOV,CAAa;AAAA,IACpB;AAAA,MACE,CAACU,EAAO,GAAGV,CAAa,IAAII,CAAK,EAAE,CAAC,GAAGA;AAAA,MACvC,CAACM,EAAO,GAAGV,CAAa,OAAOM,CAAO,EAAE,CAAC,GAAGA;AAAA,MAC5C,CAACI,EAAO,GAAGV,CAAa,OAAOO,CAAO,EAAE,CAAC,GAAGA;AAAA,IAC9C;AAAA,EAAA,CACD;AAED,SACG,gBAAAI,EAAA,OAAA,EAAI,WAAW,GAAGpB,CAAO,IAAIS,CAAa,IAAI,eAAaG,GAAa,GAAGK,GACzE,UAAAN,EACH,CAAA;AAEJ;;;;;;;;GCpBMF,IAAgB,cAETY,IAAM,CAAC;AAAA,EAClB,UAAAV;AAAA,EACA,CAAC,gBAAgBC;AAAA,EACjB,SAAAU;AAAA,EACA,WAAAR;AAAA,EACA,QAAAS;AAAA,EACA,GAAGN;AACL,MAAgB;AACd,QAAMjB,IAAUkB,EAAE;AAAA,IAChBJ;AAAA,IACAK,EAAOV,CAAa;AAAA,IACpB;AAAA,MACE,CAACU,EAAO,GAAGV,CAAa,KAAKa,CAAO,EAAE,CAAC,GAAGA;AAAA,MAC1C,CAACH,EAAO,GAAGV,CAAa,WAAW,CAAC,GAAGc;AAAA,IACzC;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAH,EAAC,SAAI,WAAWpB,GAAS,eAAaY,GAAa,GAAGK,GACnD,UAAAN,EACH,CAAA;AAEJ,GC1BMF,IAAgB,eAETe,IAA2B,CAAC;AAAA,EACvC,UAAAb;AAAA,EACA,WAAAG;AAAA,EACA,CAAC,gBAAgBF;AAAA,EACjB,GAAGK;AACL,MAAM;AACJ,QAAMjB,IAAUkB,EAAE,CAACJ,GAAWK,EAAOV,CAAa,CAAC,CAAC;AAElD,SAAA,gBAAAW,EAAC,SAAI,WAAWpB,GAAS,eAAaY,GAAa,GAAGK,GACnD,UAAAN,EACH,CAAA;AAEJ;AAEAa,EAAK,MAAMd;AACXc,EAAK,MAAMH;","x_google_ignoreList":[0]}

package/dist/grid.system.js

@@ -0,0 +1,6 @@
+System.register(["react"],function($,S){"use strict";var s;return{setters:[n=>{s=n.default}],execute:function(){function n(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var g={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(p){(function(){var _={}.hasOwnProperty;function t(){for(var r="",u=0;u<arguments.length;u++){var l=arguments[u];l&&(r=o(r,c(l)))}return r}function c(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var u="";for(var l in r)_.call(r,l)&&r[l]&&(u=o(u,l));return u}function o(r,u){return u?r?r+" "+u:r+u:r}p.exports?(t.default=t,p.exports=t):window.classNames=t})()})(g);var w=g.exports;const a=n(w),m={"purpur-col":"_purpur-col_13t6m_1","purpur-col-12":"_purpur-col-12_13t6m_1","purpur-col-md-12":"_purpur-col-md-12_13t6m_20","purpur-col-lg-12":"_purpur-col-lg-12_13t6m_25","purpur-col-11":"_purpur-col-11_13t6m_29","purpur-col-md-11":"_purpur-col-md-11_13t6m_48","purpur-col-lg-11":"_purpur-col-lg-11_13t6m_53","purpur-col-10":"_purpur-col-10_13t6m_57","purpur-col-md-10":"_purpur-col-md-10_13t6m_76","purpur-col-lg-10":"_purpur-col-lg-10_13t6m_81","purpur-col-9":"_purpur-col-9_13t6m_85","purpur-col-md-9":"_purpur-col-md-9_13t6m_104","purpur-col-lg-9":"_purpur-col-lg-9_13t6m_109","purpur-col-8":"_purpur-col-8_13t6m_113","purpur-col-md-8":"_purpur-col-md-8_13t6m_132","purpur-col-lg-8":"_purpur-col-lg-8_13t6m_137","purpur-col-7":"_purpur-col-7_13t6m_141","purpur-col-md-7":"_purpur-col-md-7_13t6m_160","purpur-col-lg-7":"_purpur-col-lg-7_13t6m_165","purpur-col-6":"_purpur-col-6_13t6m_169","purpur-col-md-6":"_purpur-col-md-6_13t6m_188","purpur-col-lg-6":"_purpur-col-lg-6_13t6m_193","purpur-col-5":"_purpur-col-5_13t6m_197","purpur-col-md-5":"_purpur-col-md-5_13t6m_216","purpur-col-lg-5":"_purpur-col-lg-5_13t6m_221","purpur-col-4":"_purpur-col-4_13t6m_225","purpur-col-md-4":"_purpur-col-md-4_13t6m_244","purpur-col-lg-4":"_purpur-col-lg-4_13t6m_249","purpur-col-3":"_purpur-col-3_13t6m_253","purpur-col-md-3":"_purpur-col-md-3_13t6m_272","purpur-col-lg-3":"_purpur-col-lg-3_13t6m_277","purpur-col-2":"_purpur-col-2_13t6m_281","purpur-col-md-2":"_purpur-col-md-2_13t6m_300","purpur-col-lg-2":"_purpur-col-lg-2_13t6m_305","purpur-col-1":"_purpur-col-1_13t6m_1","purpur-col-md-1":"_purpur-col-md-1_13t6m_20","purpur-col-lg-1":"_purpur-col-lg-1_13t6m_25"},e="purpur-col",y=({children:p,["data-testid"]:_,width:t,className:c,widthMd:o,widthLg:r,...u})=>{const l=a([c,m[e],{[m[`${e}-${t}`]]:t,[m[`${e}-md-${o}`]]:o,[m[`${e}-lg-${r}`]]:r}]);return s.createElement("div",{className:`${l} ${e}`,"data-testid":_,...u},p)},v={"purpur-grid":"_purpur-grid_6ht8d_1"},d={"purpur-row":"_purpur-row_13nch_1","purpur-row--sm":"_purpur-row--sm_13nch_28","purpur-row--md":"_purpur-row--md_13nch_31","purpur-row--lg":"_purpur-row--lg_13nch_34","purpur-row--col-gap":"_purpur-row--col-gap_13nch_42"},i="purpur-row",N=({children:p,["data-testid"]:_,spacing:t,className:c,colGap:o,...r})=>{const u=a([c,d[i],{[d[`${i}--${t}`]]:t,[d[`${i}--col-gap`]]:o}]);return s.createElement("div",{className:u,"data-testid":_,...r},p)},h="purpur-grid",f=$("Grid",({children:p,className:_,["data-testid"]:t,...c})=>{const o=a([_,v[h]]);return s.createElement("div",{className:o,"data-testid":t,...c},p)});f.Col=y,f.Row=N}}});
+//# sourceMappingURL=grid.system.js.map

package/dist/grid.system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.system.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/col.tsx","../src/row.tsx","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./col.module.scss\";\n\nexport type ColumnWidthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport type ColProps = {\n  children: ReactNode;\n  className?: string;\n  [\"data-testid\"]?: string;\n  width?: ColumnWidthType;\n  widthMd?: ColumnWidthType;\n  widthLg?: ColumnWidthType;\n};\n\nconst rootClassName = \"purpur-col\";\n\nexport const Col = ({\n  children,\n  [\"data-testid\"]: dataTestId,\n  width,\n  className,\n  widthMd,\n  widthLg,\n  ...props\n}: ColProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    {\n      [styles[`${rootClassName}-${width}`]]: width,\n      [styles[`${rootClassName}-md-${widthMd}`]]: widthMd,\n      [styles[`${rootClassName}-lg-${widthLg}`]]: widthLg,\n    },\n  ]);\n\n  return (\n    <div className={`${classes} ${rootClassName}`} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./row.module.scss\";\n\nexport const RowSpacings = {\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n} as const;\n\nexport const RowSpacingSizes = Object.values(RowSpacings);\nexport type RowSpacingsType = (typeof RowSpacings)[keyof typeof RowSpacings];\n\nexport type RowProps = {\n  className?: string;\n  colGap?: boolean;\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  spacing?: RowSpacingsType;\n};\n\nconst rootClassName = \"purpur-row\";\n\nexport const Row = ({\n  children,\n  [\"data-testid\"]: dataTestId,\n  spacing,\n  className,\n  colGap,\n  ...props\n}: RowProps) => {\n  const classes = c([\n    className,\n    styles[rootClassName],\n    {\n      [styles[`${rootClassName}--${spacing}`]]: spacing,\n      [styles[`${rootClassName}--col-gap`]]: colGap,\n    },\n  ]);\n\n  return (\n    <div className={classes} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport { Col } from \"./col\";\nimport styles from \"./grid.module.scss\";\nimport { Row } from \"./row\";\n\ntype GridCmp<P> = React.FunctionComponent<P> & {\n  Row: typeof Row;\n  Col: typeof Col;\n};\n\nexport type GridProps = {\n  children: ReactNode;\n  [\"data-testid\"]?: string;\n  className?: string;\n};\n\nexport type { ColumnWidthType } from \"./col\";\n\nconst rootClassName = \"purpur-grid\";\n\nexport const Grid: GridCmp<GridProps> = ({\n  children,\n  className,\n  [\"data-testid\"]: dataTestId,\n  ...props\n}) => {\n  const classes = c([className, styles[rootClassName]]);\n  return (\n    <div className={classes} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n\nGrid.Col = Col;\nGrid.Row = Row;\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","rootClassName","Col","children","dataTestId","width","className","widthMd","widthLg","props","c","styles","React","Row","spacing","colGap","Grid"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAWF,CAAG,CAAC,EAE/C,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAOA,EAGR,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAASK,CAAG,GAIpC,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,qqDC5DMU,EAAgB,aAETC,EAAM,CAAC,CAClB,SAAAC,EACA,CAAC,eAAgBC,EACjB,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAAgB,CACd,MAAMjB,EAAUkB,EAAE,CAChBJ,EACAK,EAAOV,CAAa,EACpB,CACE,CAACU,EAAO,GAAGV,CAAa,IAAII,CAAK,EAAE,CAAC,EAAGA,EACvC,CAACM,EAAO,GAAGV,CAAa,OAAOM,CAAO,EAAE,CAAC,EAAGA,EAC5C,CAACI,EAAO,GAAGV,CAAa,OAAOO,CAAO,EAAE,CAAC,EAAGA,CAC9C,CAAA,CACD,EAED,OACGI,EAAA,cAAA,MAAA,CAAI,UAAW,GAAGpB,CAAO,IAAIS,CAAa,GAAI,cAAaG,EAAa,GAAGK,CAAA,EACzEN,CACH,CAEJ,4QCpBMF,EAAgB,aAETY,EAAM,CAAC,CAClB,SAAAV,EACA,CAAC,eAAgBC,EACjB,QAAAU,EACA,UAAAR,EACA,OAAAS,EACA,GAAGN,CACL,IAAgB,CACd,MAAMjB,EAAUkB,EAAE,CAChBJ,EACAK,EAAOV,CAAa,EACpB,CACE,CAACU,EAAO,GAAGV,CAAa,KAAKa,CAAO,EAAE,CAAC,EAAGA,EAC1C,CAACH,EAAO,GAAGV,CAAa,WAAW,CAAC,EAAGc,CACzC,CAAA,CACD,EAGC,OAAAH,EAAA,cAAC,OAAI,UAAWpB,EAAS,cAAaY,EAAa,GAAGK,GACnDN,CACH,CAEJ,EC1BMF,EAAgB,cAETe,WAA2B,CAAC,CACvC,SAAAb,EACA,UAAAG,EACA,CAAC,eAAgBF,EACjB,GAAGK,CACL,IAAM,CACJ,MAAMjB,EAAUkB,EAAE,CAACJ,EAAWK,EAAOV,CAAa,CAAC,CAAC,EAElD,OAAAW,EAAA,cAAC,OAAI,UAAWpB,EAAS,cAAaY,EAAa,GAAGK,GACnDN,CACH,CAEJ,CAAA,EAEAa,EAAK,IAAMd,EACXc,EAAK,IAAMH","x_google_ignoreList":[0]}

package/dist/row.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+export declare const RowSpacings: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export declare const RowSpacingSizes: ("sm" | "md" | "lg")[];
+export type RowSpacingsType = (typeof RowSpacings)[keyof typeof RowSpacings];
+export type RowProps = {
+    className?: string;
+    colGap?: boolean;
+    ["data-testid"]?: string;
+    children: ReactNode;
+    spacing?: RowSpacingsType;
+};
+export declare const Row: ({ children, ["data-testid"]: dataTestId, spacing, className, colGap, ...props }: RowProps) => React.JSX.Element;
+//# sourceMappingURL=row.d.ts.map

package/dist/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../src/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,eAAe,wBAA6B,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAE7E,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,GAAG,oFAOb,QAAQ,sBAeV,CAAC"}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-col_13t6m_1._purpur-col-12_13t6m_1{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px)*1)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-12_13t6m_1{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-12_13t6m_1{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-12_13t6m_20{width:calc((100% - 1px)*1)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-12_13t6m_25{width:calc((100% - 1px)*1)}}._purpur-col_13t6m_1._purpur-col-11_13t6m_29{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 11)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-11_13t6m_29{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-11_13t6m_29{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-11_13t6m_48{width:calc((100% - 1px) / 12 * 11)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-11_13t6m_53{width:calc((100% - 1px) / 12 * 11)}}._purpur-col_13t6m_1._purpur-col-10_13t6m_57{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 10)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-10_13t6m_57{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-10_13t6m_57{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-10_13t6m_76{width:calc((100% - 1px) / 12 * 10)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-10_13t6m_81{width:calc((100% - 1px) / 12 * 10)}}._purpur-col_13t6m_1._purpur-col-9_13t6m_85{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px)*.75)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-9_13t6m_85{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-9_13t6m_85{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-9_13t6m_104{width:calc((100% - 1px)*.75)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-9_13t6m_109{width:calc((100% - 1px)*.75)}}._purpur-col_13t6m_1._purpur-col-8_13t6m_113{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 8)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-8_13t6m_113{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-8_13t6m_113{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-8_13t6m_132{width:calc((100% - 1px) / 12 * 8)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-8_13t6m_137{width:calc((100% - 1px) / 12 * 8)}}._purpur-col_13t6m_1._purpur-col-7_13t6m_141{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 7)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-7_13t6m_141{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-7_13t6m_141{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-7_13t6m_160{width:calc((100% - 1px) / 12 * 7)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-7_13t6m_165{width:calc((100% - 1px) / 12 * 7)}}._purpur-col_13t6m_1._purpur-col-6_13t6m_169{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px)/2)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-6_13t6m_169{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-6_13t6m_169{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-6_13t6m_188{width:calc((100% - 1px)/2)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-6_13t6m_193{width:calc((100% - 1px)/2)}}._purpur-col_13t6m_1._purpur-col-5_13t6m_197{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 5)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-5_13t6m_197{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-5_13t6m_197{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-5_13t6m_216{width:calc((100% - 1px) / 12 * 5)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-5_13t6m_221{width:calc((100% - 1px) / 12 * 5)}}._purpur-col_13t6m_1._purpur-col-4_13t6m_225{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 4)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-4_13t6m_225{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-4_13t6m_225{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-4_13t6m_244{width:calc((100% - 1px) / 12 * 4)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-4_13t6m_249{width:calc((100% - 1px) / 12 * 4)}}._purpur-col_13t6m_1._purpur-col-3_13t6m_253{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px)/4)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-3_13t6m_253{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-3_13t6m_253{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-3_13t6m_272{width:calc((100% - 1px)/4)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-3_13t6m_277{width:calc((100% - 1px)/4)}}._purpur-col_13t6m_1._purpur-col-2_13t6m_281{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 2)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-2_13t6m_281{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-2_13t6m_281{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-2_13t6m_300{width:calc((100% - 1px) / 12 * 2)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-2_13t6m_305{width:calc((100% - 1px) / 12 * 2)}}._purpur-col_13t6m_1._purpur-col-1_13t6m_1{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 1)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-1_13t6m_1{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-1_13t6m_1{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-1_13t6m_20{width:calc((100% - 1px) / 12 * 1)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-1_13t6m_25{width:calc((100% - 1px) / 12 * 1)}}._purpur-grid_6ht8d_1{--padding: var(--purpur-spacing-page-padding-sm);box-sizing:border-box;display:block;margin-left:auto;margin-right:auto;max-width:var(--purpur-breakpoint-xl);padding:0 var(--padding);width:100%}@media screen and (min-width: 600px){._purpur-grid_6ht8d_1{--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width: 1024px){._purpur-grid_6ht8d_1{--padding: var(--purpur-spacing-page-padding-lg)}}@media screen and (min-width: 1440px){._purpur-grid_6ht8d_1{--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-row_13nch_1{--margin: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:left;margin-left:calc(-1 * var(--margin) / 2);margin-right:calc(-1 * var(--margin) / 2)}@media screen and (min-width: 600px){._purpur-row_13nch_1{--margin: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-row_13nch_1{--margin: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 1440px){._purpur-row_13nch_1{--margin: var(--purpur-spacing-gutter-xl)}}._purpur-row_13nch_1:last-of-type{margin-bottom:0}._purpur-row--sm_13nch_28{margin-bottom:var(--purpur-spacing-gutter-sm)}._purpur-row--md_13nch_31,._purpur-row--lg_13nch_34{margin-bottom:var(--purpur-spacing-gutter-md)}@media screen and (min-width: 1024px){._purpur-row--lg_13nch_34{margin-bottom:var(--purpur-spacing-gutter-lg)}}._purpur-row--col-gap_13nch_42{margin-top:calc(-1 * var(--purpur-spacing-gutter-sm))}@media screen and (min-width: 600px){._purpur-row--col-gap_13nch_42{margin-top:calc(-1 * var(--purpur-spacing-gutter-md))}}._purpur-row--col-gap_13nch_42>.purpur-col{margin-top:var(--purpur-spacing-gutter-sm)}@media screen and (min-width: 600px){._purpur-row--col-gap_13nch_42>.purpur-col{margin-top:var(--purpur-spacing-gutter-md)}}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@purpurds/grid",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/grid.cjs.js",
+  "types": "./dist/grid.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/grid.cjs.js",
+      "systemjs": "./dist/grid.system.js",
+      "types": "./dist/grid.d.ts",
+      "default": "./dist/grid.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/grid.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "builtin-modules": "~3.3.0",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,77 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as GridStories from "./src/grid.stories";
+import * as GridColStories from "./src/grid.col.stories";
+import * as GridRowStories from "./src/grid.row.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Grid" of={GridStories} />
+
+# Grid
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+#### Grid
+
+<ArgTypes of={GridStories} />
+
+#### Grid.Row
+
+<ArgTypes of={GridRowStories} />
+
+#### Grid.Col
+
+<ArgTypes of={GridColStories} />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"grid": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/grid/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Grid } from "@purpurds/grid";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <Grid style={{ backgroundColor: "green" }}>
+        <Grid.Row>
+          <Grid.Col width={12} widthMd={6}>
+            <p>Column 1</p>
+          </Grid.Col>
+          <Grid.Col width={12} widthMd={6}>
+            <p>Column 2</p>
+          </Grid.Col>
+        </Grid.Row>
+      </Grid>
+    </div>
+  );
+};
+```

package/src/col.module.scss

@@ -0,0 +1,62 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+$columns: 12;
+
+@mixin validate-col-numbers($noOfCols) {
+  @if not(type-of($noOfCols) == "number") {
+    @error 'Invalid col value type "#{type-of($noOfCols)}"';
+  }
+  @if ($noOfCols < 1 or $noOfCols > 12) {
+    @error 'Invalid col value #{$noOfCols}, col number should be from 1 to 12';
+  }
+}
+
+@mixin purpur-col($noOfCols: 1) {
+  --padding-col: var(--purpur-spacing-gutter-sm);
+
+  @include validate-col-numbers($noOfCols);
+  box-sizing: border-box;
+  display: block;
+  padding-left: calc(var(--padding-col) / 2);
+  padding-right: calc(var(--padding-col) / 2);
+  width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
+
+  @media screen and (min-width: #{$purpur-breakpoint-md}) {
+    --padding-col: var(--purpur-spacing-gutter-md);
+  }
+  @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+    --padding-col: var(--purpur-spacing-gutter-lg);
+  }
+}
+
+@mixin purpur-col-md($noOfCols: 1) {
+  @media screen and (min-width: #{$purpur-breakpoint-md}) {
+    @include validate-col-numbers($noOfCols);
+    width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
+  }
+}
+
+@mixin purpur-col-lg($noOfCols: 1) {
+  @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+    @include validate-col-numbers($noOfCols);
+    width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
+  }
+}
+
+.purpur-col {
+  @for $i from 12 through 1 {
+    &.purpur-col-#{$i} {
+      @include purpur-col($i);
+    }
+    @media screen and (min-width: #{$purpur-breakpoint-md}) {
+      &.purpur-col-md-#{$i} {
+        @include purpur-col-md($i);
+      }
+    }
+    @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+      &.purpur-col-lg-#{$i} {
+        @include purpur-col-lg($i);
+      }
+    }
+  }
+}

package/src/col.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode } from "react";
+import c from "classnames";
+
+import styles from "./col.module.scss";
+
+export type ColumnWidthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type ColProps = {
+  children: ReactNode;
+  className?: string;
+  ["data-testid"]?: string;
+  width?: ColumnWidthType;
+  widthMd?: ColumnWidthType;
+  widthLg?: ColumnWidthType;
+};
+
+const rootClassName = "purpur-col";
+
+export const Col = ({
+  children,
+  ["data-testid"]: dataTestId,
+  width,
+  className,
+  widthMd,
+  widthLg,
+  ...props
+}: ColProps) => {
+  const classes = c([
+    className,
+    styles[rootClassName],
+    {
+      [styles[`${rootClassName}-${width}`]]: width,
+      [styles[`${rootClassName}-md-${widthMd}`]]: widthMd,
+      [styles[`${rootClassName}-lg-${widthLg}`]]: widthLg,
+    },
+  ]);
+
+  return (
+    <div className={`${classes} ${rootClassName}`} data-testid={dataTestId} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/grid.col.stories.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Grid } from "./grid";
+
+const meta: Meta<typeof Grid.Col> = {
+  title: "Components/Grid",
+  component: Grid.Col,
+  parameters: {
+    design: [
+      {
+        name: "Grid",
+        type: "figma",
+        url:
+          "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
+      },
+    ],
+    storyHead: {
+      title: "Grid.Col",
+    },
+  },
+  argTypes: {
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+    children: { control: { type: "text" } },
+    width: { control: { type: "range", min: 1, max: 12, step: 1 } },
+    widthMd: { control: { type: "range", min: 1, max: 12, step: 1 } },
+    widthLg: { control: { type: "range", min: 1, max: 12, step: 1 } },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Grid.Col>;
+
+export const Column: Story = {
+  args: {
+    width: 12,
+    widthMd: 12,
+    widthLg: 12,
+  },
+  render: ({ children, ...args }) => (
+    <Grid>
+      <Grid.Row>
+        <Grid.Col {...args}>
+          <p>Column 1</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col {...args}>
+          <p>Column 2</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col {...args}>
+          <p>Column 3</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col {...args}>
+          <p>Column 4</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col {...args}>
+          <p>Column 5</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col {...args}>
+          <p>Column 6</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col {...args}>
+          <p>Column 7</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col {...args}>
+          <p>Column 8</p>
+          {children}
+        </Grid.Col>
+      </Grid.Row>
+    </Grid>
+  ),
+};

package/src/grid.module.scss

@@ -0,0 +1,23 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-grid {
+  --padding: var(--purpur-spacing-page-padding-sm);
+
+  box-sizing: border-box;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--purpur-breakpoint-xl);
+  padding: 0 var(--padding);
+  width: 100%;
+
+  @media screen and (min-width: #{$purpur-breakpoint-md}) {
+    --padding: var(--purpur-spacing-page-padding-md);
+  }
+  @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+    --padding: var(--purpur-spacing-page-padding-lg);
+  }
+  @media screen and (min-width: #{$purpur-breakpoint-xl}) {
+    --padding: var(--purpur-spacing-page-padding-xl);
+  }
+}

package/src/grid.row.stories.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Grid } from "./grid";
+import { RowSpacingSizes } from "./row";
+
+const meta: Meta<typeof Grid.Row> = {
+  title: "Components/Grid",
+  component: Grid.Row,
+  parameters: {
+    design: [
+      {
+        name: "Grid",
+        type: "figma",
+        url:
+          "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
+      },
+    ],
+    storyHead: {
+      title: "Grid.Row",
+    },
+  },
+  argTypes: {
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+    children: { control: { type: "text" } },
+    colGap: { control: { type: "boolean" } },
+    spacing: {
+      control: { type: "select" },
+      options: [undefined, ...RowSpacingSizes],
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Grid.Row>;
+
+export const Row: Story = {
+  args: {
+    colGap: false,
+  },
+  render: ({ children, ...args }) => (
+    <Grid>
+      <Grid.Row {...args}>
+        <Grid.Col width={12} widthMd={6} widthLg={4}>
+          <p>Column 1 - Row 1</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={12} widthMd={6} widthLg={4}>
+          <p>Column 2 - Row 1</p>
+          {children}
+        </Grid.Col>
+      </Grid.Row>
+      <Grid.Row {...args}>
+        <Grid.Col width={12} widthMd={6} widthLg={4}>
+          <p>Column 3 - Row 2</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={12} widthMd={6} widthLg={4}>
+          <p>Column 4 - Row 2</p>
+          {children}
+        </Grid.Col>
+      </Grid.Row>
+    </Grid>
+  ),
+};

package/src/grid.stories.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Grid } from "./grid";
+
+const meta: Meta<typeof Grid> = {
+  title: "Components/Grid",
+  component: Grid,
+  parameters: {
+    design: [
+      {
+        name: "Grid",
+        type: "figma",
+        url: "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
+      },
+    ],
+  },
+  argTypes: {
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+    children: { control: { type: "text" } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+export const Showcase: Story = {
+  render: ({ children, ...args }) => (
+    <Grid {...args}>
+      <Grid.Row>
+        <Grid.Col width={6} widthMd={4} widthLg={3}>
+          <p>Column 1</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={6} widthMd={4} widthLg={3}>
+          <p>Column 2</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={6} widthMd={4} widthLg={3}>
+          <p>Column 3</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={6} widthMd={4} widthLg={3}>
+          <p>Column 4</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={6} widthMd={4} widthLg={3}>
+          <p>Column 5</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={6} widthMd={4} widthLg={3}>
+          <p>Column 6</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={6} widthMd={4} widthLg={3}>
+          <p>Column 7</p>
+          {children}
+        </Grid.Col>
+        <Grid.Col width={6} widthMd={4} widthLg={3}>
+          <p>Column 8</p>
+          {children}
+        </Grid.Col>
+      </Grid.Row>
+    </Grid>
+  ),
+};

package/src/grid.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Grid } from "./grid";
+
+expect.extend(matchers);
+
+describe("Grid", () => {
+  it("default test", () => {
+    render(<Grid data-testid="purpur-grid">Some text content</Grid>);
+
+    expect(screen.getByTestId("purpur-grid")).toHaveTextContent("Some text content");
+  });
+});

package/src/grid.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react";
+import c from "classnames";
+
+import { Col } from "./col";
+import styles from "./grid.module.scss";
+import { Row } from "./row";
+
+type GridCmp<P> = React.FunctionComponent<P> & {
+  Row: typeof Row;
+  Col: typeof Col;
+};
+
+export type GridProps = {
+  children: ReactNode;
+  ["data-testid"]?: string;
+  className?: string;
+};
+
+export type { ColumnWidthType } from "./col";
+
+const rootClassName = "purpur-grid";
+
+export const Grid: GridCmp<GridProps> = ({
+  children,
+  className,
+  ["data-testid"]: dataTestId,
+  ...props
+}) => {
+  const classes = c([className, styles[rootClassName]]);
+  return (
+    <div className={classes} data-testid={dataTestId} {...props}>
+      {children}
+    </div>
+  );
+};
+
+Grid.Col = Col;
+Grid.Row = Row;

package/src/row.module.scss

@@ -0,0 +1,58 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-row {
+  --margin: var(--purpur-spacing-gutter-sm);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  margin-left: calc(-1 * var(--margin) / 2);
+  margin-right: calc(-1 * var(--margin) / 2);
+
+  @media screen and (min-width: #{$purpur-breakpoint-md}) {
+    --margin: var(--purpur-spacing-gutter-md);
+  }
+  @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+    --margin: var(--purpur-spacing-gutter-lg);
+  }
+  @media screen and (min-width: #{$purpur-breakpoint-xl}) {
+    --margin: var(--purpur-spacing-gutter-xl);
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  &--sm {
+    margin-bottom: var(--purpur-spacing-gutter-sm);
+  }
+
+  &--md {
+    margin-bottom: var(--purpur-spacing-gutter-md);
+  }
+
+  &--lg {
+    margin-bottom: var(--purpur-spacing-gutter-md);
+
+    @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+      margin-bottom: var(--purpur-spacing-gutter-lg);
+    }
+  }
+
+  &--col-gap {
+    margin-top: calc(-1 * var(--purpur-spacing-gutter-sm));
+
+    @media screen and (min-width: #{$purpur-breakpoint-md}) {
+      margin-top: calc(-1 * var(--purpur-spacing-gutter-md));
+    }
+
+    > :global(.purpur-col) {
+      margin-top: var(--purpur-spacing-gutter-sm);
+
+      @media screen and (min-width: #{$purpur-breakpoint-md}) {
+        margin-top: var(--purpur-spacing-gutter-md);
+      }
+    }
+  }
+}

package/src/row.tsx

@@ -0,0 +1,47 @@
+import React, { ReactNode } from "react";
+import c from "classnames";
+
+import styles from "./row.module.scss";
+
+export const RowSpacings = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+} as const;
+
+export const RowSpacingSizes = Object.values(RowSpacings);
+export type RowSpacingsType = (typeof RowSpacings)[keyof typeof RowSpacings];
+
+export type RowProps = {
+  className?: string;
+  colGap?: boolean;
+  ["data-testid"]?: string;
+  children: ReactNode;
+  spacing?: RowSpacingsType;
+};
+
+const rootClassName = "purpur-row";
+
+export const Row = ({
+  children,
+  ["data-testid"]: dataTestId,
+  spacing,
+  className,
+  colGap,
+  ...props
+}: RowProps) => {
+  const classes = c([
+    className,
+    styles[rootClassName],
+    {
+      [styles[`${rootClassName}--${spacing}`]]: spacing,
+      [styles[`${rootClassName}--col-gap`]]: colGap,
+    },
+  ]);
+
+  return (
+    <div className={classes} data-testid={dataTestId} {...props}>
+      {children}
+    </div>
+  );
+};