@govtechsg/sgds-web-component 3.21.1 → 3.21.2-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.21.1",
+  "version": "3.21.2-rc.0",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Tab/sgds-tab-panel.cjs.js

@@ -34,6 +34,7 @@ class SgdsTabPanel extends sgdsElement["default"] {
     }
     _handleActiveChange() {
         this.setAttribute("aria-hidden", this.active ? "false" : "true");
+        this.inert = !this.active;
     }
     render() {
         return lit.html `

package/react/components/Tab/sgds-tab-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-panel.cjs.js","sources":["../../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n */\nexport class SgdsTabPanel extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabPanelStyles];\n  private readonly attrId = ++id;\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  _handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["SgdsElement","html","classMap","tabPanelStyles","__decorate","property","watch"],"mappings":";;;;;;;;;;;;;AAOA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;AAIG;AACG,MAAO,YAAa,SAAQA,sBAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;QAEmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;AACd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAuB5D;IArBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AA7BM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,mBAAc,CAAzC,CAA2C;AAI3BC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGKD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3DD,gBAAA,CAAA;IADCE,WAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-tab-panel.cjs.js","sources":["../../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n */\nexport class SgdsTabPanel extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabPanelStyles];\n  private readonly attrId = ++id;\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  _handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n    this.inert = !this.active;\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["SgdsElement","html","classMap","tabPanelStyles","__decorate","property","watch"],"mappings":";;;;;;;;;;;;;AAOA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;AAIG;AACG,MAAO,YAAa,SAAQA,sBAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;QAEmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;AACd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AACjE,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC3B;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AA9BM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,mBAAc,CAAzC,CAA2C;AAI3BC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGKD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3DD,gBAAA,CAAA;IADCE,WAAK,CAAC,QAAQ,CAAC;AAIf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;;"}

package/react/components/Tab/sgds-tab-panel.js

@@ -30,6 +30,7 @@ class SgdsTabPanel extends SgdsElement {
     }
     _handleActiveChange() {
         this.setAttribute("aria-hidden", this.active ? "false" : "true");
+        this.inert = !this.active;
     }
     render() {
         return html `

package/react/components/Tab/sgds-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-panel.js","sources":["../../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n */\nexport class SgdsTabPanel extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabPanelStyles];\n  private readonly attrId = ++id;\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  _handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;;;AAOA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;AAIG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;QAEmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;AACd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAuB5D;IArBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AA7BM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAzC,CAA2C;AAI3B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-tab-panel.js","sources":["../../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n */\nexport class SgdsTabPanel extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabPanelStyles];\n  private readonly attrId = ++id;\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  _handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n    this.inert = !this.active;\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;;;AAOA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;AAIG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;QAEmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;AACd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AACjE,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC3B;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AA9BM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAzC,CAA2C;AAI3B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAIf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;"}

package/types/react.d.ts

