@itwin/itwinui-react 3.0.0-dev.7 → 3.0.0-dev.8

package/cjs/core/TransferList/TransferList.js

@@ -10,6 +10,7 @@ const react_1 = tslib_1.__importDefault(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 const index_js_2 = require('../List/index.js');
+const index_js_3 = require('../Label/index.js');
 // ----------------------------------------------------------------------------
 // TransferListComponent
 const TransferListComponent = (0, index_js_1.polymorphic)(
@@ -152,7 +153,7 @@ const TransferListItem = react_1.default.forwardRef((props, ref) => {
 });
 TransferListItem.displayName = 'TransferList.Item';
 const TransferListListboxLabel = react_1.default.forwardRef((props, ref) => {
-  const { children, className, id, ...rest } = props;
+  const { children, id, ...rest } = props;
   const { labelId, setLabelId } = (0, index_js_1.useSafeContext)(
     exports.TransferListContext,
   );
@@ -162,17 +163,8 @@ const TransferListListboxLabel = react_1.default.forwardRef((props, ref) => {
     }
   }, [id, labelId, setLabelId]);
   return react_1.default.createElement(
-    index_js_1.Box,
-    {
-      as: 'div',
-      className: (0, classnames_1.default)(
-        'iui-transfer-list-listbox-label',
-        className,
-      ),
-      id: labelId,
-      ref: ref,
-      ...rest,
-    },
+    index_js_3.Label,
+    { as: 'div', id: labelId, ref: ref, ...rest },
     children,
   );
 });

package/cjs/core/index.d.ts

@@ -26,6 +26,8 @@ export { TransferList } from './TransferList/index.js';
 export { Tabs, Tab } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
+export { InputWithDecorations } from './InputWithDecorations/InputWithDecorations.js';
+export { InputGrid } from './InputGrid/InputGrid.js';
 export { Label } from './Label/index.js';
 export { LabeledInput } from './LabeledInput/index.js';
 export { InputGroup } from './InputGroup/index.js';

package/cjs/core/index.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.Label =
+exports.InputWithDecorations =
   exports.Input =
   exports.InformationPanelContent =
   exports.InformationPanelBody =
@@ -51,9 +51,7 @@ exports.Label =
   exports.Avatar =
   exports.Alert =
     void 0;
-exports.TreeNodeExpander =
-  exports.TreeNode =
-  exports.Tree =
+exports.Tree =
   exports.Tooltip =
   exports.ToggleSwitch =
   exports.ThemeProvider =
@@ -101,6 +99,8 @@ exports.TreeNodeExpander =
   exports.LabeledSelect =
   exports.InputGroup =
   exports.LabeledInput =
+  exports.Label =
+  exports.InputGrid =
     void 0;
 exports.Divider =
   exports.VisuallyHidden =
@@ -120,6 +120,8 @@ exports.Divider =
   exports.Code =
   exports.Blockquote =
   exports.Anchor =
+  exports.TreeNodeExpander =
+  exports.TreeNode =
     void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -445,6 +447,20 @@ Object.defineProperty(exports, 'Input', {
     return index_js_26.Input;
   },
 });
