@nswds/app 1.117.0 → 1.119.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/globals.css +414 -949
  2. package/dist/index.cjs +391 -289
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +9 -10
  5. package/dist/index.d.ts +9 -10
  6. package/dist/index.js +391 -289
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +414 -949
  9. package/dist/styles.css.map +1 -1
  10. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -18185,54 +18185,160 @@ function DynamicFavicon({ lightModeFavicon, darkModeFavicon }) {
18185
18185
  }, [lightModeFavicon, darkModeFavicon]);
18186
18186
  return null;
18187
18187
  }
18188
+ var expandableSearchSurfaceVariants = cva("", {
18189
+ variants: {
18190
+ variant: {
18191
+ default: "bg-grey-100 text-grey-800",
18192
+ "primary-800": "bg-primary-800 text-white",
18193
+ "primary-600": "bg-primary-600 text-white",
18194
+ "primary-400": "bg-primary-400 text-primary-800",
18195
+ "primary-200": "bg-primary-200 text-primary-800",
18196
+ "grey-800": "bg-grey-800 text-white",
18197
+ "grey-600": "bg-grey-600 text-white",
18198
+ "grey-400": "bg-grey-400 text-grey-800",
18199
+ "grey-200": "bg-grey-200 text-grey-800",
18200
+ "accent-800": "bg-accent-800 text-white",
18201
+ "accent-600": "bg-accent-600 text-white",
18202
+ "accent-400": "bg-accent-400 text-accent-800",
18203
+ "accent-200": "bg-accent-200 text-accent-800",
18204
+ white: "bg-white text-grey-800"
18205
+ }
18206
+ },
18207
+ defaultVariants: {
18208
+ variant: "default"
18209
+ }
18210
+ });
18211
+ var expandableSearchCollapsedVariants = cva("", {
18212
+ variants: {
18213
+ variant: {
18214
+ default: "bg-grey-100 hover:bg-primary-800/10",
18215
+ "primary-800": "bg-primary-800",
18216
+ "primary-600": "bg-primary-600",
18217
+ "primary-400": "bg-primary-400",
18218
+ "primary-200": "bg-primary-200",
18219
+ "grey-800": "bg-grey-800",
18220
+ "grey-600": "bg-grey-600",
18221
+ "grey-400": "bg-grey-400",
18222
+ "grey-200": "bg-grey-200",
18223
+ "accent-800": "bg-accent-800",
18224
+ "accent-600": "bg-accent-600",
18225
+ "accent-400": "bg-accent-400",
18226
+ "accent-200": "bg-accent-200",
18227
+ white: "bg-white"
18228
+ }
18229
+ },
18230
+ defaultVariants: {
18231
+ variant: "default"
18232
+ }
18233
+ });
18234
+ var expandableSearchButtonVariants = cva("", {
18235
+ variants: {
18236
+ variant: {
18237
+ default: "text-primary group-focus-within:bg-primary-800/10 hover:bg-primary-800/10",
18238
+ "primary-800": "text-white group-focus-within:bg-white/10 hover:bg-white/10",
18239
+ "primary-600": "text-white group-focus-within:bg-white/10 hover:bg-white/10",
18240
+ "primary-400": "text-primary-800 group-focus-within:bg-black/5 hover:bg-black/5",
18241
+ "primary-200": "text-primary-800 group-focus-within:bg-black/5 hover:bg-black/5",
18242
+ "grey-800": "text-white group-focus-within:bg-white/10 hover:bg-white/10",
18243
+ "grey-600": "text-white group-focus-within:bg-white/10 hover:bg-white/10",
18244
+ "grey-400": "text-grey-800 group-focus-within:bg-black/5 hover:bg-black/5",
18245
+ "grey-200": "text-grey-800 group-focus-within:bg-black/5 hover:bg-black/5",
18246
+ "accent-800": "text-white group-focus-within:bg-white/10 hover:bg-white/10",
18247
+ "accent-600": "text-white group-focus-within:bg-white/10 hover:bg-white/10",
18248
+ "accent-400": "text-accent-800 group-focus-within:bg-black/5 hover:bg-black/5",
18249
+ "accent-200": "text-accent-800 group-focus-within:bg-black/5 hover:bg-black/5",
18250
+ white: "text-grey-800 group-focus-within:bg-grey-100 hover:bg-grey-100"
18251
+ }
18252
+ },
18253
+ defaultVariants: {
18254
+ variant: "default"
18255
+ }
18256
+ });
18257
+ var expandableSearchFocusVariants = cva("", {
18258
+ variants: {
18259
+ variant: {
18260
+ default: "focus-visible:ring-grey-100",
18261
+ "primary-800": "focus-visible:ring-primary-800",
18262
+ "primary-600": "focus-visible:ring-primary-600",
18263
+ "primary-400": "focus-visible:ring-primary-400",
18264
+ "primary-200": "focus-visible:ring-primary-200",
18265
+ "grey-800": "focus-visible:ring-grey-800",
18266
+ "grey-600": "focus-visible:ring-grey-600",
18267
+ "grey-400": "focus-visible:ring-grey-400",
18268
+ "grey-200": "focus-visible:ring-grey-200",
18269
+ "accent-800": "focus-visible:ring-accent-800",
18270
+ "accent-600": "focus-visible:ring-accent-600",
18271
+ "accent-400": "focus-visible:ring-accent-400",
18272
+ "accent-200": "focus-visible:ring-accent-200",
18273
+ white: "focus-visible:ring-white"
18274
+ }
18275
+ },
18276
+ defaultVariants: {
18277
+ variant: "default"
18278
+ }
18279
+ });
18188
18280
  var ExpandableSearchContext = React5.createContext(null);
