@carbon/ibm-products 2.61.0 → 2.62.0

package/lib/node_modules/prop-types/factoryWithTypeCheckers.js

@@ -341,7 +341,7 @@ function requireFactoryWithTypeCheckers() {
     }
     function createUnionTypeChecker(arrayOfTypeCheckers) {
       if (!Array.isArray(arrayOfTypeCheckers)) {
-        process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : undefined;
+        process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
         return emptyFunctionThatReturnsNull;
       }
       for (var i = 0; i < arrayOfTypeCheckers.length; i++) {

package/lib/settings.js

@@ -20,12 +20,12 @@ var componentDeprecatedWarning = function componentDeprecatedWarning(name, detai
   return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
 };
 packageSettings.default.logDeprecated = function (component, name) {
-  if (component !== null && component !== undefined && component.deprecated) {
+  if (component !== null && component !== void 0 && component.deprecated) {
     var _pconsole$level;
     var _component$deprecated = component.deprecated,
       level = _component$deprecated.level,
       details = _component$deprecated.details;
-    var logUsing = (_pconsole$level = pconsole.default === null || pconsole.default === undefined ? undefined : pconsole.default[level]) !== null && _pconsole$level !== undefined ? _pconsole$level : pconsole.default.error;
+    var logUsing = (_pconsole$level = pconsole.default === null || pconsole.default === void 0 ? void 0 : pconsole.default[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : pconsole.default.error;
     logUsing(componentDeprecatedWarning(name || component.displayName, details));
   }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.61.0",
+  "version": "2.62.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,61 +50,61 @@
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
-    "telemetry-config": "ibmtelemetry-config --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
+    "telemetry-config": "ibmtelemetry-config generate --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
-    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
+    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor|^framer-motion)/'"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",
-    "@babel/core": "^7.26.0",
+    "@babel/core": "^7.26.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-default-from": "^7.25.9",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/plugin-transform-react-constant-elements": "^7.25.9",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@ibm/telemetry-js-config-generator": "^1.0.3",
+    "@ibm/telemetry-js-config-generator": "^2.0.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.19.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.20.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "fs-extra": "^11.2.0",
+    "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.20.0",
+    "jest-config-ibm-cloud-cognitive": "^1.21.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
-    "npm-check-updates": "^17.1.13",
+    "npm-check-updates": "^17.1.15",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
-    "rollup": "^4.30.1",
+    "rollup": "^4.34.8",
     "rollup-plugin-strip-banner": "^3.1.0",
-    "sass": "^1.83.4",
+    "sass": "^1.85.1",
     "typescript-config-carbon": "^0.3.0",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.57.0",
+    "@carbon/ibm-products-styles": "^2.58.0",
     "@carbon/telemetry": "^0.1.0",
+    "@carbon/utilities": "^0.4.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@ibm/telemetry-js": "^1.8.0",
+    "@ibm/telemetry-js": "^1.9.1",
     "framer-motion": "^6.5.1 < 7",
-    "lottie-web": "^5.12.2",
     "react-table": "^7.8.0",
     "react-window": "^1.8.11"
   },
@@ -115,8 +115,8 @@
     "@carbon/react": "^1.76.0",
     "@carbon/themes": "^11.46.0",
     "@carbon/type": "^11.35.0",
-    "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
-    "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
+    "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
+    "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "2722d2ea768f07df5445cf74a5e9aed8d250637b"
+  "gitHead": "60f64a0b14812c7599023ff2ffdc4faa3e98969b"
 }

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -10,9 +10,77 @@
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '../../../../global/styles/project-settings' as c4p-settings;
-
-.#{$block-class}-filter-panel__container {
+@use './animations' as *;
+
+@property --panel-transform {
+  inherits: true;
+  initial-value: 320px;
+  syntax: '<integer>';
+}
+$block-class-component: #{$block-class}-filter-panel;
+
+.#{$block-class-component} {
+  --panel-transform: 320px;
+
+  transform: translateX(0);
+  transition-behavior: allow-discrete;
+  transition-duration: $duration-moderate-01;
+  transition-property: display, opacity, transform;
+
+  @starting-style {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+
+  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
+  &.#{$block-class-component}--open.#{$block-class-component}--left-placement {
+    animation: filter-panel-entrance-left $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
+
+  &.#{$block-class-component}--closing.#{$block-class-component}--left-placement {
+    animation: filter-panel-exit-left $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    &.#{$block-class-component}--closing {
+      opacity: 0;
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(var(--panel-transform, 320px));
+      transition-duration: $duration-moderate-01;
+    }
+    &.#{$block-class-component}--closing.#{$block-class-component}--left-placement {
+      /* stylelint-disable-next-line carbon/layout-use */
+      transform: translateX(calc(-1 * var(--panel-transform, 320px)));
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    /* styles to apply if a user's device settings are set to reduced motion */
+    &.#{$block-class-component}--open.#{$block-class-component}--left-placement {
+      animation: filter-panel-entrance-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 0;
+        transform: translateX(0);
+      }
+    }
+    &.#{$block-class-component}--closing.#{$block-class-component}--left-placement {
+      animation: filter-panel-exit-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+      @starting-style {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+.#{$block-class-component}__container {
   position: relative;
   background-color: $layer-01;
   block-size: clamp(var(--filter-panel-min-height), 100%, 100vh);
@@ -21,11 +89,11 @@
   inline-size: to-rem(320px);
 }
 
-.#{$block-class}-filter-panel--open {
+.#{$block-class-component}--open {
   border-inline-end: 1px $layer-accent-01 solid;
 }
 
