@purpurds/grid 4.6.0 → 5.0.0

package/dist/grid.cjs.js

@@ -1,6 +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:{}};/*!
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");function s(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;
+*/(function(p){(function(){var c={}.hasOwnProperty;function l(){for(var r="",u=0;u<arguments.length;u++){var i=arguments[u];i&&(r=o(r,d.call(this,i)))}return r}function d(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return l.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var u="";for(var i in r)c.call(r,i)&&r[i]&&(u=o(u,this&&this[i]||i));return u}function o(r,u){return u?r?r+" "+u:r+u:r}p.exports?(l.default=l,p.exports=l):window.classNames=l})()})(g);var e=g.exports;const m=s(e),n={"purpur-grid":"_purpur-grid_12u5q_1","purpur-grid-col-sm-12":"_purpur-grid-col-sm-12_12u5q_30","purpur-grid-col-sm-11":"_purpur-grid-col-sm-11_12u5q_33","purpur-grid-col-sm-10":"_purpur-grid-col-sm-10_12u5q_36","purpur-grid-col-sm-9":"_purpur-grid-col-sm-9_12u5q_39","purpur-grid-col-sm-8":"_purpur-grid-col-sm-8_12u5q_42","purpur-grid-col-sm-7":"_purpur-grid-col-sm-7_12u5q_45","purpur-grid-col-sm-6":"_purpur-grid-col-sm-6_12u5q_48","purpur-grid-col-sm-5":"_purpur-grid-col-sm-5_12u5q_51","purpur-grid-col-sm-4":"_purpur-grid-col-sm-4_12u5q_54","purpur-grid-col-sm-3":"_purpur-grid-col-sm-3_12u5q_57","purpur-grid-col-sm-2":"_purpur-grid-col-sm-2_12u5q_60","purpur-grid-col-md-12":"_purpur-grid-col-md-12_12u5q_64","purpur-grid-col-md-11":"_purpur-grid-col-md-11_12u5q_69","purpur-grid-col-md-10":"_purpur-grid-col-md-10_12u5q_74","purpur-grid-col-md-9":"_purpur-grid-col-md-9_12u5q_79","purpur-grid-col-md-8":"_purpur-grid-col-md-8_12u5q_84","purpur-grid-col-md-7":"_purpur-grid-col-md-7_12u5q_89","purpur-grid-col-md-6":"_purpur-grid-col-md-6_12u5q_94","purpur-grid-col-md-5":"_purpur-grid-col-md-5_12u5q_99","purpur-grid-col-md-4":"_purpur-grid-col-md-4_12u5q_104","purpur-grid-col-md-3":"_purpur-grid-col-md-3_12u5q_109","purpur-grid-col-md-2":"_purpur-grid-col-md-2_12u5q_114","purpur-grid-col-lg-12":"_purpur-grid-col-lg-12_12u5q_119","purpur-grid-col-lg-11":"_purpur-grid-col-lg-11_12u5q_124","purpur-grid-col-lg-10":"_purpur-grid-col-lg-10_12u5q_129","purpur-grid-col-lg-9":"_purpur-grid-col-lg-9_12u5q_134","purpur-grid-col-lg-8":"_purpur-grid-col-lg-8_12u5q_139","purpur-grid-col-lg-7":"_purpur-grid-col-lg-7_12u5q_144","purpur-grid-col-lg-6":"_purpur-grid-col-lg-6_12u5q_149","purpur-grid-col-lg-5":"_purpur-grid-col-lg-5_12u5q_154","purpur-grid-col-lg-4":"_purpur-grid-col-lg-4_12u5q_159","purpur-grid-col-lg-3":"_purpur-grid-col-lg-3_12u5q_164","purpur-grid-col-lg-2":"_purpur-grid-col-lg-2_12u5q_169"},q=m.bind(n),_="purpur-grid",a=({children:p,className:c,["data-testid"]:l,colsSm:d=1,colsMd:o=1,colsLg:r=1,...u})=>{const i=q([c,_,{[`${_}-col-sm-${d}`]:d>1,[`${_}-col-md-${o}`]:o>1,[`${_}-col-lg-${r}`]:r>1}]);return t.jsx("div",{className:i,"data-testid":l,...u,children:p})};exports.Grid=a;
 //# sourceMappingURL=grid.cjs.js.map