18189
- var ExpandableSearch = React5.forwardRef(({ className, onAction, defaultValue = "", ...props }, ref) => {
18281
+ var ExpandableSearch = React5.forwardRef(({ className, onAction, defaultValue = "", variant = "default", ...props }, ref) => {
18190
18282
  const [value, setValue] = React5.useState(defaultValue);
18191
18283
  const formRef = React5.useRef(null);
18284
+ const resolvedVariant = variant ?? "default";
18192
18285
  const handleAction = (e) => {
18193
18286
  e.preventDefault();
18194
18287
  if (onAction) {
18195
18288
  onAction(value);
18196
18289
  }
18197
18290
  };
18198
- return /* @__PURE__ */ jsx(ExpandableSearchContext.Provider, { value: { value, setValue, formRef }, children: /* @__PURE__ */ jsx(
18199
- "form",
18291
+ return /* @__PURE__ */ jsx(
18292
+ ExpandableSearchContext.Provider,
18200
18293
  {
18201
- ref,
18202
- className: cn("relative inline-block select-none", className),
18203
- onSubmit: handleAction,
18204
- ...props
18294
+ value: { value, setValue, formRef, variant: resolvedVariant },
18295
+ children: /* @__PURE__ */ jsx(
18296
+ "form",
18297
+ {
18298
+ ref,
18299
+ className: cn("relative inline-block select-none", className),
18300
+ onSubmit: handleAction,
18301
+ ...props
18302
+ }
18303
+ )
18205
18304
  }
18206
- ) });
18305
+ );
18207
18306
  });
18208
18307
  ExpandableSearch.displayName = "ExpandableSearch";
18209
- var ExpandableSearchField = React5.forwardRef(({ className, ...props }, ref) => {
18308
+ var ExpandableSearchField = React5.forwardRef(({ className, id: id3, ...props }, ref) => {
18210
18309
  const context = React5.useContext(ExpandableSearchContext);
18211
18310
  if (!context) throw new Error("ExpandableSearchField must be used within ExpandableSearch");
18212
18311
  const [isFocused, setIsFocused] = React5.useState(false);
18312
+ const generatedId = React5.useId();
18213
18313
  const isActive = context.value.length > 0 || isFocused;
18314
+ const variant = context.variant;
18315
+ const inputId = id3 ?? generatedId;
18214
18316
  return /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
18215
- /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "expandable-search", children: "Search" }),
18317
+ /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: inputId, children: "Search" }),
18216
18318
  /* @__PURE__ */ jsx(
18217
18319
  "input",
18218
18320
  {
18219
18321
  ref,
18322
+ id: inputId,
18220
18323
  value: context.value,
18221
18324
  onChange: (e) => context.setValue(e.target.value),
18222
18325
  onFocus: () => setIsFocused(true),
18223
18326
  onBlur: () => setIsFocused(false),
18224
18327
  className: cn(
18225
- "peer align-center flex h-12 w-12 cursor-pointer overflow-hidden rounded-sm border-0 bg-grey-100 text-transparent placeholder:text-grey-500 hover:bg-primary-800/10",
18226
- "ring-offset-white focus-visible:ring-2 focus-visible:ring-primary-650/70 focus-visible:ring-offset-2 focus-visible:outline-none",
18328
+ "peer align-center flex h-12 w-12 cursor-pointer overflow-hidden rounded-sm border-0 text-transparent",
18329
+ "ring-offset-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
18227
18330
  "transition-[width,box-shadow,background-color] duration-300 ease-in-out",
18228
18331
  "placeholder:text-transparent placeholder:opacity-0",
18229
18332
  "expandable-search__input",
18333
+ expandableSearchFocusVariants({ variant }),
18334
+ expandableSearchCollapsedVariants({ variant }),
18230
18335
  // Conditionally apply classes based on active state
18231
18336
  {
18232
18337
  "p-0": !isActive,
18233
- "w-96 cursor-auto bg-grey-100 pt-0 pr-12 pb-0 pl-4 text-grey-800 outline-none select-auto": isActive,
18234
- "placeholder:text-grey-700 placeholder:opacity-100": isActive
18338
+ "w-96 cursor-auto pt-0 pr-12 pb-0 pl-4 outline-none select-auto": isActive
18235
18339
  },
18340
+ isActive && expandableSearchSurfaceVariants({ variant }),
18341
+ isActive && (variant === "default" ? "placeholder:text-grey-700 placeholder:opacity-100" : "placeholder:text-current placeholder:opacity-70"),
18236
18342
  className
18237
18343
  ),
18238
18344
  ...props
@@ -18242,8 +18348,11 @@ var ExpandableSearchField = React5.forwardRef(({ className, ...props }, ref) =>
18242
18348
  "button",
18243
18349
  {
18244
18350
  type: "button",
18245
- className: "pointer-events-none absolute top-0 right-0 z-10 flex h-12 w-12 rounded-sm transition-colors duration-200 group-focus-within:bg-primary-800/10 peer-focus:pointer-events-auto hover:bg-primary-800/10",
18246
- children: /* @__PURE__ */ jsx(Icons.search, { className: "m-auto block h-8 w-8 shrink-0 fill-primary leading-none" })
18351
+ className: cn(
18352
+ "pointer-events-none absolute top-0 right-0 z-10 flex h-12 w-12 rounded-sm transition-colors duration-200 peer-focus:pointer-events-auto",
18353
+ expandableSearchButtonVariants({ variant })
18354
+ ),
18355
+ children: /* @__PURE__ */ jsx(Icons.search, { className: "m-auto block h-8 w-8 shrink-0 fill-current leading-none" })
18247
18356
  }
18248
18357
  )
18249
18358
  ] });
@@ -18348,101 +18457,106 @@ function ErrorMessage({
18348
18457
  }
18349
18458
  );
18350
18459
  }