-.#{$block-class}-filter-panel__container::before {
+.#{$block-class-component}__container::before {
   position: absolute;
   display: block;
   background-color: $layer-01;
@@ -37,7 +105,7 @@
   inset-inline-start: 0;
 }
 
-.#{$block-class}-filter-panel__inner-container {
+.#{$block-class-component}__inner-container {
   position: relative;
   z-index: 0;
   overflow: auto;
@@ -46,37 +114,37 @@
 }
 
 // Adds extra space to the last category so the scroll shows everything visible when you reach the bottom
-.#{$block-class}-filter-panel__inner-container
-  .#{$block-class}-filter-panel__category:last-of-type {
+.#{$block-class-component}__inner-container
+  .#{$block-class-component}__category:last-of-type {
   padding-block-end: $spacing-11;
 }
 
-.#{$block-class}-filter-panel {
+.#{$block-class-component} {
   position: sticky;
   inset-block-start: 0;
 }
 
-.#{$block-class}-filter-panel__heading {
+.#{$block-class-component}__heading {
   display: flex;
   justify-content: space-between;
   border-block-end: 1px solid transparent;
   padding-inline-start: $spacing-05;
 }
 
-.#{$block-class}-filter-panel__heading--with-divider {
+.#{$block-class-component}__heading--with-divider {
   border-block-end: 1px solid $layer-accent-01;
 }
 
-.#{$block-class}-filter-panel__title {
+.#{$block-class-component}__title {
   padding: $spacing-05 0;
   @include type-style('heading-compact-02');
 }
 
-.#{$block-class}-filter-panel__search {
+.#{$block-class-component}__search {
   padding: 0 $spacing-05 $spacing-06;
 }
 
-.#{$block-class}-filter-panel__category-title {
+.#{$block-class-component}__category-title {
   @include type-style('heading-compact-01');
 
   color: $text-secondary;
@@ -84,49 +152,59 @@
   margin-block-end: $spacing-05;
 }
 
-.#{$block-class}-filter-panel__category {
+.#{$block-class-component}__category {
   padding-block-end: $spacing-06;
 }
 
 // This selects all filter elements inside of categories and give them 16px margin bottom
-.#{$block-class}-filter-panel__category
+.#{$block-class-component}__category
   > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
   margin-block-end: $spacing-05;
 }
 
-.#{$block-class}-filter-panel__action-set {
+.#{$block-class-component}__action-set {
   position: sticky;
   z-index: 1; // To layer action set on top of content behind when sticky
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   block-size: to-rem(64px);
   inset-block-end: 0;
   margin-block-start: auto;
+
+  opacity: 1;
+  transform: translateY(64px) translateZ(0);
+
+  &.#{$block-class-component}__animationComplete {
+    transform: none;
+    transition-behavior: allow-discrete;
+    transition-duration: $duration-moderate-01;
+    transition-property: display, opacity, transform;
+  }
 }
 
 // Overrides
-.#{$block-class}-filter-panel__container
+.#{$block-class-component}__container
   .#{c4p-settings.$carbon-prefix}--accordion__title {
   margin: 0;
 }
 
