@royaloperahouse/harmonic 1.0.8-e → 1.0.9

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.
@@ -1,13 +1,11 @@
1
1
  export declare const AccordionContainer: import("styled-components").StyledComponent<"div", any, {
2
- showTopLine?: boolean | undefined;
3
- showBottomLine?: boolean | undefined;
2
+ showLine?: boolean | undefined;
4
3
  }, never>;
5
4
  export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", any, {
6
5
  isVisible: boolean;
7
6
  }, never>;
8
7
  export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {
9
8
  hasChildren?: boolean | undefined;
10
- titleMargin?: string | undefined;
11
9
  }, never>;
12
10
  export declare const TitleText: import("styled-components").StyledComponent<({ children, size, color, className, tag: Tag, }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
13
11
  export declare const ContentContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {
@@ -3,70 +3,6 @@ import type { TCustomStrategyTabsFilterProps } from '../../../types';
3
3
  /**
4
4
  * A controlled filter button group that supports single- and multi-select strategies.
5
5
  * The consumer owns the selection state and receives the complete clicked item.
6
- * A horizontally scrollable tabs filter component used to display
7
- * selectable strategy tabs with configurable styling and selection behavior.
8
- *
9
- * Features:
10
- * - Supports both single-select and multi-select tab scenarios
11
- * - Displays an optional icon on selected tabs
12
- * - Allows customization of colors and selected icon through `customViewConfig`
13
- * - Applies default styling when configuration values are omitted
14
- * - Emits the clicked tab item through `onClick`
15
- *
16
- * @component
17
- *
18
- * @param {TCustomStrategyTabsFilterProps['items']} items
19
- * Collection of tabs to render.
20
- *
21
- * @param {string} [className]
22
- * Optional CSS class name applied to the root scroll container.
23
- *
24
- * @param {<T>(item: TCustomStrategyTabsFilterProps['items'][number]) => T} onClick
25
- * Called when a tab is clicked. Receives the full clicked item (including
26
- * `allowedSelectedWith`). The parent is responsible for computing the next
27
- * `items` array and passing it back down with updated `isSelected` values.
28
- * as long as no return statement `type` is bing inferred automatically as void
29
- *
30
- * @param [customViewConfig]
31
- * Optional visual configuration used to customize:
32
- * - selected tab icon
33
- * - selected/unselected background colors
34
- * - selected/unselected text colors
35
- * - hover color
36
- * - pressed color
37
- *
38
- * Any omitted configuration values will fall back to the component defaults.
39
- *
40
- * @returns { React.JSX.Element}
41
- *
42
- * @example
43
- * ```tsx
44
- * * @example Controlled selection with custom rules
45
- * * The component does not manage selection itself. The parent owns `items` (including
46
- * * `isSelected`) and updates that state in `onClick`. Use `allowedSelectedWith` on each
47
- * * item to describe which other tab IDs may stay selected when that tab is chosen.
48
- * *
49
- * * ```tsx
50
- * * const [items, setItems] = useState<TCustomStrategyTabsFilterItem[]>([
51
- * * { id: 'all', text: 'All events', isSelected: true, allowedSelectedWith: [] },
52
- * * { id: 'opera', text: 'Opera', isSelected: false, allowedSelectedWith: ['ballet'] },
53
- * * { id: 'ballet', text: 'Ballet', isSelected: false, allowedSelectedWith: ['opera'] },
54
- * * ]);
55
- * *
56
- * * const handleClick = (clickedItem: TCustomStrategyTabsFilterItem) => {
57
- * * setItems((current) =>
58
- * * current.map((item) => {
59
- * * if (item.id === clickedItem.id) {
60
- * * return { ...item, isSelected: !item.isSelected };
61
- * * }
62
- * *
63
- * * const mayStaySelected = clickedItem.allowedSelectedWith?.includes(item.id);
64
- * * return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
65
- * * })
66
- * * );
67
- * * };
68
- * *
69
- * * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
70
6
  */
71
7
  declare const CustomStrategyTabsFilter: ({ items, className, ariaLabel, onClick, customViewConfig, }: TCustomStrategyTabsFilterProps) => React.JSX.Element;
72
8
  export default CustomStrategyTabsFilter;
@@ -3,5 +3,5 @@ import { ICreditListing } from '../../../../types';
3
3
  export declare const DEFAULT_COLUMN_COUNT = 4;
4
4
  export declare const DEFAULT_LARGE_COLUMN_SPAN = 2;
5
5
  export declare const DEFAULT_CHARACTER_THRESHOLD = 180;
6
- declare const CreditListing: ({ roles, columnCount, expandLargeEntries, largeColumnSpan, characterThreshold, className, }: ICreditListing) => React.JSX.Element;
6
+ declare const CreditListing: ({ roles, columnCount, expandLargeEntries, largeColumnSpan, characterThreshold, }: ICreditListing) => React.JSX.Element;
7
7
  export default CreditListing;
@@ -4,5 +4,6 @@ export declare const CreditListingWrapper: import("styled-components").StyledCom
4
4
  } & {
5
5
  columnCount: number;
6
6
  }, never>;
7
+ export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
7
8
  export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
8
9
  export declare const CreditWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,6 +1,6 @@
1
1
  interface FocusableTabProps {
2
2
  hide?: boolean;
3
3
  }
4
- export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
4
+ export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
5
5
  export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export {};
@@ -350,325 +350,6 @@
350
350
  font-display: swap;
351
351
  }