package/dist/grid.cjs.js.map

@@ -1 +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]}
+{"version":3,"file":"grid.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../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.call(this, 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 this && this[arg] || 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(this, 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, this && this[key] || 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/bind\";\n\nimport styles from \"./grid.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type GridProps = {\n  children: ReactNode;\n  [\"data-testid\"]?: string;\n  className?: string;\n  /** colsSm represents the number of columns for small screens. */\n  colsSm?: 1 | 2 | 3 | 4;\n  /** colsMd represents the number of columns for medium screens. */\n  colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n  /** colsLg represents the number of columns for large screens. */\n  colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nconst rootClassName = \"purpur-grid\";\n\nexport const Grid = ({\n  children,\n  className,\n  [\"data-testid\"]: dataTestId,\n  colsSm = 1,\n  colsMd = 1,\n  colsLg = 1,\n  ...props\n}: GridProps) => {\n  const classes = cx([\n    className,\n    rootClassName,\n    {\n      [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1,\n      [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1,\n      [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1,\n    },\n  ]);\n  return (\n    <div className={classes} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Grid","children","className","dataTestId","colsSm","colsMd","colsLg","props","jsx"],"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,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE1D,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,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,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,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,w6DCvEMU,EAAKC,EAAE,KAAKC,CAAM,EAclBC,EAAgB,cAETC,EAAO,CAAC,CACnB,SAAAC,EACA,UAAAC,EACA,CAAC,eAAgBC,EACjB,OAAAC,EAAS,EACT,OAAAC,EAAS,EACT,OAAAC,EAAS,EACT,GAAGC,CACL,IAAiB,CACf,MAAMpB,EAAUS,EAAG,CACjBM,EACAH,EACA,CACE,CAAC,GAAGA,CAAa,WAAWK,CAAM,EAAE,EAAGA,EAAS,EAChD,CAAC,GAAGL,CAAa,WAAWM,CAAM,EAAE,EAAGA,EAAS,EAChD,CAAC,GAAGN,CAAa,WAAWO,CAAM,EAAE,EAAGA,EAAS,CAClD,CAAA,CACD,EAEC,OAAAE,MAAC,OAAI,UAAWrB,EAAS,cAAagB,EAAa,GAAGI,EACnD,SAAAN,CACH,CAAA,CAEJ","x_google_ignoreList":[0]}

package/dist/grid.d.ts

@@ -1,16 +1,15 @@
-import { Row } from './row';
-import { Col } from './col';
 import { default as React, ReactNode } from 'react';
 
-type GridCmp<P> = React.FunctionComponent<P> & {
-    Row: typeof Row;
-    Col: typeof Col;
-};
 export type GridProps = {
     children: ReactNode;
     ["data-testid"]?: string;
     className?: string;
+    /** colsSm represents the number of columns for small screens. */
+    colsSm?: 1 | 2 | 3 | 4;
+    /** colsMd represents the number of columns for medium screens. */
+    colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** colsLg represents the number of columns for large screens. */
+    colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 };
-export type { ColumnWidthType } from './col';
-export declare const Grid: GridCmp<GridProps>;
+export declare const Grid: ({ children, className, ["data-testid"]: dataTestId, colsSm, colsMd, colsLg, ...props }: GridProps) => React.JSX.Element;
 //# sourceMappingURL=grid.d.ts.map

package/dist/grid.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOzC,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvB,kEAAkE;IAClE,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvC,iEAAiE;IACjE,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC3D,CAAC;AAIF,eAAO,MAAM,IAAI,2FAQd,SAAS,sBAeX,CAAC"}

package/dist/grid.es.js

