@troychaplin/parlour-ui 0.1.0

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,12 @@
+import { borderRadiusClasses, backgroundColorClasses } from '../../utils/propClasses';
+type borderRadiusKeys = keyof typeof borderRadiusClasses;
+type backgroundColorKeys = keyof typeof backgroundColorClasses;
+export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLPreElement>, 'children'> {
+    code: string;
+    color?: backgroundColorKeys;
+    hasBorder?: boolean;
+    borderRadius?: borderRadiusKeys;
+}
+export declare const CodeBlock: ({ code, color, className, hasBorder, borderRadius, ...rest }: CodeBlockProps) => import('react').JSX.Element;
+export {};
+//# sourceMappingURL=CodeBlock.d.ts.map

package/dist/components/CodeBlock/CodeBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,eAAe,CAAC;AAEvB,KAAK,gBAAgB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AACzD,KAAK,mBAAmB,GAAG,MAAM,OAAO,sBAAsB,CAAC;AAE/D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC1F,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,SAAS,GAAI,8DAOvB,cAAc,gCAiBhB,CAAC"}

package/dist/components/CodeBlock/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../_shared/propClasses-CLbmpfVJ.cjs");let t=require("react/jsx-runtime");var n=({code:n,color:r,className:i,hasBorder:a,borderRadius:o,...s})=>{let c=[`parlour-code-block`,r&&`parlour-code-block--${e.t[r]}`,a&&`parlour-code-block--has-border`,o&&`parlour-code-block--radius-${e.n[o]}`,i].filter(Boolean).join(` `);return(0,t.jsx)(`pre`,{className:c,tabIndex:0,...s,children:(0,t.jsx)(`code`,{children:n})})};exports.CodeBlock=n;

package/dist/components/CodeBlock/index.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+
+declare const borderRadiusClasses: {
+    sm: "sm";
+    md: "md";
+    lg: "lg";
+    xl: "xl";
+    full: "full";
+    none: string;
+};
+declare const backgroundColorClasses: {
+    light: string;
+    medium: string;
+    dark: string;
+    white: string;
+};
+
+type borderRadiusKeys = keyof typeof borderRadiusClasses;
+type backgroundColorKeys = keyof typeof backgroundColorClasses;
+interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLPreElement>, 'children'> {
+    code: string;
+    color?: backgroundColorKeys;
+    hasBorder?: boolean;
+    borderRadius?: borderRadiusKeys;
+}
+declare const CodeBlock: ({ code, color, className, hasBorder, borderRadius, ...rest }: CodeBlockProps) => react.JSX.Element;
+
+export { CodeBlock };
+export type { CodeBlockProps };

package/dist/components/CodeBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/CodeBlock/index.mjs

@@ -0,0 +1,20 @@
+import { n as e, t } from "../_shared/propClasses-R9s_eOfA.mjs";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/CodeBlock/CodeBlock.tsx
+var r = ({ code: r, color: i, className: a, hasBorder: o, borderRadius: s, ...c }) => {
+	let l = [
+		"parlour-code-block",
+		i && `parlour-code-block--${t[i]}`,
+		o && "parlour-code-block--has-border",
+		s && `parlour-code-block--radius-${e[s]}`,
+		a
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("pre", {
+		className: l,
+		tabIndex: 0,
+		...c,
+		children: /* @__PURE__ */ n("code", { children: r })
+	});
+};
+//#endregion
+export { r as CodeBlock };

package/dist/components/CodeBlock/styles.css

@@ -0,0 +1,53 @@
+.parlour-code-block {
+  padding-inline: var(--parlour--spacing-x-large);
+  padding-block: var(--parlour--spacing-x-large);
+  overflow-x: auto;
+  font-family: var(--parlour--font-family-jetbrains-mono);
+  font-size: var(--parlour--font-size-small);
+  line-height: var(--parlour--line-height-normal);
+  color: var(--parlour--color-neutral-950);
+  background-color: var(--parlour--color-neutral-200);
+  border-color: var(--parlour--color-neutral-300);
+}
+.parlour-code-block code {
+  display: block;
+  font-family: inherit;
+}
+.parlour-code-block--light {
+  background-color: var(--parlour--color-neutral-200);
+}
+.parlour-code-block--medium {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-900);
+  border-color: var(--parlour--color-neutral-900);
+}
+.parlour-code-block--dark {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-950);
+  border-color: var(--parlour--color-neutral-950);
+}
+.parlour-code-block--white {
+  background-color: var(--parlour--color-white);
+}
+.parlour-code-block--has-border {
+  border-style: solid;
+  border-width: 1px;
+}
+.parlour-code-block--radius-sm {
+  border-radius: var(--parlour--radius-sm);
+}
+.parlour-code-block--radius-md {
+  border-radius: var(--parlour--radius-md);
+}
+.parlour-code-block--radius-lg {
+  border-radius: var(--parlour--radius-lg);
+}
+.parlour-code-block--radius-xl {
+  border-radius: var(--parlour--radius-xl);
+}
+.parlour-code-block--radius-full {
+  border-radius: var(--parlour--radius-full);
+}
+.parlour-code-block--radius-none {
+  border-radius: 0;
+}

package/dist/components/CodeBlock/styles.scss

@@ -0,0 +1,53 @@
+.parlour-code-block {
+  padding-inline: var(--parlour--spacing-x-large);
+  padding-block: var(--parlour--spacing-x-large);
+  overflow-x: auto;
+  font-family: var(--parlour--font-family-jetbrains-mono);
+  font-size: var(--parlour--font-size-small);
+  line-height: var(--parlour--line-height-normal);
+  color: var(--parlour--color-neutral-950);
+  background-color: var(--parlour--color-neutral-200);
+  border-color: var(--parlour--color-neutral-300);
+}
+.parlour-code-block code {
+  display: block;
+  font-family: inherit;
+}
+.parlour-code-block--light {
+  background-color: var(--parlour--color-neutral-200);
+}
+.parlour-code-block--medium {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-900);
+  border-color: var(--parlour--color-neutral-900);
+}
+.parlour-code-block--dark {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-950);
+  border-color: var(--parlour--color-neutral-950);
+}
+.parlour-code-block--white {
+  background-color: var(--parlour--color-white);
+}
+.parlour-code-block--has-border {
+  border-style: solid;
+  border-width: 1px;
+}
+.parlour-code-block--radius-sm {
+  border-radius: var(--parlour--radius-sm);
+}
+.parlour-code-block--radius-md {
+  border-radius: var(--parlour--radius-md);
+}
+.parlour-code-block--radius-lg {
+  border-radius: var(--parlour--radius-lg);
+}
+.parlour-code-block--radius-xl {
+  border-radius: var(--parlour--radius-xl);
+}
+.parlour-code-block--radius-full {
+  border-radius: var(--parlour--radius-full);
+}
+.parlour-code-block--radius-none {
+  border-radius: 0;
+}