@@ -1553,79 +1553,79 @@ export interface SgdsTooltipProps extends SgdsBaseProps {
 declare module "react" {
   namespace JSX {
     interface IntrinsicElements {
-      "sgds-accordion-item": SgdsAccordionItemProps;
-      "sgds-accordion": SgdsAccordionProps;
-      "sgds-alert-link": SgdsAlertLinkProps;
-      "sgds-alert": SgdsAlertProps;
-      "sgds-badge": SgdsBadgeProps;
-      "sgds-breadcrumb-item": SgdsBreadcrumbItemProps;
-      "sgds-breadcrumb": SgdsBreadcrumbProps;
-      "sgds-button": SgdsButtonProps;
-      "sgds-card": SgdsCardProps;
-      "sgds-checkbox-group": SgdsCheckboxGroupProps;
-      "sgds-checkbox": SgdsCheckboxProps;
-      "sgds-close-button": SgdsCloseButtonProps;
-      "sgds-combo-box-option": SgdsComboBoxOptionProps;
-      "sgds-combo-box": SgdsComboBoxProps;
-      "sgds-datepicker": SgdsDatepickerProps;
-      "sgds-description-list-group": SgdsDescriptionListGroupProps;
-      "sgds-description-list": SgdsDescriptionListProps;
-      "sgds-divider": SgdsDividerProps;
-      "sgds-drawer": SgdsDrawerProps;
-      "sgds-dropdown-item": SgdsDropdownItemProps;
-      "sgds-dropdown": SgdsDropdownProps;
-      "sgds-file-upload": SgdsFileUploadProps;
-      "sgds-footer-item": SgdsFooterItemProps;
-      "sgds-footer": SgdsFooterProps;
-      "sgds-icon": SgdsIconProps;
-      "sgds-icon-button": SgdsIconButtonProps;
-      "sgds-icon-card": SgdsIconCardProps;
-      "sgds-icon-list": SgdsIconListProps;
-      "sgds-image-card": SgdsImageCardProps;
-      "sgds-input": SgdsInputProps;
-      "sgds-link": SgdsLinkProps;
-      "sgds-mainnav-dropdown": SgdsMainnavDropdownProps;
-      "sgds-mainnav-item": SgdsMainnavItemProps;
-      "sgds-mainnav": SgdsMainnavProps;
-      "sgds-masthead": SgdsMastheadProps;
-      "sgds-modal": SgdsModalProps;
-      "sgds-overflow-menu": SgdsOverflowMenuProps;
-      "sgds-pagination": SgdsPaginationProps;
-      "sgds-progress-bar": SgdsProgressBarProps;
-      "sgds-quantity-toggle": SgdsQuantityToggleProps;
-      "sgds-radio-group": SgdsRadioGroupProps;
-      "sgds-radio": SgdsRadioProps;
-      "sgds-select-option": SgdsSelectOptionProps;
-      "sgds-select": SgdsSelectProps;
-      "sgds-sidebar-group": SgdsSidebarGroupProps;
-      "sgds-sidebar-item": SgdsSidebarItemProps;
-      "sgds-sidebar-section": SgdsSidebarSectionProps;
-      "sgds-sidebar": SgdsSidebarProps;
-      "sgds-sidenav-item": SgdsSidenavItemProps;
-      "sgds-sidenav-link": SgdsSidenavLinkProps;
-      "sgds-sidenav": SgdsSidenavProps;
-      "sgds-skeleton": SgdsSkeletonProps;
-      "sgds-spinner": SgdsSpinnerProps;
-      "sgds-step": SgdsStepProps;
-      "sgds-stepper": SgdsStepperProps;
-      "sgds-subnav-item": SgdsSubnavItemProps;
-      "sgds-subnav": SgdsSubnavProps;
-      "sgds-switch": SgdsSwitchProps;
-      "sgds-system-banner-item": SgdsSystemBannerItemProps;
-      "sgds-system-banner": SgdsSystemBannerProps;
-      "sgds-tab-group": SgdsTabGroupProps;
-      "sgds-tab-panel": SgdsTabPanelProps;
-      "sgds-tab": SgdsTabProps;
-      "sgds-table-cell": SgdsTableCellProps;
-      "sgds-table-head": SgdsTableHeadProps;
-      "sgds-table-row": SgdsTableRowProps;
-      "sgds-table": SgdsTableProps;
-      "sgds-table-of-contents": SgdsTableOfContentsProps;
-      "sgds-textarea": SgdsTextareaProps;
-      "sgds-thumbnail-card": SgdsThumbnailCardProps;
-      "sgds-toast-container": SgdsToastContainerProps;
-      "sgds-toast": SgdsToastProps;
-      "sgds-tooltip": SgdsTooltipProps;
+      "sgds-accordion-item": React.DetailedHTMLProps<SgdsAccordionItemProps, HTMLElement>;
+      "sgds-accordion": React.DetailedHTMLProps<SgdsAccordionProps, HTMLElement>;
+      "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
+      "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
+      "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
+      "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
+      "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
+      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
+      "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
+      "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
+      "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
+      "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
+      "sgds-combo-box-option": React.DetailedHTMLProps<SgdsComboBoxOptionProps, HTMLElement>;
+      "sgds-combo-box": React.DetailedHTMLProps<SgdsComboBoxProps, HTMLElement>;
+      "sgds-datepicker": React.DetailedHTMLProps<SgdsDatepickerProps, HTMLElement>;
+      "sgds-description-list-group": React.DetailedHTMLProps<SgdsDescriptionListGroupProps, HTMLElement>;
+      "sgds-description-list": React.DetailedHTMLProps<SgdsDescriptionListProps, HTMLElement>;
+      "sgds-divider": React.DetailedHTMLProps<SgdsDividerProps, HTMLElement>;
+      "sgds-drawer": React.DetailedHTMLProps<SgdsDrawerProps, HTMLElement>;
+      "sgds-dropdown-item": React.DetailedHTMLProps<SgdsDropdownItemProps, HTMLElement>;
+      "sgds-dropdown": React.DetailedHTMLProps<SgdsDropdownProps, HTMLElement>;
+      "sgds-file-upload": React.DetailedHTMLProps<SgdsFileUploadProps, HTMLElement>;
+      "sgds-footer-item": React.DetailedHTMLProps<SgdsFooterItemProps, HTMLElement>;
+      "sgds-footer": React.DetailedHTMLProps<SgdsFooterProps, HTMLElement>;
+      "sgds-icon": React.DetailedHTMLProps<SgdsIconProps, HTMLElement>;
+      "sgds-icon-button": React.DetailedHTMLProps<SgdsIconButtonProps, HTMLElement>;
+      "sgds-icon-card": React.DetailedHTMLProps<SgdsIconCardProps, HTMLElement>;
+      "sgds-icon-list": React.DetailedHTMLProps<SgdsIconListProps, HTMLElement>;
+      "sgds-image-card": React.DetailedHTMLProps<SgdsImageCardProps, HTMLElement>;
+      "sgds-input": React.DetailedHTMLProps<SgdsInputProps, HTMLElement>;
+      "sgds-link": React.DetailedHTMLProps<SgdsLinkProps, HTMLElement>;
+      "sgds-mainnav-dropdown": React.DetailedHTMLProps<SgdsMainnavDropdownProps, HTMLElement>;
+      "sgds-mainnav-item": React.DetailedHTMLProps<SgdsMainnavItemProps, HTMLElement>;
+      "sgds-mainnav": React.DetailedHTMLProps<SgdsMainnavProps, HTMLElement>;
+      "sgds-masthead": React.DetailedHTMLProps<SgdsMastheadProps, HTMLElement>;
+      "sgds-modal": React.DetailedHTMLProps<SgdsModalProps, HTMLElement>;
+      "sgds-overflow-menu": React.DetailedHTMLProps<SgdsOverflowMenuProps, HTMLElement>;
+      "sgds-pagination": React.DetailedHTMLProps<SgdsPaginationProps, HTMLElement>;
+      "sgds-progress-bar": React.DetailedHTMLProps<SgdsProgressBarProps, HTMLElement>;
+      "sgds-quantity-toggle": React.DetailedHTMLProps<SgdsQuantityToggleProps, HTMLElement>;
+      "sgds-radio-group": React.DetailedHTMLProps<SgdsRadioGroupProps, HTMLElement>;
+      "sgds-radio": React.DetailedHTMLProps<SgdsRadioProps, HTMLElement>;
+      "sgds-select-option": React.DetailedHTMLProps<SgdsSelectOptionProps, HTMLElement>;
+      "sgds-select": React.DetailedHTMLProps<SgdsSelectProps, HTMLElement>;
+      "sgds-sidebar-group": React.DetailedHTMLProps<SgdsSidebarGroupProps, HTMLElement>;
+      "sgds-sidebar-item": React.DetailedHTMLProps<SgdsSidebarItemProps, HTMLElement>;
+      "sgds-sidebar-section": React.DetailedHTMLProps<SgdsSidebarSectionProps, HTMLElement>;
+      "sgds-sidebar": React.DetailedHTMLProps<SgdsSidebarProps, HTMLElement>;
+      "sgds-sidenav-item": React.DetailedHTMLProps<SgdsSidenavItemProps, HTMLElement>;
+      "sgds-sidenav-link": React.DetailedHTMLProps<SgdsSidenavLinkProps, HTMLElement>;
+      "sgds-sidenav": React.DetailedHTMLProps<SgdsSidenavProps, HTMLElement>;
+      "sgds-skeleton": React.DetailedHTMLProps<SgdsSkeletonProps, HTMLElement>;
+      "sgds-spinner": React.DetailedHTMLProps<SgdsSpinnerProps, HTMLElement>;
+      "sgds-step": React.DetailedHTMLProps<SgdsStepProps, HTMLElement>;
+      "sgds-stepper": React.DetailedHTMLProps<SgdsStepperProps, HTMLElement>;
+      "sgds-subnav-item": React.DetailedHTMLProps<SgdsSubnavItemProps, HTMLElement>;
+      "sgds-subnav": React.DetailedHTMLProps<SgdsSubnavProps, HTMLElement>;
+      "sgds-switch": React.DetailedHTMLProps<SgdsSwitchProps, HTMLElement>;
+      "sgds-system-banner-item": React.DetailedHTMLProps<SgdsSystemBannerItemProps, HTMLElement>;
+      "sgds-system-banner": React.DetailedHTMLProps<SgdsSystemBannerProps, HTMLElement>;
+      "sgds-tab-group": React.DetailedHTMLProps<SgdsTabGroupProps, HTMLElement>;
+      "sgds-tab-panel": React.DetailedHTMLProps<SgdsTabPanelProps, HTMLElement>;
+      "sgds-tab": React.DetailedHTMLProps<SgdsTabProps, HTMLElement>;
+      "sgds-table-cell": React.DetailedHTMLProps<SgdsTableCellProps, HTMLElement>;
+      "sgds-table-head": React.DetailedHTMLProps<SgdsTableHeadProps, HTMLElement>;
+      "sgds-table-row": React.DetailedHTMLProps<SgdsTableRowProps, HTMLElement>;
+      "sgds-table": React.DetailedHTMLProps<SgdsTableProps, HTMLElement>;
+      "sgds-table-of-contents": React.DetailedHTMLProps<SgdsTableOfContentsProps, HTMLElement>;
+      "sgds-textarea": React.DetailedHTMLProps<SgdsTextareaProps, HTMLElement>;
+      "sgds-thumbnail-card": React.DetailedHTMLProps<SgdsThumbnailCardProps, HTMLElement>;
+      "sgds-toast-container": React.DetailedHTMLProps<SgdsToastContainerProps, HTMLElement>;
+      "sgds-toast": React.DetailedHTMLProps<SgdsToastProps, HTMLElement>;
+      "sgds-tooltip": React.DetailedHTMLProps<SgdsTooltipProps, HTMLElement>;
     }
   }
 }