diff --git a/packages/components/Staticfile b/packages/components/Staticfile
index d43348e4b093..e302d254a8c5 100644
--- a/packages/components/Staticfile
+++ b/packages/components/Staticfile
@@ -1 +1,2 @@
 root: demo
+force_https: true
\ No newline at end of file
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 6f1129cde670..13cb6a0b503e 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -6381,7 +6381,6 @@ $text-02: if(
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
   - [data-table-core [mixin]](#data-table-core-mixin)
-  - [date-picker [mixin]](#date-picker-mixin)
   - [dropdown [mixin]](#dropdown-mixin)
   - [file-uploader [mixin]](#file-uploader-mixin)
   - [form [mixin]](#form-mixin)
@@ -16164,9 +16163,9 @@ Date picker styles
     }
   }
 
-  .#{$prefix}--date-picker__days .nextMonthDay,
-  .#{$prefix}--date-picker__days .prevMonthDay {
-    color: $text-02;
+  .#{$prefix}--date-picker__day.nextMonthDay,
+  .#{$prefix}--date-picker__day.prevMonthDay {
+    color: $text-05;
   }
 
   .#{$prefix}--date-picker__day.today,
@@ -16200,11 +16199,10 @@ Date picker styles
     }
   }
 
-  .#{$prefix}--date-picker__day.disabled,
-  .flatpickr-day.disabled {
+  .#{$prefix}--date-picker__day.flatpickr-day.flatpickr-disabled {
     cursor: not-allowed;
     opacity: 0.5;
-    color: $ui-05;
+    color: $disabled-02;
 
     &:hover {
       background: transparent;
@@ -16358,9 +16356,8 @@ Date picker styles
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [interactive-01 [variable]](#interactive-01-variable)
   - [hover-ui [variable]](#hover-ui-variable)
-  - [text-02 [variable]](#text-02-variable)
-  - [ui-05 [variable]](#ui-05-variable)
   - [text-04 [variable]](#text-04-variable)
+  - [ui-05 [variable]](#ui-05-variable)
 
 ## dropdown
 
diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss
index adf041824b4d..9dd6b4d3ef40 100644
--- a/packages/components/src/components/date-picker/_date-picker.scss
+++ b/packages/components/src/components/date-picker/_date-picker.scss
@@ -316,9 +316,9 @@
     }
   }
 
-  .#{$prefix}--date-picker__days .nextMonthDay,
-  .#{$prefix}--date-picker__days .prevMonthDay {
-    color: $text-02;
+  .#{$prefix}--date-picker__day.nextMonthDay,
+  .#{$prefix}--date-picker__day.prevMonthDay {
+    color: $text-05;
   }
 
   .#{$prefix}--date-picker__day.today,
@@ -352,11 +352,10 @@
     }
   }
 
-  .#{$prefix}--date-picker__day.disabled,
-  .flatpickr-day.disabled {
+  .#{$prefix}--date-picker__day.flatpickr-day.flatpickr-disabled {
     cursor: not-allowed;
     opacity: 0.5;
-    color: $ui-05;
+    color: $disabled-02;
 
     &:hover {
       background: transparent;
diff --git a/packages/react/Staticfile b/packages/react/Staticfile
index fb2402a611da..50d8902c17bc 100644
--- a/packages/react/Staticfile
+++ b/packages/react/Staticfile
@@ -1 +1,2 @@
 root: storybook-static
+force_https: true
diff --git a/packages/react/src/components/DataTable/TableHeader.js b/packages/react/src/components/DataTable/TableHeader.js
index 273059144cee..54f2bcbb004c 100644
--- a/packages/react/src/components/DataTable/TableHeader.js
+++ b/packages/react/src/components/DataTable/TableHeader.js
@@ -51,6 +51,7 @@ const TableHeader = React.forwardRef(function TableHeader(
   {
     className: headerClassName,
     children,
+    colSpan,
     isSortable,
     isSortHeader,
     onClick,
@@ -63,7 +64,7 @@ const TableHeader = React.forwardRef(function TableHeader(
 ) {
   if (!isSortable) {
     return (
-      <th {...rest} className={headerClassName} scope={scope}>
+      <th {...rest} className={headerClassName} scope={scope} colSpan={colSpan}>
         <span className={`${prefix}--table-header-label`}>{children}</span>
       </th>
     );
@@ -80,10 +81,11 @@ const TableHeader = React.forwardRef(function TableHeader(
 
   return (
     <th
-      scope={scope}
-      className={headerClassName}
       aria-sort={ariaSort}
-      ref={ref}>
+      className={headerClassName}
+      colSpan={colSpan}
+      ref={ref}
+      scope={scope}>
       <button className={className} onClick={onClick} {...rest}>
         <span className={`${prefix}--table-header-label`}>{children}</span>
         <Arrow
@@ -120,6 +122,12 @@ TableHeader.propTypes = {
    */
   children: PropTypes.node,
 
+  /**
+   * Specify `colSpan` as a non-negative integer value to indicate how
+   * many columns the TableHeader cell extends in a table
+   */
+  colSpan: PropTypes.number,
+
   /**
    * Specify whether this header is one through which a user can sort the table
    */