carbon-react 126.0.1 → 126.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/esm/__internal__/input/input-presentation.component.d.ts +4 -1
  2. package/esm/__internal__/input/input-presentation.component.js +12 -9
  3. package/esm/__internal__/input/input-presentation.style.d.ts +1 -1
  4. package/esm/__internal__/input/input-presentation.style.js +10 -1
  5. package/esm/__internal__/input/input.component.d.ts +3 -0
  6. package/esm/__internal__/input/input.component.js +4 -1
  7. package/esm/__internal__/input/input.style.d.ts +1 -1
  8. package/esm/__internal__/input/input.style.js +9 -1
  9. package/esm/components/box/box.component.d.ts +1 -1
  10. package/esm/components/date/date.component.js +1 -0
  11. package/esm/components/decimal/decimal.component.js +1 -0
  12. package/esm/components/flat-table/flat-table-header/flat-table-header-utils.d.ts +1 -1
  13. package/esm/components/grouped-character/grouped-character.component.js +1 -0
  14. package/esm/components/number/number.component.js +1 -0
  15. package/esm/components/select/filterable-select/filterable-select.component.js +1 -0
  16. package/esm/components/select/multi-select/multi-select.component.js +1 -0
  17. package/esm/components/select/select-textbox/select-textbox.component.js +1 -0
  18. package/esm/components/select/simple-select/simple-select.component.js +1 -0
  19. package/esm/components/textarea/textarea.component.d.ts +3 -0
  20. package/esm/components/textarea/textarea.component.js +13 -2
  21. package/esm/components/textbox/textbox.component.js +1 -0
  22. package/lib/__internal__/input/input-presentation.component.d.ts +4 -1
  23. package/lib/__internal__/input/input-presentation.component.js +12 -9
  24. package/lib/__internal__/input/input-presentation.style.d.ts +1 -1
  25. package/lib/__internal__/input/input-presentation.style.js +10 -1
  26. package/lib/__internal__/input/input.component.d.ts +3 -0
  27. package/lib/__internal__/input/input.component.js +4 -1
  28. package/lib/__internal__/input/input.style.d.ts +1 -1
  29. package/lib/__internal__/input/input.style.js +9 -1
  30. package/lib/components/box/box.component.d.ts +1 -1
  31. package/lib/components/date/date.component.js +1 -0
  32. package/lib/components/decimal/decimal.component.js +1 -0
  33. package/lib/components/flat-table/flat-table-header/flat-table-header-utils.d.ts +1 -1
  34. package/lib/components/grouped-character/grouped-character.component.js +1 -0
  35. package/lib/components/number/number.component.js +1 -0
  36. package/lib/components/select/filterable-select/filterable-select.component.js +1 -0
  37. package/lib/components/select/multi-select/multi-select.component.js +1 -0
  38. package/lib/components/select/select-textbox/select-textbox.component.js +1 -0
  39. package/lib/components/select/simple-select/simple-select.component.js +1 -0
  40. package/lib/components/textarea/textarea.component.d.ts +3 -0
  41. package/lib/components/textarea/textarea.component.js +13 -2
  42. package/lib/components/textbox/textbox.component.js +1 -0
  43. package/package.json +1 -1
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { BorderRadiusType } from "../../components/box/box.component";
2
3
  import { ValidationProps } from "../validations";
3
4
  export declare type Sizes = "small" | "medium" | "large";
4
5
  export interface CommonInputPresentationProps extends ValidationProps {
@@ -22,10 +23,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
22
23
  size?: Sizes;
23
24
  /** If true, the component has an icon rendered inside */
24
25
  hasIcon?: boolean;
26
+ /** Specify a custom border radius. Any valid border-radius design token, or an array of border-radius design tokens. */
27
+ borderRadius?: BorderRadiusType | BorderRadiusType[];
25
28
  }
26
29
  export interface InputPresentationProps extends CommonInputPresentationProps {
27
30
  /** Content to be rendered before the input */
28
31
  positionedChildren?: React.ReactNode;
29
32
  }
