@czi-sds/components 22.13.3 → 22.15.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.
@@ -29,7 +29,7 @@ import { ListItemProps as RawListItemProps } from "@mui/material";
29
29
  import { ListSubheaderProps as RawListSubheaderProps } from "@mui/material";
30
30
  import { MenuProps as RawMenuProps } from "@mui/material";
31
31
  import { ChipProps as ChipProps$0 } from "@mui/material";
32
- import { LinkProps as LinkProps$1 } from "@mui/material";
32
+ import { LinkProps as LinkProps$0 } from "@mui/material";
33
33
  import { MenuProps as MenuProps$0 } from "@mui/material";
34
34
  import { TabProps as RawTabProps } from "@mui/material";
35
35
  import { TabsProps as RawTabsProps } from "@mui/material";
@@ -77,52 +77,72 @@ interface AccentColor {
77
77
  }
78
78
  interface BaseColor {
79
79
  backgroundPrimary: string;
80
+ backgroundPrimaryDark: string;
80
81
  backgroundPrimaryInverse: string;
81
82
  backgroundSecondary: string;
83
+ backgroundSecondaryOnDark: string;
82
84
  backgroundSecondaryInverse: string;
83
85
  backgroundTertiary: string;
84
86
  surface: string;
87
+ surfaceOnDark: string;
85
88
  surfaceInverse: string;
86
89
  textPrimary: string;
90
+ textPrimaryOnDark: string;
87
91
  textPrimaryInverse: string;
88
92
  textSecondary: string;
93
+ textSecondaryOnDark: string;
89
94
  textSecondaryInverse: string;
90
95
  textTertiary: string;
96
+ textTertiaryOnDark: string;
91
97
  textTertiaryInverse: string;
92
98
  textDisabled: string;
99
+ textDisabledOnDark: string;
93
100
  textDisabledInverse: string;
94
101
  textOnFill: string;
95
102
  fillHover: string;
103
+ fillHoverOnDark: string;
96
104
  fillHoverInverse: string;
97
105
  fillPressed: string;
106
+ fillPressedOnDark: string;
98
107
  fillPressedInverse: string;
99
108
  fillPrimary: string;
100
109
  fillOpen: string;
110
+ fillOpenOnDark: string;
101
111
  fillOpenInverse: string;
102
112
  fillSelected: string;
103
113
  fillDisabled: string;
104
114
  divider: string;
115
+ dividerOnDark: string;
105
116
  dividerInverse: string;
106
117
  borderPrimary: string;
118
+ borderPrimaryOnDark: string;
107
119
  borderPrimaryInverse: string;
108
120
  borderSecondary: string;
109
121
  borderPrimaryHover: string;
122
+ borderPrimaryHoverOnDark: string;
110
123
  borderPrimaryHoverInverse: string;
111
124
  borderOnFill: string;
112
125
  borderPrimaryPressed: string;
126
+ borderPrimaryPressedOnDark: string;
113
127
  borderPrimaryPressedInverse: string;
114
128
  borderPrimaryDisabled: string;
129
+ borderPrimaryDisabledOnDark: string;
115
130
  borderPrimaryDisabledInverse: string;
116
131
  ornamentDisabled: string;
132
+ ornamentDisabledOnDark: string;
117
133
  ornamentDisabledInverse: string;
118
134
  ornamentOnFill: string;
119
135
  ornamentPrimary: string;
136
+ ornamentPrimaryOnDark: string;
120
137
  ornamentPrimaryInverse: string;
121
138
  ornamentSecondary: string;
139
+ ornamentSecondaryOnDark: string;
122
140
  ornamentSecondaryInverse: string;
123
141
  ornamentSecondaryHover: string;
142
+ ornamentSecondaryHoverOnDark: string;
124
143
  ornamentSecondaryHoverInverse: string;
125
144
  ornamentSecondaryPressed: string;
145
+ ornamentSecondaryPressedOnDark: string;
126
146
  ornamentSecondaryPressedInverse: string;
127
147
  }
