@guardian/stand 0.0.71 → 0.0.73

package/dist/styleD/build/typescript/component/toggleSwitch.d.cts

@@ -0,0 +1,93 @@
+//#region src/styleD/build/typescript/component/toggleSwitch.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentToggleSwitch: {
+  shared: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    cursor: string;
+    color: string;
+    label: {
+      display: string;
+      flexDirection: string;
+      alignItems: string;
+      paddingBlock: string;
+    };
+    description: {
+      color: string;
+      typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+      };
+    };
+    track: {
+      display: string;
+      alignItems: string;
+      padding: string;
+      borderRadius: string;
+      backgroundColor: string;
+      transition: string;
+      selected: {
+        backgroundColor: string;
+      };
+      disabled: {
+        backgroundColor: string;
+      };
+      focusVisible: {
+        outline: string;
+        outlineOffset: string;
+      };
+    };
+    thumb: {
+      borderRadius: string;
+      backgroundColor: string;
+      color: string;
+      disabled: {
+        color: string;
+      };
+      transition: string;
+    };
+    disabled: {
+      color: string;
+      cursor: string;
+    };
+  };
+  sm: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+    track: {
+      width: string;
+      height: string;
+    };
+    thumb: {
+      size: string;
+      translateX: string;
+      iconSize: string;
+    };
+  };
+  md: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+    track: {
+      width: string;
+      height: string;
+    };
+    thumb: {
+      size: string;
+      translateX: string;
+      iconSize: string;
+    };
+  };
+};
+type ComponentToggleSwitch = typeof componentToggleSwitch;
+//#endregion
+export { ComponentToggleSwitch, componentToggleSwitch };

package/dist/styleD/build/typescript/component/toggleSwitch.d.ts

@@ -0,0 +1,93 @@
+//#region src/styleD/build/typescript/component/toggleSwitch.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentToggleSwitch: {
+  shared: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    cursor: string;
+    color: string;
+    label: {
+      display: string;
+      flexDirection: string;
+      alignItems: string;
+      paddingBlock: string;
+    };
+    description: {
+      color: string;
+      typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+      };
+    };
+    track: {
+      display: string;
+      alignItems: string;
+      padding: string;
+      borderRadius: string;
+      backgroundColor: string;
+      transition: string;
+      selected: {
+        backgroundColor: string;
+      };
+      disabled: {
+        backgroundColor: string;
+      };
+      focusVisible: {
+        outline: string;
+        outlineOffset: string;
+      };
+    };
+    thumb: {
+      borderRadius: string;
+      backgroundColor: string;
+      color: string;
+      disabled: {
+        color: string;
+      };
+      transition: string;
+    };
+    disabled: {
+      color: string;
+      cursor: string;
+    };
+  };
+  sm: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+    track: {
+      width: string;
+      height: string;
+    };
+    thumb: {
+      size: string;
+      translateX: string;
+      iconSize: string;
+    };
+  };
+  md: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+    track: {
+      width: string;
+      height: string;
+    };
+    thumb: {
+      size: string;
+      translateX: string;
+      iconSize: string;
+    };
+  };
+};
+type ComponentToggleSwitch = typeof componentToggleSwitch;
+//#endregion
+export { ComponentToggleSwitch, componentToggleSwitch };

package/dist/styleD/build/typescript/component/toggleSwitch.js