30
- declare const InputPresentation: ({ children, positionedChildren, prefix, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
33
+ declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
31
34
  export default InputPresentation;
@@ -4,19 +4,20 @@ import InputPresentationStyle, { StyledInputPresentationContainer } from "./inpu
4
4
  import { InputContext, InputGroupContext } from "../input-behaviour";
5
5
  import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
6
6
  const InputPresentation = ({
7
+ align,
8
+ borderRadius = "borderRadius050",
7
9
  children,
8
- positionedChildren,
9
- prefix,
10
+ disabled,
11
+ error,
12
+ hasIcon,
13
+ info,
10
14
  inputWidth,
11
15
  maxWidth,
12
- align,
13
- disabled,
16
+ positionedChildren,
17
+ prefix,
14
18
  readOnly,
15
19
  size = "medium",
16
- error,
17
- warning,
18
- info,
19
- hasIcon
20
+ warning
20
21
  }) => {
21
22
  const {
22
23
  hasFocus,
@@ -57,11 +58,13 @@ const InputPresentation = ({
57
58
  error: error,
58
59
  info: info,
59
60
  validationRedesignOptIn: validationRedesignOptIn,
60
- hasIcon: hasIcon
61
+ hasIcon: hasIcon,
62
+ borderRadius: borderRadius
61
63
  }, children));
62
64
  };
63
65
  InputPresentation.propTypes = {
64
66
  "align": PropTypes.string,
67
+ "borderRadius": PropTypes.any,
65
68
  "children": PropTypes.node,
66
69
  "disabled": PropTypes.bool,
67
70
  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
2
2
  import { InputContextProps } from "../input-behaviour";
3
3
  import { CarbonProviderProps } from "../../components/carbon-provider";
4
4
  export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
5
- 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>;
5
+ 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>;
6
6
  export default InputPresentationStyle;
@@ -45,13 +45,22 @@ const InputPresentationStyle = styled.div`
45
45
  align-items: stretch;
46
46
  background: var(--colorsUtilityYang100);
47
47
  border: 1px solid var(--colorsUtilityMajor300);
48
- border-radius: var(--borderRadius050);
49
48
  box-sizing: border-box;
50
49
  cursor: text;
51
50
  display: flex;
52
51
  flex-wrap: wrap;
53
52
  width: 100%;
54
53
  margin: 0;
54
+
55
+ ${({
56
+ borderRadius
57
+ }) => {
58
+ if (Array.isArray(borderRadius)) {
59
+ return `border-radius: ${borderRadius.map(value => `var(--${value})`).join(" ")};`;
60
+ }
61
+ return `border-radius: var(--${borderRadius});`;
62
+ }}
63
+
55
64
  ${({
56
65
  size,
57
66
  hasIcon,
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { BorderRadiusType } from "../../components/box/box.component";
2
3
  export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
3
4
  align?: "right" | "left";
4
5
  /** The id of the element that describe the input. */
@@ -11,6 +12,8 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
11
12
  disabled?: boolean;
12
13
  /** HTML id attribute of the input */
13
14
  id?: string;
15
+ /** Specify a custom border radius for the input. Any valid border-radius design token, or an array of border-radius design tokens. */
16
+ inputBorderRadius?: BorderRadiusType | BorderRadiusType[];
14
17
  /** A callback to retrieve the input reference */
15
18
  inputRef?: (input: React.RefObject<HTMLInputElement | HTMLTextAreaElement>) => void;
16
19
  /** Name of the input */
@@ -44,6 +44,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
44
44
  id,
45
45
  name,
46
46
  validationIconId,
47
+ inputBorderRadius = "borderRadius050",
47
48
  ...rest
48
49
  }, ref) => {
49
50
  const context = useContext(InputContext);
@@ -146,7 +147,8 @@ const Input = /*#__PURE__*/React.forwardRef(({
146
147
  onFocus: handleFocus,
147
148
  onBlur: handleBlur,
148
149
  onClick: handleClick,
149
- onChange: handleChange
150
+ onChange: handleChange,
151
+ inputBorderRadius: inputBorderRadius
150
152
  }));
151
153
  });
152
154
  Input.propTypes = {
@@ -240,6 +242,7 @@ Input.propTypes = {
240
242
  "hidden": PropTypes.bool,
241
243
  "id": PropTypes.string,
242
244
  "inlist": PropTypes.any,
245
+ "inputBorderRadius": PropTypes.any,
243
246
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
244
247
  "inputRef": PropTypes.func,
245
248
  "is": PropTypes.string,
@@ -1,3 +1,3 @@
1
1
  import { CommonInputProps } from "./input.component";
2
- declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly">, never>;
2
+ declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly" | "inputBorderRadius">, never>;
3
3
  export default StyledInput;
@@ -2,7 +2,6 @@ import styled, { css } from "styled-components";
2
2
  const StyledInput = styled.input`
3
3
  background: transparent;
4
4
  border: none;
5
- border-radius: var(--borderRadius050);
6
5
  color: var(--colorsUtilityYin090);
7
6
  flex-grow: 1;
8
7
  font-size: var(--fontSizes100);
@@ -16,6 +15,15 @@ const StyledInput = styled.input`
16
15
  -webkit-background-clip: text;
17
16
  }
18
17
 
18
+ ${({
19
+ inputBorderRadius
20
+ }) => {
21
+ if (Array.isArray(inputBorderRadius)) {
22
+ return `border-radius: ${inputBorderRadius.map(value => `var(--${value})`).join(" ")};`;
23
+ }
24
+ return `border-radius: var(--${inputBorderRadius});`;
25
+ }}
26
+
19
27
  ${({
20
28
  align
21
29
  }) => align && css`
@@ -8,7 +8,7 @@ export declare type ScrollVariant = "light" | "dark";
8
8
  export declare type BoxSizing = "content-box" | "border-box";
9
9
  declare type DesignTokensType = keyof typeof DesignTokens;
10
10
  declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
11
- declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
11
+ export declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
12
12
  export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, LayoutProps, Omit<PositionProps, "zIndex">, SpaceProps, TagProps {
13
13
  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
14
14
  /** Set the ID attribute of the Box component */
@@ -423,6 +423,7 @@ DateInput.propTypes = {
423
423
  "id": PropTypes.string,
424
424
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
425
425
  "inlist": PropTypes.any,
426
+ "inputBorderRadius": PropTypes.any,
426
427
  "inputHint": PropTypes.string,
427
428
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
428
429
  "inputName": PropTypes.oneOf(["end", "start"]),
@@ -296,6 +296,7 @@ Decimal.propTypes = {
296
296
  "id": PropTypes.string,
297
297
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
298
298
  "inlist": PropTypes.any,
299
+ "inputBorderRadius": PropTypes.any,
299
300
  "inputHint": PropTypes.string,
300
301
  "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"]),
301
302
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -1,3 +1,3 @@
1
1
  import { FlatTableProps } from "..";
2
- declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityYang100)" | "var(--colorsUtilityMajor025)" | "var(--colorsActionMinor550)";
2
+ declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityMajor025)" | "var(--colorsUtilityYang100)" | "var(--colorsActionMinor550)";
3
3
  export default getAlternativeBackgroundColor;
@@ -222,6 +222,7 @@ GroupedCharacter.propTypes = {
222
222
  "id": PropTypes.string,
223
223
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
224
224
  "inlist": PropTypes.any,
225
+ "inputBorderRadius": PropTypes.any,
225
226
  "inputHint": PropTypes.string,
226
227
  "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"]),
227
228
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -153,6 +153,7 @@ Number.propTypes = {
153
153
  "id": PropTypes.string,
154
154
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
155
155
  "inlist": PropTypes.any,
156
+ "inputBorderRadius": PropTypes.any,
156
157
  "inputHint": PropTypes.string,
157
158
  "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"]),