-.#{$block-class}-filter-panel__container
+.#{$block-class-component}__container
   .#{c4p-settings.$carbon-prefix}--accordion__arrow {
   margin: $spacing-01 0 0;
 }
 
-.#{$block-class}-filter-panel__container
+.#{$block-class-component}__container
   .#{c4p-settings.$carbon-prefix}--accordion__content {
   padding-inline: 0;
 }
 
 // Makes sure every child (filter) inside the accordion content has space in between
-.#{$block-class}-filter-panel__container
+.#{$block-class-component}__container
   .#{c4p-settings.$carbon-prefix}--accordion__content
   > *:not(:last-child) {
   margin-block-end: $spacing-05;
 }
 
-.#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
+.#{c4p-settings.$carbon-prefix}--btn.#{$block-class-component}-open-button {
   display: flex;
   justify-content: center;
   block-size: 3rem;
@@ -135,6 +213,6 @@
   inline-size: 3rem;
 }
 
-.#{c4p-settings.$carbon-prefix}--btn.#{$block-class}-filter-panel__view-all-button {
+.#{c4p-settings.$carbon-prefix}--btn.#{$block-class-component}__view-all-button {
   margin-inline-start: -$spacing-05;
 }

package/scss/components/Datagrid/styles/addons/_animations.scss

@@ -0,0 +1,56 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@keyframes filter-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes filter-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes filter-panel-entrance-left {
+  0% {
+    inline-size: 0;
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+
+  100% {
+    inline-size: var(--panel-transform);
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes filter-panel-exit-left {
+  0% {
+    inline-size: var(--panel-transform);
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    inline-size: 0;
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+}

package/scss/components/FilterSummary/_animations.scss

@@ -0,0 +1,20 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+@keyframes filter-summary-enter {
+  0% {
+    block-size: 0;
+    opacity: 0;
+    /* Move from top */
+    transform: translateY(calc(var(--panel-transform) * -1));
+  }
+
+  100% {
+    block-size: var(--panel-transform);
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -9,9 +9,16 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
+@use './animations' as *;
 
 $block-class: #{$pkg-prefix}--filter-summary;
 
+@property --panel-transform {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
 .#{$block-class} {
   display: flex;
   align-items: flex-start;
@@ -24,6 +31,10 @@ $block-class: #{$pkg-prefix}--filter-summary;
   &.#{$block-class}__expanded {
     block-size: fit-content;
   }
+  .#{$pkg-prefix}--tag-set__tag-container {
+    animation: filter-summary-enter $duration-moderate-01
+      motion(entrance, productive) forwards;
+  }
 }
 
 .#{$block-class}

package/scss/components/FullPageError/_full-page-error.scss

@@ -71,6 +71,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
   margin-block-end: $spacing-07;
 }
 
+.#{$block-class}__body {
+  @include type-style('body-02');
+}
+
 // safari rendering fix
 .#{$block-class}__svg-container svg.#{$block-class}__svg {
   inline-size: 100%;

package/scss/components/GetStartedCard/_get-started-card.scss

@@ -78,14 +78,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   .#{$block-class}__pictogram ~ .#{$block-class}__content-container {
     .#{$block-class}__media {
       /* stylelint-disable-next-line function-no-unknown */
-      margin-block: to-rem(-50px) -$spacing-09;
+      margin-block: to-rem(-50px) - $spacing-09;
     }
   }
 
   .#{$block-class}__sequence ~ .#{$block-class}__content-container {
     .#{$block-class}__media {
       /* stylelint-disable-next-line function-no-unknown */
-      margin-block: to-rem(-56px) -$spacing-09;
+      margin-block: to-rem(-56px) - $spacing-09;
     }
   }
 

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -21,7 +21,7 @@
 $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 $block-size: 38.5rem;
 
-@keyframes fade-in {
+@keyframes notifications-panel-fade-in {
   0% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-use
@@ -34,7 +34,7 @@ $block-size: 38.5rem;
   }
 }
 
-@keyframes fade-out {
+@keyframes notifications-panel-fade-out {
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -46,17 +46,45 @@ $block-size: 38.5rem;
     transform: translateY(-$block-size); // the height of the notification panel
   }
 }
+
+@keyframes notifications-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes notifications-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 .#{$block-class}__entrance {
-  animation: fade-in $duration-moderate-02 motion(standard);
+  animation: notifications-panel-fade-in $duration-moderate-02 motion(standard);
 }
 
 .#{$block-class}__exit {
