@carbon/ibm-products 2.43.2-canary.305 → 2.43.2-canary.307

package/lib/components/Datagrid/Datagrid/DatagridRow.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridRow: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridRow: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridRow;

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const SelectAll: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const SelectAll: (datagridState: DataGridState) => React.JSX.Element;
 export { SelectAll };

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.d.ts

@@ -4,10 +4,11 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DataGridState } from '../types';
 declare const SelectAllWithToggle: {
-    ({ tableId, isFetching, isAllRowsSelected, selectAllToggle, getToggleAllPageRowsSelectedProps, getToggleAllRowsSelectedProps, allPageRowsLabel, allRowsLabel, columns, withStickyColumn, }: DataGridState): import("react/jsx-runtime").JSX.Element;
+    ({ tableId, isFetching, isAllRowsSelected, selectAllToggle, getToggleAllPageRowsSelectedProps, getToggleAllRowsSelectedProps, allPageRowsLabel, allRowsLabel, columns, withStickyColumn, }: DataGridState): React.JSX.Element;
     propTypes: {
         allPageRowsLabel: PropTypes.Requireable<string>;
         allRowsLabel: PropTypes.Requireable<string>;

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridSimpleBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridSimpleBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridSimpleBody;

package/lib/components/Datagrid/Datagrid/DatagridToolbar.d.ts

@@ -4,13 +4,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DataGridState } from '../types';
 interface DatagridToolbarProps {
     ariaToolbarLabel?: string;
 }
 declare const DatagridToolbar: {
-    ({ ariaToolbarLabel, ...datagridState }: DatagridToolbarProps & DataGridState): import("react/jsx-runtime").JSX.Element | null;
+    ({ ariaToolbarLabel, ...datagridState }: DatagridToolbarProps & DataGridState): React.JSX.Element | null;
     propTypes: {
         ariaToolbarLabel: PropTypes.Requireable<string>;
     };

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.d.ts

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { DataGridState } from '../types';
-declare const DatagridVirtualBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+declare const DatagridVirtualBody: (datagridState: DataGridState) => React.JSX.Element;
 export default DatagridVirtualBody;

package/lib/components/Datagrid/Datagrid/DraggableElement.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 interface DraggableElementProps extends PropsWithChildren {
     ariaLabel: string;
@@ -16,7 +16,7 @@ interface DraggableElementProps extends PropsWithChildren {
     selected?: boolean;
 }
 declare const DraggableElement: {
-    ({ id, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): React.JSX.Element;
     propTypes: {
         ariaLabel: PropTypes.Validator<string>;
         children: PropTypes.Validator<PropTypes.ReactElementLike>;

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.d.ts

@@ -3,7 +3,7 @@ declare function Actions({ searchText, setSearchText, findColumnPlaceholderLabel
     searchText: any;
     setSearchText: any;
     findColumnPlaceholderLabel: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace Actions {
     namespace propTypes {
         let columns: PropTypes.Validator<any[]>;
@@ -15,4 +15,5 @@ declare namespace Actions {
         let setSearchText: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
+import * as React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.d.ts

@@ -5,7 +5,7 @@ declare function ButtonWrapper({ onClick, setIsTearsheetOpen, isTearsheetOpen, i
     setIsTearsheetOpen: any;
     isTearsheetOpen: any;
     iconTooltipLabel?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace ButtonWrapper {
     namespace defaultProps {
         function onClick(): void;
@@ -18,4 +18,5 @@ declare namespace ButtonWrapper {
         export let setIsTearsheetOpen: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
+import * as React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts

@@ -9,7 +9,7 @@ declare function Columns({ getVisibleColumnsCount, filterString, columns, setCol
     assistiveTextDisabledInstructionsLabel: any;
     selectAllLabel: any;
     customizeTearsheetHeadingLabel: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace Columns {
     namespace propTypes {
         let assistiveTextDisabledInstructionsLabel: PropTypes.Requireable<string>;
@@ -26,4 +26,5 @@ declare namespace Columns {
         let setColumnsObject: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.d.ts

@@ -14,7 +14,7 @@ declare function CustomizeColumnsTearsheet({ isOpen, setIsTearsheetOpen, onSaveC
     assistiveTextInstructionsLabel?: string | undefined;
     assistiveTextDisabledInstructionsLabel?: string | undefined;
     selectAllLabel?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace CustomizeColumnsTearsheet {
     namespace propTypes {
         let assistiveTextDisabledInstructionsLabel: PropTypes.Requireable<string>;
@@ -33,4 +33,5 @@ declare namespace CustomizeColumnsTearsheet {
         let setIsTearsheetOpen: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.d.ts

@@ -5,7 +5,7 @@ export function DraggableItemsList({ columns, filterString, id, moveElement, onS
     moveElement: any;
     onSelectColumn: any;
     setAriaRegionText: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace DraggableItemsList {
     namespace propTypes {
         let columns: any;
@@ -16,3 +16,4 @@ export namespace DraggableItemsList {
         let setAriaRegionText: any;
     }
 }
+import React from 'react';

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.d.ts

@@ -1,10 +1,11 @@
 export default TearsheetWrapper;
 declare function TearsheetWrapper({ instance }: {
     instance: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace TearsheetWrapper {
     namespace propTypes {
         let instance: PropTypes.Validator<object>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.d.ts

@@ -14,7 +14,7 @@ declare function FilterFlyout({ updateMethod, flyoutIconDescription, align, filt
     setAllFilters: any;
     data?: any[] | undefined;
     reactTableFiltersState?: any[] | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace FilterFlyout {
     namespace propTypes {
         let align: PropTypes.Requireable<string>;
@@ -41,4 +41,5 @@ declare namespace FilterFlyout {
         let updateMethod: PropTypes.Validator<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.d.ts

@@ -19,7 +19,7 @@ declare function FilterPanel({ title, closeIconDescription, updateMethod, filter
     reactTableFiltersState?: any[] | undefined;
     autoHideFilters?: boolean | undefined;
     isFetching?: boolean | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace FilterPanel {
     namespace propTypes {
         let autoHideFilters: PropTypes.Requireable<boolean>;
@@ -47,4 +47,5 @@ declare namespace FilterPanel {
         let updateMethod: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts

@@ -9,7 +9,7 @@ export function FilterProvider({ children, filters, filterProps, tableId }: {
     filters: any;
     filterProps: any;
     tableId: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace FilterProvider {
     namespace propTypes {
         let children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;

package/lib/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.d.ts

@@ -8,7 +8,7 @@ declare function OverflowCheckboxes({ components, filtersState, column, setFilte
     applyFilters: any;
     viewAllLabel?: string | undefined;
     viewLessLabel?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace OverflowCheckboxes {
     namespace propTypes {
         let applyFilters: PropTypes.Requireable<(...args: any[]) => any>;
@@ -21,4 +21,5 @@ declare namespace OverflowCheckboxes {
         let viewLessLabel: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.d.ts

@@ -20,7 +20,7 @@ declare function useFilters({ updateMethod, filters, setAllFilters, variation, r
         type: any;
         column: any;
         props: any;
-    }) => void | import("react/jsx-runtime").JSX.Element;
+    }) => void | React.JSX.Element;
     filtersObjectArray: any;
     lastAppliedFilters: React.MutableRefObject<string>;
     cancel: () => void;

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.d.ts

@@ -8,7 +8,7 @@ export function InlineEditButton({ label, renderIcon: Icon, labelIcon: LabelIcon
     isActiveCell: any;
     columnConfig: any;
     type: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace InlineEditButton {
     namespace propTypes {
         let columnConfig: PropTypes.Requireable<object>;
@@ -23,4 +23,5 @@ export namespace InlineEditButton {
         let value: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.d.ts

@@ -8,7 +8,7 @@ export function InlineEditCell({ cell, config, disabledCell, instance, placehold
     value: any;
     nonEditCell?: boolean | undefined;
     type: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace InlineEditCell {
     namespace propTypes {
         let cell: PropTypes.Requireable<object>;
@@ -29,4 +29,5 @@ export namespace InlineEditCell {
         let value: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.d.ts

@@ -1,7 +1,7 @@
 export const InlineEditContext: React.Context<any>;
 export function InlineEditProvider({ children }: {
     children: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace InlineEditProvider {
     namespace propTypes {
         let children: PropTypes.Requireable<PropTypes.ReactElementLike>;

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts

@@ -3,7 +3,7 @@ declare function RowSizeDropdown({ align, legendText, ...props }: {
     [x: string]: any;
     align?: string | undefined;
     legendText?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace RowSizeDropdown {
     namespace propTypes {
         let align: any;
@@ -14,4 +14,5 @@ declare namespace RowSizeDropdown {
         let selectedOption: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/EmptyStates/EmptyStateContent.d.ts

@@ -4,7 +4,7 @@ export function EmptyStateContent({ action, link, size, subtitle, title }: {
     size: any;
     subtitle: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace EmptyStateContent {
     export { componentName as displayName };
     export namespace propTypes {
@@ -15,6 +15,7 @@ export namespace EmptyStateContent {
         let title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
     }
 }
+import React from 'react';
 declare const componentName: "EmptyStateContent";
 import PropTypes from 'prop-types';
 export {};

package/lib/components/EmptyStates/EmptyStateIllustration.d.ts

@@ -2,10 +2,11 @@ export default EmptyStateIllustration;
 declare function EmptyStateIllustration({ kind, ...rest }: {
     [x: string]: any;
     kind: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace EmptyStateIllustration {
     namespace propTypes {
         let kind: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/EmptyStates/assets/ErrorIllustration.d.ts

@@ -3,7 +3,7 @@ export function ErrorIllustration({ theme, size, alt, ...rest }: {
     theme: any;
     size: any;
     alt: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace ErrorIllustration {
     namespace propTypes {
         let alt: PropTypes.Validator<string>;
@@ -12,4 +12,5 @@ export namespace ErrorIllustration {
     }
 }
 export default ErrorIllustration;
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/EmptyStates/assets/NoDataIllustration.d.ts

@@ -3,7 +3,7 @@ export function NoDataIllustration({ theme, size, alt, ...rest }: {
     theme: any;
     size: any;
     alt: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace NoDataIllustration {
     namespace propTypes {
         let alt: PropTypes.Validator<string>;
@@ -12,4 +12,5 @@ export namespace NoDataIllustration {
     }
 }
 export default NoDataIllustration;
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/EmptyStates/assets/NoTagsIllustration.d.ts

@@ -3,7 +3,7 @@ export function NoTagsIllustration({ theme, size, alt, ...rest }: {
     theme: any;
     size: any;
     alt: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace NoTagsIllustration {
     namespace propTypes {
         let alt: PropTypes.Validator<string>;
@@ -12,4 +12,5 @@ export namespace NoTagsIllustration {
     }
 }
 export default NoTagsIllustration;
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/EmptyStates/assets/NotFoundIllustration.d.ts

@@ -3,7 +3,7 @@ export function NotFoundIllustration({ theme, size, alt, ...rest }: {
     theme: any;
     size: any;
     alt: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace NotFoundIllustration {
     namespace propTypes {
         let alt: PropTypes.Validator<string>;
@@ -12,4 +12,5 @@ export namespace NotFoundIllustration {
     }
 }
 export default NotFoundIllustration;
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/EmptyStates/assets/NotificationsIllustration.d.ts

@@ -3,7 +3,7 @@ export function NotificationsIllustration({ theme, size, alt, ...rest }: {
     theme: any;
     size: any;
     alt: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace NotificationsIllustration {
     namespace propTypes {
         let alt: PropTypes.Validator<string>;
@@ -12,4 +12,5 @@ export namespace NotificationsIllustration {
     }
 }
 export default NotificationsIllustration;
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/EmptyStates/assets/UnauthorizedIllustration.d.ts

@@ -3,7 +3,7 @@ export function UnauthorizedIllustration({ theme, size, alt, ...rest }: {
     theme: any;
     size: any;
     alt: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace UnauthorizedIllustration {
     namespace propTypes {
         let alt: PropTypes.Validator<string>;
@@ -12,4 +12,5 @@ export namespace UnauthorizedIllustration {
     }
 }
 export default UnauthorizedIllustration;
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/ExportModal/ExportModal.js

@@ -129,9 +129,7 @@ exports.ExportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onBlur: onBlurHandler
   }, 'data-modal-primary-focus', true);
   return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
-    flags: {
-      'enable-experimental-focus-wrap-without-sentinels': true
-    }
+    enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     "aria-label": title,

package/lib/components/FeatureFlags/index.d.ts

@@ -12,19 +12,20 @@ import PropTypes from 'prop-types';
  */
 declare const FeatureFlagContext: React.Context<any>;
 /**
- * Supports an object of feature flag values with the `flags` prop, merging them
+ * Supports individual feature flag values as props, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags }: {
+declare function FeatureFlags({ children, flags, ...newFlags }: {
+    [x: string]: any;
     children: any;
     flags?: {} | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
-         * Provide the feature flags to enabled or disabled in the current React tree
+         * Provide the feature flags to enabled or disabled in the current React tree, this has been deprecated. as we are going to pass individual boolean props for each flag.
          */
         flags: PropTypes.Requireable<{
             [x: string]: boolean | null | undefined;

package/lib/components/FeatureFlags/index.js

@@ -12,6 +12,8 @@ var React = require('react');
 var index = require('../../_virtual/index.js');
 var FeatureFlags$1 = require('@carbon/feature-flags');
 
+var _excluded = ["children", "flags"];
+
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
@@ -19,21 +21,27 @@ var FeatureFlags$1 = require('@carbon/feature-flags');
 var FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
 
 /**
- * Supports an object of feature flag values with the `flags` prop, merging them
+ * Supports individual feature flag values as props, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
 function FeatureFlags(_ref) {
   var children = _ref.children,
     _ref$flags = _ref.flags,
-    flags = _ref$flags === void 0 ? {} : _ref$flags;
+    flags = _ref$flags === void 0 ? {} : _ref$flags,
+    newFlags = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var parentScope = React.useContext(FeatureFlagContext);
+  var newFlagsObject = Object.keys(newFlags).reduce(function (acc, key) {
+    acc[key] = newFlags[key];
+    return acc;
+  }, {});
+  var combinedFlags = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newFlagsObject), flags);
   var _useState = React.useState(parentScope),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     prevParentScope = _useState2[0],
     setPrevParentScope = _useState2[1];
   var _useState3 = React.useState(function () {
-      var scope = FeatureFlags$1.createScope(flags);
+      var scope = FeatureFlags$1.createScope(combinedFlags);
       scope.mergeWithScope(parentScope);
       return scope;
     }),
@@ -41,16 +49,15 @@ function FeatureFlags(_ref) {
     scope = _useState4[0],
     updateScope = _useState4[1];
   if (parentScope !== prevParentScope) {
-    var _scope = FeatureFlags$1.createScope(flags);
+    var _scope = FeatureFlags$1.createScope(combinedFlags);
     _scope.mergeWithScope(parentScope);
     updateScope(_scope);
     setPrevParentScope(parentScope);
   }
 
-  // We use a custom hook to detect if any of the keys or their values change
-  // for flags that are passed in. If they have changed, then we re-create the
-  // FeatureFlagScope using the new flags
-  useChangedValue(flags, isEqual, function (changedFlags) {
+  // We use a custom hook to detect if any of the individual flag props or their values change
+  // If any flags have changed, we re-create the FeatureFlagScope using the updated flags
+  useChangedValue(combinedFlags, isEqual, function (changedFlags) {
     var scope = FeatureFlags$1.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
@@ -62,7 +69,7 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: index.default.node,
   /**
-   * Provide the feature flags to enabled or disabled in the current React tree
+   * Provide the feature flags to enabled or disabled in the current React tree, this has been deprecated. as we are going to pass individual boolean props for each flag.
    */
   flags: index.default.objectOf(index.default.bool)
 };

package/lib/components/FullPageError/assets/Error403SVG.d.ts

@@ -1,11 +1,12 @@
 export function Error403SVG({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace Error403SVG {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/lib/components/FullPageError/assets/Error404SVG.d.ts

@@ -1,11 +1,12 @@
 export function Error404SVG({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace Error404SVG {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/lib/components/FullPageError/assets/ErrorGenericSVG.d.ts

@@ -1,11 +1,12 @@
 export function ErrorGenericSVG({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace ErrorGenericSVG {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/lib/components/HTTPErrors/HTTPErrorContent.d.ts

@@ -3,7 +3,7 @@ export function HTTPErrorContent({ description, errorCodeLabel, title, links, }:
     errorCodeLabel: any;
     title: any;
     links: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace HTTPErrorContent {
     export { componentName as displayName };
     export namespace propTypes {
@@ -13,5 +13,6 @@ export namespace HTTPErrorContent {
         let title: import("prop-types").Validator<string>;
     }
 }
+import React from 'react';
 declare const componentName: "HTTPErrorContent";
 export {};

package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.d.ts

@@ -1,11 +1,12 @@
 export function HTTPErrorSvg403({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace HTTPErrorSvg403 {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.d.ts

@@ -1,11 +1,12 @@
 export function HTTPErrorSvg404({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace HTTPErrorSvg404 {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.d.ts

@@ -1,11 +1,12 @@
 export function HTTPErrorSvgOther({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace HTTPErrorSvgOther {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';