158
159
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -557,6 +557,7 @@ FilterableSelect.propTypes = {
557
557
  "id": PropTypes.string,
558
558
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
559
559
  "inlist": PropTypes.any,
560
+ "inputBorderRadius": PropTypes.any,
560
561
  "inputHint": PropTypes.string,
561
562
  "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"]),
562
563
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -568,6 +568,7 @@ MultiSelect.propTypes = {
568
568
  "id": PropTypes.string,
569
569
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
570
570
  "inlist": PropTypes.any,
571
+ "inputBorderRadius": PropTypes.any,
571
572
  "inputHint": PropTypes.string,
572
573
  "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"]),
573
574
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -225,6 +225,7 @@ SelectTextbox.propTypes = {
225
225
  "id": PropTypes.string,
226
226
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
227
227
  "inlist": PropTypes.any,
228
+ "inputBorderRadius": PropTypes.any,
228
229
  "inputHint": PropTypes.string,
229
230
  "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"]),
230
231
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -470,6 +470,7 @@ SimpleSelect.propTypes = {
470
470
  "id": PropTypes.string,
471
471
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
472
472
  "inlist": PropTypes.any,
473
+ "inputBorderRadius": PropTypes.any,
473
474
  "inputHint": PropTypes.string,
474
475
  "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"]),
