scoobie 21.1.0 → 21.2.0

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "scoobie",
+  "version": "21.2.0",
   "description": "Component library for SEEK documentation sites",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/seek-oss/scoobie.git"
+  },
   "license": "MIT",
-  "main": "src/index.ts",
   "sideEffects": false,
-  "version": "21.1.0",
+  "main": "src/index.ts",
+  "files": [
+    "src",
+    "webpack",
+    "types.d.ts",
+    "typography.ts"
+  ],
   "dependencies": {
     "@capsizecss/core": "^4.0.0",
     "@vanilla-extract/css": "^1.2.3",
@@ -15,42 +25,35 @@
     "prism-react-renderer": "^2.4.1"
   },
   "devDependencies": {
-    "@changesets/cli": "2.29.7",
-    "@changesets/get-github-info": "0.6.0",
+    "@changesets/cli": "2.30.0",
+    "@changesets/get-github-info": "0.8.0",
     "@loki/create-async-callback": "0.35.1",
     "@loki/is-loki-running": "0.35.0",
-    "@storybook/addon-webpack5-compiler-babel": "3.0.6",
-    "@storybook/react": "9.1.12",
-    "@storybook/react-webpack5": "9.1.12",
+    "@storybook/addon-webpack5-compiler-babel": "4.0.0",
+    "@storybook/react": "10.3.1",
+    "@storybook/react-webpack5": "10.3.1",
     "@types/jest": "30.0.0",
-    "@types/prismjs": "1.26.5",
-    "@types/react": "18.3.26",
+    "@types/prismjs": "1.26.6",
+    "@types/react": "18.3.28",
     "@types/react-dom": "18.3.7",
-    "braid-design-system": "33.12.2",
-    "eslint-plugin-storybook": "9.1.12",
+    "braid-design-system": "34.0.4",
+    "eslint-plugin-storybook": "10.3.1",
     "loki": "0.35.1",
     "prismjs": "1.30.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "7.9.4",
-    "sku": "15.3.1",
-    "storybook": "9.1.12",
-    "webpack": "5.102.1"
+    "react-router": "7.13.1",
+    "sku": "15.12.0",
+    "storybook": "10.3.1",
+    "webpack": "5.105.4"
   },
-  "files": [
-    "src",
-    "webpack",
-    "types.d.ts",
-    "typography.ts"
-  ],
   "peerDependencies": {
     "braid-design-system": ">= 31.21.0",
     "react": ">= 17 < 19",
     "react-router": ">= 7.5.2 < 8"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/seek-oss/scoobie.git"
+  "engines": {
+    "node": ">=18.18"
   },
   "loki": {
     "configurations": {
@@ -64,9 +67,6 @@
     "chromeLoadTimeout": "60000",
     "chromeTolerance": "0"
   },
-  "engines": {
-    "node": ">=18.18"
-  },
   "scripts": {
     "format": "sku format",
     "lint": "sku lint",

package/src/components/CopyableText.tsx

@@ -1,5 +1,5 @@
 import { IconCopy, IconTick, Text, TextLinkButton } from 'braid-design-system';
-import React, {
+import {
   type ComponentProps,
   type MouseEventHandler,
   type ReactNode,

package/src/components/InternalLink.tsx

@@ -1,5 +1,5 @@
 import clsx, { type ClassValue } from 'clsx';
-import React, { type ComponentProps, forwardRef } from 'react';
+import { type ComponentProps, forwardRef } from 'react';
 import { NavLink, useLocation } from 'react-router';
 
 import { parseInternalHref } from '../private/url';
@@ -8,8 +8,10 @@ import { useScoobieLink } from './ScoobieLinkProvider';
 
 import * as styles from './InternalLink.css';
 
-interface Props
-  extends Omit<ComponentProps<typeof NavLink>, 'className' | 'to'> {
+interface Props extends Omit<
+  ComponentProps<typeof NavLink>,
+  'className' | 'to'
+> {
   className?: ClassValue | ((isActive: boolean) => ClassValue);
   href: string;
   reset?: boolean;

package/src/components/Placeholder.css.ts

@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css';
+
+import { palette } from '../private/color';
+
+export const placeholderContainer = style([
+  {
+    border: `1.5px solid ${palette.grey[300]}`,
+    backgroundColor: palette.grey[100],
+  },
+]);
+
+export const box = style([
+  {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+]);
+
+export const xLine = style([{ strokeWidth: 1.5, stroke: palette.grey[300] }]);

package/src/components/Placeholder.tsx

@@ -0,0 +1,28 @@
+import { Box } from 'braid-design-system';
+import type React from 'react';
+
+import * as styles from './Placeholder.css';
+
+export const Placeholder = ({
+  width,
+  height,
+}: Pick<React.HTMLProps<HTMLDivElement>, 'width' | 'height'>) => (
+  <Box
+    className={styles.placeholderContainer}
+    position="relative"
+    overflow="hidden"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+    borderRadius={undefined}
+    style={{
+      width,
+      height,
+    }}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" className={styles.box}>
+      <line className={styles.xLine} x1="0" y1="0" x2="100%" y2="100%" />
+      <line className={styles.xLine} x1="100%" y1="0" x2="0" y2="100%" />
+    </svg>
+  </Box>
+);

package/src/components/ScoobieLink.tsx

@@ -1,5 +1,4 @@
 import { makeLinkComponent } from 'braid-design-system';
-import React from 'react';
 
 import { isExternalHref } from '../private/url';
 

package/src/components/ScoobieLinkProvider.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode, createContext, useContext } from 'react';
+import { type ReactNode, createContext, useContext } from 'react';
 
 interface ScoobieLinkContext {
   propagateSearchParams: string[];

package/src/private/HorizontalRule.tsx

@@ -1,5 +1,4 @@
 import { Box } from 'braid-design-system';
-import React from 'react';
 
 import * as styles from './HorizontalRule.css';
 

package/src/private/OrderedListContext.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode, createContext, useContext } from 'react';
+import { type ReactNode, createContext, useContext } from 'react';
 
 const LIST_TYPES = ['number', 'alpha', 'roman'] as const;
 

package/src/private/ScrollableInline.tsx

@@ -1,5 +1,5 @@
 import { Bleed, Box } from 'braid-design-system';
-import React, { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import * as styles from './ScrollableInline.css';