@@ -1,8 +1,8 @@
-import { jsx as d } from "react/jsx-runtime";
-function f(p) {
+import { jsx as t } from "react/jsx-runtime";
+function s(p) {
   return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
 }
-var i = { exports: {} };
+var g = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -10,129 +10,91 @@ var i = { exports: {} };
 */
 (function(p) {
   (function() {
-    var _ = {}.hasOwnProperty;
-    function o() {
+    var c = {}.hasOwnProperty;
+    function l() {
       for (var r = "", u = 0; u < arguments.length; u++) {
-        var t = arguments[u];
-        t && (r = l(r, c(t)));
+        var o = arguments[u];
+        o && (r = d(r, i.call(this, o)));
       }
       return r;
     }
-    function c(r) {
+    function i(r) {
       if (typeof r == "string" || typeof r == "number")
-        return r;
+        return this && this[r] || r;
       if (typeof r != "object")
         return "";
       if (Array.isArray(r))
-        return o.apply(null, r);
+        return l.apply(this, 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));
+      for (var o in r)
+        c.call(r, o) && r[o] && (u = d(u, this && this[o] || o));
       return u;
     }
-    function l(r, u) {
+    function d(r, u) {
       return u ? r ? r + " " + u : r + u : r;
     }
-    p.exports ? (o.default = o, p.exports = o) : window.classNames = o;
+    p.exports ? (l.default = l, p.exports = l) : window.classNames = l;
   })();
-})(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 = ({
+})(g);
+var m = g.exports;
+const n = /* @__PURE__ */ s(m), e = {
+  "purpur-grid": "_purpur-grid_12u5q_1",
+  "purpur-grid-col-sm-12": "_purpur-grid-col-sm-12_12u5q_30",
+  "purpur-grid-col-sm-11": "_purpur-grid-col-sm-11_12u5q_33",
+  "purpur-grid-col-sm-10": "_purpur-grid-col-sm-10_12u5q_36",
+  "purpur-grid-col-sm-9": "_purpur-grid-col-sm-9_12u5q_39",
+  "purpur-grid-col-sm-8": "_purpur-grid-col-sm-8_12u5q_42",
+  "purpur-grid-col-sm-7": "_purpur-grid-col-sm-7_12u5q_45",
+  "purpur-grid-col-sm-6": "_purpur-grid-col-sm-6_12u5q_48",
+  "purpur-grid-col-sm-5": "_purpur-grid-col-sm-5_12u5q_51",
+  "purpur-grid-col-sm-4": "_purpur-grid-col-sm-4_12u5q_54",
+  "purpur-grid-col-sm-3": "_purpur-grid-col-sm-3_12u5q_57",
+  "purpur-grid-col-sm-2": "_purpur-grid-col-sm-2_12u5q_60",
+  "purpur-grid-col-md-12": "_purpur-grid-col-md-12_12u5q_64",
+  "purpur-grid-col-md-11": "_purpur-grid-col-md-11_12u5q_69",
+  "purpur-grid-col-md-10": "_purpur-grid-col-md-10_12u5q_74",
+  "purpur-grid-col-md-9": "_purpur-grid-col-md-9_12u5q_79",
+  "purpur-grid-col-md-8": "_purpur-grid-col-md-8_12u5q_84",
+  "purpur-grid-col-md-7": "_purpur-grid-col-md-7_12u5q_89",
+  "purpur-grid-col-md-6": "_purpur-grid-col-md-6_12u5q_94",
+  "purpur-grid-col-md-5": "_purpur-grid-col-md-5_12u5q_99",
+  "purpur-grid-col-md-4": "_purpur-grid-col-md-4_12u5q_104",
+  "purpur-grid-col-md-3": "_purpur-grid-col-md-3_12u5q_109",
+  "purpur-grid-col-md-2": "_purpur-grid-col-md-2_12u5q_114",
+  "purpur-grid-col-lg-12": "_purpur-grid-col-lg-12_12u5q_119",
+  "purpur-grid-col-lg-11": "_purpur-grid-col-lg-11_12u5q_124",
+  "purpur-grid-col-lg-10": "_purpur-grid-col-lg-10_12u5q_129",
+  "purpur-grid-col-lg-9": "_purpur-grid-col-lg-9_12u5q_134",
+  "purpur-grid-col-lg-8": "_purpur-grid-col-lg-8_12u5q_139",
+  "purpur-grid-col-lg-7": "_purpur-grid-col-lg-7_12u5q_144",
+  "purpur-grid-col-lg-6": "_purpur-grid-col-lg-6_12u5q_149",
+  "purpur-grid-col-lg-5": "_purpur-grid-col-lg-5_12u5q_154",
+  "purpur-grid-col-lg-4": "_purpur-grid-col-lg-4_12u5q_159",
+  "purpur-grid-col-lg-3": "_purpur-grid-col-lg-3_12u5q_164",
+  "purpur-grid-col-lg-2": "_purpur-grid-col-lg-2_12u5q_169"
+}, q = n.bind(e), _ = "purpur-grid", f = ({
   children: p,
-  ["data-testid"]: _,
-  width: o,
   className: c,
-  widthMd: l,
-  widthLg: r,
+  ["data-testid"]: l,
+  colsSm: i = 1,
+  colsMd: d = 1,
+  colsLg: r = 1,
   ...u
 }) => {
-  const t = a([
+  const o = q([
     c,
-    s[m],
+    _,
     {
-      [s[`${m}-${o}`]]: o,
-      [s[`${m}-md-${l}`]]: l,
-      [s[`${m}-lg-${r}`]]: r
+      [`${_}-col-sm-${i}`]: i > 1,
+      [`${_}-col-md-${d}`]: d > 1,
+      [`${_}-col-lg-${r}`]: r > 1
     }
   ]);
-  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 });
+  return /* @__PURE__ */ t("div", { className: o, "data-testid": l, ...u, children: p });
 };
-g.Col = w;
-g.Row = v;
 export {
-  g as Grid
+  f as Grid
 };
 //# sourceMappingURL=grid.es.js.map

package/dist/grid.es.js.map

@@ -1 +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]}
+{"version":3,"file":"grid.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../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.call(this, 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 this && this[arg] || 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(this, 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, this && this[key] || 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/bind\";\n\nimport styles from \"./grid.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type GridProps = {\n  children: ReactNode;\n  [\"data-testid\"]?: string;\n  className?: string;\n  /** colsSm represents the number of columns for small screens. */\n  colsSm?: 1 | 2 | 3 | 4;\n  /** colsMd represents the number of columns for medium screens. */\n  colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n  /** colsLg represents the number of columns for large screens. */\n  colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nconst rootClassName = \"purpur-grid\";\n\nexport const Grid = ({\n  children,\n  className,\n  [\"data-testid\"]: dataTestId,\n  colsSm = 1,\n  colsMd = 1,\n  colsLg = 1,\n  ...props\n}: GridProps) => {\n  const classes = cx([\n    className,\n    rootClassName,\n    {\n      [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1,\n      [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1,\n      [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1,\n    },\n  ]);\n  return (\n    <div className={classes} data-testid={dataTestId} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Grid","children","className","dataTestId","colsSm","colsMd","colsLg","props","jsx"],"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,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,MAE1D;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,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,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCvEMU,IAAKC,EAAE,KAAKC,CAAM,GAclBC,IAAgB,eAETC,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,CAAC,gBAAgBC;AAAA,EACjB,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,MAAiB;AACf,QAAMpB,IAAUS,EAAG;AAAA,IACjBM;AAAA,IACAH;AAAA,IACA;AAAA,MACE,CAAC,GAAGA,CAAa,WAAWK,CAAM,EAAE,GAAGA,IAAS;AAAA,MAChD,CAAC,GAAGL,CAAa,WAAWM,CAAM,EAAE,GAAGA,IAAS;AAAA,MAChD,CAAC,GAAGN,CAAa,WAAWO,CAAM,EAAE,GAAGA,IAAS;AAAA,IAClD;AAAA,EAAA,CACD;AAEC,SAAA,gBAAAE,EAAC,SAAI,WAAWrB,GAAS,eAAagB,GAAa,GAAGI,GACnD,UAAAN,EACH,CAAA;AAEJ;","x_google_ignoreList":[0]}

package/dist/styles.css

@@ -1 +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)}}
+._purpur-grid_12u5q_1{--gap: var(--purpur-spacing-gutter-sm);--padding: var(--purpur-spacing-page-padding-sm);box-sizing:border-box;display:grid;gap:var(--gap);width:100%;max-width:var(--purpur-breakpoint-xl);margin:0 auto;padding:0 var(--padding)}@media screen and (min-width: 600px){._purpur-grid_12u5q_1{--gap: var(--purpur-spacing-gutter-md);--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1{--gap: var(--purpur-spacing-gutter-lg);--padding: var(--purpur-spacing-page-padding-lg)}}@media screen and (min-width: 1440px){._purpur-grid_12u5q_1{--gap: var(--purpur-spacing-gutter-xl);--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-grid_12u5q_1._purpur-grid-col-sm-12_12u5q_30{grid-template-columns:repeat(12,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-11_12u5q_33{grid-template-columns:repeat(11,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-10_12u5q_36{grid-template-columns:repeat(10,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-9_12u5q_39{grid-template-columns:repeat(9,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-8_12u5q_42{grid-template-columns:repeat(8,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-7_12u5q_45{grid-template-columns:repeat(7,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-6_12u5q_48{grid-template-columns:repeat(6,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-5_12u5q_51{grid-template-columns:repeat(5,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-4_12u5q_54{grid-template-columns:repeat(4,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-3_12u5q_57{grid-template-columns:repeat(3,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-2_12u5q_60{grid-template-columns:repeat(2,1fr)}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-12_12u5q_64{grid-template-columns:repeat(12,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-11_12u5q_69{grid-template-columns:repeat(11,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-10_12u5q_74{grid-template-columns:repeat(10,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-9_12u5q_79{grid-template-columns:repeat(9,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-8_12u5q_84{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-7_12u5q_89{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-6_12u5q_94{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-5_12u5q_99{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-4_12u5q_104{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-3_12u5q_109{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-2_12u5q_114{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-12_12u5q_119{grid-template-columns:repeat(12,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-11_12u5q_124{grid-template-columns:repeat(11,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-10_12u5q_129{grid-template-columns:repeat(10,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-9_12u5q_134{grid-template-columns:repeat(9,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-8_12u5q_139{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-7_12u5q_144{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-6_12u5q_149{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-5_12u5q_154{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-4_12u5q_159{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-3_12u5q_164{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-2_12u5q_169{grid-template-columns:repeat(2,1fr)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/grid",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/grid.cjs.js",
   "types": "./dist/grid.d.ts",
@@ -15,7 +15,7 @@
   "source": "src/grid.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/tokens": "4.6.0"
+    "@purpurds/tokens": "5.0.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/readme.mdx

@@ -1,8 +1,6 @@
 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} />
@@ -21,20 +19,16 @@ import packageInfo from "./package.json";
 
 <ArgTypes of={GridStories} />
 
-#### Grid.Row
-
-<ArgTypes of={GridRowStories} />
-
-#### Grid.Col
-
-<ArgTypes of={GridColStories} />
-
 ### Installation
 
 #### Via NPM
 
 Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
 
+### Usage
+
+The standard usage is to have multiple elements directly as children of the `Grid` component. It's also possible to only have one, to get the standard page padding, max width and prevent getting gaps between elements.
+
 In MyApp.tsx
 
 ```tsx
@@ -48,18 +42,14 @@ import { Grid } from "@purpurds/purpur";
 
 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>
+    <Grid colsSm={2} colsMd={4} colsLg={6}>
+      <div>Grid item 1</div>
+      <div>Grid item 2</div>
+      <div>Grid item 3</div>
+      <div>Grid item 4</div>
+      <div>Grid item 5</div>
+      <div>Grid item 6</div>
+    </Grid>
   );
 };
 ```

package/src/grid.module.scss

@@ -1,23 +1,49 @@
 @import "@purpurds/tokens/breakpoint/variables";
 
 .purpur-grid {
+  --gap: var(--purpur-spacing-gutter-sm);
   --padding: var(--purpur-spacing-page-padding-sm);
 
   box-sizing: border-box;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
+  display: grid;
+  gap: var(--gap);
+  width: 100%;
   max-width: var(--purpur-breakpoint-xl);
+  margin: 0 auto;
   padding: 0 var(--padding);
-  width: 100%;
 
   @media screen and (min-width: #{$purpur-breakpoint-md}) {
+    --gap: var(--purpur-spacing-gutter-md);
     --padding: var(--purpur-spacing-page-padding-md);
   }
   @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+    --gap: var(--purpur-spacing-gutter-lg);
     --padding: var(--purpur-spacing-page-padding-lg);
   }
   @media screen and (min-width: #{$purpur-breakpoint-xl}) {
+    --gap: var(--purpur-spacing-gutter-xl);
     --padding: var(--purpur-spacing-page-padding-xl);
   }
+
+  @for $i from 12 through 2 {
+    &#{&}-col-sm-#{$i} {
+      grid-template-columns: repeat($i, 1fr);
+    }
+  }
+
+  @for $i from 12 through 2 {
+    @media screen and (min-width: #{$purpur-breakpoint-md}) {
+      &#{&}-col-md-#{$i} {
+        grid-template-columns: repeat($i, 1fr);
+      }
+    }
+  }
+
+  @for $i from 12 through 2 {
+    @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+      &#{&}-col-lg-#{$i} {
+        grid-template-columns: repeat($i, 1fr);
+      }
+    }
+  }
 }

package/src/grid.stories.tsx

@@ -20,6 +20,14 @@ const meta: Meta<typeof Grid> = {
     ["data-testid"]: { control: { type: "text" } },
     className: { control: { type: "text" } },
     children: { control: { type: "text" } },
+    colsSm: { control: { type: "range", min: 1, max: 4, step: 1 } },
+    colsMd: { control: { type: "range", min: 1, max: 8, step: 1 } },
+    colsLg: { control: { type: "range", min: 1, max: 12, step: 1 } },
+  },
+  args: {
+    colsSm: 2,
+    colsMd: 4,
+    colsLg: 6,
   },
 };
 
@@ -30,40 +38,12 @@ 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>
+      {Array.from(Array(12).keys()).map((x) => (
+        <div key={x} style={{ border: "1px solid lightgray", padding: ".5rem" }}>
+          <p>Column {x + 1}</p>
           {children}
-        </Grid.Col>
-      </Grid.Row>
+        </div>
+      ))}
     </Grid>
   ),
 };

package/src/grid.tsx

@@ -1,38 +1,45 @@
 import React, { ReactNode } from "react";
-import c from "classnames";
+import c from "classnames/bind";
 
-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;
-};
+const cx = c.bind(styles);
 
 export type GridProps = {
   children: ReactNode;
   ["data-testid"]?: string;
   className?: string;
+  /** colsSm represents the number of columns for small screens. */
+  colsSm?: 1 | 2 | 3 | 4;
+  /** colsMd represents the number of columns for medium screens. */
+  colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** colsLg represents the number of columns for large screens. */
+  colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 };
 
-export type { ColumnWidthType } from "./col";
-
 const rootClassName = "purpur-grid";
 
-export const Grid: GridCmp<GridProps> = ({
+export const Grid = ({
   children,
   className,
   ["data-testid"]: dataTestId,
+  colsSm = 1,
+  colsMd = 1,
+  colsLg = 1,
   ...props
-}) => {
-  const classes = c([className, styles[rootClassName]]);
+}: GridProps) => {
+  const classes = cx([
+    className,
+    rootClassName,
+    {
+      [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1,
+      [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1,
+      [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1,
+    },
+  ]);
   return (
     <div className={classes} data-testid={dataTestId} {...props}>
       {children}
     </div>
   );
 };
-
-Grid.Col = Col;
-Grid.Row = Row;

package/dist/col.d.ts

@@ -1,13 +0,0 @@
-import { default as 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

@@ -1 +0,0 @@
-{"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/row.d.ts

@@ -1,18 +0,0 @@
-import { default as 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

@@ -1 +0,0 @@
-{"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/src/col.module.scss

@@ -1,62 +0,0 @@
-@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

@@ -1,43 +0,0 @@
-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/grid.col.stories.tsx

@@ -1,79 +0,0 @@
-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.row.stories.tsx

@@ -1,67 +0,0 @@
-/* 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/row.module.scss

@@ -1,58 +0,0 @@
-@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

@@ -1,47 +0,0 @@
-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>
-  );
-};