352
352
 
353
- /* ~~~~~ General Styling Classes ~~~~~ */
354
- .typography_color-primary__LOfDi {
355
- color: var(--color-primary);
356
- }
357
-
358
- .typography_color-black__6MHRL {
359
- color: var(--color-base-black);
360
- }
361
-
362
- .typography_color-white__PfW5s {
363
- color: var(--color-base-white);
364
- }
365
-
366
- .typography_color-red__iPlbG {
367
- color: var(--color-primary-red);
368
- }
369
-
370
- .typography_color-grey__GA1c2 {
371
- color: var(--color-base-dark-grey);
372
- }
373
-
374
- .typography_color-inherit__RDd0Y {
375
- color: inherit;
376
- }
377
-
378
- .typography_em__E6tX- {
379
- font-style: italic;
380
- }
381
- /* ~~~ */
382
-
383
- /* Display Headers */
384
- .typography_display__-F3p4 {
385
- margin: 0;
386
- font-family: var(--font-family-sans);
387
- line-height: 100%;
388
-
389
- &.typography_large__uq0zC {
390
- font-size: 96px;
391
- font-weight: 700;
392
- letter-spacing: -5px;
393
- }
394
-
395
- &.typography_small__wfQ0K {
396
- font-size: 68px;
397
- font-weight: 500;
398
- letter-spacing: -3px;
399
- }
400
-
401
- /* Serif and Italic styles */
402
- &.typography_serif__VSO38,
403
- &.typography_em__E6tX- {
404
- font-family: var(--font-family-serif);
405
- font-weight: 500;
406
- }
407
-
408
- /* Serif and Italic adjustments */
409
- &.typography_large__uq0zC.typography_serif__VSO38,
410
- &.typography_large__uq0zC.typography_em__E6tX- {
411
- letter-spacing: -3px;
412
- }
413
-
414
- &.typography_small__wfQ0K.typography_serif__VSO38,
415
- &.typography_small__wfQ0K.typography_em__E6tX- {
416
- letter-spacing: -2px;
417
- }
418
-
419
- @media (max-width: 699px) {
420
- &.typography_large__uq0zC {
421
- font-size: 38px;
422
- letter-spacing: -1.5px;
423
- }
424
-
425
- &.typography_small__wfQ0K {
426
- font-size: 32px;
427
- letter-spacing: -1.5px;
428
- }
429
-
430
- &.typography_large__uq0zC.typography_serif__VSO38,
431
- &.typography_large__uq0zC.typography_em__E6tX-,
432
- &.typography_small__wfQ0K.typography_serif__VSO38,
433
- &.typography_small__wfQ0K.typography_em__E6tX- {
434
- letter-spacing: -0.5px;
435
- }
436
- }
437
- }
438
-
439
- /* Headers */
440
- .typography_header__BexiD {
441
- margin: 0;
442
- font-family: var(--font-family-sans);
443
- font-weight: 500;
444
-
445
- &.typography_large__uq0zC {
446
- font-size: 44px;
447
- line-height: 48px;
448
- letter-spacing: -1.5px;
449
- }
450
-
451
- &.typography_medium__K0uZD {
452
- font-size: 34px;
453
- line-height: 40px;
454
- letter-spacing: -1px;
455
- }
456
-
457
- &.typography_small__wfQ0K {
458
- font-size: 26px;
459
- line-height: 32px;
460
- letter-spacing: -0.5px;
461
- }
462
-
463
- /* Serif and Italic styles */
464
- &.typography_serif__VSO38,
465
- &.typography_em__E6tX- {
466
- font-family: var(--font-family-serif);
467
- }
468
-
469
- /* Serif and Italic letter-spacing overrides */
470
- &.typography_large__uq0zC.typography_serif__VSO38,
471
- &.typography_large__uq0zC.typography_em__E6tX- {
472
- letter-spacing: -0.5px;
473
- }
474
-
475
- &.typography_medium__K0uZD.typography_serif__VSO38,
476
- &.typography_medium__K0uZD.typography_em__E6tX- {
477
- letter-spacing: -0.5px;
478
- }
479
-
480
- &.typography_small__wfQ0K.typography_serif__VSO38,
481
- &.typography_small__wfQ0K.typography_em__E6tX- {
482
- letter-spacing: -0.5px;
483
- }
484
-
485
- @media (max-width: 699px) {
486
- &.typography_large__uq0zC {
487
- font-size: 28px;
488
- line-height: 34px;
489
- letter-spacing: -1.5px;
490
- }
491
-
492
- &.typography_medium__K0uZD {
493
- font-size: 24px;
494
- line-height: 28px;
495
- letter-spacing: -1px;
496
- }
497
-
498
- &.typography_small__wfQ0K {
499
- font-size: 20px;
500
- line-height: 26px;
501
- letter-spacing: -0.75px;
502
- }
503
-
504
- /* Mobile overrides for serif/italic letter-spacing */
505
- &.typography_large__uq0zC.typography_serif__VSO38,
506
- &.typography_large__uq0zC.typography_em__E6tX-,
507
- &.typography_medium__K0uZD.typography_serif__VSO38,
508
- &.typography_medium__K0uZD.typography_em__E6tX-,
509
- &.typography_small__wfQ0K.typography_serif__VSO38,
510
- &.typography_small__wfQ0K.typography_em__E6tX- {
511
- letter-spacing: -0.5px;
512
- }
513
- }
514
- }
515
-
516
- /* Subtitle */
517
- .typography_subtitle__aoFTV {
518
- margin: 0;
519
- font-family: var(--font-family-sans);
520
- font-weight: 500;
521
-
522
- &.typography_large__uq0zC {
523
- font-size: 19px;
524
- line-height: 26px;
525
- letter-spacing: -0.5px;
526
- }
527
-
528
- &.typography_small__wfQ0K {
529
- font-size: 17px;
530
- line-height: 24px;
531
- letter-spacing: -0.5px;
532
- }
533
-
534
- @media (max-width: 699px) {
535
- &.typography_large__uq0zC {
536
- font-size: 17px;
537
- line-height: 24px;
538
- letter-spacing: -0.5px;
539
- }
540
-
541
- &.typography_small__wfQ0K {
542
- font-size: 14px;
543
- line-height: 20px;
544
- letter-spacing: -0.2px;
545
- }
546
- }
547
- }
548
-
549
- /* Body Copy */
550
- .typography_bodycopy__vYtQ8 {
551
- margin: 0;
552
- font-family: var(--font-family-sans);
553
- font-weight: 400;
554
-
555
- &.typography_large__uq0zC {
556
- font-size: 19px;
557
- line-height: 26px;
558
- letter-spacing: -0.5px;
559
- }
560
-
561
- &.typography_medium__K0uZD {
562
- font-size: 17px;
563
- line-height: 24px;
564
- letter-spacing: -0.5px;
565
- }
566
-
567
- &.typography_small__wfQ0K {
568
- font-size: 14px;
569
- line-height: 20px;
570
- letter-spacing: -0.5px;
571
- }
572
-
573
- @media (max-width: 699px) {
574
- &.typography_large__uq0zC {
575
- font-size: 17px;
576
- line-height: 24px;
577
- letter-spacing: -0.5px;
578
- }
579
-
580
- &.typography_medium__K0uZD {
581
- font-size: 14px;
582
- line-height: 20px;
583
- letter-spacing: -0.2px;
584
- }
585
-
586
- &.typography_small__wfQ0K {
587
- font-size: 11px;
588
- line-height: 16px;
589
- letter-spacing: -0.2px;
590
- }
591
- }
592
- }
593
-
594
- /* Overline */
595
- .typography_overline__EnUK3 {
596
- margin: 0;
597
- font-family: var(--font-family-sans);
598
- font-weight: 500;
599
- text-transform: uppercase;
600
-
601
- &.typography_large__uq0zC {
602
- font-size: 14px;
603
- line-height: 18px;
604
- letter-spacing: 0.3px;
605
- }
606
-
607
- &.typography_small__wfQ0K {
608
- font-size: 12px;
609
- line-height: 14px;
610
- letter-spacing: 0.2px;
611
- }
612
-
613
- @media (max-width: 699px) {
614
- &.typography_large__uq0zC {
615
- line-height: 17px;
616
- letter-spacing: 0.3px; /* Added to ensure it stays */
617
- }
618
-
619
- &.typography_small__wfQ0K {
620
- line-height: 14px;
621
- letter-spacing: 0.3px;
622
- }
623
- }
624
- }
625
-
626
- /* Button Text */
627
- .typography_buttontext__vcxNi {
628
- margin: 0;
629
- font-family: var(--font-family-sans);
630
- font-size: 17px;
631
- line-height: 20px;
632
- letter-spacing: -0.5px;
633
- font-weight: 400;
634
-
635
- @media (max-width: 699px) {
636
- font-weight: 500;
637
- line-height: 17px;
638
- }
639
- }
640
-
641
- /* Caption Text */
642
- .typography_captiontext__91UFb {
643
- margin: 0;
644
- font-family: var(--font-family-sans);
645
- font-weight: 400;
646
- font-size: 17px;
647
- line-height: 24px;
648
- letter-spacing: -0.5px;
649
-
650
- @media (max-width: 699px) {
651
- font-size: 14px;
652
- line-height: 20px;
653
- letter-spacing: -0.2px;
654
- }
655
- }
656
-
657
- /* Navigation Text */
658
- .typography_navigationtext__YfGf7 {
659
- margin: 0;
660
- font-family: var(--font-family-sans);
661
- font-size: 19px;
662
- line-height: 19px;
663
- letter-spacing: 0.4px;
664
- font-weight: 500;
665
-
666
- @media (max-width: 699px) {
667
- font-size: 17px;
668
- line-height: 17px;
669
- }
670
- }
671
-
672
353
  .core-theme-module_coreTheme__pWxYB {
673
354
  /* RBO Red */
674
355
  /* Primary Palette */