@primer/react-brand 0.78.0-rc.85e39cb4 → 0.78.0-rc.c01d8371

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.78.0-rc.85e39cb4)
+# Primer Brand docs (v0.78.0-rc.c01d8371)
 
-These docs are bundled with `@primer/react-brand@0.78.0-rc.85e39cb4` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.78.0-rc.c01d8371` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Tiles/Tiles.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
 /** * Design Tokens */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css';
 type TilesVariant = 'default' | 'gridlines';
 type TilesLayout = 'default' | 'compact';

package/esm/Tiles/Tiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.d.ts","sourceRoot":"","sources":["../../src/Tiles/Tiles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgF,MAAM,OAAO,CAAA;AAEpG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,sBAAsB;AACtB,OAAO,yGAAyG,CAAA;AAehH,KAAK,YAAY,GAAG,SAAS,GAAG,WAAW,CAAA;AAE3C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AAIxC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAqCtC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,aAAa,CAAC,GAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAoCH;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;CAGhB,CAAA"}
+{"version":3,"file":"Tiles.d.ts","sourceRoot":"","sources":["../../src/Tiles/Tiles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgF,MAAM,OAAO,CAAA;AAEpG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAKnD,sBAAsB;AACtB,OAAO,4FAA4F,CAAA;AACnG,OAAO,yGAAyG,CAAA;AAehH,KAAK,YAAY,GAAG,SAAS,GAAG,WAAW,CAAA;AAE3C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AASxC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAiEtC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,aAAa,CAAC,GAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAoCH;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;CAGhB,CAAA"}

package/esm/Tiles/Tiles.js

@@ -2,12 +2,14 @@ import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { ArrowUpRightIcon as n } from "../node_modules/@primer/octicons-react/dist/icons/ArrowUpRightIcon.js";
 import r from "../component-helpers/shared.module.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes-DTTqGOfy.css';/* empty css                                                                                                   */
-import i from "./Tiles.module.js";
-import { createContext as a, forwardRef as o, useContext as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { isFragmentElement as i } from "../utils/isFragmentElement.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes-DTTqGOfy.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/base-CX1T1tsR.css';/* empty css                                                                                      */
+/* empty css                                                                                                   */
+import a from "./Tiles.module.js";
+import o, { createContext as s, forwardRef as c, useContext as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/Tiles/Tiles.tsx
-var u = {
+var f = {
 	root: "Tiles",
 	get grid() {
 		return `${this.root}-grid`;
@@ -15,56 +17,84 @@ var u = {
 	get item() {
 		return `${this.root}-item`;
 	}
-}, d = a("default"), f = o(({ variant: t = "default", layout: n = "default", children: a, className: o, "data-testid": s, ...l }, f) => /* @__PURE__ */ c(d.Provider, {
-	value: n,
-	children: /* @__PURE__ */ c("div", {
-		ref: f,
-		className: e(i.Tiles, i[`Tiles--variant-${t}`], i[`Tiles--layout-${n}`], t === "gridlines" && r.gridline, o),
-		"data-testid": s || u.root,
-		...l,
-		children: /* @__PURE__ */ c("ul", {
-			className: i["Tiles-grid"],
-			"data-testid": u.grid,
-			children: a
+}, p = {
+	default: {
+		xsmall: 2,
+		small: 3,
+		medium: 4,
+		large: 9
+	},
+	compact: {
+		xsmall: 4,
+		small: 3,
+		medium: 6,
+		large: 9
+	}
+}, m = s("default"), h = c(({ variant: t = "default", layout: n = "default", children: s, className: c, "data-testid": l, ...d }, h) => {
+	let g = (e) => o.Children.toArray(e).reduce((e, t) => e + (i(t) ? g(t.props.children) : 1), 0), _ = (e, t) => {
+		if (e === 0) return 1;
+		let n = Math.ceil(e / t);
+		return Math.ceil(e / n);
+	}, v = g(s);
+	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && v > 9 && console.warn("Tiles: Use no more than 9 items.");
+	let y = p[n], b = {
+		"--tiles-columns-xsmall": _(v, y.xsmall),
+		"--tiles-columns-small": _(v, y.small),
+		"--tiles-columns-medium": _(v, y.medium),
+		"--tiles-columns-large": _(v, y.large)
+	};
+	return /* @__PURE__ */ u(m.Provider, {
+		value: n,
+		children: /* @__PURE__ */ u("div", {
+			ref: h,
+			className: e(a.Tiles, a[`Tiles--variant-${t}`], a[`Tiles--layout-${n}`], t === "gridlines" && r.gridline, c),
+			"data-testid": l || f.root,
+			...d,
+			children: /* @__PURE__ */ u("ul", {
+				className: a["Tiles-grid"],
+				"data-testid": f.grid,
+				style: b,
+				children: s
+			})
 		})
-	})
-})), p = o(({ name: r, href: a, children: o, className: f, "data-testid": p, ...m }, h) => {
-	let g = s(d), _ = !!a, v = g === "compact" && !_, y = /* @__PURE__ */ l("span", {
-		className: i["Tiles-item-content"],
-		children: [/* @__PURE__ */ c("span", {
-			className: i["Tiles-item-media"],
+	});
+}), g = c(({ name: r, href: i, children: o, className: s, "data-testid": c, ...p }, h) => {
+	let g = l(m), _ = !!i, v = g === "compact" && !_, y = /* @__PURE__ */ d("span", {
+		className: a["Tiles-item-content"],
+		children: [/* @__PURE__ */ u("span", {
+			className: a["Tiles-item-media"],
 			"aria-hidden": "true",
 			children: o
-		}), /* @__PURE__ */ l("span", {
-			className: e(i["Tiles-item-label"], v && "visually-hidden"),
-			children: [/* @__PURE__ */ c(t, {
+		}), /* @__PURE__ */ d("span", {
+			className: e(a["Tiles-item-label"], v && "visually-hidden"),
+			children: [/* @__PURE__ */ u(t, {
 				as: "span",
 				size: "100",
-				className: i["Tiles-item-name"],
+				className: a["Tiles-item-name"],
 				children: r
-			}), _ && /* @__PURE__ */ c(n, {
+			}), _ && /* @__PURE__ */ u(n, {
 				size: 16,
-				className: i["Tiles-item-icon"],
+				className: a["Tiles-item-icon"],
 				"aria-hidden": "true"
 			})]
 		})]
 	});
-	return /* @__PURE__ */ c("li", {
+	return /* @__PURE__ */ u("li", {
 		ref: h,
-		className: e(i["Tiles-item"], f),
-		"data-testid": p || u.item,
-		...m,
-		children: _ ? /* @__PURE__ */ c("a", {
-			href: a,
-			className: i["Tiles-item-link"],
+		className: e(a["Tiles-item"], s),
+		"data-testid": c || f.item,
+		...p,
+		children: _ ? /* @__PURE__ */ u("a", {
+			href: i,
+			className: a["Tiles-item-link"],
 			children: y
 		}) : y
 	});
-}), m = Object.assign(f, {
-	Item: p,
-	testIds: u
+}), _ = Object.assign(h, {
+	Item: g,
+	testIds: f
 });
 //#endregion
-export { m as Tiles };
+export { _ as Tiles };
 
 //# sourceMappingURL=Tiles.js.map

package/esm/Tiles/Tiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport gridlineStyles from '../component-helpers/shared.module.css'\nimport {Text} from '../Text'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            variant === 'gridlines' && gridlineStyles.gridline,\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAMM,IAAe,EAA2B,SAAS,GAkBnD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MAGE,kBAAC,EAAa,UAAd;CAAuB,OAAO;WAC5B,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,MAAY,eAAe,EAAe,UAC1C,CACF;EACA,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAe,eAAa,EAAQ;GACvD;EACC,CAAA;CACD,CAAA;AACgB,CAAA,CAG7B,GAoBM,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,CAAY,GAChC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;EACG,CAAA,GACN,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,iBAAiB;aAApF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;GACG,CAAA,GACL,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;GAAQ,CAAA,CAC9F;IACF;;CAGR,OACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,CAAS;EAAG,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;EACA,CAAA,IAEH;CAEA,CAAA;AAER,CACF,GAMa,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;AACF,CAAC"}
+{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport gridlineStyles from '../component-helpers/shared.module.css'\nimport {Text} from '../Text'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst maximumTilesPerRowByViewport = {\n  default: {xsmall: 2, small: 3, medium: 4, large: 9},\n  compact: {xsmall: 4, small: 3, medium: 6, large: 9},\n} satisfies Record<TilesLayout, Record<'xsmall' | 'small' | 'medium' | 'large', number>>\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const getChildCount = (childNodes: React.ReactNode): number =>\n      React.Children.toArray(childNodes).reduce<number>(\n        (count, child) => count + (isFragmentElement(child) ? getChildCount(child.props.children) : 1),\n        0,\n      )\n\n    const getBalancedColumnCount = (itemCount: number, maximumTilesPerRow: number) => {\n      if (itemCount === 0) return 1\n\n      const fewestRowsNeeded = Math.ceil(itemCount / maximumTilesPerRow)\n      return Math.ceil(itemCount / fewestRowsNeeded)\n    }\n\n    const itemCount = getChildCount(children)\n\n    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && itemCount > 9) {\n      // eslint-disable-next-line no-console\n      console.warn('Tiles: Use no more than 9 items.')\n    }\n\n    const maximumTilesPerRow = maximumTilesPerRowByViewport[layout]\n    const gridStyle = {\n      '--tiles-columns-xsmall': getBalancedColumnCount(itemCount, maximumTilesPerRow.xsmall),\n      '--tiles-columns-small': getBalancedColumnCount(itemCount, maximumTilesPerRow.small),\n      '--tiles-columns-medium': getBalancedColumnCount(itemCount, maximumTilesPerRow.medium),\n      '--tiles-columns-large': getBalancedColumnCount(itemCount, maximumTilesPerRow.large),\n    } as React.CSSProperties\n\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            variant === 'gridlines' && gridlineStyles.gridline,\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid} style={gridStyle}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAMM,IAA+B;CACnC,SAAS;EAAC,QAAQ;EAAG,OAAO;EAAG,QAAQ;EAAG,OAAO;CAAC;CAClD,SAAS;EAAC,QAAQ;EAAG,OAAO;EAAG,QAAQ;EAAG,OAAO;CAAC;AACpD,GAEM,IAAe,EAA2B,SAAS,GAkBnD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,KAAiB,MACrB,EAAM,SAAS,QAAQ,CAAU,CAAC,CAAC,QAChC,GAAO,MAAU,KAAS,EAAkB,CAAK,IAAI,EAAc,EAAM,MAAM,QAAQ,IAAI,IAC5F,CACF,GAEI,KAA0B,GAAmB,MAA+B;EAChF,IAAI,MAAc,GAAG,OAAO;EAE5B,IAAM,IAAmB,KAAK,KAAK,IAAY,CAAkB;EACjE,OAAO,KAAK,KAAK,IAAY,CAAgB;CAC/C,GAEM,IAAY,EAAc,CAAQ;CAExC,CAAA,QAAA,IAAA,aAA8B,iBAAA,QAAA,IAAA,aAA0C,WAAW,IAAY,KAE7F,QAAQ,KAAK,kCAAkC;CAGjD,IAAM,IAAqB,EAA6B,IAClD,IAAY;EAChB,0BAA0B,EAAuB,GAAW,EAAmB,MAAM;EACrF,yBAAyB,EAAuB,GAAW,EAAmB,KAAK;EACnF,0BAA0B,EAAuB,GAAW,EAAmB,MAAM;EACrF,yBAAyB,EAAuB,GAAW,EAAmB,KAAK;CACrF;CAEA,OACE,kBAAC,EAAa,UAAd;EAAuB,OAAO;YAC5B,kBAAC,OAAD;GACO;GACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,MAAY,eAAe,EAAe,UAC1C,CACF;GACA,eAAa,KAAU,EAAQ;GAC/B,GAAI;aAEJ,kBAAC,MAAD;IAAI,WAAW,EAAO;IAAe,eAAa,EAAQ;IAAM,OAAO;IACpE;GACC,CAAA;EACD,CAAA;CACgB,CAAA;AAE3B,CACF,GAoBM,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,CAAY,GAChC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;EACG,CAAA,GACN,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,iBAAiB;aAApF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;GACG,CAAA,GACL,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;GAAQ,CAAA,CAC9F;IACF;;CAGR,OACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,CAAS;EAAG,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;EACA,CAAA,IAEH;CAEA,CAAA;AAER,CACF,GAMa,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;AACF,CAAC"}

package/esm/Tiles/Tiles.module-DUo9CsNB.css

@@ -0,0 +1 @@
+.Primer_Brand__Tiles-module__Tiles___RhWBm{width:100%;color:var(--brand-color-text-default)}.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:var(--tiles-columns-xsmall);margin:0;flex-wrap:wrap;justify-content:center;margin-inline:auto;padding:0;list-style:none;display:flex}.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{max-width:min(100%, calc(var(--brand-Tiles-item-maxSize) * var(--tiles-columns)))}@media screen and (width>=34rem) and (width<=47.99rem){.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:var(--tiles-columns-small)}}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:var(--tiles-columns-medium)}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:var(--tiles-columns-large)}}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{padding-right:var(--brand-borderWidth-thin);padding-bottom:var(--brand-borderWidth-thin)}.Primer_Brand__Tiles-module__Tiles-item___YlnUj{--tiles-inset-shadow:inset 0 0 0 transparent;width:calc(100% / var(--tiles-columns));max-width:var(--brand-Tiles-item-maxSize);max-height:var(--brand-Tiles-item-maxSize);box-sizing:border-box;background-color:var(--brand-tiles-bgColor-rest);border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), inset 0 0 0 transparent;box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);transition:background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default), box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);flex-direction:column;display:flex;position:relative}:is(.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):hover,.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):focus-within){--tiles-inset-shadow:inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);background-color:var(--brand-tiles-bgColor-hover)}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69{width:100%;color:inherit;flex:1;-webkit-text-decoration:none;text-decoration:none;display:flex}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:calc(-1 * var(--base-size-4));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Tiles-module__Tiles-item-content___YIq8M{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{justify-content:center;align-items:center;display:flex}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{width:auto;height:var(--base-size-40);max-width:100%}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-28)}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-32)}}.Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{justify-content:space-between;align-items:center;gap:var(--base-size-4);padding:var(--base-size-12) var(--base-size-16);display:flex;position:absolute;bottom:0;left:0;right:0}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transform:translateY(calc(-1 * var(--base-size-4)))}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:0;transform:translateY(var(--base-size-4));transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);pointer-events:none}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:1;transform:translateY(0)}.Primer_Brand__Tiles-module__Tiles-item-name___47ZMU{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M{color:var(--brand-color-text-default);flex-shrink:0}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tiles-module__Tiles-item___YlnUj,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{transition:none}}

package/esm/Tiles/Tiles.module.js

@@ -1,9 +1,9 @@
-import './Tiles.module-BzHaDJV8.css';//#region src/Tiles/Tiles.module.css
+import './Tiles.module-DUo9CsNB.css';//#region src/Tiles/Tiles.module.css
 var e = "Primer_Brand__Tiles-module__Tiles___RhWBm", t = {
 	Tiles: e,
 	"Tiles-grid": "Primer_Brand__Tiles-module__Tiles-grid___lAoQw",
-	"Tiles--layout-compact": "Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD",
 	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",
+	"Tiles--layout-compact": "Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD",
 	"Tiles--variant-gridlines": "Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP",
 	"Tiles-item": "Primer_Brand__Tiles-module__Tiles-item___YlnUj",
 	"Tiles-item-link": "Primer_Brand__Tiles-module__Tiles-item-link___NcK69",

package/esm/Tiles/Tiles.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n  width: 100%;\n  color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n  --tiles-columns: 2;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.Tiles--layout-compact .Tiles-grid {\n  --tiles-columns: 4;\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 4;\n  }\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n  .Tiles-grid {\n    --tiles-columns: 3;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 6;\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 6;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 8;\n  }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n  --tiles-grid-border-color: var(--brand-color-border-muted);\n  position: relative;\n  padding-right: var(--brand-borderWidth-thin);\n  padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-left: var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n  left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n  right: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),\n  .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {\n    --tiles-grid-border-color: transparent;\n  }\n}\n\n.Tiles-item {\n  --tiles-inset-shadow: inset 0 0 0 transparent;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% / var(--tiles-columns));\n  box-sizing: border-box;\n  background-color: var(--brand-tiles-bgColor-rest);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n    0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n  transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n  --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n  background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  text-decoration: none;\n  color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: calc(-1 * var(--base-size-4));\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n  width: auto;\n  height: var(--base-size-40);\n  max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n  height: var(--base-size-28);\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-item-media svg,\n  .Tiles--layout-compact .Tiles-item-media img {\n    height: var(--base-size-32);\n  }\n}\n\n.Tiles-item-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-4);\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n  transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n  opacity: 0;\n  transform: translateY(var(--base-size-4));\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n  pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.Tiles-item-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.Tiles-item-icon {\n  flex-shrink: 0;\n  color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Tiles-item {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-media {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-label {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n  width: 100%;\n  color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n  --tiles-columns: var(--tiles-columns-xsmall);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  margin-inline: auto;\n  padding: 0;\n}\n\n.Tiles--layout-default .Tiles-grid,\n.Tiles--layout-compact .Tiles-grid {\n  max-width: min(100%, calc(var(--brand-Tiles-item-maxSize) * var(--tiles-columns)));\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n  .Tiles-grid {\n    --tiles-columns: var(--tiles-columns-small);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles-grid {\n    --tiles-columns: var(--tiles-columns-medium);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles-grid {\n    --tiles-columns: var(--tiles-columns-large);\n  }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n  padding-right: var(--brand-borderWidth-thin);\n  padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles-item {\n  --tiles-inset-shadow: inset 0 0 0 transparent;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% / var(--tiles-columns));\n  max-width: var(--brand-Tiles-item-maxSize);\n  max-height: var(--brand-Tiles-item-maxSize);\n  box-sizing: border-box;\n  background-color: var(--brand-tiles-bgColor-rest);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n    0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n  transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n  --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n  background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  text-decoration: none;\n  color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: calc(-1 * var(--base-size-4));\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n  width: auto;\n  height: var(--base-size-40);\n  max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n  height: var(--base-size-28);\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-item-media svg,\n  .Tiles--layout-compact .Tiles-item-media img {\n    height: var(--base-size-32);\n  }\n}\n\n.Tiles-item-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-4);\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n  transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n  opacity: 0;\n  transform: translateY(var(--base-size-4));\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n  pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.Tiles-item-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.Tiles-item-icon {\n  flex-shrink: 0;\n  color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Tiles-item {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-media {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-label {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/base-CX1T1tsR.css

@@ -0,0 +1 @@
+:root{--brand-Tiles-item-maxSize:11.5rem}

package/lib/Tiles/Tiles.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
 /** * Design Tokens */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css';
 type TilesVariant = 'default' | 'gridlines';
 type TilesLayout = 'default' | 'compact';