18351
- var footerVariants = cva(
18352
- "bg-(--footer-bg) text-(--footer-text) [--footer-social-hover:var(--footer-social)]",
18353
- {
18354
- variants: {
18355
- color: {
18356
- "primary/grey": [
18357
- "[--footer-bg:var(--color-primary-800)] [--footer-text:var(--color-white)] [--footer-muted:var(--color-primary-100)]",
18358
- "dark:[--footer-bg:var(--color-grey-800)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-grey-100)]",
18359
- "[--footer-border:var(--color-white)]/15",
18360
- "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18361
- "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18362
- ],
18363
- light: [
18364
- "[--footer-bg:var(--color-grey-200)] [--footer-text:var(--color-grey-800)] [--footer-muted:var(--color-grey-700)]",
18365
- "dark:[--footer-bg:var(--color-grey-800)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-grey-100)]",
18366
- "[--footer-border:var(--color-grey-300)] dark:[--footer-border:var(--color-white)]/15",
18367
- "[--footer-link:var(--color-grey-700)] [--footer-link-hover-bg:var(--color-grey-800)]/10 [--footer-link-hover-text:var(--color-grey-900)]",
18368
- "dark:[--footer-link:var(--color-white)] dark:[--footer-link-hover-bg:var(--color-white)]/10 dark:[--footer-link-hover-text:var(--color-white)]",
18369
- "[--footer-social:var(--color-grey-800)] [--footer-social-hover:var(--color-grey-900)] [--footer-social-hover-bg:var(--color-grey-800)]/10",
18370
- "dark:[--footer-social:var(--color-white)] dark:[--footer-social-hover:var(--color-white)] dark:[--footer-social-hover-bg:var(--color-white)]/10"
18371
- ],
18372
- "primary/white": [
18373
- "[--footer-bg:var(--color-primary-800)] [--footer-text:var(--color-white)] [--footer-muted:var(--color-primary-100)]",
18374
- "dark:[--footer-bg:var(--color-primary-800)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-primary-100)]",
18375
- "[--footer-border:var(--color-white)]/15",
18376
- "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18377
- "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18378
- ],
18379
- white: [
18380
- "[--footer-bg:var(--color-white)] [--footer-text:var(--color-grey-800)] [--footer-muted:var(--color-grey-600)]",
18381
- "dark:[--footer-bg:var(--color-grey-800)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-grey-100)]",
18382
- "[--footer-border:var(--color-grey-200)] dark:[--footer-border:var(--color-white)]/15",
18383
- "[--footer-link:var(--color-grey-600)] [--footer-link-hover-bg:var(--color-primary-800)]/10 [--footer-link-hover-text:var(--color-grey-800)]",
18384
- "dark:[--footer-link:var(--color-white)] dark:[--footer-link-hover-bg:var(--color-white)]/10 dark:[--footer-link-hover-text:var(--color-white)]",
18385
- "[--footer-social:var(--color-grey-700)] [--footer-social-hover:var(--color-grey-900)] [--footer-social-hover-bg:var(--color-primary-800)]/10",
18386
- "dark:[--footer-social:var(--color-white)] dark:[--footer-social-hover:var(--color-white)] dark:[--footer-social-hover-bg:var(--color-white)]/10"
18387
- ],
18388
- "grey-600": [
18389
- "[--footer-bg:var(--color-grey-600)] [--footer-text:var(--color-white)] [--footer-muted:var(--color-grey-100)]",
18390
- "[--footer-border:var(--color-white)]/15",
18391
- "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18392
- "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18393
- ],
18394
- "grey-800": [
18395
- "[--footer-bg:var(--color-grey-800)] [--footer-text:var(--color-white)] [--footer-muted:var(--color-grey-100)]",
18396
- "[--footer-border:var(--color-white)]/15",
18397
- "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18398
- "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18399
- ],
18400
- "accent-200": [
18401
- "[--footer-bg:var(--color-accent-200)] [--footer-text:var(--color-accent-800)] [--footer-muted:var(--color-accent-700)]",
18402
- "dark:[--footer-bg:var(--color-accent-800)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-accent-100)]",
18403
- "[--footer-border:var(--color-accent-800)]/15 dark:[--footer-border:var(--color-white)]/15",
18404
- "[--footer-link:var(--color-accent-800)] [--footer-link-hover-bg:var(--color-accent-800)]/10 [--footer-link-hover-text:var(--color-accent-800)]",
18405
- "dark:[--footer-link:var(--color-white)] dark:[--footer-link-hover-bg:var(--color-white)]/10 dark:[--footer-link-hover-text:var(--color-white)]",
18406
- "[--footer-social:var(--color-accent-800)] [--footer-social-hover-bg:var(--color-accent-800)]/10",
18407
- "dark:[--footer-social:var(--color-white)] dark:[--footer-social-hover-bg:var(--color-white)]/10"
18408
- ],
18409
- primary: [
18410
- "[--footer-bg:var(--color-primary-800)] [--footer-text:var(--color-white)] [--footer-muted:var(--color-primary-100)]",
18411
- "dark:[--footer-bg:var(--color-primary-800)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-primary-100)]",
18412
- "[--footer-border:var(--color-white)]/15",
18413
- "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18414
- "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18415
- ],
18416
- secondary: [
18417
- "[--footer-bg:var(--color-primary-200)] [--footer-text:var(--color-primary-800)] [--footer-muted:var(--color-primary-700)]",
18418
- "dark:[--footer-bg:var(--color-primary-900)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-primary-100)]",
18419
- "[--footer-border:var(--color-primary-800)]/15 dark:[--footer-border:var(--color-white)]/15",
18420
- "[--footer-link:var(--color-primary-800)] [--footer-link-hover-bg:var(--color-primary-800)]/10 [--footer-link-hover-text:var(--color-primary-800)]",
18421
- "dark:[--footer-link:var(--color-white)] dark:[--footer-link-hover-bg:var(--color-white)]/10 dark:[--footer-link-hover-text:var(--color-white)]",
18422
- "[--footer-social:var(--color-primary-800)] [--footer-social-hover-bg:var(--color-primary-800)]/10",
18423
- "dark:[--footer-social:var(--color-white)] dark:[--footer-social-hover-bg:var(--color-white)]/10"
18424
- ],
18425
- accent: [
18426
- "[--footer-bg:var(--color-accent-800)] [--footer-text:var(--color-white)] [--footer-muted:var(--color-accent-100)]",
18427
- "dark:[--footer-bg:var(--color-accent-800)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-accent-100)]",
18428
- "[--footer-border:var(--color-white)]/15",
18429
- "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18430
- "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18431
- ],
18432
- danger: [
18433
- "[--footer-bg:var(--color-danger-600)] [--footer-text:var(--color-white)] [--footer-muted:var(--color-danger-100)]",
18434
- "dark:[--footer-bg:var(--color-danger-600)] dark:[--footer-text:var(--color-white)] dark:[--footer-muted:var(--color-danger-100)]",
18435
- "[--footer-border:var(--color-white)]/15",
18436
- "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18437
- "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18438
- ]
18439
- }
18440
- },
18441
- defaultVariants: {
18442
- color: "white"
18460
+ var footerVariants = cva("[--footer-social-hover:var(--footer-social)]", {
18461
+ variants: {
18462
+ color: {
18463
+ "primary-800": [
18464
+ "bg-primary-800 text-white",
18465
+ "[--footer-text:var(--color-white)]",
18466
+ "[--footer-border:var(--color-white)]/15",
18467
+ "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18468
+ "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18469
+ ],
18470
+ "primary-600": [
18471
+ "bg-primary-600 text-white",
18472
+ "[--footer-text:var(--color-white)]",
18473
+ "[--footer-border:var(--color-white)]/15",
18474
+ "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18475
+ "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18476
+ ],
18477
+ "primary-400": [
18478
+ "bg-primary-400 text-primary-800",
18479
+ "[--footer-text:var(--color-primary-800)]",
18480
+ "[--footer-border:var(--color-primary-800)]/15",
18481
+ "[--footer-link:var(--color-primary-800)] [--footer-link-hover-bg:var(--color-primary-800)]/10 [--footer-link-hover-text:var(--color-primary-800)]",
18482
+ "[--footer-social:var(--color-primary-800)] [--footer-social-hover-bg:var(--color-primary-800)]/10"
18483
+ ],
18484
+ "primary-200": [
18485
+ "bg-primary-200 text-primary-800",
18486
+ "[--footer-text:var(--color-primary-800)]",
18487
+ "[--footer-border:var(--color-primary-800)]/15",
18488
+ "[--footer-link:var(--color-primary-800)] [--footer-link-hover-bg:var(--color-primary-800)]/10 [--footer-link-hover-text:var(--color-primary-800)]",
18489
+ "[--footer-social:var(--color-primary-800)] [--footer-social-hover-bg:var(--color-primary-800)]/10"
18490
+ ],
18491
+ "grey-800": [
18492
+ "bg-grey-800 text-white",
18493
+ "[--footer-text:var(--color-white)]",
18494
+ "[--footer-border:var(--color-white)]/15",
18495
+ "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18496
+ "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18497
+ ],
18498
+ "grey-600": [
18499
+ "bg-grey-600 text-white",
18500
+ "[--footer-text:var(--color-white)]",
18501
+ "[--footer-border:var(--color-white)]/15",
18502
+ "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18503
+ "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18504
+ ],
18505
+ "grey-400": [
18506
+ "bg-grey-400 text-grey-800",
18507
+ "[--footer-text:var(--color-grey-800)]",
18508
+ "[--footer-border:var(--color-grey-800)]/15",
18509
+ "[--footer-link:var(--color-grey-800)] [--footer-link-hover-bg:var(--color-grey-800)]/10 [--footer-link-hover-text:var(--color-grey-800)]",
18510
+ "[--footer-social:var(--color-grey-800)] [--footer-social-hover-bg:var(--color-grey-800)]/10"
18511
+ ],
18512
+ "grey-200": [
18513
+ "bg-grey-200 text-grey-800",
18514
+ "[--footer-text:var(--color-grey-800)]",
18515
+ "[--footer-border:var(--color-grey-800)]/15",
18516
+ "[--footer-link:var(--color-grey-800)] [--footer-link-hover-bg:var(--color-grey-800)]/10 [--footer-link-hover-text:var(--color-grey-800)]",
18517
+ "[--footer-social:var(--color-grey-800)] [--footer-social-hover-bg:var(--color-grey-800)]/10"
18518
+ ],
18519
+ "accent-800": [
18520
+ "bg-accent-800 text-white",
18521
+ "[--footer-text:var(--color-white)]",
18522
+ "[--footer-border:var(--color-white)]/15",
18523
+ "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18524
+ "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18525
+ ],
18526
+ "accent-600": [
18527
+ "bg-accent-600 text-white",
18528
+ "[--footer-text:var(--color-white)]",
18529
+ "[--footer-border:var(--color-white)]/15",
18530
+ "[--footer-link:var(--color-white)] [--footer-link-hover-bg:var(--color-white)]/10 [--footer-link-hover-text:var(--color-white)]",
18531
+ "[--footer-social:var(--color-white)] [--footer-social-hover-bg:var(--color-white)]/10"
18532
+ ],
18533
+ "accent-400": [
18534
+ "bg-accent-400 text-accent-800",
18535
+ "[--footer-text:var(--color-accent-800)]",
18536
+ "[--footer-border:var(--color-accent-800)]/15",
18537
+ "[--footer-link:var(--color-accent-800)] [--footer-link-hover-bg:var(--color-accent-800)]/10 [--footer-link-hover-text:var(--color-accent-800)]",
18538
+ "[--footer-social:var(--color-accent-800)] [--footer-social-hover-bg:var(--color-accent-800)]/10"
18539
+ ],
18540
+ "accent-200": [
18541
+ "bg-accent-200 text-accent-800",
18542
+ "[--footer-text:var(--color-accent-800)]",
18543
+ "[--footer-border:var(--color-accent-800)]/15",
18544
+ "[--footer-link:var(--color-accent-800)] [--footer-link-hover-bg:var(--color-accent-800)]/10 [--footer-link-hover-text:var(--color-accent-800)]",
18545
+ "[--footer-social:var(--color-accent-800)] [--footer-social-hover-bg:var(--color-accent-800)]/10"
18546
+ ],
18547
+ white: [
18548
+ "bg-white text-grey-800",
18549
+ "[--footer-text:var(--color-grey-800)]",
18550
+ "[--footer-border:var(--color-grey-200)]",
18551
+ "[--footer-link:var(--color-grey-800)] [--footer-link-hover-bg:var(--color-grey-800)]/10 [--footer-link-hover-text:var(--color-grey-800)]",
18552
+ "[--footer-social:var(--color-grey-800)] [--footer-social-hover-bg:var(--color-grey-800)]/10"
18553
+ ]
18443
18554
  }
18555
+ },
18556
+ defaultVariants: {
18557
+ color: "white"
18444
18558
  }
18445
- );
18559
+ });
18446
18560
  var footerSocialLinkClassName = [
18447
18561
  "group",
18448
18562
  "[--btn-bg:var(--footer-social)]",
@@ -18771,7 +18885,7 @@ function FormatToggle({ format, setFormat }) {
18771
18885
 
18772
18886
  // package.json
18773
18887
  var package_default = {
18774
- version: "1.116.0"};
18888
+ version: "1.118.0"};
18775
18889
  var SluggerContext = React5__default.createContext(null);
18776
18890
  function flattenText(nodes) {
18777
18891
  if (nodes == null || typeof nodes === "boolean") return "";
@@ -19157,7 +19271,6 @@ var heroBannerVariants2 = cva("relative", {
19157
19271
  "grey-600": "bg-grey-600 text-white",
19158
19272
  "grey-400": "bg-grey-400 text-grey-800",
19159
19273
  "grey-200": "bg-grey-200 text-grey-800",
19160
- "grey-150": "bg-grey-200 text-grey-800",
19161
19274
  "accent-800": "bg-accent-800 text-white",
19162
19275
  "accent-600": "bg-accent-600 text-white",
19163
19276
  "accent-400": "bg-accent-400 text-accent-800",
@@ -29726,164 +29839,156 @@ function NavigationMenuIndicator({
29726
29839
  }
29727
29840
  );
29728
29841
  }
29729
- var navigationMenuMainNavigationSurfaceStyles = cva("", {
29730
- variants: {
29731
- variant: {
29732
- primary: "bg-primary-800 dark:bg-primary-900",
29733
- secondary: "bg-[#f5f2ff] dark:bg-[#261447]",
29734
- tertiary: "bg-primary-600 dark:bg-primary-700",
29735
- white: "bg-white dark:bg-grey-950",
29736
- grey: "bg-grey-100 dark:bg-grey-900"
29737
- }
29738
- },
29739
- defaultVariants: {
29740
- variant: "grey"
29741
- }
29742
- });
29743
- var navigationMenuMainNavigationBorderStyles = cva("", {
29744
- variants: {
29745
- variant: {
29746
- primary: "border-primary-700 dark:border-primary-600",
29747
- secondary: "border-[#d9ccff] dark:border-[#4e3a86]",
29748
- tertiary: "border-primary-500 dark:border-primary-600",
29749
- white: "border-grey-200 dark:border-grey-800",
29750
- grey: "border-grey-200 dark:border-grey-800"
29751
- }
29752
- },
29753
- defaultVariants: {
29754
- variant: "grey"
29755
- }
29756
- });
29757
- var navigationMenuMainNavigationTriggerToneStyles = cva("", {
29758
- variants: {
29759
- variant: {
29760
- primary: "text-white dark:text-primary-50",
29761
- secondary: "text-primary-800 dark:text-primary-100",
29762
- tertiary: "text-white dark:text-primary-50",
29763
- white: "text-grey-900 dark:text-white",
29764
- grey: "text-grey-800 dark:text-grey-100"
29765
- }
29766
- },
29767
- defaultVariants: {
29768
- variant: "grey"
29769
- }
29770
- });
29771
- var navigationMenuMainNavigationTriggerActiveStyles = cva("", {
29772
- variants: {
29773
- variant: {
29774
- primary: "hover:bg-primary-700 hover:text-white focus:bg-primary-700 focus:text-white data-[state=open]:bg-primary-700 data-[state=open]:text-white dark:hover:bg-primary-800 dark:hover:text-white dark:focus:bg-primary-800 dark:focus:text-white dark:data-[state=open]:bg-primary-800 dark:data-[state=open]:text-white",
29775
- secondary: "hover:bg-[#e8e2ff] hover:text-primary-800 focus:bg-[#e8e2ff] focus:text-primary-800 data-[state=open]:bg-[#e8e2ff] data-[state=open]:text-primary-800 dark:hover:bg-[#32205a] dark:hover:text-primary-200 dark:focus:bg-[#32205a] dark:focus:text-primary-200 dark:data-[state=open]:bg-[#32205a] dark:data-[state=open]:text-primary-200",
29776
- tertiary: "hover:bg-primary-500 hover:text-white focus:bg-primary-500 focus:text-white data-[state=open]:bg-primary-500 data-[state=open]:text-white dark:hover:bg-primary-600 dark:hover:text-white dark:focus:bg-primary-600 dark:focus:text-white dark:data-[state=open]:bg-primary-600 dark:data-[state=open]:text-white",
29777
- white: "hover:bg-grey-100 hover:text-primary-800 focus:bg-grey-100 focus:text-primary-800 data-[state=open]:bg-grey-100 data-[state=open]:text-primary-800 dark:hover:bg-grey-800 dark:hover:text-primary-200 dark:focus:bg-grey-800 dark:focus:text-primary-200 dark:data-[state=open]:bg-grey-800 dark:data-[state=open]:text-primary-200",
29778
- grey: "hover:bg-grey-200 hover:text-primary-800 focus:bg-grey-200 focus:text-primary-800 data-[state=open]:bg-grey-200 data-[state=open]:text-primary-800 dark:hover:bg-grey-800 dark:hover:text-primary-200 dark:focus:bg-grey-800 dark:focus:text-primary-200 dark:data-[state=open]:bg-grey-800 dark:data-[state=open]:text-primary-200"
29779
- }
29780
- },
29781
- defaultVariants: {
29782
- variant: "grey"
29783
- }
29784
- });
29785
- var navigationMenuMainNavigationTriggerEdgeStyles = cva("", {
29786
- variants: {
29787
- variant: {
29788
- primary: "hover:before:bg-primary-700 hover:after:bg-primary-700 focus:before:bg-primary-700 focus:after:bg-primary-700 data-[state=open]:before:bg-primary-700 data-[state=open]:after:bg-primary-700 dark:hover:before:bg-primary-800 dark:hover:after:bg-primary-800 dark:focus:before:bg-primary-800 dark:focus:after:bg-primary-800 dark:data-[state=open]:before:bg-primary-800 dark:data-[state=open]:after:bg-primary-800",
29789
- secondary: "hover:before:bg-[#e8e2ff] hover:after:bg-[#e8e2ff] focus:before:bg-[#e8e2ff] focus:after:bg-[#e8e2ff] data-[state=open]:before:bg-[#e8e2ff] data-[state=open]:after:bg-[#e8e2ff] dark:hover:before:bg-[#32205a] dark:hover:after:bg-[#32205a] dark:focus:before:bg-[#32205a] dark:focus:after:bg-[#32205a] dark:data-[state=open]:before:bg-[#32205a] dark:data-[state=open]:after:bg-[#32205a]",
29790
- tertiary: "hover:before:bg-primary-500 hover:after:bg-primary-500 focus:before:bg-primary-500 focus:after:bg-primary-500 data-[state=open]:before:bg-primary-500 data-[state=open]:after:bg-primary-500 dark:hover:before:bg-primary-600 dark:hover:after:bg-primary-600 dark:focus:before:bg-primary-600 dark:focus:after:bg-primary-600 dark:data-[state=open]:before:bg-primary-600 dark:data-[state=open]:after:bg-primary-600",
29791
- white: "hover:before:bg-grey-100 hover:after:bg-grey-100 focus:before:bg-grey-100 focus:after:bg-grey-100 data-[state=open]:before:bg-grey-100 data-[state=open]:after:bg-grey-100 dark:hover:before:bg-grey-800 dark:hover:after:bg-grey-800 dark:focus:before:bg-grey-800 dark:focus:after:bg-grey-800 dark:data-[state=open]:before:bg-grey-800 dark:data-[state=open]:after:bg-grey-800",
29792
- grey: "hover:before:bg-grey-200 hover:after:bg-grey-200 focus:before:bg-grey-200 focus:after:bg-grey-200 data-[state=open]:before:bg-grey-200 data-[state=open]:after:bg-grey-200 dark:hover:before:bg-grey-800 dark:hover:after:bg-grey-800 dark:focus:before:bg-grey-800 dark:focus:after:bg-grey-800 dark:data-[state=open]:before:bg-grey-800 dark:data-[state=open]:after:bg-grey-800"
29793
- }
29794
- },
29795
- defaultVariants: {
29796
- variant: "grey"
29797
- }
29798
- });
29799
- var navigationMenuMainNavigationDropdownSurfaceStyles = cva(
29800
- "w-full shadow dark:shadow-black/40",
29801
- {
29802
- variants: {
29803
- variant: {
29804
- primary: "bg-white dark:bg-grey-950",
29805
- secondary: "bg-white dark:bg-grey-900",
29806
- tertiary: "bg-white dark:bg-grey-950",
29807
- white: "bg-white dark:bg-grey-950",
29808
- grey: "bg-white dark:bg-grey-950"
29809
- }
29810
- },
29811
- defaultVariants: {
29812
- variant: "grey"
29813
- }
29814
- }
29815
- );
29816
- var navigationMenuMainNavigationFeaturedLinkStyles = cva(
29817
- "group relative flex items-center px-8 py-8 text-xl font-bold whitespace-normal",
29818
- {
29819
- variants: {
29820
- variant: {
29821
- primary: "text-primary-800 hover:bg-primary-800/8 dark:text-primary-200 dark:hover:bg-primary-900/80",
29822
- secondary: "text-primary-800 hover:bg-[#f5f2ff] dark:text-primary-200 dark:hover:bg-[#32205a]/70",
29823
- tertiary: "text-primary-700 hover:bg-primary-100 dark:text-primary-200 dark:hover:bg-primary-900/70",
29824
- white: "text-primary-800 hover:bg-grey-100 dark:text-primary-200 dark:hover:bg-grey-800/80",
29825
- grey: "text-primary-800 hover:bg-grey-100 dark:text-primary-200 dark:hover:bg-grey-800/80"
29826
- }
29827
- },
29828
- defaultVariants: {
29829
- variant: "grey"
29830
- }
29831
- }
29832
- );
29833
- var navigationMenuMainNavigationSectionLinkStyles = cva(
29834
- "relative mx-2 rounded-none border-t p-4 whitespace-normal focus-within:rounded-sm focus-within:outline focus-within:outline-inherit [&:nth-last-child(-n+3)]:border-b",
29835
- {
29836
- variants: {
29837
- variant: {
29838
- primary: "border-primary-100 bg-white hover:bg-primary-50 hover:font-bold hover:text-primary-800 dark:border-primary-900 dark:bg-grey-950 dark:hover:bg-primary-900/60 dark:hover:text-primary-200",
29839
- secondary: "border-[#ece3ff] bg-white hover:bg-[#f8f4ff] hover:font-bold hover:text-primary-800 dark:border-[#45356e] dark:bg-grey-900 dark:hover:bg-[#32205a]/60 dark:hover:text-primary-200",
29840
- tertiary: "border-primary-100 bg-white hover:bg-primary-50 hover:font-bold hover:text-primary-700 dark:border-primary-900 dark:bg-grey-950 dark:hover:bg-primary-900/60 dark:hover:text-primary-200",
29841
- white: "border-grey-200 bg-white hover:bg-grey-50 hover:font-bold hover:text-primary-800 dark:border-grey-800 dark:bg-grey-950 dark:hover:bg-grey-800/80 dark:hover:text-primary-200",
29842
- grey: "border-grey-200 bg-white hover:bg-grey-50 hover:font-bold hover:text-primary-800 dark:border-grey-800 dark:bg-grey-950 dark:hover:bg-grey-800/80 dark:hover:text-primary-200"
29843
- }
29844
- },
29845
- defaultVariants: {
29846
- variant: "grey"
29847
- }
29848
- }
29849
- );
29850
- var navigationMenuMainNavigationSectionLinkTitleStyles = cva("text-base font-semibold", {
29851
- variants: {
29852
- variant: {
29853
- primary: "text-grey-900 dark:text-primary-50",
29854
- secondary: "text-grey-900 dark:text-grey-100",
29855
- tertiary: "text-grey-900 dark:text-primary-50",
29856
- white: "text-grey-900 dark:text-white",
29857
- grey: "text-grey-900 dark:text-grey-100"
29858
- }
29859
- },
29860
- defaultVariants: {
29861
- variant: "grey"
29862
- }
29863
- });
29842
+ function createVariantStyles({
29843
+ surface,
29844
+ border,
29845
+ triggerTone,
29846
+ triggerActive,
29847
+ featuredLink,
29848
+ sectionLink
29849
+ }) {
29850
+ return {
29851
+ surface: cn(surface, "dark:bg-grey-900 dark:text-white"),
29852
+ border: cn(border, "dark:border-grey-700"),
29853
+ triggerTone: cn(triggerTone, "dark:text-white"),
29854
+ triggerActive: cn(
29855
+ triggerActive,
29856
+ "dark:hover:bg-grey-800 dark:hover:text-white dark:focus:bg-grey-800 dark:focus:text-white dark:data-[state=open]:bg-grey-800 dark:data-[state=open]:text-white"
29857
+ ),
29858
+ dropdownSurface: "bg-white dark:bg-grey-900",
29859
+ featuredLink: cn(featuredLink, "dark:text-white dark:hover:bg-white/10"),
29860
+ sectionLink: cn(
29861
+ sectionLink,
29862
+ "dark:border-grey-700 dark:bg-grey-900 dark:hover:bg-white/10 dark:hover:text-white"
29863
+ ),
29864
+ sectionLinkTitle: "text-grey-900 dark:text-white"
29865
+ };
29866
+ }
29867
+ var navigationMenuMainNavigationVariantStyles = {
29868
+ "primary-800": createVariantStyles({
29869
+ surface: "bg-primary-800 text-white",
29870
+ border: "border-primary-700",
29871
+ triggerTone: "text-white",
29872
+ triggerActive: "hover:bg-primary-700 hover:text-white focus:bg-primary-700 focus:text-white data-[state=open]:bg-primary-700 data-[state=open]:text-white",
29873
+ featuredLink: "text-primary-800 hover:bg-primary-800/5",
29874
+ sectionLink: "border-grey-200 bg-white hover:bg-primary-800/5 hover:font-bold hover:text-primary-800"
29875
+ }),
29876
+ "primary-600": createVariantStyles({
29877
+ surface: "bg-primary-600 text-white",
29878
+ border: "border-primary-600",
29879
+ triggerTone: "text-white",
29880
+ triggerActive: "hover:bg-primary-700 hover:text-white focus:bg-primary-700 focus:text-white data-[state=open]:bg-primary-700 data-[state=open]:text-white",
29881
+ featuredLink: "text-primary-800 hover:bg-primary-800/5",
29882
+ sectionLink: "border-grey-200 bg-white hover:bg-primary-800/5 hover:font-bold hover:text-primary-800"
29883
+ }),
29884
+ "primary-400": createVariantStyles({
29885
+ surface: "bg-primary-400 text-primary-800",
29886
+ border: "border-primary-200",
29887
+ triggerTone: "text-primary-800",
29888
+ triggerActive: "hover:bg-primary-200 hover:text-primary-800 focus:bg-primary-200 focus:text-primary-800 data-[state=open]:bg-primary-200 data-[state=open]:text-primary-800",
29889
+ featuredLink: "text-primary-800 hover:bg-primary-800/5",
29890
+ sectionLink: "border-grey-200 bg-white hover:bg-primary-800/5 hover:font-bold hover:text-primary-800"
29891
+ }),
29892
+ "primary-200": createVariantStyles({
29893
+ surface: "bg-primary-200 text-primary-800",
29894
+ border: "border-primary-200",
29895
+ triggerTone: "text-primary-800",
29896
+ triggerActive: "hover:bg-primary-100 hover:text-primary-800 focus:bg-primary-100 focus:text-primary-800 data-[state=open]:bg-primary-100 data-[state=open]:text-primary-800",
29897
+ featuredLink: "text-primary-800 hover:bg-primary-800/5",
29898
+ sectionLink: "border-grey-200 bg-white hover:bg-primary-800/5 hover:font-bold hover:text-primary-800"
29899
+ }),
29900
+ "grey-800": createVariantStyles({
29901
+ surface: "bg-grey-800 text-white",
29902
+ border: "border-grey-700",
29903
+ triggerTone: "text-white",
29904
+ triggerActive: "hover:bg-grey-700 hover:text-white focus:bg-grey-700 focus:text-white data-[state=open]:bg-grey-700 data-[state=open]:text-white",
29905
+ featuredLink: "text-grey-800 hover:bg-grey-800/5",
29906
+ sectionLink: "border-grey-200 bg-white hover:bg-grey-800/5 hover:font-bold hover:text-grey-800"
29907
+ }),
29908
+ "grey-600": createVariantStyles({
29909
+ surface: "bg-grey-600 text-white",
29910
+ border: "border-grey-600",
29911
+ triggerTone: "text-white",
29912
+ triggerActive: "hover:bg-grey-700 hover:text-white focus:bg-grey-700 focus:text-white data-[state=open]:bg-grey-700 data-[state=open]:text-white",
29913
+ featuredLink: "text-grey-800 hover:bg-grey-800/5",
29914
+ sectionLink: "border-grey-200 bg-white hover:bg-grey-800/5 hover:font-bold hover:text-grey-800"
29915
+ }),
29916
+ "grey-400": createVariantStyles({
29917
+ surface: "bg-grey-400 text-grey-800",
29918
+ border: "border-grey-300",
29919
+ triggerTone: "text-grey-800",
29920
+ triggerActive: "hover:bg-grey-200 hover:text-grey-800 focus:bg-grey-200 focus:text-grey-800 data-[state=open]:bg-grey-200 data-[state=open]:text-grey-800",
29921
+ featuredLink: "text-grey-800 hover:bg-grey-800/5",
29922
+ sectionLink: "border-grey-200 bg-white hover:bg-grey-800/5 hover:font-bold hover:text-grey-800"
29923
+ }),
29924
+ "grey-200": createVariantStyles({
29925
+ surface: "bg-grey-200 text-grey-800",
29926
+ border: "border-grey-200",
29927
+ triggerTone: "text-grey-800",
29928
+ triggerActive: "hover:bg-grey-100 hover:text-grey-800 focus:bg-grey-100 focus:text-grey-800 data-[state=open]:bg-grey-100 data-[state=open]:text-grey-800",
29929
+ featuredLink: "text-grey-800 hover:bg-grey-800/5",
29930
+ sectionLink: "border-grey-200 bg-white hover:bg-grey-800/5 hover:font-bold hover:text-grey-800"
29931
+ }),
29932
+ "accent-800": createVariantStyles({
29933
+ surface: "bg-accent-800 text-white",
29934
+ border: "border-accent-600",
29935
+ triggerTone: "text-white",
29936
+ triggerActive: "hover:bg-accent-600 hover:text-white focus:bg-accent-600 focus:text-white data-[state=open]:bg-accent-600 data-[state=open]:text-white",
29937
+ featuredLink: "text-accent-800 hover:bg-accent-800/5",
29938
+ sectionLink: "border-grey-200 bg-white hover:bg-accent-800/5 hover:font-bold hover:text-accent-800"
29939
+ }),
29940
+ "accent-600": createVariantStyles({
29941
+ surface: "bg-accent-600 text-white",
29942
+ border: "border-accent-600",
29943
+ triggerTone: "text-white",
29944
+ triggerActive: "hover:bg-accent-800 hover:text-white focus:bg-accent-800 focus:text-white data-[state=open]:bg-accent-800 data-[state=open]:text-white",
29945
+ featuredLink: "text-accent-800 hover:bg-accent-800/5",
29946
+ sectionLink: "border-grey-200 bg-white hover:bg-accent-800/5 hover:font-bold hover:text-accent-800"
29947
+ }),
29948
+ "accent-400": createVariantStyles({
29949
+ surface: "bg-accent-400 text-accent-800",
29950
+ border: "border-accent-200",
29951
+ triggerTone: "text-accent-800",
29952
+ triggerActive: "hover:bg-accent-200 hover:text-accent-800 focus:bg-accent-200 focus:text-accent-800 data-[state=open]:bg-accent-200 data-[state=open]:text-accent-800",
29953
+ featuredLink: "text-accent-800 hover:bg-accent-800/5",
29954
+ sectionLink: "border-grey-200 bg-white hover:bg-accent-800/5 hover:font-bold hover:text-accent-800"
29955
+ }),
29956
+ "accent-200": createVariantStyles({
29957
+ surface: "bg-accent-200 text-accent-800",
29958
+ border: "border-accent-200",
29959
+ triggerTone: "text-accent-800",
29960
+ triggerActive: "hover:bg-accent-50 hover:text-accent-800 focus:bg-accent-50 focus:text-accent-800 data-[state=open]:bg-accent-50 data-[state=open]:text-accent-800",
29961
+ featuredLink: "text-accent-800 hover:bg-accent-800/5",
29962
+ sectionLink: "border-grey-200 bg-white hover:bg-accent-800/5 hover:font-bold hover:text-accent-800"
29963
+ }),
29964
+ white: createVariantStyles({
29965
+ surface: "bg-white text-grey-800",
29966
+ border: "border-grey-200",
29967
+ triggerTone: "text-grey-800",
29968
+ triggerActive: "hover:bg-grey-100 hover:text-grey-800 focus:bg-grey-100 focus:text-grey-800 data-[state=open]:bg-grey-100 data-[state=open]:text-grey-800",
29969
+ featuredLink: "text-grey-800 hover:bg-grey-100",
29970
+ sectionLink: "border-grey-200 bg-white hover:bg-grey-50 hover:font-bold hover:text-grey-800"
29971
+ })
29972
+ };
29864
29973
  var PANEL_CLOSE_DELAY_MS = 220;
29865
29974
  function TopLevelItem({
29866
29975
  href = "#",
29867
29976
  title,
29868
29977
  variant,
29869
- syncBorderToSurface,
29870
29978
  triggerClassName,
29871
- triggerActiveClassName,
29872
- triggerActiveBorderClassName
29979
+ triggerActiveClassName
29873
29980
  }) {
29981
+ const styles5 = navigationMenuMainNavigationVariantStyles[variant];
29874
29982
  return /* @__PURE__ */ jsx(NavigationMenuItem, { className: "shrink-0", children: /* @__PURE__ */ jsx(
29875
29983
  NavigationMenuLink,
29876
29984
  {
29877
29985
  asChild: true,
29878
29986
  className: cn(
29879
29987
  "relative inline-flex h-auto min-h-14 w-auto flex-row items-center justify-start gap-x-1 rounded-none bg-transparent p-4 text-base leading-6 font-bold transition lg:px-8",
29880
- navigationMenuMainNavigationTriggerToneStyles({ variant }),
29881
- navigationMenuMainNavigationTriggerActiveStyles({ variant }),
29988
+ styles5.triggerTone,
29989
+ styles5.triggerActive,
29882
29990
  triggerClassName,
29883
- triggerActiveClassName,
29884
- syncBorderToSurface && "before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-transparent",
29885
- syncBorderToSurface && navigationMenuMainNavigationTriggerEdgeStyles({ variant }),
29886
- syncBorderToSurface && triggerActiveBorderClassName
29991
+ triggerActiveClassName
29887
29992
  ),
29888
29993
  children: /* @__PURE__ */ jsx(Link14, { href, children: title })
29889
29994
  }
@@ -29895,11 +30000,16 @@ function FeaturedSectionLink({
29895
30000
  variant,
29896
30001
  className
29897
30002
  }) {
30003
+ const styles5 = navigationMenuMainNavigationVariantStyles[variant];
29898
30004
  return /* @__PURE__ */ jsxs(
29899
30005
  Link14,
29900
30006
  {
29901
30007
  href,
29902
- className: cn(navigationMenuMainNavigationFeaturedLinkStyles({ variant }), className),
30008
+ className: cn(
30009
+ "group relative flex items-center px-8 py-8 text-xl font-bold whitespace-normal",
30010
+ styles5.featuredLink,
30011
+ className
30012
+ ),
29903
30013
  children: [
29904
30014
  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "absolute inset-0" }),
29905
30015
  title,
@@ -29914,23 +30024,19 @@ function SectionLink({
29914
30024
  className,
29915
30025
  titleClassName
29916
30026
  }) {
30027
+ const styles5 = navigationMenuMainNavigationVariantStyles[variant];
29917
30028
  return /* @__PURE__ */ jsx(
29918
30029
  NavigationMenuLink,
29919
30030
  {
29920
30031
  asChild: true,
29921
- className: cn(navigationMenuMainNavigationSectionLinkStyles({ variant }), className),
30032
+ className: cn(
30033
+ "relative mx-2 rounded-none border-t p-4 whitespace-normal focus-within:rounded-sm focus-within:outline focus-within:outline-inherit [&:nth-last-child(-n+3)]:border-b",
30034
+ styles5.sectionLink,
30035
+ className
30036
+ ),
29922
30037
  children: /* @__PURE__ */ jsxs(Link14, { href: link.href, className: "outline-none", children: [
29923
30038
  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "absolute inset-0" }),
29924
- /* @__PURE__ */ jsx(
29925
- "span",
29926
- {
29927
- className: cn(
29928
- navigationMenuMainNavigationSectionLinkTitleStyles({ variant }),
29929
- titleClassName
29930
- ),
29931
- children: link.title
29932
- }
29933
- )
30039
+ /* @__PURE__ */ jsx("span", { className: cn("text-base font-semibold", styles5.sectionLinkTitle, titleClassName), children: link.title })
29934
30040
  ] })
29935
30041
  }
29936
30042
  );
@@ -29938,18 +30044,18 @@ function SectionLink({
29938
30044
  function MegaNavigationItem({
29939
30045
  section,
29940
30046
  variant,
30047
+ shadow,
29941
30048
  fullBleed,
29942
30049
  panelMetrics,
29943
30050
  onOpenIntent,
29944
30051
  dropdownBackgroundClassName,
29945
- syncBorderToSurface,
29946
30052
  triggerClassName,
29947
30053
  triggerActiveClassName,
29948
- triggerActiveBorderClassName,
29949
30054
  featuredLinkClassName,
29950
30055
  sectionLinkClassName,
29951
30056
  sectionLinkTitleClassName
29952
30057
  }) {
30058
+ const styles5 = navigationMenuMainNavigationVariantStyles[variant];
29953
30059
  if (!section.links?.length) {
29954
30060
  return /* @__PURE__ */ jsx(
29955
30061
  TopLevelItem,
@@ -29957,10 +30063,8 @@ function MegaNavigationItem({
29957
30063
  href: section.href,
29958
30064
  title: section.title,
29959
30065
  variant,
29960
- syncBorderToSurface,
29961
30066
  triggerClassName,
29962
- triggerActiveClassName,
29963
- triggerActiveBorderClassName
30067
+ triggerActiveClassName
29964
30068
  }
29965
30069
  );
29966
30070
  }
@@ -29970,14 +30074,11 @@ function MegaNavigationItem({
29970
30074
  {
29971
30075
  className: cn(
29972
30076
  "relative mb-0 h-auto min-h-14 w-auto justify-start rounded-none bg-transparent p-4 text-base leading-6 font-bold lg:px-8 [&_svg]:h-6 [&_svg]:w-6",
29973
- navigationMenuMainNavigationTriggerToneStyles({ variant }),
29974
- navigationMenuMainNavigationTriggerActiveStyles({ variant }),
30077
+ styles5.triggerTone,
30078
+ styles5.triggerActive,
29975
30079
  triggerClassName,
29976
30080
  triggerActiveClassName,
29977
- "data-[state=open]:shadow-[inset_0_-2px_0_0_currentColor]",
29978
- syncBorderToSurface && "before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-transparent",
29979
- syncBorderToSurface && navigationMenuMainNavigationTriggerEdgeStyles({ variant }),
29980
- syncBorderToSurface && triggerActiveBorderClassName
30081
+ "data-[state=open]:shadow-[inset_0_-4px_0_0_currentColor]"
29981
30082
  ),
29982
30083
  onPointerEnter: onOpenIntent,
29983
30084
  children: section.title
@@ -29987,7 +30088,7 @@ function MegaNavigationItem({
29987
30088
  NavigationMenuContent,
29988
30089
  {
29989
30090
  className: cn(
29990
- "left-0 w-full p-0 pr-0 whitespace-normal group-data-[viewport=false]/navigation-menu:mt-0 group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:bg-transparent group-data-[viewport=false]/navigation-menu:shadow-none md:w-full"
30091
+ "left-0 w-full p-0 pr-0 whitespace-normal group-data-[viewport=false]/navigation-menu:mt-0 group-data-[viewport=false]/navigation-menu:!overflow-visible group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:bg-transparent group-data-[viewport=false]/navigation-menu:shadow-none data-[motion=from-end]:[--tw-enter-translate-x:0] data-[motion=from-start]:[--tw-enter-translate-x:0] data-[motion=to-end]:[--tw-exit-translate-x:0] data-[motion=to-start]:[--tw-exit-translate-x:0] data-[motion^=from-]:!animate-none data-[motion^=from-]:[--tw-enter-opacity:1] data-[motion^=from-]:[--tw-enter-rotate:0] data-[motion^=from-]:[--tw-enter-scale:1] data-[motion^=from-]:[--tw-enter-translate-y:0] data-[motion^=to-]:!animate-none data-[motion^=to-]:[--tw-exit-opacity:1] data-[motion^=to-]:[--tw-exit-rotate:0] data-[motion^=to-]:[--tw-exit-scale:1] data-[motion^=to-]:[--tw-exit-translate-y:0] group-data-[viewport=false]/navigation-menu:data-[state=closed]:!animate-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:[--tw-exit-opacity:1] group-data-[viewport=false]/navigation-menu:data-[state=closed]:[--tw-exit-scale:1] group-data-[viewport=false]/navigation-menu:data-[state=open]:!animate-none group-data-[viewport=false]/navigation-menu:data-[state=open]:[--tw-enter-opacity:1] group-data-[viewport=false]/navigation-menu:data-[state=open]:[--tw-enter-scale:1] md:w-full"
29991
30092
  ),
29992
30093
  style: fullBleed && panelMetrics ? {
29993
30094
  left: `${-panelMetrics.left}px`,
@@ -29998,7 +30099,9 @@ function MegaNavigationItem({
29998
30099
  "div",
29999
30100
  {
30000
30101
  className: cn(
30001
- navigationMenuMainNavigationDropdownSurfaceStyles({ variant }),
30102
+ "relative z-10 w-full",
30103
+ shadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
30104
+ styles5.dropdownSurface,
30002
30105
  dropdownBackgroundClassName
30003
30106
  ),
30004
30107
  children: /* @__PURE__ */ jsxs(
@@ -30042,18 +30145,18 @@ function MegaNavigationItem({
30042
30145
  function NavigationMenuMainNavigation({
30043
30146
  navigation,
30044
30147
  id: id3 = "nsw-main-navigation",
30045
- variant = "grey",
30148
+ variant = "white",
30046
30149
  borderPosition = "none",
30150
+ shadow = true,
30047
30151
  className,
30048
30152
  responsive = true,
30049
30153
  sticky = true,
30050
- fullBleed = false,
30154
+ fullBleed = true,
30051
30155
  backgroundClassName,
30052
30156
  dropdownBackgroundClassName,
30053
30157
  borderClassName,
30054
30158
  triggerClassName,
30055
30159
  triggerActiveClassName,
30056
- triggerActiveBorderClassName,
30057
30160
  featuredLinkClassName,
30058
30161
  sectionLinkClassName,
30059
30162
  sectionLinkTitleClassName,
@@ -30069,7 +30172,6 @@ function NavigationMenuMainNavigation({
30069
30172
  const hasTopBorder = resolvedBorderPosition === "top" || resolvedBorderPosition === "both";
30070
30173
  const hasBottomBorder = resolvedBorderPosition === "bottom" || resolvedBorderPosition === "both";
30071
30174
  const hasBorder = hasTopBorder || hasBottomBorder;
30072
- const syncBorderToSurface = hasBorder;
30073
30175
  const [panelMetrics, setPanelMetrics] = React5.useState({
30074
30176
  left: 0,
30075
30177
  width: 0,
@@ -30136,10 +30238,11 @@ function NavigationMenuMainNavigation({
30136
30238
  role: "navigation",
30137
30239
  id: id3,
30138
30240
  className: cn(
30139
- "z-40 shadow-md shadow-grey-900/5 dark:shadow-none",
30140
- navigationMenuMainNavigationSurfaceStyles({ variant }),
30241
+ "z-40",
30242
+ shadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
30243
+ navigationMenuMainNavigationVariantStyles[variant].surface,
30141
30244
  backgroundClassName,
30142
- hasBorder && navigationMenuMainNavigationBorderStyles({ variant }),
30245
+ hasBorder && navigationMenuMainNavigationVariantStyles[variant].border,
30143
30246
  hasBorder && borderClassName,
30144
30247
  hasTopBorder && "border-t",
30145
30248
  hasBottomBorder && "border-b",
@@ -30166,14 +30269,13 @@ function NavigationMenuMainNavigation({
30166
30269
  {
30167
30270
  section,
30168
30271
  variant,
30272
+ shadow,
30169
30273
  fullBleed,
30170
30274
  panelMetrics,
30171
30275
  onOpenIntent: cancelCloseTimer,
30172
30276
  dropdownBackgroundClassName,
30173
- syncBorderToSurface,
30174
30277
  triggerClassName,
30175
30278
  triggerActiveClassName,
30176
- triggerActiveBorderClassName,
30177
30279
  featuredLinkClassName,
30178
30280
  sectionLinkClassName,
30179
30281
  sectionLinkTitleClassName