+var InputWithDecorations_js_1 = require('./InputWithDecorations/InputWithDecorations.js');
+Object.defineProperty(exports, 'InputWithDecorations', {
+  enumerable: true,
+  get: function () {
+    return InputWithDecorations_js_1.InputWithDecorations;
+  },
+});
+var InputGrid_js_1 = require('./InputGrid/InputGrid.js');
+Object.defineProperty(exports, 'InputGrid', {
+  enumerable: true,
+  get: function () {
+    return InputGrid_js_1.InputGrid;
+  },
+});
 var index_js_27 = require('./Label/index.js');
 Object.defineProperty(exports, 'Label', {
   enumerable: true,

package/cjs/core/utils/components/Icon.d.ts

@@ -24,6 +24,11 @@ export type IconProps = {
      * @default 'default'
      */
     fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
+    /**
+     * Option to add padding to the icon.
+     * @default false
+     */
+    padded?: boolean;
 } & React.ComponentPropsWithoutRef<'span'>;
 /**
  * A utility component to provide size and fill to svgs.

package/cjs/core/utils/components/Icon.js

@@ -36,12 +36,19 @@ const getSizeValue = (size) => {
  * </Icon>
  */
 exports.Icon = React.forwardRef((props, ref) => {
-  const { size = 'medium', fill = 'default', className, ...rest } = props;
+  const {
+    size = 'medium',
+    fill = 'default',
+    className,
+    padded = false,
+    ...rest
+  } = props;
   return React.createElement(Box_js_1.Box, {
     as: 'span',
     className: (0, classnames_1.default)('iui-svg-icon', className),
     'data-iui-icon-size': getSizeValue(size),
     'data-iui-icon-color': fill,
+    'data-iui-padded': padded ? 'true' : undefined,
     ref: ref,
     ...rest,
   });

package/cjs/core/utils/components/InputContainer.d.ts

@@ -8,7 +8,6 @@ export type InputContainerProps<T extends React.ElementType = 'div'> = {
     message?: React.ReactNode;
     icon?: JSX.Element;
     isLabelInline?: boolean;
-    isIconInline?: boolean;
     statusMessage?: React.ReactNode;
     inputId?: string;
     labelId?: string;

package/cjs/core/utils/components/InputContainer.js

@@ -9,6 +9,8 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const Box_js_1 = require('./Box.js');
+const index_js_1 = require('../../Label/index.js');
+const index_js_2 = require('../../StatusMessage/index.js');
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
@@ -22,7 +24,6 @@ const InputContainer = (props) => {
     message,
     icon,
     isLabelInline,
-    isIconInline,
     children,
     className,
     style,
@@ -34,29 +35,19 @@ const InputContainer = (props) => {
   return React.createElement(
     Box_js_1.Box,
     {
-      className: (0, classnames_1.default)(
-        'iui-input-container',
-        {
-          'iui-disabled': disabled,
-          [`iui-${status}`]: !!status,
-          'iui-inline-label': isLabelInline,
-          'iui-inline-icon': isIconInline,
-          'iui-with-message':
-            (!!message || !!icon || !!statusMessage) && !isLabelInline,
-        },
-        className,
-      ),
+      className: (0, classnames_1.default)('iui-input-grid', className),
+      'data-iui-status': status,
+      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
       style: style,
       ...rest,
     },
     label &&
       React.createElement(
-        Box_js_1.Box,
+        index_js_1.Label,
         {
           as: inputId && props.as !== 'label' ? 'label' : 'div',
-          className: (0, classnames_1.default)('iui-label', {
-            'iui-required': required,
-          }),
+          required: required,
+          disabled: disabled,
           htmlFor: inputId,
           id: labelId,
         },
@@ -65,23 +56,12 @@ const InputContainer = (props) => {
     children,
     statusMessage
       ? statusMessage
-      : React.createElement(
-          React.Fragment,
-          null,
-          icon &&
-            React.createElement(
-              Box_js_1.Box,
-              { as: 'span', className: 'iui-input-icon', 'aria-hidden': true },
-              icon,
-            ),
-          message &&
-            !isLabelInline &&
-            React.createElement(
-              Box_js_1.Box,
-              { className: 'iui-message' },
-              message,
-            ),
-        ),
+      : message &&
+          React.createElement(
+            index_js_2.StatusMessage,
+            { startIcon: icon, status: status },
+            message,
+          ),
   );
 };
 exports.InputContainer = InputContainer;

package/cjs/core/utils/components/InputFlexContainer.d.ts

@@ -2,6 +2,7 @@ import type { PolymorphicForwardRefComponent } from '../props.js';
 export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
+    size?: 'small' | 'large';
 };
 /**
  * Utility component for input container with display flex abilities.

package/cjs/core/utils/components/InputFlexContainer.js

@@ -14,7 +14,8 @@ const Box_js_1 = require('./Box.js');
  * @private
  */
 exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
-  const { isDisabled, status, children, className, style, ...rest } = props;
+  const { isDisabled, status, children, className, size, style, ...rest } =
+    props;
   return react_1.default.createElement(
     Box_js_1.Box,
     {
@@ -23,6 +24,7 @@ exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
         className,
       ),
       'data-iui-status': status,
+      'data-iui-size': size,
       'data-iui-disabled': isDisabled ? 'true' : undefined,
       ref: ref,
       style: style,

package/cjs/core/utils/components/Portal.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export type PortalProps = {
+    /**
+     * Where should the element be portaled to?
+     *
+     * If true, it will portal into nearest ThemeContext.portalContainer.
+     *
+     * If false, it will not be portaled.
+     *
+     * Otherwise, it will portal to the element passed to `to`.
+     *
+     * @default true
+     */
+    portal?: boolean | {
+        to: HTMLElement | (() => HTMLElement);
+    };
+};
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;

package/cjs/core/utils/components/Portal.js

@@ -0,0 +1,43 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Portal = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+const ReactDOM = tslib_1.__importStar(require('react-dom'));
+const ThemeContext_js_1 = require('../../ThemeProvider/ThemeContext.js');
+const dom_js_1 = require('../functions/dom.js');
+const useIsClient_js_1 = require('../hooks/useIsClient.js');
+// ----------------------------------------------------------------------------
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+const Portal = (props) => {
+  const { portal = true, children } = props;
+  const isClient = (0, useIsClient_js_1.useIsClient)();
+  const portalTo = usePortalTo(portal);
+  if (!isClient) {
+    return null;
+  }
+  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+};
+exports.Portal = Portal;
+// ----------------------------------------------------------------------------
+const usePortalTo = (portal) => {
+  const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
+  if (typeof portal === 'boolean') {
+    return portal
+      ? themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body
+      : null;
+  }
+  return typeof portal.to === 'function' ? portal.to() : portal.to;
+};

package/cjs/core/utils/components/index.d.ts

@@ -14,3 +14,4 @@ export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';
+export * from './Portal.js';

package/cjs/core/utils/components/index.js

@@ -21,3 +21,4 @@ tslib_1.__exportStar(require('./LinkAction.js'), exports);
 tslib_1.__exportStar(require('./AutoclearingHiddenLiveRegion.js'), exports);
 tslib_1.__exportStar(require('./Box.js'), exports);
 tslib_1.__exportStar(require('./ButtonBase.js'), exports);
+tslib_1.__exportStar(require('./Portal.js'), exports);

package/cjs/core/utils/functions/index.d.ts

@@ -6,3 +6,4 @@ export * from './focusable.js';
 export * from './supports.js';
 export * from './polymorphic.js';
 export * from './import.js';
+export * from './react.js';

package/cjs/core/utils/functions/index.js

@@ -13,3 +13,4 @@ tslib_1.__exportStar(require('./focusable.js'), exports);
 tslib_1.__exportStar(require('./supports.js'), exports);
 tslib_1.__exportStar(require('./polymorphic.js'), exports);
 tslib_1.__exportStar(require('./import.js'), exports);
+tslib_1.__exportStar(require('./react.js'), exports);

package/cjs/core/utils/functions/react.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+export declare const cloneElementWithRef: (children: React.ReactNode, getProps: (children: JSX.Element) => Record<string, unknown>) => string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;

package/cjs/core/utils/functions/react.js

@@ -0,0 +1,40 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.cloneElementWithRef = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+const useMergedRefs_js_1 = require('../hooks/useMergedRefs.js');
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+const cloneElementWithRef = (children, getProps) => {
+  if (!children) {
+    return null;
+  }
+  if (!React.isValidElement(children)) {
+    return children;
+  }
+  const props = getProps(children);
+  const ref = (0, useMergedRefs_js_1.mergeRefs)(
+    ...[
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'ref' in children ? children.ref : null,
+      'ref' in props ? props.ref : null,
+    ].filter(Boolean),
+  );
+  return React.cloneElement(children, {
+    ...props,
+    // we already checked ref above and handled null, so ts-ignore is ok
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ref,
+  });
+};
+exports.cloneElementWithRef = cloneElementWithRef;

package/cjs/core/utils/hooks/index.d.ts

@@ -11,4 +11,4 @@ export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
-export * from './useUncontrolledState.js';
+export * from './useControlledState.js';

package/cjs/core/utils/hooks/index.js

@@ -18,4 +18,4 @@ tslib_1.__exportStar(require('./useLatestRef.js'), exports);
 tslib_1.__exportStar(require('./useIsomorphicLayoutEffect.js'), exports);
 tslib_1.__exportStar(require('./useIsClient.js'), exports);
 tslib_1.__exportStar(require('./useId.js'), exports);
-tslib_1.__exportStar(require('./useUncontrolledState.js'), exports);
+tslib_1.__exportStar(require('./useControlledState.js'), exports);

package/cjs/core/utils/hooks/useControlledState.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+export declare const useControlledState: <T>(initialValue: T, controlledState: T, setControlledState?: React.Dispatch<React.SetStateAction<T>> | undefined) => readonly [T, React.Dispatch<React.SetStateAction<T>>];

package/cjs/core/utils/hooks/useControlledState.js

@@ -0,0 +1,39 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.useControlledState = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+const useControlledState = (
+  initialValue,
+  controlledState,
+  setControlledState,
+) => {
+  const [uncontrolledState, setUncontrolledState] =
+    React.useState(initialValue);
+  const state =
+    controlledState !== undefined ? controlledState : uncontrolledState;
+  const setState = React.useCallback(
+    (value) => {
+      setUncontrolledState(value);
+      setControlledState?.(value);
+    },
+    [setControlledState, setUncontrolledState],
+  );
+  return [state, setState];
+};
+exports.useControlledState = useControlledState;

package/cjs/styles.js

@@ -34,8 +34,9 @@ const styles = {
   'iui-button-dropdown': '_iui3-button-dropdown',
   'iui-button-split': '_iui3-button-split',
   'iui-button-group': '_iui3-button-group',
-  'iui-input-container': '_iui3-input-container',
+  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-input': '_iui3-input',
+  'iui-input-grid': '_iui3-input-grid',
   'iui-disabled': '_iui3-disabled',
   'iui-button-group-vertical': '_iui3-button-group-vertical',
   'iui-button-group-overflow-x': '_iui3-button-group-overflow-x',
@@ -178,36 +179,18 @@ const styles = {
   'iui-information-body-content': '_iui3-information-body-content',
   'iui-input-label': '_iui3-input-label',
   'iui-inline': '_iui3-inline',
-  'iui-required': '_iui3-required',
   'iui-input-with-icon': '_iui3-input-with-icon',
   'iui-select-tag-container': '_iui3-select-tag-container',
   'iui-end-icon': '_iui3-end-icon',
-  'iui-actionable': '_iui3-actionable',
   'iui-open': '_iui3-open',
-  'iui-inline-icon': '_iui3-inline-icon',
-  'iui-with-message': '_iui3-with-message',
-  'iui-input-icon': '_iui3-input-icon',
+  'iui-required': '_iui3-required',
   'iui-input-group': '_iui3-input-group',
+  'iui-status-message': '_iui3-status-message',
+  'iui-select-button': '_iui3-select-button',
+  'iui-input-group-wrapper': '_iui3-input-group-wrapper',
   'iui-toggle-switch-wrapper': '_iui3-toggle-switch-wrapper',
   'iui-radio-wrapper': '_iui3-radio-wrapper',
-  'iui-inline-label': '_iui3-inline-label',
-  'iui-label': '_iui3-label',
-  'iui-message': '_iui3-message',
-  'iui-select-button': '_iui3-select-button',
-  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-keyboard': '_iui3-keyboard',
-  'iui-location-marker': '_iui3-location-marker',
-  'iui-location-marker-default': '_iui3-location-marker-default',
-  'iui-location-marker-default-pin': '_iui3-location-marker-default-pin',
-  'iui-location-marker-default-pin-dot':
-    '_iui3-location-marker-default-pin-dot',
-  'iui-location-marker-data-rich': '_iui3-location-marker-data-rich',
-  'iui-location-marker-data-rich-body': '_iui3-location-marker-data-rich-body',
-  'iui-location-marker-data-rich-icon': '_iui3-location-marker-data-rich-icon',
-  'iui-location-marker-data-rich-icon-monochrome':
-    '_iui3-location-marker-data-rich-icon-monochrome',
-  'iui-location-marker-me': '_iui3-location-marker-me',
-  'iui-location-marker-me-dot': '_iui3-location-marker-me-dot',
   'iui-list': '_iui3-list',
   'iui-menu': '_iui3-menu',
   'iui-header-menu-icon': '_iui3-header-menu-icon',
@@ -236,10 +219,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-u8bwhh6': '_iui3-u8bwhh6',
+  'iui-ubn95wp': '_iui3-ubn95wp',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-u8bwhhv': '_iui3-u8bwhhv',
+  'iui-ubn95xj': '_iui3-ubn95xj',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -306,6 +289,7 @@ const styles = {
   'iui-table-body': '_iui3-table-body',
   'iui-table-header-wrapper': '_iui3-table-header-wrapper',
   'iui-slot': '_iui3-slot',
+  'iui-actionable': '_iui3-actionable',
   'iui-table-filter-button': '_iui3-table-filter-button',
   'iui-table-resizer': '_iui3-table-resizer',
   'iui-table-resizer-bar': '_iui3-table-resizer-bar',
@@ -402,6 +386,7 @@ const styles = {
   'iui-placement-bottom-start': '_iui3-placement-bottom-start',
   'iui-placement-bottom-end': '_iui3-placement-bottom-end',
   'iui-status-area': '_iui3-status-area',
+  'iui-message': '_iui3-message',
   'iui-toast-anchor': '_iui3-toast-anchor',
   'iui-informational': '_iui3-informational',
   'iui-label-on-left': '_iui3-label-on-left',
@@ -409,11 +394,8 @@ const styles = {
   'iui-toggle-switch-icon': '_iui3-toggle-switch-icon',
   'iui-toggle-switch': '_iui3-toggle-switch',
   'iui-toggle-switch-label': '_iui3-toggle-switch-label',
-  'iui-tooltip-container': '_iui3-tooltip-container',
   'iui-tooltip': '_iui3-tooltip',
-  'iui-tooltip-visible': '_iui3-tooltip-visible',
   'iui-transfer-list-wrapper': '_iui3-transfer-list-wrapper',
-  'iui-transfer-list-listbox-label': '_iui3-transfer-list-listbox-label',
   'iui-transfer-list-listbox-wrapper': '_iui3-transfer-list-listbox-wrapper',
   'iui-transfer-list-listbox': '_iui3-transfer-list-listbox',
   'iui-transfer-list-toolbar': '_iui3-transfer-list-toolbar',

package/esm/core/Alert/Alert.d.ts

@@ -12,20 +12,26 @@ type AlertOwnProps = {
      */
     isSticky?: boolean;
 };
+type AlertLegacyProps = {
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableText?: React.ReactNode;
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableTextProps?: React.ComponentPropsWithoutRef<'a'>;
+    /** @deprecated Use `Alert.CloseButton` subcomponent. */
+    onClose?: () => void;
+};
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>
- *  <Alert.Message>This is an alert.</Alert.Message>
- * </Alert>
+ * <Alert>This is an alert.</Alert>
  * @example
- * <Alert type='informational'>
+ * <Alert.Wrapper type='informational'>
  *  <Alert.Icon />
  *  <Alert.Message>This is an informational alert.</Alert.Message>
  *  <Alert.CloseButton onClick={() => {}} />
- * </Alert>
+ * </Alert.Wrapper>
  * @example
- * <Alert type='positive'>
+ * <Alert.Wrapper type='positive'>
  *  <Alert.Icon>
  *    <SvgSmileyHappy />
  *  </Alert.Icon>
@@ -36,17 +42,22 @@ type AlertOwnProps = {
  *  <Alert.CloseButton onClick={() => {}}>
  *    <SvgCollapse />
  *  </Alert.CloseButton>
- * </Alert>
+ * </Alert.Wrapper>
  */
-export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps> & {
+export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps & AlertLegacyProps> & {
+    /**
+     *  Alert wrapper subcomponent
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", AlertOwnProps>;
     /**
      * 	Alert icon subcomponent
      */
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }>;