@purpurds/container 0.0.1

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/container.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),d=require("react");function _(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var a={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/var c;function m(){return c||(c=1,function(t){(function(){var s={}.hasOwnProperty;function e(){for(var r="",n=0;n<arguments.length;n++){var o=arguments[n];o&&(r=i(r,u.call(this,o)))}return r}function u(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return e.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var n="";for(var o in r)s.call(r,o)&&r[o]&&(n=i(n,this&&this[o]||o));return n}function i(r,n){return n?r?r+" "+n:r+n:r}t.exports?(e.default=e,t.exports=e):window.classNames=e})()}(a)),a.exports}var h=m();const y=_(h),b={"purpur-container":"_purpur-container_1nn3a_1","purpur-container--xs":"_purpur-container--xs_1nn3a_12","purpur-container--sm":"_purpur-container--sm_1nn3a_23","purpur-container--md":"_purpur-container--md_1nn3a_38","purpur-container--lg":"_purpur-container--lg_1nn3a_41"},v=y.bind(b),p="purpur-container",f=d.forwardRef(({children:t,className:s,width:e="lg",...u},i)=>{const r=v([s,p,`${p}--${e}`]);return l.jsx("div",{className:r,ref:i,...u,children:t})});f.displayName="Container";exports.Container=f;
+//# sourceMappingURL=container.cjs.js.map

package/dist/container.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.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, { ForwardedRef, forwardRef, ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\nconst cx = c.bind(styles);\n\nexport type ContainerProps = {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  width?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n};\n\nconst rootClassName = \"purpur-container\";\n\nexport const Container = forwardRef(\n  (\n    { children, className, width = \"lg\", ...props }: ContainerProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const classes = cx([className, rootClassName, `${rootClassName}--${width}`]);\n\n    return (\n      <div className={classes} ref={ref} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Container","forwardRef","children","className","width","props","ref"],"mappings":";;;;iDAOC,UAAY,CAGZ,IAAIA,EAAS,CAAA,EAAG,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,EAE7D,CAEE,OAAOF,CACT,CAEC,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,SAAU,EAGtB,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACT,CAEC,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,UAAiBT,GAOjB,OAAO,WAAaA,CAEtB,8TCxEMU,EAAKC,EAAE,KAAKC,CAAM,EASlBC,EAAgB,mBAETC,EAAYC,EAAA,WACvB,CACE,CAAE,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAQ,KAAM,GAAGC,CAAM,EAC9CC,IACG,CACG,MAAAnB,EAAUS,EAAG,CAACO,EAAWJ,EAAe,GAAGA,CAAa,KAAKK,CAAK,EAAE,CAAC,EAE3E,aACG,MAAI,CAAA,UAAWjB,EAAS,IAAAmB,EAAW,GAAGD,EACpC,SAAAH,EACH,CAAA,CAGN,EAEAF,EAAU,YAAc","x_google_ignoreList":[0]}

package/dist/container.d.ts

@@ -0,0 +1,10 @@
+import { default as React, ReactNode } from 'react';
+
+export type ContainerProps = {
+    ["data-testid"]?: string;
+    children: ReactNode;
+    className?: string;
+    width?: "xs" | "sm" | "md" | "lg";
+};
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=container.d.ts.map

package/dist/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../src/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAMnE,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC,CAAC;AAIF,eAAO,MAAM,SAAS,uFAarB,CAAC"}

package/dist/container.es.js

@@ -0,0 +1,62 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+function d(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var p = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var a;
+function _() {
+  return a || (a = 1, function(t) {
+    (function() {
+      var s = {}.hasOwnProperty;
+      function e() {
+        for (var r = "", n = 0; n < arguments.length; n++) {
+          var o = arguments[n];
+          o && (r = i(r, u.call(this, o)));
+        }
+        return r;
+      }
+      function u(r) {
+        if (typeof r == "string" || typeof r == "number")
+          return this && this[r] || r;
+        if (typeof r != "object")
+          return "";
+        if (Array.isArray(r))
+          return e.apply(this, r);
+        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+          return r.toString();
+        var n = "";
+        for (var o in r)
+          s.call(r, o) && r[o] && (n = i(n, this && this[o] || o));
+        return n;
+      }
+      function i(r, n) {
+        return n ? r ? r + " " + n : r + n : r;
+      }
+      t.exports ? (e.default = e, t.exports = e) : window.classNames = e;
+    })();
+  }(p)), p.exports;
+}
+var m = _();
+const h = /* @__PURE__ */ d(m), y = {
+  "purpur-container": "_purpur-container_1nn3a_1",
+  "purpur-container--xs": "_purpur-container--xs_1nn3a_12",
+  "purpur-container--sm": "_purpur-container--sm_1nn3a_23",
+  "purpur-container--md": "_purpur-container--md_1nn3a_38",
+  "purpur-container--lg": "_purpur-container--lg_1nn3a_41"
+}, v = h.bind(y), c = "purpur-container", x = l(
+  ({ children: t, className: s, width: e = "lg", ...u }, i) => {
+    const r = v([s, c, `${c}--${e}`]);
+    return /* @__PURE__ */ f("div", { className: r, ref: i, ...u, children: t });
+  }
+);
+x.displayName = "Container";
+export {
+  x as Container
+};
+//# sourceMappingURL=container.es.js.map

package/dist/container.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.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, { ForwardedRef, forwardRef, ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\nconst cx = c.bind(styles);\n\nexport type ContainerProps = {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  width?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n};\n\nconst rootClassName = \"purpur-container\";\n\nexport const Container = forwardRef(\n  (\n    { children, className, width = \"lg\", ...props }: ContainerProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const classes = cx([className, rootClassName, `${rootClassName}--${width}`]);\n\n    return (\n      <div className={classes} ref={ref} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Container","forwardRef","children","className","width","props","ref"],"mappings":";;;;;;;;;;;;;;AAOA,KAAC,WAAY;AAGZ,UAAIA,IAAS,CAAA,EAAG;AAEhB,eAASC,IAAc;AAGtB,iBAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,cAAIC,IAAM,UAAUD,CAAC;AACrB,UAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,QAE7D;AAEE,eAAOF;AAAA,MACT;AAEC,eAASI,EAAYF,GAAK;AACzB,YAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,iBAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,YAAI,OAAOA,KAAQ;AAClB,iBAAO;AAGR,YAAI,MAAM,QAAQA,CAAG;AACpB,iBAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,YAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,iBAAOA,EAAI,SAAU;AAGtB,YAAIF,IAAU;AAEd,iBAASK,KAAOH;AACf,UAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,eAAOL;AAAA,MACT;AAEC,eAASG,EAAaG,GAAOC,GAAU;AACtC,eAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,MAQV;AAEC,MAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,YAAiBT,KAOjB,OAAO,aAAaA;AAAA,IAEtB;;;;;;;;;;GCxEMU,IAAKC,EAAE,KAAKC,CAAM,GASlBC,IAAgB,oBAETC,IAAYC;AAAA,EACvB,CACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,OAAAC,IAAQ,MAAM,GAAGC,EAAM,GAC9CC,MACG;AACG,UAAAnB,IAAUS,EAAG,CAACO,GAAWJ,GAAe,GAAGA,CAAa,KAAKK,CAAK,EAAE,CAAC;AAE3E,6BACG,OAAI,EAAA,WAAWjB,GAAS,KAAAmB,GAAW,GAAGD,GACpC,UAAAH,GACH;AAAA,EAAA;AAGN;AAEAF,EAAU,cAAc;","x_google_ignoreList":[0]}

package/dist/metadata.js

@@ -0,0 +1,7 @@
+module.exports = {
+  "moduleName": "container",
+  "exports": [
+    "ContainerProps",
+    "Container"
+  ]
+};

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-container_1nn3a_1{box-sizing:border-box;width:100%;margin:0 auto;padding:0 var(--padding);--padding: var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-container_1nn3a_1{--padding: var(--purpur-spacing-page-padding-md)}._purpur-container--xs_1nn3a_12{--padding: var(--purpur-spacing-page-padding-sm)}}@media screen and (min-width: 1024px){._purpur-container_1nn3a_1{--padding: var(--purpur-spacing-page-padding-lg)}._purpur-container--xs_1nn3a_12{--padding: var(--purpur-spacing-page-padding-sm)}._purpur-container--sm_1nn3a_23{--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width: 1440px){._purpur-container_1nn3a_1{--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-container--xs_1nn3a_12{max-width:480px}._purpur-container--sm_1nn3a_23{max-width:660px}._purpur-container--md_1nn3a_38{max-width:880px}._purpur-container--lg_1nn3a_41{max-width:var(--purpur-breakpoint-xl)}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@purpurds/container",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/container.cjs.js",
+  "types": "./dist/container.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/container.cjs.js",
+      "types": "./dist/container.d.ts",
+      "default": "./dist/container.es.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./metadata": "./dist/metadata.js"
+  },
+  "source": "src/container.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/tokens": "6.3.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~10.4.0",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~16.2.0",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.0.10",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "^8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "storybook": "^8.6.4",
+    "typescript": "^5.6.3",
+    "vite": "^6.2.1",
+    "vitest": "^2.1.2",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "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/src/container.module.scss

@@ -0,0 +1,46 @@
+@use "@purpurds/tokens/breakpoint/variables" as *;
+
+.purpur-container {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 var(--padding);
+  --padding: var(--purpur-spacing-page-padding-sm);
+
+  @media screen and (min-width: $purpur-breakpoint-md) {
+    --padding: var(--purpur-spacing-page-padding-md);
+    &--xs {
+      --padding: var(--purpur-spacing-page-padding-sm);
+    }
+  }
+
+  @media screen and (min-width: $purpur-breakpoint-lg) {
+    --padding: var(--purpur-spacing-page-padding-lg);
+    &--xs {
+      --padding: var(--purpur-spacing-page-padding-sm);
+    }
+    &--sm {
+      --padding: var(--purpur-spacing-page-padding-md);
+    }
+  }
+
+  @media screen and (min-width: $purpur-breakpoint-xl) {
+    --padding: var(--purpur-spacing-page-padding-xl);
+  }
+
+  &--xs {
+    max-width: 480px;
+  }
+
+  &--sm {
+    max-width: 660px;
+  }
+
+  &--md {
+    max-width: 880px;
+  }
+
+  &--lg {
+    max-width: var(--purpur-breakpoint-xl);
+  }
+}

package/src/container.stories.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Container } from "./container";
+
+const meta = {
+  title: "Components/Container",
+  component: Container,
+  parameters: {
+    design: [
+      {
+        name: "Container",
+        type: "figma",
+        url: "https://www.figma.com/design/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-library?node-id=5704-10669&p=f&t=9JddBITR86a43RCE-0",
+      },
+    ],
+  },
+  args: {
+    width: "lg",
+  },
+} satisfies Meta<typeof Container>;
+
+export default meta;
+type Story = StoryObj<typeof Container>;
+
+const style = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "lavender",
+  height: "50vh",
+  fontSize: "2rem",
+  fontWeight: "bold",
+  color: "mediumpurple",
+};
+
+export const Showcase: Story = {
+  render: (args) => (
+    <div style={{ backgroundColor: "thistle" }}>
+      <Container {...args}>
+        <div style={style}>Page content</div>
+      </Container>
+    </div>
+  ),
+};
+
+export const SmallWidth: Story = {
+  args: {
+    width: "sm",
+  },
+  render: (args) => (
+    <div style={{ backgroundColor: "thistle" }}>
+      <Container {...args}>
+        <div style={style}>Even more page content</div>
+      </Container>
+    </div>
+  ),
+};

package/src/container.test.tsx

@@ -0,0 +1,15 @@
+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 { Container } from "./container";
+
+expect.extend(matchers);
+
+describe("Container", () => {
+  it("should have tests", () => {
+    render(<Container data-testid="unique">Some text content</Container>);
+    expect(screen.getByTestId("unique")).toHaveTextContent("Some text content");
+  });
+});

package/src/container.tsx

@@ -0,0 +1,31 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
+import c from "classnames/bind";
+
+import styles from "./container.module.scss";
+const cx = c.bind(styles);
+
+export type ContainerProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  width?: "xs" | "sm" | "md" | "lg";
+};
+
+const rootClassName = "purpur-container";
+
+export const Container = forwardRef(
+  (
+    { children, className, width = "lg", ...props }: ContainerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([className, rootClassName, `${rootClassName}--${width}`]);
+
+    return (
+      <div className={classes} ref={ref} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+Container.displayName = "Container";

package/src/global.d.ts

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