475
476
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -3,6 +3,7 @@ import { MarginProps } from "styled-system";
3
3
  import { IconType } from "../icon";
4
4
  import { ValidationProps } from "../../__internal__/validations";
5
5
  import { CommonInputProps } from "../../__internal__/input";
6
+ import { BorderRadiusType } from "../box/box.component";
6
7
  export interface TextareaProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size"> {
7
8
  /** Prop to specify the aria-labelledby property of the component */
8
9
  "aria-labelledby"?: string;
@@ -96,6 +97,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
96
97
  Pass string to display icon, tooltip and orange border
97
98
  Pass true boolean to only display orange border */
98
99
  warning?: boolean | string;
100
+ /** Specify a custom border radius for the component. Any valid border-radius design token, or an array of border-radius design tokens. */
101
+ borderRadius?: BorderRadiusType | BorderRadiusType[];
99
102
  }
100
103
  export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
101
104
  export { Textarea as OriginalTextarea };
@@ -19,6 +19,7 @@ import Logger from "../../__internal__/utils/logger";
19
19
  import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
20
20
  let deprecateInputRefWarnTriggered = false;
21
21
  let deprecateUncontrolledWarnTriggered = false;
22
+ let warnBorderRadiusArrayTooLarge = false;
22
23
  const Textarea = /*#__PURE__*/React.forwardRef(({
23
24
  "aria-labelledby": ariaLabelledBy,
24
25
  autoFocus,
@@ -57,6 +58,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
57
58
  "data-role": dataRole,
58
59
  helpAriaLabel,
59
60
  inputRef,
61
+ borderRadius,
60
62
  ...rest
61
63
  }, ref) => {
62
64
  const {
@@ -86,6 +88,11 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
86
88
  deprecateUncontrolledWarnTriggered = true;
87
89
  Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
88
90
  }
91
+ if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
92
+ // eslint-disable-next-line no-console
93
+ console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
94
+ warnBorderRadiusArrayTooLarge = true;
95
+ }
89
96
  const minHeight = useRef(MIN_HEIGHT);
90
97
  const expandTextarea = () => {
91
98
  const textarea = internalRef.current;
@@ -156,7 +163,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
156
163
  maxWidth: maxWidth,
157
164
  error: error,
158
165
  warning: warning,
159
- info: info
166
+ info: info,
167
+ borderRadius: borderRadius
160
168
  }, /*#__PURE__*/React.createElement(Input, _extends({
161
169
  "aria-invalid": !!error,
162
170
  "aria-labelledby": ariaLabelledBy,
@@ -174,7 +182,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
174
182
  id: id,
175
183
  as: "textarea",
176
184
  inputRef: inputRef,
177
- validationIconId: validationRedesignOptIn ? undefined : validationId
185
+ validationIconId: validationRedesignOptIn ? undefined : validationId,
186
+ inputBorderRadius: borderRadius
178
187
  }, rest)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
179
188
  disabled: disabled,
180
189
  readOnly: readOnly,
@@ -290,6 +299,7 @@ Textarea.propTypes = {
290
299
  "autoCorrect": PropTypes.string,
291
300
  "autoFocus": PropTypes.bool,
292
301
  "autoSave": PropTypes.string,
302
+ "borderRadius": PropTypes.any,
293
303
  "capture": PropTypes.oneOfType([PropTypes.oneOf(["environment", "user"]), PropTypes.bool]),
294
304
  "characterLimit": PropTypes.number,
295
305
  "checked": PropTypes.bool,
@@ -328,6 +338,7 @@ Textarea.propTypes = {
328
338
  "id": PropTypes.string,
329
339
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
330
340
  "inlist": PropTypes.any,
341
+ "inputBorderRadius": PropTypes.any,
331
342
  "inputHint": PropTypes.string,
332
343
  "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"]),
333
344
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -309,6 +309,7 @@ Textbox.propTypes = {
309
309
  "id": PropTypes.string,
310
310
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
311
311
  "inlist": PropTypes.any,
312
+ "inputBorderRadius": PropTypes.any,
312
313
  "inputHint": PropTypes.string,
313
314
  "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"]),
314
315
  "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { BorderRadiusType } from "../../components/box/box.component";
2
3
  import { ValidationProps } from "../validations";
3
4
  export declare type Sizes = "small" | "medium" | "large";
4
5
  export interface CommonInputPresentationProps extends ValidationProps {
@@ -22,10 +23,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
22
23
  size?: Sizes;
23
24
  /** If true, the component has an icon rendered inside */
24
25
  hasIcon?: boolean;
26
+ /** Specify a custom border radius. Any valid border-radius design token, or an array of border-radius design tokens. */
27
+ borderRadius?: BorderRadiusType | BorderRadiusType[];
25
28
  }
26
29
  export interface InputPresentationProps extends CommonInputPresentationProps {
27
30
  /** Content to be rendered before the input */
28
31
  positionedChildren?: React.ReactNode;
29
32
  }
30
- declare const InputPresentation: ({ children, positionedChildren, prefix, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
33
+ declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
31
34
  export default InputPresentation;
@@ -13,19 +13,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
13
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
14
14
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
15
15
  const InputPresentation = ({
16
+ align,
17
+ borderRadius = "borderRadius050",
16
18
  children,
17
- positionedChildren,
18
- prefix,
19
+ disabled,
20
+ error,
21
+ hasIcon,
22
+ info,
19
23
  inputWidth,
20
24
  maxWidth,
21
- align,
22
- disabled,
25
+ positionedChildren,
26
+ prefix,
23
27
  readOnly,
24
28
  size = "medium",
25
- error,
26
- warning,
27
- info,
28
- hasIcon
29
+ warning
29
30
  }) => {
30
31
  const {
31
32
  hasFocus,
@@ -66,11 +67,13 @@ const InputPresentation = ({
66
67
  error: error,
67
68
  info: info,
68
69
  validationRedesignOptIn: validationRedesignOptIn,
69
- hasIcon: hasIcon
70
+ hasIcon: hasIcon,
71
+ borderRadius: borderRadius
70
72
  }, children));
71
73
  };
72
74
  InputPresentation.propTypes = {
73
75
  "align": _propTypes.default.string,
76
+ "borderRadius": _propTypes.default.any,
74
77
  "children": _propTypes.default.node,
75
78
  "disabled": _propTypes.default.bool,
76
79
  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
2
2
  import { InputContextProps } from "../input-behaviour";
3
3
  import { CarbonProviderProps } from "../../components/carbon-provider";
4
4
  export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
5
- 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>;
5
+ 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>;
6
6
  export default InputPresentationStyle;
@@ -54,13 +54,22 @@ const InputPresentationStyle = _styledComponents.default.div`
54
54
  align-items: stretch;
55
55
  background: var(--colorsUtilityYang100);
56
56
  border: 1px solid var(--colorsUtilityMajor300);
57
- border-radius: var(--borderRadius050);
58
57
  box-sizing: border-box;
59
58
  cursor: text;
60
59
  display: flex;
61
60
  flex-wrap: wrap;
62
61
  width: 100%;
63
62
  margin: 0;
63
+
64
+ ${({
65
+ borderRadius
66
+ }) => {
67
+ if (Array.isArray(borderRadius)) {
68
+ return `border-radius: ${borderRadius.map(value => `var(--${value})`).join(" ")};`;
69
+ }
70
+ return `border-radius: var(--${borderRadius});`;
71
+ }}
72
+
64
73
  ${({
65
74
  size,
66
75
  hasIcon,
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { BorderRadiusType } from "../../components/box/box.component";
2
3
  export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
3
4
  align?: "right" | "left";
4
5
  /** The id of the element that describe the input. */
@@ -11,6 +12,8 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
11
12
  disabled?: boolean;
12
13
  /** HTML id attribute of the input */
13
14
  id?: string;
15
+ /** Specify a custom border radius for the input. Any valid border-radius design token, or an array of border-radius design tokens. */
16
+ inputBorderRadius?: BorderRadiusType | BorderRadiusType[];
14
17
  /** A callback to retrieve the input reference */
15
18
  inputRef?: (input: React.RefObject<HTMLInputElement | HTMLTextAreaElement>) => void;
16
19
  /** Name of the input */
@@ -53,6 +53,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
53
53
  id,
54
54
  name,
55
55
  validationIconId,
56
+ inputBorderRadius = "borderRadius050",
56
57
  ...rest
57
58
  }, ref) => {
58
59
  const context = (0, _react.useContext)(_inputBehaviour.InputContext);
@@ -155,7 +156,8 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
155
156
  onFocus: handleFocus,
156
157
  onBlur: handleBlur,
157
158
  onClick: handleClick,
158
- onChange: handleChange
159
+ onChange: handleChange,
160
+ inputBorderRadius: inputBorderRadius
159
161
  }));
160
162
  });
161
163
  Input.propTypes = {
@@ -249,6 +251,7 @@ Input.propTypes = {
249
251
  "hidden": _propTypes.default.bool,
250
252
  "id": _propTypes.default.string,
251
253
  "inlist": _propTypes.default.any,
254
+ "inputBorderRadius": _propTypes.default.any,
252
255
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
253
256
  "inputRef": _propTypes.default.func,
254
257
  "is": _propTypes.default.string,
@@ -1,3 +1,3 @@
1
1
  import { CommonInputProps } from "./input.component";
2
- declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly">, never>;
2
+ declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly" | "inputBorderRadius">, never>;
3
3
  export default StyledInput;
@@ -10,7 +10,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
10
10
  const StyledInput = _styledComponents.default.input`
11
11
  background: transparent;
12
12
  border: none;
13
- border-radius: var(--borderRadius050);
14
13
  color: var(--colorsUtilityYin090);
15
14
  flex-grow: 1;
16
15
  font-size: var(--fontSizes100);
@@ -24,6 +23,15 @@ const StyledInput = _styledComponents.default.input`
24
23
  -webkit-background-clip: text;
25
24
  }
26
25
 
26
+ ${({
27
+ inputBorderRadius
28
+ }) => {
29
+ if (Array.isArray(inputBorderRadius)) {
30
+ return `border-radius: ${inputBorderRadius.map(value => `var(--${value})`).join(" ")};`;
31
+ }
32
+ return `border-radius: var(--${inputBorderRadius});`;
33
+ }}
34
+
27
35
  ${({
28
36
  align
29
37
  }) => align && (0, _styledComponents.css)`
@@ -8,7 +8,7 @@ export declare type ScrollVariant = "light" | "dark";
8
8
  export declare type BoxSizing = "content-box" | "border-box";
9
9
  declare type DesignTokensType = keyof typeof DesignTokens;
10
10
  declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
11
- declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
11
+ export declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
12
12
  export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, LayoutProps, Omit<PositionProps, "zIndex">, SpaceProps, TagProps {
13
13
  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
14
14
  /** Set the ID attribute of the Box component */
@@ -432,6 +432,7 @@ DateInput.propTypes = {
432
432
  "id": _propTypes.default.string,
433
433
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
434
434
  "inlist": _propTypes.default.any,
435
+ "inputBorderRadius": _propTypes.default.any,
435
436
  "inputHint": _propTypes.default.string,
436
437
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
437
438
  "inputName": _propTypes.default.oneOf(["end", "start"]),
@@ -305,6 +305,7 @@ Decimal.propTypes = {
305
305
  "id": _propTypes.default.string,
306
306
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
307
307
  "inlist": _propTypes.default.any,
308
+ "inputBorderRadius": _propTypes.default.any,
308
309
  "inputHint": _propTypes.default.string,
309
310
  "inputIcon": _propTypes.default.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"]),
310
311
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -1,3 +1,3 @@
1
1
  import { FlatTableProps } from "..";
2
- declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityYang100)" | "var(--colorsUtilityMajor025)" | "var(--colorsActionMinor550)";
2
+ declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityMajor025)" | "var(--colorsUtilityYang100)" | "var(--colorsActionMinor550)";
3
3
  export default getAlternativeBackgroundColor;
@@ -231,6 +231,7 @@ GroupedCharacter.propTypes = {
231
231
  "id": _propTypes.default.string,
232
232
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
233
233
  "inlist": _propTypes.default.any,
234
+ "inputBorderRadius": _propTypes.default.any,
234
235
  "inputHint": _propTypes.default.string,
235
236
  "inputIcon": _propTypes.default.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"]),
236
237
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -162,6 +162,7 @@ Number.propTypes = {
162
162
  "id": _propTypes.default.string,
163
163
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
164
164
  "inlist": _propTypes.default.any,
165
+ "inputBorderRadius": _propTypes.default.any,
165
166
  "inputHint": _propTypes.default.string,
166
167
  "inputIcon": _propTypes.default.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"]),
167
168
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -566,6 +566,7 @@ FilterableSelect.propTypes = {
566
566
  "id": _propTypes.default.string,
567
567
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
568
568
  "inlist": _propTypes.default.any,
569
+ "inputBorderRadius": _propTypes.default.any,
569
570
  "inputHint": _propTypes.default.string,
570
571
  "inputIcon": _propTypes.default.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"]),
571
572
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -577,6 +577,7 @@ MultiSelect.propTypes = {
577
577
  "id": _propTypes.default.string,
578
578
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
579
579
  "inlist": _propTypes.default.any,
580
+ "inputBorderRadius": _propTypes.default.any,
580
581
  "inputHint": _propTypes.default.string,
581
582
  "inputIcon": _propTypes.default.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"]),
582
583
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -234,6 +234,7 @@ SelectTextbox.propTypes = {
234
234
  "id": _propTypes.default.string,
235
235
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
236
236
  "inlist": _propTypes.default.any,
237
+ "inputBorderRadius": _propTypes.default.any,
237
238
  "inputHint": _propTypes.default.string,
238
239
  "inputIcon": _propTypes.default.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"]),
239
240
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -479,6 +479,7 @@ SimpleSelect.propTypes = {
479
479
  "id": _propTypes.default.string,
480
480
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
481
481
  "inlist": _propTypes.default.any,
482
+ "inputBorderRadius": _propTypes.default.any,
482
483
  "inputHint": _propTypes.default.string,
483
484
  "inputIcon": _propTypes.default.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"]),
484
485
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -3,6 +3,7 @@ import { MarginProps } from "styled-system";
3
3
  import { IconType } from "../icon";
4
4
  import { ValidationProps } from "../../__internal__/validations";
5
5
  import { CommonInputProps } from "../../__internal__/input";
6
+ import { BorderRadiusType } from "../box/box.component";
6
7
  export interface TextareaProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size"> {
7
8
  /** Prop to specify the aria-labelledby property of the component */
8
9
  "aria-labelledby"?: string;
@@ -96,6 +97,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
96
97
  Pass string to display icon, tooltip and orange border
97
98
  Pass true boolean to only display orange border */
98
99
  warning?: boolean | string;
100
+ /** Specify a custom border radius for the component. Any valid border-radius design token, or an array of border-radius design tokens. */
101
+ borderRadius?: BorderRadiusType | BorderRadiusType[];
99
102
  }
100
103
  export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
101
104
  export { Textarea as OriginalTextarea };
@@ -28,6 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
28
28
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
29
29
  let deprecateInputRefWarnTriggered = false;
30
30
  let deprecateUncontrolledWarnTriggered = false;
31
+ let warnBorderRadiusArrayTooLarge = false;
31
32
  const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_react.default.forwardRef(({
32
33
  "aria-labelledby": ariaLabelledBy,
33
34
  autoFocus,
@@ -66,6 +67,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
66
67
  "data-role": dataRole,
67
68
  helpAriaLabel,
68
69
  inputRef,
70
+ borderRadius,
69
71
  ...rest
70
72
  }, ref) => {
71
73
  const {
@@ -95,6 +97,11 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
95
97
  deprecateUncontrolledWarnTriggered = true;
96
98
  _logger.default.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
97
99
  }
100
+ if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
101
+ // eslint-disable-next-line no-console
102
+ console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
103
+ warnBorderRadiusArrayTooLarge = true;
104
+ }
98
105
  const minHeight = (0, _react.useRef)(_textarea.MIN_HEIGHT);
99
106
  const expandTextarea = () => {
100
107
  const textarea = internalRef.current;
@@ -165,7 +172,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
165
172
  maxWidth: maxWidth,
166
173
  error: error,
167
174
  warning: warning,
168
- info: info
175
+ info: info,
176
+ borderRadius: borderRadius
169
177
  }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
170
178
  "aria-invalid": !!error,
171
179
  "aria-labelledby": ariaLabelledBy,
@@ -183,7 +191,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
183
191
  id: id,
184
192
  as: "textarea",
185
193
  inputRef: inputRef,
186
- validationIconId: validationRedesignOptIn ? undefined : validationId
194
+ validationIconId: validationRedesignOptIn ? undefined : validationId,
195
+ inputBorderRadius: borderRadius
187
196
  }, rest)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
188
197
  disabled: disabled,
189
198
  readOnly: readOnly,
@@ -299,6 +308,7 @@ Textarea.propTypes = {
299
308
  "autoCorrect": _propTypes.default.string,
300
309
  "autoFocus": _propTypes.default.bool,
301
310
  "autoSave": _propTypes.default.string,
311
+ "borderRadius": _propTypes.default.any,
302
312
  "capture": _propTypes.default.oneOfType([_propTypes.default.oneOf(["environment", "user"]), _propTypes.default.bool]),
303
313
  "characterLimit": _propTypes.default.number,
304
314
  "checked": _propTypes.default.bool,
@@ -337,6 +347,7 @@ Textarea.propTypes = {
337
347
  "id": _propTypes.default.string,
338
348
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
339
349
  "inlist": _propTypes.default.any,
350
+ "inputBorderRadius": _propTypes.default.any,
340
351
  "inputHint": _propTypes.default.string,
341
352
  "inputIcon": _propTypes.default.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"]),
342
353
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
@@ -318,6 +318,7 @@ Textbox.propTypes = {
318
318
  "id": _propTypes.default.string,
319
319
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
320
320
  "inlist": _propTypes.default.any,
321
+ "inputBorderRadius": _propTypes.default.any,
321
322
  "inputHint": _propTypes.default.string,
322
323
  "inputIcon": _propTypes.default.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"]),
323
324
  "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "126.0.1",
3
+ "version": "126.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",