128
148
  interface IntentColor {
@@ -374,6 +394,7 @@ interface Color {
374
394
  interface Colors {
375
395
  blue: Color;
376
396
  gray: Color;
397
+ indigo: Color;
377
398
  green: Color;
378
399
  purple: Color;
379
400
  red: Color;
@@ -688,7 +709,7 @@ declare const Alert: (props: AlertProps) => JSX.Element;
688
709
  interface IconNameToSizes {
689
710
  Bacteria: "xs" | "s" | "l" | "xl";
690
711
  BarChartHorizontal3: "xs" | "s";
691
- BarChartVertical3: "xs" | "s";
712
+ BarChartVertical3: "xs" | "s" | "l" | "xl";
692
713
  BarChartVertical4: "xs" | "s";
693
714
  Book: "xs" | "s" | "l" | "xl";
694
715
  Check: "xs" | "s";
@@ -702,6 +723,7 @@ interface IconNameToSizes {
702
723
  ChevronUp: "xs" | "s" | "l" | "xl";
703
724
  ChevronUp2: "xs" | "s";
704
725
  CirclesOverlap2: "xs" | "s" | "l" | "xl";
726
+ Cli: "l" | "xl";
705
727
  Code: "xs" | "s" | "l" | "xl";
706
728
  Compass: "l" | "xl";
707
729
  Copy: "xs" | "s" | "l" | "xl";
@@ -747,6 +769,7 @@ interface IconNameToSizes {
747
769
  LockCircle: "xs" | "s";
748
770
  Minus: "xs" | "s";
749
771
  Open: "xs" | "s";
772
+ Package: "l" | "xl";
750
773
  Pause: "l" | "xl";
751
774
  People: "xs" | "s" | "l" | "xl";
752
775
  Percentage: "xs" | "s";
@@ -809,7 +832,7 @@ interface IconExtraProps<IconName extends keyof IconNameToSizes> extends CommonT
809
832
  sdsIcon: IconName;
810
833
  sdsSize: IconNameToSizes[IconName];
811
834
  }
812
- type SdsIconColorType = "blue" | "gray" | "green" | "purple" | "red" | "yellow";
835
+ type SdsIconColorType = "blue" | "gray" | "green" | "purple" | "indigo" | "red" | "yellow";
813
836
  interface SdsIconWithColor$0 {
814
837
  color?: SdsIconColorType;
815
838
  shade?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
@@ -833,6 +856,15 @@ interface AccessibleInputSearchProps {
833
856
  handleSubmit?: (value: string) => void;
834
857
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
835
858
  customTheme?: "light" | "dark" | "auto";
859
+ classes?: {
860
+ root?: string;
861
+ label?: string;
862
+ input?: string;
863
+ endAdornment?: string;
864
+ startAdornment?: string;
865
+ clearButton?: string;
866
+ searchButton?: string;
867
+ };
836
868
  }
837
869
  type InputSearchProps = RawTextFieldSearchProps & AccessibleInputSearchProps & InputSearchExtraProps;
838
870
  /**
@@ -1310,7 +1342,19 @@ interface InputDropdownProps extends CommonThemeProps, Omit<ButtonProps$0, (type
1310
1342
  style?: React.CSSProperties;
1311
1343
  }
1312
1344
  type SdsInputDropdownProps = InputDropdownProps;
1313
- type InputDropdownProps$0 = SdsInputDropdownProps;
1345
+ type InputDropdownProps$0 = SdsInputDropdownProps & {
1346
+ classes?: {
1347
+ root?: string;
1348
+ label?: string;
1349
+ labelDetailsWrapper?: string;
1350
+ contentWrapper?: string;
1351
+ details?: string;
1352
+ counter?: string;
1353
+ iconWrapper?: string;
1354
+ chevronIcon?: string;
1355
+ minimalDetails?: string;
1356
+ };
1357
+ };
1314
1358
  /**
1315
1359
  * @see https://mui.com/material-ui/react-button/
1316
1360
  */
@@ -1431,29 +1475,50 @@ declare const StyledMetadataText: import("@emotion/styled").StyledComponent<impo
1431
1475
  * @see https://mui.com/material-ui/react-card/
1432
1476
  */
1433
1477
  declare const ContentCard: React.ForwardRefExoticComponent<(Omit<ImageContentCardProps, "ref"> | Omit<IconContentCardProps, "ref"> | Omit<NoneContentCardProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
1434
- type DialogPaperProps = PaperProps;
1478
+ interface DialogPaperProps extends PaperProps {
1479
+ sdsSize?: "xs" | "s" | "m" | "l";
1480
+ }
1435
1481
  /**
1436
1482
  * @see https://mui.com/material-ui/react-paper/
1437
1483
  */
1438
1484
  declare const DialogPaper: import("react").ForwardRefExoticComponent<Omit<DialogPaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
1439
- type SdsSize = "xs" | "s" | "m" | "l";
1440
- declare const DialogContext: import("react").Context<{
1441
- sdsSize: SdsSize;
1442
- }>;
1443
1485
  interface DialogExtraProps {
1444
1486
  canClickOutsideClose?: boolean;
1445
1487
  onClose?: (event: object, reason: string) => void;
1446
1488
  sdsSize?: "xs" | "s" | "m" | "l";
1447
1489
  PaperComponent?: ComponentType<DialogPaperProps>;
1448
1490
  DialogComponent?: ComponentType<RawDialogProps>;
1491
+ classes?: {
1492
+ root?: string;
1493
+ paper?: string;
1494
+ title?: string;
1495
+ actions?: string;
1496
+ };
1449
1497
  }
1450
1498
  type DialogProps = RawDialogProps & DialogExtraProps;
1451
1499
  /**
1452
1500
  * @see https://mui.com/material-ui/react-dialog/
1453
1501
  */
1454
1502
  declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
1503
+ interface DialogActionsProps extends RawDialogActionsProps {
1504
+ sdsSize?: DialogExtraProps["sdsSize"];
1505
+ buttonPosition?: "left" | "right";
1506
+ classes?: {
1507
+ root?: string;
1508
+ };
1509
+ }
1510
+ /**
1511
+ * @see https://mui.com/material-ui/react-dialog/
1512
+ */
1513
+ declare const DialogActions: import("react").ForwardRefExoticComponent<Omit<DialogActionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
1514
+ type DialogContentProps = RawDialogContentProps & {
1515
+ classes?: {
1516
+ root?: string;
1517
+ };
1518
+ };
1519
+ declare const _default: import("react").ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
1455
1520
  interface DialogTitleExtraProps extends CommonThemeProps {
1456
- sdsSize: "xs" | "s" | "m" | "l";
1521
+ sdsSize?: DialogExtraProps["sdsSize"];
1457
1522
  }
1458
1523
  declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
1459
1524
  ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
@@ -1470,27 +1535,52 @@ declare const Overline: import("@emotion/styled").StyledComponent<import("@mui/m
1470
1535
  }, "zIndex" | "typography" | "fontFamily" | "m" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
1471
1536
  theme?: import("@emotion/react").Theme | undefined;
1472
1537
  } & DialogTitleExtraProps, {}, {}>;
1473
- interface DialogActionsExtraProps extends CommonThemeProps {
1474
- buttonPosition?: "left" | "right";
1475
- sdsSize: DialogTitleExtraProps["sdsSize"];
1476
- }
1477
- type DialogActionsProps = Omit<DialogActionsExtraProps, "sdsSize"> & RawDialogActionsProps;
1478
- /**
1479
- * @see https://mui.com/material-ui/react-dialog/
1480
- */
1481
- declare const DialogActions: import("react").ForwardRefExoticComponent<Omit<DialogActionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
1482
- type DialogContentProps = RawDialogContentProps;
1483
- declare const _default: import("react").ForwardRefExoticComponent<Omit<RawDialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
1484
- interface DialogTitleProps extends Omit<DialogTitleExtraProps, "sdsSize">, RawDialogTitleProps {
1538
+ interface DialogTitleProps extends DialogTitleExtraProps, RawDialogTitleProps {
1485
1539
  title?: string;
1486
1540
  subtitle?: string;
1487
1541
  overline?: string;
1488
1542
  onClose?: () => void;
1543
+ classes?: {
1544
+ root?: string;
1545
+ title?: string;
1546
+ subtitle?: string;
1547
+ overline?: string;
1548
+ closeButton?: string;
1549
+ };
1489
1550
  }
1490
- /**
1491
- * @see https://mui.com/material-ui/react-dialog/
1492
- */
1493
1551
  declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
1552
+ interface HeroProps {
1553
+ className?: string;
1554
+ heroHeight?: string;
1555
+ children?: ReactNode;
1556
+ overlayContainerMinMargin?: {
1557
+ small: number;
1558
+ medium: number;
1559
+ large: number;
1560
+ };
1561
+ headerText?: string;
1562
+ headerFontSize?: "s" | "m" | "l";
1563
+ captionText?: string;
1564
+ textAlignment?: "left" | "center" | "right";
1565
+ hasInvertTextColor?: boolean;
1566
+ overlayContentWidth?: string;
1567
+ overlayContentPosition?: "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right";
1568
+ darkeningMask?: boolean;
1569
+ darkeningMaskColor?: string;
1570
+ darkeningMaskOpacity?: number;
1571
+ darkeningVignette?: boolean;
1572
+ overlayMedia?: ReactNode;
1573
+ overlayMediaPosition?: "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right";
1574
+ overlayMediaMaxHeight?: string;
1575
+ overlayMediaMaxWidth?: string;
1576
+ overlayMediaMargin?: string | {
1577
+ small: string;
1578
+ medium: string;
1579
+ large: string;
1580
+ };
1581
+ backgroundFill?: string | ReactNode;
1582
+ }
1583
+ declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
1494
1584
  interface CheckboxExtraProps extends CommonThemeProps {
1495
1585
  intent?: "default" | "negative" | "notice" | "positive";
1496
1586
  disabled?: boolean;
@@ -1501,6 +1591,16 @@ interface CheckboxContentProps extends Omit<MUICheckboxProps, "color" | "default
1501
1591
  intent?: "default" | "negative" | "notice" | "positive";
1502
1592
  label?: React.ReactNode;
1503
1593
  stage?: "checked" | "unchecked" | "indeterminate";
1594
+ classes?: {
1595
+ root?: string;
1596
+ labelCaptionContainer?: string;
1597
+ label?: string;
1598
+ caption?: string;
1599
+ checkbox?: string;
1600
+ checkboxCheckedIcon?: string;
1601
+ checkboxDefaultIcon?: string;
1602
+ checkboxIndeterminateIcon?: string;
1603
+ };
1504
1604
  }
1505
1605
  type CheckboxProps = CheckboxContentProps & CheckboxExtraProps;
1506
1606
  /**
@@ -1552,6 +1652,11 @@ interface AccessibleInputTextProps {
1552
1652
  label: React.ReactNode;
1553
1653
  placeholder?: string;
1554
1654
  id: string;
1655
+ classes?: {
1656
+ root?: string;
1657
+ label?: string;
1658
+ input?: string;
1659
+ };
1555
1660
  }
1556
1661
  type InputTextProps = RawTextFieldProps & InputTextExtraProps & AccessibleInputTextProps;
1557
1662
  /**
@@ -1568,25 +1673,15 @@ interface InputToggleExtraProps extends SwitchProps, CommonThemeProps {
1568
1673
  * @see https://mui.com/material-ui/react-switch/
1569
1674
  */
1570
1675
  declare const InputToggle: (props: InputToggleExtraProps) => import("react/jsx-runtime").JSX.Element;
1571
- type StyleProps$2 = CommonThemeProps;
1572
- // (thuang): Support `component` prop
1573
- // https://stackoverflow.com/a/66123108
1574
- type LinkProps<C extends React.ElementType = "a"> = RawLinkProps<C, {
1575
- component?: C;
1576
- }> & StyleProps$2 & {
1577
- fontWeight?: "normal" | "bold";
1578
- sdsStyle?: "default" | "dashed";
1579
- sdsSize?: "xs" | "s";
1580
- };
1581
- type RawLinkProps$0 = LinkProps;
1582
- type LinkProps$0<C extends React.ElementType = "a"> = RawLinkProps$0<C> & {
1676
+ type LinkProps<C extends React.ElementType = "a"> = RawLinkProps<C> & {
1583
1677
  fontWeight?: "normal" | "bold";
1584
1678
  sdsSize?: "xs" | "s";
1679
+ sdsStyle?: "default" | "dashed";
1585
1680
  };
1586
1681
  /**
1587
1682
  * @see https://mui.com/material-ui/react-link/
1588
1683
  */
1589
- declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps$0<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
1684
+ declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
1590
1685
  interface ListExtraProps extends CommonThemeProps {
1591
1686
  component?: unknown;
1592
1687
  marginBottom?: "xxxs" | "xxs" | "xs" | "s" | "m" | "l";
@@ -1629,14 +1724,14 @@ type MenuProps = RawMenuProps;
1629
1724
  * @see https://mui.com/material-ui/react-menu/
1630
1725
  */
1631
1726
  declare const Menu: (props: MenuProps) => JSX.Element;
1632
- interface StyleProps$3 extends CommonThemeProps {
1727
+ interface StyleProps$2 extends CommonThemeProps {
1633
1728
  search?: boolean;
1634
1729
  }
1635
1730
  // (thuang): This requires option to have a `name` property.
1636
1731
  interface DefaultMenuSelectOption {
1637
1732
  name: string;
1638
1733
  }
1639
- interface MenuSelectExtraProps extends StyleProps$3 {
1734
+ interface MenuSelectExtraProps extends StyleProps$2 {
1640
1735
  keepSearchOnSelect?: boolean;
1641
1736
  renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
1642
1737
  InputBaseProps?: Partial<InputSearchProps>;
@@ -1702,7 +1797,7 @@ interface FooterImage {
1702
1797
  linkProps?: Record<string, unknown>;
1703
1798
  }
1704
1799
  interface NavigationFooterProps {
1705
- hasInvertedStyle?: boolean;
1800
+ backgroundAppearance?: "matchBackground" | "dark";
1706
1801
  images?: FooterImage[];
1707
1802
  logo?: ReactNode;
1708
1803
  logoUrl?: string;
@@ -1724,7 +1819,7 @@ interface FooterLinkProps {
1724
1819
  showDivider: boolean;
1725
1820
  hasInvertedStyle?: boolean;
1726
1821
  }
1727
- declare function NavigationFooter({ hasInvertedStyle, images, logo, logoUrl, logoComponent, logoLinkProps, navItems, navLinks, tag, tagColor, title, ...rest }: NavigationFooterProps): import("react/jsx-runtime").JSX.Element;
1822
+ declare function NavigationFooter({ backgroundAppearance, images, logo, logoUrl, logoComponent, logoLinkProps, navItems, navLinks, tag, tagColor, title, ...rest }: NavigationFooterProps): import("react/jsx-runtime").JSX.Element;
1728
1823
  interface BaseNavigationHeaderPrimaryNavItem<T extends string> extends Record<string, unknown> {
1729
1824
  key: T;
1730
1825
  label: ReactNode;
@@ -1737,6 +1832,8 @@ interface TextNavigationHeaderPrimaryNavItem<T extends string> extends BaseNavig
1737
1832
  }
1738
1833
  interface DropdownItem {
1739
1834
  label: ReactNode;
1835
+ details?: string;
1836
+ icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
1740
1837
  section?: string;
1741
1838
  onClick?: (event: React.MouseEvent) => void;
1742
1839
  component?: React.ElementType;
@@ -1744,9 +1841,26 @@ interface DropdownItem {
1744
1841
  rel?: string;
1745
1842
  target?: string;
1746
1843
  }
1844
+ interface ActionItem {
1845
+ label: ReactNode;
1846
+ onClick?: (event: React.MouseEvent) => void;
1847
+ href?: string;
1848
+ component?: React.ElementType;
1849
+ target?: string;
1850
+ rel?: string;
1851
+ }
1852
+ interface SectionProps {
1853
+ actions?: ActionItem[];
1854
+ colSpan?: number;
1855
+ }
1747
1856
  interface DropdownNavigationHeaderPrimaryNavItem<T extends string> extends BaseNavigationHeaderPrimaryNavItem<T> {
1748
1857
  itemType: "dropdown";
1749
1858
  items: DropdownItem[];
1859
+ sectionProps?: Record<string, SectionProps>;
1860
+ defaultUrl?: string;
1861
+ component?: React.ElementType;
1862
+ target?: string;
1863
+ rel?: string;
1750
1864
  }
1751
1865
  type NavigationHeaderPrimaryNavItem<T extends string> = TextNavigationHeaderPrimaryNavItem<T> | DropdownNavigationHeaderPrimaryNavItem<T>;
1752
1866
  interface NavigationHeaderPrimaryNavProps<T extends string> {
@@ -1756,15 +1870,32 @@ interface NavigationHeaderPrimaryNavProps<T extends string> {
1756
1870
  items: NavigationHeaderPrimaryNavItem<T>[];
1757
1871
  onChange(value: T): void;
1758
1872
  value: T;
1873
+ sdsStyle?: "dropdown" | "drawer";
1874
+ expandedAccordion: string | null;
1875
+ setExpandedAccordion: (value: string | null) => void;
1876
+ accordionRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
1877
+ scrollToAccordion?: (accordionId: string) => void;
1878
+ onDrawerStateChange?: (isOpen: boolean) => void;
1879
+ topOffset?: number;
1880
+ onClose?: () => void;
1759
1881
  }
1760
1882
  interface TextHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps> {
1761
1883
  label: string;
1762
1884
  itemType: "text";
1885
+ tag?: string;
1886
+ tagColor?: SdsTagColorType;
1763
1887
  }
1764
1888
  interface DropdownHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps> {
1765
1889
  label: string;
1766
1890
  itemType: "dropdown";
1767
1891
  items: DropdownItem[];
1892
+ sectionProps?: Record<string, SectionProps>;
1893
+ tag?: string;
1894
+ tagColor?: SdsTagColorType;
1895
+ defaultUrl?: string;
1896
+ component?: React.ElementType;
1897
+ target?: string;
1898
+ rel?: string;
1768
1899
  }
1769
1900
  type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
1770
1901
  interface NavigationHeaderSecondaryNavProps {
@@ -1772,15 +1903,23 @@ interface NavigationHeaderSecondaryNavProps {
1772
1903
  items: NavigationHeaderSecondaryNavItem[];
1773
1904
  hasInvertedStyle?: boolean;
1774
1905
  isNarrow?: boolean;
1906
+ sdsStyle?: "dropdown" | "drawer";
1907
+ expandedAccordion: string | null;
1908
+ setExpandedAccordion: (value: string | null) => void;
1909
+ accordionRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
1910
+ scrollToAccordion?: (accordionId: string) => void;
1911
+ onDrawerStateChange?: (isOpen: boolean) => void;
1912
+ topOffset?: number;
1913
+ onClose?: () => void;
1775
1914
  }
1776
- interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
1915
+ interface NavigationHeaderProps<T extends string = string> extends Omit<AppBarProps, "position"> {
1777
1916
  activePrimaryNavKey?: string;
1778
1917
  buttons?: Partial<SdsProps$0 & ButtonProps$0>[] | React.ReactNode[];
1779
- hasInvertedStyle?: boolean;
1918
+ backgroundAppearance?: "matchBackground" | "dark";
1780
1919
  logo?: ReactNode;
1781
1920
  logoUrl?: string;
1782
1921
  logoLinkComponent?: ElementType;
1783
- logoLinkProps?: LinkProps$1;
1922
+ logoLinkProps?: LinkProps$0;
1784
1923
  scrollElevation?: boolean;
1785
1924
  primaryNavItems?: NavigationHeaderPrimaryNavItem<T>[];
1786
1925
  primaryNavPosition?: "left" | "right";
@@ -1794,6 +1933,9 @@ interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
1794
1933
  drawerOpen?: boolean;
1795
1934
  setDrawerOpen?: (open: boolean) => void;
1796
1935
  menuProps?: Partial<MenuProps$0>;
1936
+ sdsStyle?: "dropdown" | "drawer";
1937
+ isSticky?: boolean;
1938
+ topComponentSlot?: ReactNode;
1797
1939
  }
1798
1940
  type IconButtonProps = SdsIconButtonProps & {
1799
1941
  children?: string;
@@ -1974,5 +2116,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
1974
2116
  * @see https://mui.com/material-ui/react-table/
1975
2117
  */
1976
2118
  declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
1977
- export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps$0 as AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerIntentType, BannerProps, Banner, ButtonType$0 as ButtonType, ButtonTypeMap, ButtonSize, SdsIconButtonProps, SdsMinimalButtonProps, SdsButtonProps, SdsProps, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, DropdownInputDropdown as ComplexFilterInputDropdown, DropdownPopper as ComplexFilterPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPaper$1 as DropdownPaper, StyledPopper$1 as DropdownPopper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationFooterNavItem, FooterImage, NavigationFooterProps, NavItemProps, FooterLinkProps, NavigationFooter, NavigationHeader, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, Panel, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, AccentColor, BaseColor, IntentColor, SDSPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, TypographyStyles, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, SDSDarkThemeColors, SDSLightThemeColors, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeMediumXs, fontCodeMediumS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXxxs, fontTabularXxs, fontTabularXs, fontTabularS, fontTabularMediumXxxs, fontTabularMediumXxs, fontTabularMediumXs, fontTabularMediumS, fontTabularSemiboldXxxs, fontTabularSemiboldXxs, fontTabularSemiboldXs, fontTabularSemiboldS, fontTitle, fontTitleBoldS, fontTitleBoldM, fontTitleBoldL, fontLink, fontLinkL, fontLinkM, fontLinkS, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
1978
- export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
2119
+ export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps$0 as AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerIntentType, BannerProps, Banner, ButtonType$0 as ButtonType, ButtonTypeMap, ButtonSize, SdsIconButtonProps, SdsMinimalButtonProps, SdsButtonProps, SdsProps, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, DropdownInputDropdown as ComplexFilterInputDropdown, DropdownPopper as ComplexFilterPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogExtraProps, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPaper$1 as DropdownPaper, StyledPopper$1 as DropdownPopper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, Hero, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationFooterNavItem, FooterImage, NavigationFooterProps, NavItemProps, FooterLinkProps, NavigationFooter, NavigationHeader, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, Panel, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, AccentColor, BaseColor, IntentColor, SDSPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, TypographyStyles, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, SDSDarkThemeColors, SDSLightThemeColors, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeMediumXs, fontCodeMediumS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXxxs, fontTabularXxs, fontTabularXs, fontTabularS, fontTabularMediumXxxs, fontTabularMediumXxs, fontTabularMediumXs, fontTabularMediumS, fontTabularSemiboldXxxs, fontTabularSemiboldXxs, fontTabularSemiboldXs, fontTabularSemiboldS, fontTitle, fontTitleBoldS, fontTitleBoldM, fontTitleBoldL, fontLink, fontLinkL, fontLinkM, fontLinkS, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
2120
+ export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, HeroProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };