carbon-react 126.0.1 → 126.2.0

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { BorderRadiusType } from "../../components/box/box.component";
 import { ValidationProps } from "../validations";
 export declare type Sizes = "small" | "medium" | "large";
 export interface CommonInputPresentationProps extends ValidationProps {
@@ -22,10 +23,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
     size?: Sizes;
     /** If true, the component has an icon rendered inside */
     hasIcon?: boolean;
+    /** Specify a custom border radius. Any valid border-radius design token, or an array of border-radius design tokens. */
+    borderRadius?: BorderRadiusType | BorderRadiusType[];
 }
 export interface InputPresentationProps extends CommonInputPresentationProps {
     /** Content to be rendered before the input */
     positionedChildren?: React.ReactNode;
 }
-declare const InputPresentation: ({ children, positionedChildren, prefix, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

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

@@ -4,19 +4,20 @@ import InputPresentationStyle, { StyledInputPresentationContainer } from "./inpu
 import { InputContext, InputGroupContext } from "../input-behaviour";
 import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
 const InputPresentation = ({
+  align,
+  borderRadius = "borderRadius050",
   children,
-  positionedChildren,
-  prefix,
+  disabled,
+  error,
+  hasIcon,
+  info,
   inputWidth,
   maxWidth,
-  align,
-  disabled,
+  positionedChildren,
+  prefix,
   readOnly,
   size = "medium",
-  error,
-  warning,
-  info,
-  hasIcon
+  warning
 }) => {
   const {
     hasFocus,
@@ -57,11 +58,13 @@ const InputPresentation = ({
     error: error,
     info: info,
     validationRedesignOptIn: validationRedesignOptIn,
-    hasIcon: hasIcon
+    hasIcon: hasIcon,
+    borderRadius: borderRadius
   }, children));
 };
 InputPresentation.propTypes = {
   "align": PropTypes.string,
+  "borderRadius": PropTypes.any,
   "children": PropTypes.node,
   "disabled": PropTypes.bool,
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

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, "maxWidth" | "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

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

@@ -45,13 +45,22 @@ const InputPresentationStyle = styled.div`
   align-items: stretch;
   background: var(--colorsUtilityYang100);
   border: 1px solid var(--colorsUtilityMajor300);
-  border-radius: var(--borderRadius050);
   box-sizing: border-box;
   cursor: text;
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   margin: 0;
+
+  ${({
+  borderRadius
+}) => {
+  if (Array.isArray(borderRadius)) {
+    return `border-radius: ${borderRadius.map(value => `var(--${value})`).join(" ")};`;
+  }
+  return `border-radius: var(--${borderRadius});`;
+}}
+
   ${({
   size,
   hasIcon,

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { BorderRadiusType } from "../../components/box/box.component";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
     /** The id of the element that describe the input. */
@@ -11,6 +12,8 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     disabled?: boolean;
     /** HTML id attribute of the input */
     id?: string;
+    /** Specify a custom border radius for the input. Any valid border-radius design token, or an array of border-radius design tokens. */
+    inputBorderRadius?: BorderRadiusType | BorderRadiusType[];
     /** A callback to retrieve the input reference */
     inputRef?: (input: React.RefObject<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Name of the input */

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

@@ -44,6 +44,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
   id,
   name,
   validationIconId,
+  inputBorderRadius = "borderRadius050",
   ...rest
 }, ref) => {
   const context = useContext(InputContext);
@@ -146,7 +147,8 @@ const Input = /*#__PURE__*/React.forwardRef(({
     onFocus: handleFocus,
     onBlur: handleBlur,
     onClick: handleClick,
-    onChange: handleChange
+    onChange: handleChange,
+    inputBorderRadius: inputBorderRadius
   }));
 });
 Input.propTypes = {
@@ -240,6 +242,7 @@ Input.propTypes = {
   "hidden": PropTypes.bool,
   "id": PropTypes.string,
   "inlist": PropTypes.any,
+  "inputBorderRadius": PropTypes.any,
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputRef": PropTypes.func,
   "is": PropTypes.string,

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

@@ -1,3 +1,3 @@
 import { CommonInputProps } from "./input.component";
-declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly">, never>;
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly" | "inputBorderRadius">, never>;
 export default StyledInput;

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

@@ -2,7 +2,6 @@ import styled, { css } from "styled-components";
 const StyledInput = styled.input`
   background: transparent;
   border: none;
-  border-radius: var(--borderRadius050);
   color: var(--colorsUtilityYin090);
   flex-grow: 1;
   font-size: var(--fontSizes100);
@@ -16,6 +15,15 @@ const StyledInput = styled.input`
     -webkit-background-clip: text;
   }
 
+  ${({
+  inputBorderRadius
+}) => {
+  if (Array.isArray(inputBorderRadius)) {
+    return `border-radius: ${inputBorderRadius.map(value => `var(--${value})`).join(" ")};`;
+  }
+  return `border-radius: var(--${inputBorderRadius});`;
+}}
+
   ${({
   align
 }) => align && css`

package/esm/components/box/box.component.d.ts

@@ -8,7 +8,7 @@ export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
-declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
+export declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
 export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, LayoutProps, Omit<PositionProps, "zIndex">, SpaceProps, TagProps {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** Set the ID attribute of the Box component */

package/esm/components/button/button-types.style.d.ts

@@ -4,5 +4,7 @@ declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
     tertiary: string;
     dashed: string;
     darkBackground: string;
+    "gradient-grey": string;
+    "gradient-white": string;
 };
 export default _default;

package/esm/components/button/button-types.style.js

@@ -11,6 +11,27 @@ function makeColors(color) {
   }
   `;
 }
+const disabledImageStyle = `
+  img, svg {
+    opacity: 0.3;
+  }
+`;
+const gradientDisabledStyle = `
+  background: transparent;
+  border-color: var(--colorsActionDisabled500);
+  ${makeColors("var(--colorsActionMajorYin030)")};
+  &:hover {
+    border-color: var(--colorsActionDisabled500);
+    ${makeColors("var(--colorsActionMajorYin030)")};
+  }
+  ${disabledImageStyle}
+`;
+const gradientSharedStyle = `
+  border: 2px solid transparent;
+  &:hover {
+    background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
+  }
+`;
 export default ((isDisabled, destructive) => ({
   primary: `
     background: var(--colorsActionMajor500);
@@ -21,26 +42,29 @@ export default ((isDisabled, destructive) => ({
     }
 
     ${isDisabled ? `
-    background: var(--colorsActionDisabled500);
-    ${makeColors("var(--colorsActionMajorYin030)")};
-    &:hover {
-      background: var(--colorsActionDisabled500);
-    }
-  ` : ""}
+          background: var(--colorsActionDisabled500);
+          ${makeColors("var(--colorsActionMajorYin030)")};
+          &:hover {
+            background: var(--colorsActionDisabled500);
+          }
+          ${disabledImageStyle}
+        ` : ""}
 
-    ${destructive ? `background: var(--colorsSemanticNegative500);
-    ${makeColors("var(--colorsSemanticNegativeYang100)")};
-    &:hover {
-      background: var(--colorsSemanticNegative600);
-    }
+    ${destructive ? `
+        background: var(--colorsSemanticNegative500);
+        ${makeColors("var(--colorsSemanticNegativeYang100)")};
+        &:hover {
+          background: var(--colorsSemanticNegative600);
+        }
 
     ${isDisabled ? `
-      background: var(--colorsActionDisabled500);
-      ${makeColors("var(--colorsActionMajorYin030)")};
-      &:hover {
-        background: var(--colorsActionDisabled500);
-      }
-    ` : ""}` : ""}
+          background: var(--colorsActionDisabled500);
+          ${makeColors("var(--colorsActionMajorYin030)")};
+          &:hover {
+            background: var(--colorsActionDisabled500);
+          }
+          ${disabledImageStyle}
+        ` : ""}` : ""}
   `,
   secondary: `
       background: transparent;
@@ -53,24 +77,25 @@ export default ((isDisabled, destructive) => ({
       }
 
       ${destructive ? `
-        border-color: var(--colorsSemanticNegative500);
-        ${makeColors("var(--colorsSemanticNegative500)")}
-        &:hover {
-          background: var(--colorsSemanticNegative600);
-          border-color: var(--colorsSemanticNegativeTransparent);
-          ${makeColors("var(--colorsSemanticNegativeYang100)")};
-        }
-      ` : ""}
+            border-color: var(--colorsSemanticNegative500);
+            ${makeColors("var(--colorsSemanticNegative500)")}
+            &:hover {
+              background: var(--colorsSemanticNegative600);
+              border-color: var(--colorsSemanticNegativeTransparent);
+              ${makeColors("var(--colorsSemanticNegativeYang100)")};
+            }
+          ` : ""}
       
       ${isDisabled ? `
-        border-color: var(--colorsActionDisabled500);
-        ${makeColors("var(--colorsActionMajorYin030)")};
-        &:hover {
-          background: transparent;
-          border-color: var(--colorsActionDisabled500);
-          ${makeColors("var(--colorsActionMajorYin030)")};
-        }
-    ` : ""}
+            border-color: var(--colorsActionDisabled500);
+            ${makeColors("var(--colorsActionMajorYin030)")};
+            &:hover {
+              background: transparent;
+              border-color: var(--colorsActionDisabled500);
+              ${makeColors("var(--colorsActionMajorYin030)")};
+            }
+            ${disabledImageStyle}
+          ` : ""}
   `,
   tertiary: `
     background: transparent;
@@ -82,20 +107,21 @@ export default ((isDisabled, destructive) => ({
     }
 
     ${destructive ? `
-      ${makeColors("var(--colorsSemanticNegative500)")};
-      &:hover {
-        background: var(--colorsSemanticNegative600);
-        ${makeColors("var(--colorsSemanticNegativeYang100)")};
-      }
-      ` : ""}
+          ${makeColors("var(--colorsSemanticNegative500)")};
+          &:hover {
+            background: var(--colorsSemanticNegative600);
+            ${makeColors("var(--colorsSemanticNegativeYang100)")};
+          }
+        ` : ""}
 
     ${isDisabled ? `
-      ${makeColors("var(--colorsActionMajorYin030)")};
-      &:hover {
-        background: var(--colorsActionMajorTransparent);
-        ${makeColors("var(--colorsActionMajorYin030)")};
-      }
-    ` : ""}
+          ${makeColors("var(--colorsActionMajorYin030)")};
+          &:hover {
+            background: var(--colorsActionMajorTransparent);
+            ${makeColors("var(--colorsActionMajorYin030)")};
+          }
+          ${disabledImageStyle}
+        ` : ""}
   `,
   dashed: `
     background: transparent;
@@ -106,16 +132,17 @@ export default ((isDisabled, destructive) => ({
     }
 
     ${destructive ? `
-      border-color: var(--colorsSemanticNegative500);
-      ` : ""}
+          border-color: var(--colorsSemanticNegative500);
+        ` : ""}
 
     ${isDisabled ? `
-      border-color: var(--colorsActionDisabled500);
-      ${makeColors("var(--colorsActionMinorYin030)")};
-      &:hover {
-        background-color: transparent;
-      }
-    ` : ""}
+          border-color: var(--colorsActionDisabled500);
+          ${makeColors("var(--colorsActionMinorYin030)")};
+          &:hover {
+            background-color: transparent;
+          }
+          ${disabledImageStyle}
+        ` : ""}
   `,
   darkBackground: `
     background: var(--colorsActionMajorYang100);
@@ -127,12 +154,25 @@ export default ((isDisabled, destructive) => ({
     }
     
     ${isDisabled ? `
-      background: var(--colorsActionDisabled500);
-      ${makeColors("var(--colorsActionMajorYin030)")};
-      &:hover {
-        background: var(--colorsActionDisabled500);
-        ${makeColors("var(--colorsActionMajorYin030)")};
-      }
-    ` : ""}
+          background: var(--colorsActionDisabled500);
+          ${makeColors("var(--colorsActionMajorYin030)")};
+          &:hover {
+            background: var(--colorsActionDisabled500);
+            ${makeColors("var(--colorsActionMajorYin030)")};
+          }
+          ${disabledImageStyle}
+        ` : ""}
+  `,
+  "gradient-grey": `
+    ${isDisabled ? gradientDisabledStyle : `
+          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;          
+          ${gradientSharedStyle}
+        `}
+  `,
+  "gradient-white": `
+    ${isDisabled ? gradientDisabledStyle : `
+          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;          
+          ${gradientSharedStyle}
+        `}
   `
 }));

package/esm/components/button/button.component.d.ts

@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
-export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
+export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" | "gradient-grey" | "gradient-white";
 export declare type SizeOptions = "small" | "medium" | "large";
 export declare type ButtonIconPosition = "before" | "after";
 export interface ButtonProps extends SpaceProps, TagProps {

package/esm/components/button/button.component.js

@@ -3,7 +3,7 @@ import React, { useCallback, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import Icon from "../icon";
-import StyledButton, { StyledButtonSubtext } from "./button.style";
+import StyledButton, { StyledButtonSubtext, StyledButtonMainText } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
@@ -22,24 +22,26 @@ function renderChildren({
   iconTooltipPosition,
   tooltipTarget
 }) {
-  const iconColorMap = {
-    primary: "--colorsActionMajorYang100",
-    secondary: "--colorsActionMajor500",
-    tertiary: "--colorsActionMajor500",
-    darkBackground: "--colorsActionMajor500",
-    dashed: "--colorsActionMajor500"
+  const iconColor = () => {
+    if (buttonType === "primary") {
+      return "--colorsActionMajorYang100";
+    }
+    if (buttonType.includes("gradient")) {
+      return "--colorsActionMinorYin090";
+    }
+    return "--colorsActionMajor500";
   };
   const iconProps = {
     "aria-hidden": true,
     disabled,
-    color: iconColorMap[buttonType],
+    color: iconColor(),
     bg: "transparent",
     bgSize: "extra-small"
   };
   const isValidChildren = children !== undefined && children !== false;
   return /*#__PURE__*/React.createElement(React.Fragment, null, iconType && iconPosition === "before" && isValidChildren && /*#__PURE__*/React.createElement(Icon, _extends({
     type: iconType
-  }, iconProps)), isValidChildren && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+  }, iconProps)), isValidChildren && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(StyledButtonMainText, {
     "data-element": "main-text"
   }, children), size === "large" && /*#__PURE__*/React.createElement(StyledButtonSubtext, {
     "data-element": "subtext"
@@ -174,7 +176,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
 });
 Button.propTypes = {
   "aria-label": PropTypes.string,
-  "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
+  "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
   "children": PropTypes.node,
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
@@ -524,7 +526,7 @@ const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 ButtonWithForwardRef.propTypes = {
   "aria-label": PropTypes.string,
-  "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
+  "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
   "children": PropTypes.node,
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,

package/esm/components/button/button.config.js

@@ -1,3 +1,3 @@
-export const BUTTON_VARIANTS = ["primary", "secondary", "tertiary", "dashed", "darkBackground"];
+export const BUTTON_VARIANTS = ["primary", "secondary", "tertiary", "dashed", "darkBackground", "gradient-white", "gradient-grey"];
 export const BUTTON_SIZES = ["small", "medium", "large"];
 export const BUTTON_ICON_POSITIONS = ["before", "after"];

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

@@ -4,4 +4,5 @@ declare const StyledButton: import("styled-components").StyledComponent<"button"
     iconOnly?: boolean | undefined;
 }, never>;
 export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledButtonMainText: import("styled-components").StyledComponent<"span", any, {}, never>;
 export default StyledButton;

package/esm/components/button/button.style.js

@@ -110,6 +110,10 @@ export const StyledButtonSubtext = styled.span`
   font-weight: 400;
   display: block;
 `;
+export const StyledButtonMainText = styled.span`
+  display: flex;
+  align-items: center;
+`;
 StyledButton.defaultProps = {
   theme: BaseTheme
 };

package/esm/components/date/date.component.js

@@ -423,6 +423,7 @@ DateInput.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputBorderRadius": PropTypes.any,
   "inputHint": PropTypes.string,
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
   "inputName": PropTypes.oneOf(["end", "start"]),

package/esm/components/decimal/decimal.component.js

@@ -296,6 +296,7 @@ Decimal.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputBorderRadius": PropTypes.any,
   "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),

package/esm/components/flat-table/flat-table-header/flat-table-header-utils.d.ts

@@ -1,3 +1,3 @@
 import { FlatTableProps } from "..";
-declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityYang100)" | "var(--colorsUtilityMajor025)" | "var(--colorsActionMinor550)";
+declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityMajor025)" | "var(--colorsUtilityYang100)" | "var(--colorsActionMinor550)";
 export default getAlternativeBackgroundColor;

package/esm/components/grouped-character/grouped-character.component.js

@@ -222,6 +222,7 @@ GroupedCharacter.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputBorderRadius": PropTypes.any,
   "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),

package/esm/components/number/number.component.js

@@ -153,6 +153,7 @@ Number.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputBorderRadius": PropTypes.any,
   "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),

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

@@ -557,6 +557,7 @@ FilterableSelect.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputBorderRadius": PropTypes.any,
   "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),

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

@@ -568,6 +568,7 @@ MultiSelect.propTypes = {
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
+  "inputBorderRadius": PropTypes.any,
   "inputHint": PropTypes.string,
   "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),