-  animation: fade-out forwards $duration-moderate-02 motion(standard);
+  animation: notifications-panel-fade-out $duration-moderate-02 motion(standard)
+    forwards;
 }
 
-.#{$block-class} {
-  @media (prefers-reduced-motion) {
-    animation: none;
+@media (prefers-reduced-motion) {
+  .#{$block-class}__entrance {
+    animation: notifications-panel-entrance-reduced $duration-moderate-01
+      motion(exit, productive) forwards;
+  }
+
+  .#{$block-class}__exit {
+    animation: notifications-panel-exit-reduced $duration-moderate-01
+      motion(exit, productive) forwards;
   }
 }
 

package/scss/components/SidePanel/_side-panel.scss

@@ -147,7 +147,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   @media (prefers-reduced-motion) {
     /* styles to apply if a user's device settings are set to reduced motion */
-    &.#{$block-class}--open {
+    &.#{$block-class}--open.#{$block-class}--right-placement,
+    &.#{$block-class}--open.#{$block-class}--left-placement {
       animation: side-panel-entrance-reduced $duration-moderate-01
         motion(exit, productive) forwards;
       @starting-style {
@@ -155,7 +156,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
         transform: translateX(0);
       }
     }
-    &.#{$block-class}--closing {
+    &.#{$block-class}--closing.#{$block-class}--left-placement,
+    &.#{$block-class}--closing.#{$block-class}--right-placement {
       animation: side-panel-exit-reduced $duration-moderate-01
         motion(exit, productive) forwards;
       @starting-style {

package/scss/components/Tearsheet/_tearsheet.scss

@@ -401,18 +401,12 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--wide .#{$block-class}__content {
-    // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
-    .#{$carbon-prefix}--pagination,
-    .#{$carbon-prefix}--pagination__control-buttons,
-    .#{$carbon-prefix}--text-input,
-    .#{$carbon-prefix}--text-area,
-    .#{$carbon-prefix}--search-input,
-    .#{$carbon-prefix}--select-input,
-    .#{$carbon-prefix}--dropdown,
-    .#{$carbon-prefix}--dropdown-list,
-    .#{$carbon-prefix}--number input[type='number'],
-    .#{$carbon-prefix}--date-picker__input {
-      background-color: $field;
+    // Specific to the Tearsheet *and* radio buttons,
+    // `readOnly` styling is not applying a grey outline.
+    .#{$carbon-prefix}--radio-button[readonly]
+      + .#{$carbon-prefix}--radio-button__label
+      .#{$carbon-prefix}--radio-button__appearance {
+      border-color: $icon-disabled;
     }
 
     .#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {

package/telemetry.yml

@@ -762,6 +762,8 @@ collect:
         # NonLinearReading
         - definition
         # NotificationsPanel
+        - dateTimeLocale
+        - dateTimeStyle
         - daysAgoText
         - dismissAllLabel
         - dismissSingleNotificationIconDescription
@@ -893,9 +895,6 @@ collect:
         - onRetry
         - retryLabel
         - showRetry
-        # SteppedAnimatedMedia
-        - filePaths
-        - playStep
         # StringFormatter
         - lines
         - tooltipDirection
@@ -1010,11 +1009,6 @@ collect:
         - group
         - in-progress
         - info
-        - Kinds.checked
-        - Kinds.disabled
-        - Kinds.error
-        - Kinds.indeterminate
-        - Kinds.unchecked
         - link
         - major-warning
         - minor-warning
@@ -1075,14 +1069,7 @@ collect:
         - bottom
         - top
         # General - size
-        - '"lg"'
-        - '"md"'
-        - '"sm"'
-        - '"xs"'
         - 2xl
-        - BigNumbersSize.Default
-        - BigNumbersSize.Large
-        - BigNumbersSize.XLarge
         - default
         - lg
         - md
@@ -1105,8 +1092,6 @@ collect:
         # General - theme
         - dark
         - light
-        - Themes.dark
-        - Themes.light
         # General - titleSize
         - default
         - large
@@ -1183,6 +1168,10 @@ collect:
         # ExportModal - inputType
         - password
         - text
+        # NotificationsPanel - dateTimeStyle
+        - long
+        - narrow
+        - short
         # PageHeader - fullWidthGrid
         - xl
   npm:
@@ -1190,3 +1179,6 @@ collect:
   js:
     functions: {}
     tokens: null
+  js:
+    functions: {}
+    tokens: null