carbon-react 111.8.3 → 111.8.5

package/esm/__internal__/input/input-presentation.component.d.ts

@@ -13,10 +13,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
     readOnly?: boolean;
     /** Size of an input */
     size?: Sizes;
+    /** If true, the component has an icon rendered inside */
+    hasIcon?: boolean;
 }
 export interface InputPresentationProps extends CommonInputPresentationProps {
     /** Content to be rendered before the input */
     positionedChildren?: React.ReactNode;
 }
-declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

package/esm/__internal__/input/input-presentation.component.js

@@ -14,7 +14,8 @@ const InputPresentation = ({
   size = "medium",
   error,
   warning,
-  info
+  info,
+  hasIcon
 }) => {
   const {
     hasFocus,
@@ -55,7 +56,8 @@ const InputPresentation = ({
     warning: warning,
     error: error,
     info: info,
-    validationRedesignOptIn: validationRedesignOptIn
+    validationRedesignOptIn: validationRedesignOptIn,
+    hasIcon: hasIcon
   }, children));
 };
 
@@ -64,6 +66,7 @@ InputPresentation.propTypes = {
   "children": PropTypes.node,
   "disabled": PropTypes.bool,
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "hasIcon": PropTypes.bool,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inputWidth": PropTypes.number,
   "positionedChildren": PropTypes.node,

package/esm/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/esm/__internal__/input/input-presentation.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import sizes from "./input-sizes.style";
+import StyledInput from "./input.style";
 export const StyledInputPresentationContainer = styled.div`
   flex: 0 0 ${({
   inputWidth
@@ -49,11 +50,17 @@ const InputPresentationStyle = styled.div`
   width: 100%;
   margin: 0;
   ${({
-  size
+  size,
+  hasIcon,
+  align
 }) => size && css`
       min-height: ${sizes[size].height};
-      padding-left: ${sizes[size].horizontalPadding};
-      padding-right: ${sizes[size].horizontalPadding};
+
+      ${StyledInput} {
+        padding: 0 ${sizes[size].horizontalPadding};
+        ${hasIcon && align === "right" && "padding-left: 0;"}
+        ${hasIcon && align === "left" && "padding-right: 0;"}
+      }
     `}
 
   ${({

package/esm/__internal__/input-behaviour/useInputBehaviour.js

@@ -11,8 +11,13 @@ const useInputBehaviour = blockGroupBehaviour => {
   }, []); // use mouse down rather than click to accommodate click and drag events too
 
   const onMouseDown = useCallback(() => {
-    // use a zero timeout to ensure focus is applied even on click and drag events
-    setTimeout(() => inputRef && inputRef.current && inputRef.current.focus());
+    requestAnimationFrame(() => {
+      var _inputRef$current;
+
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+        preventScroll: true
+      });
+    });
   }, []);
   const onMouseEnter = useCallback(() => setHasMouseOver(true), []);
   const onMouseLeave = useCallback(() => setHasMouseOver(false), []);

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -20,8 +20,6 @@ const InputIconToggleStyle = styled.span.attrs(({
   ${({
   size = "medium"
 }) => css`
-    margin-right: calc(-1 * ${sizes[size].horizontalPadding});
-    margin-left: calc(-1 * ${sizes[size].horizontalPadding});
     width: ${sizes[size].height};
   `}
 

package/esm/components/date/date.style.js

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
+import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 const datePickerWidth = {
   large: "140px",
@@ -16,6 +17,10 @@ const StyledDateInput = styled.div`
     width: ${({
   size
 }) => datePickerWidth[size]};
+
+    ${StyledInput} {
+      margin-right: -8px;
+    }
   }
 `;
 StyledDateInput.propTypes = {

package/esm/components/dialog/dialog.style.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { padding as paddingFn } from "styled-system";
 import baseTheme from "../../style/themes/base";
+import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
 import { StyledForm, StyledFormFooter, StyledFormContent } from "../form/form.style";
 import { StyledHeaderContent, StyledHeading, StyledHeadingTitle } from "../heading/heading.style";
 import StyledIconButton from "../icon-button/icon-button.style";
@@ -16,48 +17,6 @@ const dialogSizes = {
   "extra-large": "1080px"
 };
 
-const calculateWidthValue = props => {
-  const {
-    paddingLeft,
-    paddingRight,
-    padding
-  } = paddingFn(props);
-  const paddingValue = paddingLeft ?? paddingRight ?? padding;
-  return paddingValue === undefined ? HORIZONTAL_PADDING : paddingValue;
-};
-
-const calculateFormSpacingValues = (props, isFormContent) => {
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    padding
-  } = paddingFn(props);
-  const spacingTopValue = paddingTop ?? padding ?? CONTENT_TOP_PADDING;
-  const spacingRightValue = paddingRight ?? padding ?? HORIZONTAL_PADDING;
-  const spacingBottomValue = paddingBottom ?? padding ?? CONTENT_BOTTOM_PADDING;
-  const spacingLeftValue = paddingLeft ?? padding ?? HORIZONTAL_PADDING;
-
-  const setNegativeValue = value => `calc(-1px * ${value})`;
-
-  return {
-    "margin-left": setNegativeValue(spacingLeftValue),
-    "margin-right": setNegativeValue(spacingRightValue),
-    ...(isFormContent && {
-      "margin-top": setNegativeValue(spacingTopValue),
-      "padding-top": spacingTopValue,
-      "padding-bottom": spacingBottomValue,
-      "padding-left": spacingLeftValue,
-      "padding-right": spacingRightValue
-    }),
-    ...(!isFormContent && {
-      "margin-bottom": setNegativeValue(spacingBottomValue),
-      bottom: setNegativeValue(spacingBottomValue)
-    })
-  };
-};
-
 const calculatePaddingTopInnerContent = ({
   py,
   p
@@ -103,7 +62,7 @@ const StyledDialog = styled.div`
   }
 
   ${StyledFormFooter}.sticky {
-    width: calc(100% + (2px * ${calculateWidthValue}));
+    ${calculateWidthValue};
     ${props => calculateFormSpacingValues(props, false)}
   }
 

package/esm/components/form/form.style.js

@@ -126,23 +126,6 @@ export const StyledForm = styled.form`
 
       ${isInSidebar && css`
         min-height: 100%;
-        ${StyledFormContent}.sticky {
-          padding-right: var(--spacing400);
-          padding-left: var(--spacing400);
-          padding-top: 27px;
-          margin-right: calc(-1 * var(--spacing400));
-          margin-left: calc(-1 * var(--spacing400));
-          margin-top: -27px;
-        }
-
-        ${StyledFormFooter}.sticky {
-          margin-left: calc(-1 * var(--spacing400));
-          margin-bottom: calc(-1 * var(--spacing400));
-          width: calc(100% + var(--spacing800));
-          padding-left: var(--spacing400);
-          padding-right: var(--spacing400);
-          bottom: -32px;
-        }
       `}
     `}
 `;

package/esm/components/link-preview/__internal__/placeholder.component.d.ts

@@ -0,0 +1,2 @@
+export default Placeholder;
+declare function Placeholder(): JSX.Element;

package/esm/components/link-preview/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./link-preview";
-export * from "./link-preview";
+export { default } from "./link-preview.component";
+export type { LinkPreviewProps } from "./link-preview.component";

package/esm/components/link-preview/link-preview.component.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+interface ImageShape {
+    /** The url string to be passed to image src */
+    url: string;
+    /** The string to be passed to image alt */
+    alt?: string;
+}
+export interface LinkPreviewProps {
+    /** Used to set the root element to either an anchor link or div container */
+    as?: "a" | "div";
+    /** The description to be displayed */
+    description?: string;
+    /** The config for the image to be displayed */
+    image?: ImageShape;
+    /** Flag to trigger the loading animation */
+    isLoading?: boolean;
+    /** The callback to handle the deleting of a Preview, to hide the close button do not set this prop */
+    onClose?: (url?: string) => void;
+    /** The title to be displayed */
+    title?: string;
+    /** The url string to be displayed and to serve as the link's src */
+    url?: string;
+}
+export declare const LinkPreview: {
+    ({ as, description, image, isLoading, onClose, title, url, ...rest }: LinkPreviewProps): JSX.Element;
+    displayName: string;
+};
+export default LinkPreview;

package/esm/components/link-preview/link-preview.component.js

@@ -40,13 +40,15 @@ const LinkPreview = ({
     return url;
   };
 
+  const linkProps = canRenderAsLink ? {
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  } : {};
   return /*#__PURE__*/React.createElement(StyledLinkPreview, _extends({
     as: loadingState ? "div" : as,
-    tabIndex: loadingState || as === "div" ? -1 : 0,
-    href: canRenderAsLink ? url : undefined,
-    target: canRenderAsLink ? "_blank" : undefined,
-    rel: canRenderAsLink ? "noopener noreferrer" : undefined
-  }, rest), imageProps().src ? /*#__PURE__*/React.createElement(Image, imageProps()) : /*#__PURE__*/React.createElement(Placeholder, null), /*#__PURE__*/React.createElement(StyledPreviewWrapper, {
+    tabIndex: loadingState || as === "div" ? -1 : 0
+  }, linkProps, rest), imageProps().src ? /*#__PURE__*/React.createElement(Image, imageProps()) : /*#__PURE__*/React.createElement(Placeholder, null), /*#__PURE__*/React.createElement(StyledPreviewWrapper, {
     isLoading: loadingState
   }, /*#__PURE__*/React.createElement(Preview, {
     loading: loadingState,
@@ -60,32 +62,17 @@ const LinkPreview = ({
 };
 
 LinkPreview.propTypes = {
-  /** Used to set the root element to either am anchor link or div container */
-  as: PropTypes.oneOf(["a", "div"]),
-
-  /** The description to be displayed */
-  description: PropTypes.string,
-
-  /** The config for the image to be displayed */
-  image: PropTypes.shape({
-    /** The url string to be passed to image src */
-    url: PropTypes.string.isRequired,
-
-    /** The string to be passed to image alt */
-    alt: PropTypes.string
+  "as": PropTypes.oneOf(["a", "div"]),
+  "description": PropTypes.string,
+  "image": PropTypes.shape({
+    "alt": PropTypes.string,
+    "url": PropTypes.string.isRequired
   }),
-
-  /** Flag to trigger the loading animation */
-  isLoading: PropTypes.bool,
-
-  /** The callback to handle the deleting of a Preview, to hide the close button do not set this prop */
-  onClose: PropTypes.func,
-
-  /** The title to be displayed */
-  title: PropTypes.string,
-
-  /** The url string to be displayed and to serve as the link's src */
-  url: PropTypes.string
+  "isLoading": PropTypes.bool,
+  "onClose": PropTypes.func,
+  "title": PropTypes.string,
+  "url": PropTypes.string
 };
+export { LinkPreview };
 LinkPreview.displayName = "LinkPreview";
 export default LinkPreview;

package/esm/components/link-preview/link-preview.style.d.ts

@@ -0,0 +1,11 @@
+declare const StyledLinkPreview: import("styled-components").StyledComponent<"a", any, {
+    as?: "a" | "div" | undefined;
+}, never>;
+declare const StyledCloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPreviewWrapper: import("styled-components").StyledComponent<"div", any, {
+    isLoading: boolean;
+}, never>;
+declare const StyledTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledUrl: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledLinkPreview, StyledCloseIconWrapper, StyledPreviewWrapper, StyledTitle, StyledDescription, StyledUrl, };

package/esm/components/select/__internal__/select-text/select-text.component.js

@@ -11,7 +11,8 @@ const SelectText = ({
   placeholder,
   readOnly,
   textId,
-  transparent
+  transparent,
+  size = "medium"
 }) => {
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
 
@@ -31,7 +32,8 @@ const SelectText = ({
     readOnly: readOnly,
     role: "button",
     tabIndex: "-1",
-    transparent: transparent
+    transparent: transparent,
+    size: size
   }, hasPlaceholder ? placeholder : formattedValue);
 };
 
@@ -61,6 +63,9 @@ SelectText.propTypes = {
   transparent: PropTypes.bool,
 
   /** Id of the Select Text element */
-  textId: PropTypes.string
+  textId: PropTypes.string,
+
+  /** Component size */
+  size: PropTypes.string
 };
 export default SelectText;

package/esm/components/select/__internal__/select-text/select-text.d.ts

@@ -27,6 +27,8 @@ export interface SelectTextProps {
   transparent?: boolean;
   /** Id of the Select Text element */
   textId?: string;
+  /** Component size */
+  size?: string;
 }
 
 declare function SelectText(props: SelectTextProps): JSX.Element;

package/esm/components/select/__internal__/select-text/select-text.style.js

@@ -1,10 +1,12 @@
 import styled, { css } from "styled-components";
+import sizes from "../../../../__internal__/input/input-sizes.style";
 const StyledSelectText = styled.span`
   ${({
   disabled,
   hasPlaceholder,
   readOnly,
-  transparent
+  transparent,
+  size
 }) => css`
     align-items: center;
     display: inline-flex;
@@ -17,6 +19,7 @@ const StyledSelectText = styled.span`
     white-space: nowrap;
     width: 30px;
     z-index: 1;
+    padding-left: ${sizes[size].horizontalPadding};
 
     ${transparent && css`
       font-weight: 900;

package/esm/components/select/multi-select/multi-select.style.js

@@ -4,6 +4,7 @@ import { baseTheme } from "../../../style/themes";
 import InputIconToggleStyle from "../../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import StyledSelect from "../select.style";
 import InputPresentationStyle from "../../../__internal__/input/input-presentation.style";
+import StyledInput from "../../../__internal__/input/input.style";
 import sizes from "../../../__internal__/input/input-sizes.style";
 const StyledSelectPillContainer = styled.div`
   display: flex;
@@ -18,7 +19,6 @@ const StyledSelectPillContainer = styled.div`
 `;
 const StyledSelectMultiSelect = styled(StyledSelect)`
   ${InputIconToggleStyle} {
-    margin-right: 0;
     position: absolute;
     right: 0;
     height: 100%;
@@ -28,7 +28,14 @@ const StyledSelectMultiSelect = styled(StyledSelect)`
     padding-right: ${({
   size
 }) => sizes[size].height};
+    padding-left: ${({
+  size
+}) => sizes[size].horizontalPadding};
     position: relative;
+
+    ${StyledInput} {
+      padding: 0;
+    }
   }
 `;
 const StyledAccessibilityLabelContainer = styled.div`

package/esm/components/select/select-textbox/select-textbox.component.js

@@ -32,7 +32,7 @@ const SelectTextbox = ({
   isOpen,
   readOnly,
   placeholder,
-  size,
+  size = "medium",
   onClick,
   onFocus,
   onBlur,
@@ -122,7 +122,8 @@ const SelectTextbox = ({
       placeholder: placeholder || l.select.placeholder(),
       onClick: handleTextboxClick,
       disabled: disabled,
-      readOnly: readOnly
+      readOnly: readOnly,
+      size: size
     }, restProps));
   }
 

package/esm/components/sidebar/sidebar.component.js

@@ -65,7 +65,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "data-element": rest["data-element"],
     "data-role": rest["data-role"]
   };
-  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, {
+  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, _extends({
     "aria-modal": !enableBackgroundUI && (topModal === null || topModal === void 0 ? void 0 : topModal.contains(sidebarRef.current)),
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -76,7 +76,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "data-element": "sidebar",
     onCancel: onCancel,
     role: role
-  }, header && /*#__PURE__*/React.createElement(SidebarHeader, {
+  }, filterStyledSystemPaddingProps(rest)), header && /*#__PURE__*/React.createElement(SidebarHeader, {
     id: headerId
   }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
     "data-element": "sidebar-content",

package/esm/components/sidebar/sidebar.config.d.ts

@@ -9,3 +9,7 @@ export declare const SIDEBAR_SIZES_CSS: {
 };
 export declare const SIDEBAR_SIZES: string[];
 export declare const SIDEBAR_ALIGNMENTS: string[];
+export declare const SIDEBAR_TOP_SPACING = "27px";
+export declare const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
+export declare const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
+export declare const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";

package/esm/components/sidebar/sidebar.config.js

@@ -8,4 +8,8 @@ export const SIDEBAR_SIZES_CSS = {
   "extra-large": "814px"
 };
 export const SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
-export const SIDEBAR_ALIGNMENTS = ["left", "right"];
+export const SIDEBAR_ALIGNMENTS = ["left", "right"];
+export const SIDEBAR_TOP_SPACING = "27px";
+export const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
+export const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
+export const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";

package/esm/components/sidebar/sidebar.style.d.ts

@@ -1,8 +1,9 @@
+import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
 declare type StyledSidebarProps = {
     onCancel?: SidebarProps["onCancel"];
     position?: SidebarProps["position"];
     size?: SidebarProps["size"];
 };
-declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps, never>;
+declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export default StyledSidebar;

package/esm/components/sidebar/sidebar.style.js

@@ -1,6 +1,8 @@
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
+import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
+import { StyledFormContent, StyledFormFooter } from "../form/form.style";
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
 const StyledSidebar = styled.div`
   // prevents outline being added in safari
@@ -8,6 +10,15 @@ const StyledSidebar = styled.div`
     outline: none;
   }
 
+  ${StyledFormContent} {
+    ${props => calculateFormSpacingValues(props, true, "sidebar")}
+  }
+
+  ${StyledFormFooter}.sticky {
+    ${calculateWidthValue}
+    ${props => calculateFormSpacingValues(props, false, "sidebar")}
+  }
+
   ${({
   onCancel,
   position,

package/esm/components/textarea/textarea.component.js

@@ -117,6 +117,7 @@ const Textarea = ({
       }
     };
   }, [expandable]);
+  const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -124,7 +125,8 @@ const Textarea = ({
     labelInline: labelInline,
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
+    "data-element": dataElement,
+    hasIcon: hasIconInside
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FormField, {
     fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,

package/esm/components/textarea/textarea.style.d.ts

@@ -1,3 +1,3 @@
-export const MIN_HEIGHT: 40;
+export const MIN_HEIGHT: 64;
 export default StyledTextarea;
 declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/textarea/textarea.style.js

@@ -1,21 +1,22 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
-import InputPresentationStyle from "../../__internal__/input/input-presentation.style";
 import StyledInput from "../../__internal__/input/input.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import BaseTheme from "../../style/themes/base";
-export const MIN_HEIGHT = 40;
+export const MIN_HEIGHT = 64;
 const StyledTextarea = styled.div`
   ${margin};
 
   ${StyledInput} {
+    box-sizing: border-box;
     resize: none;
     min-height: ${MIN_HEIGHT}px;
-  }
-
-  ${InputPresentationStyle} {
     padding: var(--spacing150) var(--spacing200);
+
+    ${({
+  hasIcon
+}) => hasIcon && "padding-right: var(--spacing500)"}
   }
 
   ${({
@@ -29,6 +30,10 @@ const StyledTextarea = styled.div`
 
   ${InputIconToggleStyle} {
     height: 40px;
+    position: absolute;
+    height: 100%;
+    top: 0px;
+    right: 4px;
   }
 `;
 StyledTextarea.defaultProps = {

package/esm/components/textbox/textbox.component.js

@@ -18,7 +18,7 @@ import { NewValidationContext } from "../carbon-provider/carbon-provider.compone
 import NumeralDateContext from "../numeral-date/numeral-date-context";
 
 const Textbox = ({
-  align,
+  align = "left",
   autoFocus,
   children,
   disabled,
@@ -98,6 +98,7 @@ const Textbox = ({
     fieldHelp
   });
   const labelId = label ? externalLabelId || internalLabelId : "";
+  const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
@@ -138,7 +139,8 @@ const Textbox = ({
     warning: warning,
     info: info,
     inputWidth: inputWidth || 100 - labelWidth,
-    positionedChildren: positionedChildren
+    positionedChildren: positionedChildren,
+    hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
     "data-element": "textbox-prefix"
   }, prefix), validationRedesignOptIn && !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {

package/esm/style/utils/form-style-utils.d.ts

@@ -0,0 +1,19 @@
+import { PaddingProps } from "styled-system";
+declare type ContainerComponent = "dialog" | "sidebar";
+export declare const calculateWidthValue: (props: PaddingProps) => string;
+export declare const calculateFormSpacingValues: (props: PaddingProps, isFormContent: boolean, containerComponent?: ContainerComponent) => {
+    "margin-top": string;
+    "padding-top": string;
+    "padding-bottom": string | undefined;
+    "padding-left": string;
+    "padding-right": string;
+    "margin-left": string;
+    "margin-right": string;
+} | {
+    "margin-bottom": string;
+    "padding-left": string | undefined;
+    "padding-right": string | undefined;
+    "margin-left": string;
+    "margin-right": string;
+};
+export {};