@@ -0,0 +1,86 @@
+//#region src/styleD/build/typescript/component/toggleSwitch.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentToggleSwitch = {
+	shared: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		cursor: "pointer",
+		color: "#000000",
+		label: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			paddingBlock: "0.125rem"
+		},
+		description: {
+			color: "#545454",
+			typography: {
+				font: "normal 460 0.75rem/1.3 Open Sans",
+				letterSpacing: "0rem",
+				fontWidth: 95
+			}
+		},
+		track: {
+			display: "flex",
+			alignItems: "center",
+			padding: "0.25rem",
+			borderRadius: "100px",
+			backgroundColor: "#666666",
+			transition: "background-color 200ms",
+			selected: { backgroundColor: "#0072a9" },
+			disabled: { backgroundColor: "#dcdcdc" },
+			focusVisible: {
+				outline: "0.125rem solid #0072a9",
+				outlineOffset: "0.125rem"
+			}
+		},
+		thumb: {
+			borderRadius: "50%",
+			backgroundColor: "#ffffff",
+			color: "#0072a9",
+			disabled: { color: "#dcdcdc" },
+			transition: "transform 200ms"
+		},
+		disabled: {
+			color: "#999999",
+			cursor: "not-allowed"
+		}
+	},
+	sm: {
+		typography: {
+			font: "normal 460 0.875rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		},
+		track: {
+			width: "2.75rem",
+			height: "1.5rem"
+		},
+		thumb: {
+			size: "1.125rem",
+			translateX: "1.25rem",
+			iconSize: "1rem"
+		}
+	},
+	md: {
+		typography: {
+			font: "normal 460 1rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		},
+		track: {
+			width: "3.75rem",
+			height: "2rem"
+		},
+		thumb: {
+			size: "1.5rem",
+			translateX: "1.75rem",
+			iconSize: "1.25rem"
+		}
+	}
+};
+//#endregion
+export { componentToggleSwitch };

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -79,13 +79,24 @@ const semanticColors = {
 		orangeWeak: "#fcddc6",
 		orangeMedium: "#fac7a1",
 		yellowWeak: "#ffedac",
-		selected: "#005d8b",
+		unselectedStrong: "#ffffff",
+		unselectedHoverStrong: "#005d8b",
+		unselectedPressedStrong: "#00496c",
+		selectedStrong: "#0072a9",
+		selectedHoverStrong: "#00496c",
+		selectedPressedStrong: "#00344e",
 		selectedWeaker: "#e6f1f6",
-		selectedWeak: "#c5dfec",
 		selectedHoverWeaker: "#c5dfec",
-		selectedHoverWeak: "#8abed7",
 		selectedPressedWeaker: "#8abed7",
+		unselectedWeaker: "#ffffff",
+		unselectedHoverWeaker: "#e6f1f6",
+		unselectedPressedWeaker: "#c5dfec",
+		selectedWeak: "#c5dfec",
+		selectedHoverWeak: "#8abed7",
 		selectedPressedWeak: "#5ca5c8",
+		unselectedWeak: "#ffffff",
+		unselectedHoverWeak: "#c5dfec",
+		unselectedPressedWeak: "#8abed7",
 		draftStrong: "#f1c21b",
 		liveWeak: "#aed2a6",
 		warningWeak: "#ffedac",
@@ -96,7 +107,8 @@ const semanticColors = {
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
 		successStrong: "#326528",
-		neutralWeak: "#ededed"
+		neutralWeak: "#ededed",
+		neutralMedium: "#666666"
 	}
 };
 //#endregion

package/dist/styleD/build/typescript/semantic/colors.d.cts

@@ -79,13 +79,24 @@ declare const semanticColors: {
     orangeWeak: string;
     orangeMedium: string;
     yellowWeak: string;
-    selected: string;
+    unselectedStrong: string;
+    unselectedHoverStrong: string;
+    unselectedPressedStrong: string;
+    selectedStrong: string;
+    selectedHoverStrong: string;
+    selectedPressedStrong: string;
     selectedWeaker: string;
-    selectedWeak: string;
     selectedHoverWeaker: string;
-    selectedHoverWeak: string;
     selectedPressedWeaker: string;
+    unselectedWeaker: string;
+    unselectedHoverWeaker: string;
+    unselectedPressedWeaker: string;
+    selectedWeak: string;
+    selectedHoverWeak: string;
     selectedPressedWeak: string;
+    unselectedWeak: string;
+    unselectedHoverWeak: string;
+    unselectedPressedWeak: string;
     draftStrong: string;
     liveWeak: string;
     warningWeak: string;
@@ -97,6 +108,7 @@ declare const semanticColors: {
     successWeak: string;
     successStrong: string;
     neutralWeak: string;
+    neutralMedium: string;
   };
 };
 type SemanticColors = typeof semanticColors;

package/dist/styleD/build/typescript/semantic/colors.d.ts

@@ -79,13 +79,24 @@ declare const semanticColors: {
     orangeWeak: string;
     orangeMedium: string;
     yellowWeak: string;
-    selected: string;
+    unselectedStrong: string;
+    unselectedHoverStrong: string;
+    unselectedPressedStrong: string;
+    selectedStrong: string;
+    selectedHoverStrong: string;
+    selectedPressedStrong: string;
     selectedWeaker: string;
-    selectedWeak: string;
     selectedHoverWeaker: string;
-    selectedHoverWeak: string;
     selectedPressedWeaker: string;
+    unselectedWeaker: string;
+    unselectedHoverWeaker: string;
+    unselectedPressedWeaker: string;
+    selectedWeak: string;
+    selectedHoverWeak: string;
     selectedPressedWeak: string;
+    unselectedWeak: string;
+    unselectedHoverWeak: string;
+    unselectedPressedWeak: string;
     draftStrong: string;
     liveWeak: string;
     warningWeak: string;
@@ -97,6 +108,7 @@ declare const semanticColors: {
     successWeak: string;
     successStrong: string;
     neutralWeak: string;
+    neutralMedium: string;
   };
 };
 type SemanticColors = typeof semanticColors;

package/dist/styleD/build/typescript/semantic/colors.js

@@ -79,13 +79,24 @@ const semanticColors = {
 		orangeWeak: "#fcddc6",
 		orangeMedium: "#fac7a1",
 		yellowWeak: "#ffedac",
-		selected: "#005d8b",
+		unselectedStrong: "#ffffff",
+		unselectedHoverStrong: "#005d8b",
+		unselectedPressedStrong: "#00496c",
+		selectedStrong: "#0072a9",
+		selectedHoverStrong: "#00496c",
+		selectedPressedStrong: "#00344e",
 		selectedWeaker: "#e6f1f6",
-		selectedWeak: "#c5dfec",
 		selectedHoverWeaker: "#c5dfec",
-		selectedHoverWeak: "#8abed7",
 		selectedPressedWeaker: "#8abed7",
+		unselectedWeaker: "#ffffff",
+		unselectedHoverWeaker: "#e6f1f6",
+		unselectedPressedWeaker: "#c5dfec",
+		selectedWeak: "#c5dfec",
+		selectedHoverWeak: "#8abed7",
 		selectedPressedWeak: "#5ca5c8",
+		unselectedWeak: "#ffffff",
+		unselectedHoverWeak: "#c5dfec",
+		unselectedPressedWeak: "#8abed7",
 		draftStrong: "#f1c21b",
 		liveWeak: "#aed2a6",
 		warningWeak: "#ffedac",
@@ -96,7 +107,8 @@ const semanticColors = {
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
 		successStrong: "#326528",
-		neutralWeak: "#ededed"
+		neutralWeak: "#ededed",
+		neutralMedium: "#666666"
 	}
 };
 //#endregion

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -4,6 +4,7 @@
 */
 const semanticSizing = {
 	height: {
+		xxxxs: "1rem",
 		xxxs: "1.125rem",
 		xxs: "1.25rem",
 		xs: "1.5rem",

package/dist/styleD/build/typescript/semantic/sizing.d.cts

@@ -4,6 +4,7 @@
  */
 declare const semanticSizing: {
   height: {
+    xxxxs: string;
     xxxs: string;
     xxs: string;
     xs: string;

package/dist/styleD/build/typescript/semantic/sizing.d.ts

@@ -4,6 +4,7 @@
  */
 declare const semanticSizing: {
   height: {
+    xxxxs: string;
     xxxs: string;
     xxs: string;
     xs: string;

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -4,6 +4,7 @@
 */
 const semanticSizing = {
 	height: {
+		xxxxs: "1rem",
 		xxxs: "1.125rem",
 		xxs: "1.25rem",
 		xs: "1.5rem",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -57,6 +57,16 @@
         "default": "./dist/Badge.cjs"
       }
     },
+    "./Pagination": {
+      "import": {
+        "types": "./dist/Pagination.d.ts",
+        "default": "./dist/Pagination.js"
+      },
+      "require": {
+        "types": "./dist/Pagination.d.cts",
+        "default": "./dist/Pagination.cjs"
+      }
+    },
     "./Button": {
       "import": {
         "types": "./dist/Button.d.ts",
@@ -217,6 +227,16 @@
         "default": "./dist/Checkbox.cjs"
       }
     },
+    "./ToggleSwitch": {
+      "import": {
+        "types": "./dist/ToggleSwitch.d.ts",
+        "default": "./dist/ToggleSwitch.js"
+      },
+      "require": {
+        "types": "./dist/ToggleSwitch.d.cts",
+        "default": "./dist/ToggleSwitch.cjs"
+      }
+    },
     "./TextArea": {
       "import": {
         "types": "./dist/TextArea.d.ts",
@@ -431,6 +451,7 @@
     "./component/userMenu.css": "./dist/styleD/build/css/component/userMenu.css",
     "./component/avatar.css": "./dist/styleD/build/css/component/avatar.css",
     "./component/badge.css": "./dist/styleD/build/css/component/badge.css",
+    "./component/pagination.css": "./dist/styleD/build/css/component/pagination.css",
     "./component/button.css": "./dist/styleD/build/css/component/button.css",
     "./component/buttonGroup.css": "./dist/styleD/build/css/component/buttonGroup.css",
     "./component/typography.css": "./dist/styleD/build/css/component/typography.css",
@@ -444,6 +465,7 @@
     "./component/textInput.css": "./dist/styleD/build/css/component/textInput.css",
     "./component/radioGroup.css": "./dist/styleD/build/css/component/radioGroup.css",
     "./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css",
+    "./component/toggleSwitch.css": "./dist/styleD/build/css/component/toggleSwitch.css",
     "./component/textArea.css": "./dist/styleD/build/css/component/textArea.css",
     "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css",
     "./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css",
@@ -476,6 +498,9 @@
       "Badge": [
         "./dist/Badge.d.ts"
       ],
+      "Pagination": [
+        "./dist/Pagination.d.ts"
+      ],
       "Button": [
         "./dist/Button.d.ts"
       ],
@@ -539,6 +564,9 @@
       "Checkbox": [
         "./dist/Checkbox.d.ts"
       ],
+      "ToggleSwitch": [
+        "./dist/ToggleSwitch.d.ts"
+      ],
       "TextArea": [
         "./dist/TextArea.d.ts"
       ],
@@ -588,10 +616,10 @@
   ],
   "devDependencies": {
     "@arethetypeswrong/core": "0.18.5",
-    "@changesets/cli": "2.31.1",
+    "@changesets/cli": "3.0.1",
     "@codesandbox/sandpack-react": "2.20.0",
     "@emotion/react": "11.11.4",
-    "@figma/rest-api-spec": "0.41.0",
+    "@figma/rest-api-spec": "0.42.0",
     "@guardian/eslint-config": "16.0.0",
     "@guardian/prettier": "11.0.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
@@ -599,12 +627,12 @@
     "@internationalized/date": "3.12.1",
     "@material-design-icons/svg": "0.14.15",
     "@playwright/experimental-ct-react17": "1.62.1",
-    "@storybook/addon-a11y": "10.5.7",
-    "@storybook/addon-docs": "10.5.7",
-    "@storybook/addon-themes": "10.5.7",
-    "@storybook/react-vite": "10.5.7",
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-themes": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "7.0.0",
+    "@testing-library/jest-dom": "7.0.1",
     "@tsdown/css": "0.22.14",
     "@types/jest": "30.0.0",
     "@types/node": "24.10.1",
@@ -614,11 +642,12 @@
     "change-case": "5.4.4",
     "eslint": "9.39.3",
     "eslint-plugin-check-file": "3.3.2",
-    "eslint-plugin-storybook": "10.5.7",
+    "eslint-plugin-storybook": "10.5.10",
     "husky": "9.1.7",
-    "jest": "30.4.2",
-    "jest-environment-jsdom": "30.4.1",
-    "lint-staged": "17.3.0",
+    "jest": "30.5.0",
+    "jest-environment-jsdom": "30.5.0",
+    "knip": "^6.33.0",
+    "lint-staged": "17.4.1",
     "prettier": "3.9.6",
     "prosemirror-dropcursor": "1.8.2",
     "prosemirror-history": "1.4.1",
@@ -626,20 +655,19 @@
     "prosemirror-model": "1.25.0",
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.37.2",
-    "publint": "0.3.23",
+    "publint": "0.3.24",
     "react": "17.0.2",
     "react-aria-components": "1.14.0",
     "react-dom": "17.0.2",
     "remark-gfm": "4.0.1",
-    "rimraf": "6.1.3",
     "sort-package-json": "4.0.0",
-    "storybook": "10.5.7",
-    "style-dictionary": "5.5.1",
+    "storybook": "10.5.10",
+    "style-dictionary": "5.5.2",
     "ts-jest": "29.4.12",
     "tsdown": "0.22.14",
     "tslib": "2.8.1",
     "typescript": "5.1.3",
-    "vite": "8.2.1",
+    "vite": "8.2.2",
     "vite-plugin-svgr": "5.2.0"
   },
   "peerDependencies": {
@@ -707,6 +735,7 @@
     "create-component": "npx ts-node ./scripts/create-component.ts",
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
+    "knip": "knip",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint --fix . --ext .ts,.tsx",
     "lint:staged": "lint-staged",

package/dist/styleD/build/css/component/previewFrame.css

@@ -1,10 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-	--component-preview-frame-background-color: #545454;
-	--component-preview-frame-border-width: 0.0625rem;
-	--component-preview-frame-border-style: solid;
-	--component-preview-frame-border-color: #545454;
-}