package/dist/components/Column/Column.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { gridColumnClasses } from '../../utils/propClasses';
+type gridColumnKeys = keyof typeof gridColumnClasses;
+export interface ColumnProps {
+    children: React.ReactNode;
+    cols?: gridColumnKeys;
+    maxWidth?: 'aligncontent' | 'alignwide' | 'alignfull';
+}
+export declare const ColumnWrapper: {
+    ({ children, cols, maxWidth }: ColumnProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const Column: {
+    ({ children, cols, maxWidth }: ColumnProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Content: {
+        ({ children, isFirst }: import('./ColumnContent').ColumnContentProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export {};
+//# sourceMappingURL=Column.d.ts.map

package/dist/components/Column/Column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../src/components/Column/Column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,eAAe,CAAC;AAEvB,KAAK,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAErD,MAAM,WAAW,WAAW;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,GAAG,WAAW,GAAG,WAAW,CAAC;CACzD;AAED,eAAO,MAAM,aAAa;mCAAyD,WAAW;;CAS7F,CAAC;AAEF,eAAO,MAAM,MAAM;mCAXgE,WAAW;;;;;;;CAa5F,CAAC"}

package/dist/components/Column/ColumnContent.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ColumnContentProps {
+    children: React.ReactNode;
+    isFirst?: boolean;
+}
+export declare const ColumnContent: {
+    ({ children, isFirst }: ColumnContentProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ColumnContent.d.ts.map

package/dist/components/Column/ColumnContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnContent.d.ts","sourceRoot":"","sources":["../../../src/components/Column/ColumnContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa;4BAAmC,kBAAkB;;CAE9E,CAAC"}

package/dist/components/Column/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../_shared/rolldown-runtime-BocRIvOZ.cjs"),t=require("../_shared/propClasses-CLbmpfVJ.cjs");let n=require("react");n=e.t(n,1);let r=require("react/jsx-runtime");var i=({children:e,isFirst:t=!1})=>(0,r.jsx)(`div`,{className:`parlour-column__content ${t?`is-first`:``}`,children:e});i.displayName=`Column.Content`;var a=({children:e,cols:n=`2`,maxWidth:i=`aligncontent`})=>{let a=[`parlour-layout parlour-column parlour-column--${t.a[n]}`,i].filter(Boolean).join(` `);return(0,r.jsx)(`div`,{className:a,children:e})},o=Object.assign(a,{Content:i});a.displayName=`Column`,exports.Column=o;

package/dist/components/Column/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface ColumnContentProps {
+    children: React.ReactNode;
+    isFirst?: boolean;
+}
+
+declare const gridColumnClasses: {
+    '1': string;
+    '2': string;
+    '3': string;
+    '4': string;
+    '1/3': string;
+    '2/3': string;
+};
+
+type gridColumnKeys = keyof typeof gridColumnClasses;
+interface ColumnProps {
+    children: React.ReactNode;
+    cols?: gridColumnKeys;
+    maxWidth?: 'aligncontent' | 'alignwide' | 'alignfull';
+}
+declare const Column: {
+    ({ children, cols, maxWidth }: ColumnProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Content: {
+        ({ children, isFirst }: ColumnContentProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { Column };

package/dist/components/Column/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Column/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Column/index.mjs

@@ -0,0 +1,21 @@
+import { a as e } from "../_shared/propClasses-R9s_eOfA.mjs";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Column/ColumnContent.tsx
+var n = ({ children: e, isFirst: n = !1 }) => /* @__PURE__ */ t("div", {
+	className: `parlour-column__content ${n ? "is-first" : ""}`,
+	children: e
+});
+n.displayName = "Column.Content";
+//#endregion
+//#region src/components/Column/Column.tsx
+var r = ({ children: n, cols: r = "2", maxWidth: i = "aligncontent" }) => {
+	let a = [`parlour-layout parlour-column parlour-column--${e[r]}`, i].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t("div", {
+		className: a,
+		children: n
+	});
+}, i = Object.assign(r, { Content: n });
+r.displayName = "Column";
+//#endregion
+export { i as Column };

package/dist/components/Column/styles.css

@@ -0,0 +1,74 @@
+@charset "UTF-8";
+.parlour-column {
+  display: grid;
+  gap: var(--parlour--spacing-large);
+  margin-left: auto;
+  margin-right: auto;
+}
+.parlour-column--one {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.parlour-column--two {
+  grid-template-columns: 1fr;
+}
+@media (width > 600px) {
+  .parlour-column--two {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.parlour-column--three {
+  grid-template-columns: 1fr;
+}
+@media (width > 768px) {
+  .parlour-column--three {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.parlour-column--four {
+  grid-template-columns: 1fr;
+}
+@media (width > 600px) {
+  .parlour-column--four {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.parlour-column--one-third {
+  grid-template-columns: 1fr;
+}
+@media (width > 768px) {
+  .parlour-column--one-third {
+    grid-template-columns: 33% auto;
+  }
+}
+.parlour-column--two-thirds {
+  grid-template-columns: 1fr;
+}
+@media (width > 768px) {
+  .parlour-column--two-thirds {
+    grid-template-columns: 66% auto;
+  }
+}
+
+.parlour-column > .parlour-column__content *:first-child {
+  margin-top: 0;
+}
+
+.parlour-column > .parlour-column__content *:last-child {
+  margin-bottom: 0;
+}
+
+/* Ordering — isFirst only applies once the columns sit side by side, so stacked columns keep DOM order */
+@media (width > 600px) {
+  .parlour-column--two > .is-first,
+  .parlour-column--four > .is-first {
+    order: -1;
+  }
+}
+
+@media (width > 768px) {
+  .parlour-column--three > .is-first,
+  .parlour-column--one-third > .is-first,
+  .parlour-column--two-thirds > .is-first {
+    order: -1;
+  }
+}

package/dist/components/Column/styles.scss

@@ -0,0 +1,74 @@
+@charset "UTF-8";
+.parlour-column {
+  display: grid;
+  gap: var(--parlour--spacing-large);
+  margin-left: auto;
+  margin-right: auto;
+}
+.parlour-column--one {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.parlour-column--two {
+  grid-template-columns: 1fr;
+}
+@media (width > 600px) {
+  .parlour-column--two {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.parlour-column--three {
+  grid-template-columns: 1fr;
+}
+@media (width > 768px) {
+  .parlour-column--three {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.parlour-column--four {
+  grid-template-columns: 1fr;
+}
+@media (width > 600px) {
+  .parlour-column--four {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.parlour-column--one-third {
+  grid-template-columns: 1fr;
+}
+@media (width > 768px) {
+  .parlour-column--one-third {
+    grid-template-columns: 33% auto;
+  }
+}
+.parlour-column--two-thirds {
+  grid-template-columns: 1fr;
+}
+@media (width > 768px) {
+  .parlour-column--two-thirds {
+    grid-template-columns: 66% auto;
+  }
+}
+
+.parlour-column > .parlour-column__content *:first-child {
+  margin-top: 0;
+}
+
+.parlour-column > .parlour-column__content *:last-child {
+  margin-bottom: 0;
+}
+
+/* Ordering — isFirst only applies once the columns sit side by side, so stacked columns keep DOM order */
+@media (width > 600px) {
+  .parlour-column--two > .is-first,
+  .parlour-column--four > .is-first {
+    order: -1;
+  }
+}
+
+@media (width > 768px) {
+  .parlour-column--three > .is-first,
+  .parlour-column--one-third > .is-first,
+  .parlour-column--two-thirds > .is-first {
+    order: -1;
+  }
+}

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,16 @@
+import { maxWidthClasses, elementClasses, borderRadiusClasses, backgroundColorClasses } from '../../utils/propClasses';
+type maxWidthKeys = keyof typeof maxWidthClasses;
+type elementKeys = keyof typeof elementClasses;
+type borderRadiusKeys = keyof typeof borderRadiusClasses;
+type colorKeys = keyof typeof backgroundColorClasses;
+export interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    as?: elementKeys;
+    maxWidth?: maxWidthKeys;
+    contentWidth?: maxWidthKeys;
+    color?: colorKeys;
+    borderRadius?: borderRadiusKeys;
+}
+export declare const Container: ({ children, as, maxWidth, contentWidth, color, className, borderRadius, ...rest }: ContainerProps) => import('react').JSX.Element;
+export {};
+//# sourceMappingURL=Container.d.ts.map

package/dist/components/Container/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,sBAAsB,EACzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,eAAe,CAAC;AAEvB,KAAK,YAAY,GAAG,MAAM,OAAO,eAAe,CAAC;AACjD,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAC/C,KAAK,gBAAgB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AACzD,KAAK,SAAS,GAAG,MAAM,OAAO,sBAAsB,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,SAAS,GAAI,mFASvB,cAAc,gCAuBhB,CAAC"}

package/dist/components/Container/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../_shared/Container-Bl4f1ZwJ.cjs");exports.Container=e.t;

package/dist/components/Container/index.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+
+declare const maxWidthClasses: {
+    alignsmall: string;
+    aligncontent: string;
+    alignwide: string;
+    alignfull: string;
+};
+declare const elementClasses: {
+    div: string;
+    section: string;
+    header: string;
+    main: string;
+    footer: string;
+    article: string;
+    nav: string;
+    aside: string;
+    ul: string;
+    ol: string;
+};
+declare const borderRadiusClasses: {
+    sm: "sm";
+    md: "md";
+    lg: "lg";
+    xl: "xl";
+    full: "full";
+    none: string;
+};
+declare const backgroundColorClasses: {
+    light: string;
+    medium: string;
+    dark: string;
+    white: string;
+};
+
+type maxWidthKeys = keyof typeof maxWidthClasses;
+type elementKeys = keyof typeof elementClasses;
+type borderRadiusKeys = keyof typeof borderRadiusClasses;
+type colorKeys = keyof typeof backgroundColorClasses;
+interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    as?: elementKeys;
+    maxWidth?: maxWidthKeys;
+    contentWidth?: maxWidthKeys;
+    color?: colorKeys;
+    borderRadius?: borderRadiusKeys;
+}
+declare const Container: ({ children, as, maxWidth, contentWidth, color, className, borderRadius, ...rest }: ContainerProps) => react.JSX.Element;
+
+export { Container };
+export type { ContainerProps };

package/dist/components/Container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/Container/index.mjs

@@ -0,0 +1,2 @@
+import { t as e } from "../_shared/Container-OGjfScEb.mjs";
+export { e as Container };

package/dist/components/Container/styles.css

@@ -0,0 +1,126 @@
+.parlour-container > * {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.parlour-container > * + * {
+  margin-block-start: var(--parlour--spacing-medium);
+  margin-block-end: 0;
+}
+
+.parlour-container > .has-global-padding,
+.has-global-padding > .parlour-container.alignfull > .has-global-padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+.parlour-container > .has-global-padding > *:first-child,
+.has-global-padding > .parlour-container.alignfull > .has-global-padding > *:first-child {
+  margin-top: 0;
+}
+.parlour-container > .has-global-padding > *:last-child,
+.has-global-padding > .parlour-container.alignfull > .has-global-padding > *:last-child {
+  margin-bottom: 0;
+}
+
+.parlour-container.aligncontent,
+.parlour-container.alignwide,
+.parlour-container.alignfull {
+  padding-right: var(--parlour--spacing-3-x-large);
+  padding-left: var(--parlour--spacing-3-x-large);
+}
+@media (width > 768px) {
+  .parlour-container.aligncontent,
+  .parlour-container.alignwide,
+  .parlour-container.alignfull {
+    padding-right: var(--parlour--spacing-4-x-large);
+    padding-left: var(--parlour--spacing-4-x-large);
+  }
+}
+
+.parlour-main > div > .parlour-container--no-gap + .parlour-container--no-gap {
+  margin-top: var(--parlour--spacing-2-x-large);
+}
+
+.parlour-main > div > .parlour-container--no-gap.alignfull + .parlour-container--no-gap.alignfull {
+  margin-top: 0;
+}
+
+.parlour-container--light,
+.parlour-container--medium,
+.parlour-container--dark,
+.parlour-container--white {
+  padding-block: var(--parlour--spacing-5-x-large);
+}
+
+.parlour-container--light {
+  background-color: var(--parlour--color-neutral-200);
+}
+
+.parlour-container--medium {
+  background-color: var(--parlour--color-neutral-900);
+  color: var(--parlour--color-white);
+}
+.parlour-container--medium h2,
+.parlour-container--medium h3,
+.parlour-container--medium h4,
+.parlour-container--medium h5,
+.parlour-container--medium h6 {
+  color: var(--parlour--color-white);
+}
+
+.parlour-container--dark {
+  background-color: var(--parlour--color-neutral-950);
+  color: var(--parlour--color-white);
+}
+.parlour-container--dark h2,
+.parlour-container--dark h3,
+.parlour-container--dark h4,
+.parlour-container--dark h5,
+.parlour-container--dark h6 {
+  color: var(--parlour--color-white);
+}
+
+.parlour-container--white {
+  background-color: var(--parlour--color-white);
+}
+
+.parlour-container--light,
+.parlour-container--white {
+  border: 1px solid var(--parlour--color-neutral-300);
+}
+.parlour-container--light.alignfull,
+.parlour-container--white.alignfull {
+  border-inline: none;
+}
+.parlour-container--light.alignfull + .parlour-container--has-border,
+.parlour-container--white.alignfull + .parlour-container--has-border {
+  border-top: none;
+}
+
+.parlour-container--full {
+  width: 100%;
+}
+
+.parlour-container--radius-sm:not(.alignfull) {
+  border-radius: var(--parlour--radius-sm);
+}
+
+.parlour-container--radius-md:not(.alignfull) {
+  border-radius: var(--parlour--radius-md);
+}
+
+.parlour-container--radius-lg:not(.alignfull) {
+  border-radius: var(--parlour--radius-lg);
+}
+
+.parlour-container--radius-xl:not(.alignfull) {
+  border-radius: var(--parlour--radius-xl);
+}
+
+.parlour-container--radius-full:not(.alignfull) {
+  border-radius: var(--parlour--radius-full);
+}
+
+.parlour-container--radius-none:not(.alignfull) {
+  border-radius: 0;
+}