@orangesk/orange-design-system 2.0.0-beta.27 → 2.0.0-beta.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.27",
+  "version": "2.0.0-beta.29",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -49,12 +49,12 @@
     "@orangesk/accessible-autocomplete": "^3.1.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
-    "a11y-dialog": "^8.1.4",
+    "a11y-dialog": "^8.1.5",
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
     "dompurify": "^3.3.1",
-    "html-react-parser": "^5.2.16",
+    "html-react-parser": "^5.2.17",
     "jest-environment-jsdom": "^30.2.0",
     "lorem-ipsum": "^2.0.8",
     "minisearch": "7.2.0",
@@ -94,17 +94,17 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "25.2.0",
-    "@types/react": "19.2.11",
+    "@types/node": "25.2.2",
+    "@types/react": "19.2.13",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
     "babel-jest": "30.2.0",
     "eslint": "latest",
     "eslint-config-next": "16.1.6",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-unused-imports": "^4.3.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
     "fs-extra": "^11.3.3",
-    "glob": "13.0.0",
+    "glob": "13.0.1",
     "html-validate": "10.7.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",

package/src/components/Carousel/Carousel.static.ts

@@ -309,11 +309,30 @@ export default class Carousel {
     } else {
       this.instance.disable();
     }
+
+    this.applyTrackMarginCompensation();
+  }
+
+  /**
+   * Apply negative margin-right to carousel track when slidesPerView is a whole number.
+   * This compensates for the 20px padding-right on each slide, ensuring proper grid alignment.
+   */
+  private applyTrackMarginCompensation(): void {
+    if (!this.instance || !this.viewport) return;
+
+    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+
+    if (Number.isInteger(slidesPerView)) {
+      this.viewport.style.setProperty("margin-right", "-20px", "important");
+    } else {
+      this.viewport.style.removeProperty("margin-right");
+    }
   }
 
   /**
    * Calculate how much the carousel should extend beyond the container (bleed effect).
    * On screens 2560px and wider, the bleed effect is disabled.
+   * Also disabled when slidesPerView is a whole number (integer).
    */
   private calculateBleedAmount(container: HTMLElement): number {
     const containerWidth = container.offsetWidth;
@@ -325,6 +344,12 @@ export default class Carousel {
       bleedAmount = 0;
     }
 
+    // Disable bleed when slidesPerView is a whole number (integer)
+    const slidesPerView = Number(this.instance?.params.slidesPerView) || 1;
+    if (Number.isInteger(slidesPerView)) {
+      bleedAmount = 0;
+    }
+
     return Math.max(bleedAmount, 0);
   }
 
@@ -358,6 +383,7 @@ export default class Carousel {
    * Configure bleed-right carousel to extend beyond the container edge.
    * Calculates the exact offset needed for the carousel to reach the viewport edge
    * while keeping the last slide aligned with the container edge when scrolled to the end.
+   * When slidesPerView is a whole number (integer), the bleed effect is disabled.
    */
   adjustConfigForBleedRight() {
     requestAnimationFrame(() => {
@@ -369,14 +395,26 @@ export default class Carousel {
       ) as HTMLElement;
       if (!viewportWrapper) return;
 
-      const bleedAmount = this.calculateBleedAmount(container);
-      this.applyBleedOffset(viewportWrapper, bleedAmount);
+      const updateBleedState = () => {
+        const slidesPerView = Number(this.instance?.params.slidesPerView) || 1;
+        const shouldDisableBleed = Number.isInteger(slidesPerView);
 
-      // Recalculate bleed on window resize
-      this.instance.on("resize", () => {
-        const newBleedAmount = this.calculateBleedAmount(container);
-        this.applyBleedOffset(viewportWrapper, newBleedAmount);
-      });
+        if (shouldDisableBleed) {
+          this.element.classList.remove(CLASS_BLEED_RIGHT);
+        } else {
+          this.element.classList.add(CLASS_BLEED_RIGHT);
+        }
+
+        const bleedAmount = this.calculateBleedAmount(container);
+        this.applyBleedOffset(viewportWrapper, bleedAmount);
+
+        // Update margin compensation on resize
+        this.applyTrackMarginCompensation();
+      };
+
+      updateBleedState();
+
+      this.instance.on("resize", updateBleedState);
     });
   }
 

package/src/components/Carousel/styles/mixins.scss

@@ -188,11 +188,6 @@
 
 @mixin scrollbar-base {
   position: relative;
-  margin-top: config.$space;
-
-  @include breakpoint.get("md", "down") {
-    margin-top: space.get("xsmall");
-  }
 }
 
 @mixin scrollbar-horizontal {

package/src/components/Forms/Checkbox/styles/config.scss

@@ -6,7 +6,10 @@ $invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/200
 
 $states: (
   default: commonConfig.$default,
-  focus: commonConfig.$focus,
+  focus: (
+    outline: 2px solid var(--color-border-contrast),
+    outline-offset: 2px,
+  ),
   checked: (
     border-color: var(--color-surface-tertiary),
     background-color: var(--color-surface-tertiary),
@@ -17,8 +20,8 @@ $states: (
   disabled-checked: commonConfig.$disabled-checked,
   invalid: commonConfig.$invalid,
   invalid-checked: (
-    background-color: var(--color-surface-primary),
-    background-image: $invalid-checked-bg,
+    background-color: var(--color-icon-negative),
+    background-image: $checked-bg,
   ),
 );
 

package/src/components/Forms/Field/Control.tsx

@@ -30,6 +30,33 @@ export interface ControlProps {
   className?: string;
 }
 
+const getControlElement = (type: string) => {
+  switch (type) {
+    case "autocomplete":
+      return Autocomplete;
+    case "checkbox":
+      return Checkbox;
+    case "datepicker":
+      return DatePicker;
+    case "file":
+      return File;
+    case "group":
+      return Group;
+    case "radio":
+      return Radio;
+    case "range":
+      return RangeSlider;
+    case "select":
+      return Select;
+    case "input-stepper":
+      return InputStepper;
+    case "textarea":
+      return TextArea;
+    default:
+      return TextInput;
+  }
+};
+
 const Control: React.FC<ControlProps> = ({ className }) => {
   const context = React.useContext(FieldContext);
   const fieldsetContext = React.useContext(FieldsetContext);
@@ -46,66 +73,42 @@ const Control: React.FC<ControlProps> = ({ className }) => {
     type,
     control: innerControl,
     renderControl,
+    prefix,
+    suffix,
+    id: controlConfigId,
     ...controlProps
   } = control;
 
   const describedby = getDescribedBy(hint, messages, tooltip, controlId);
   const renderWrapper = isRadioCheck || type === "autocomplete";
 
-  const ControlElement = (props: any) => {
-    switch (type) {
-      case "autocomplete":
-        return <Autocomplete {...props} />;
-      case "checkbox":
-        return <Checkbox {...props} />;
-      case "datepicker":
-        return <DatePicker {...props} />;
-      case "file":
-        return <File {...props} />;
-      case "group":
-        return <Group {...props} />;
-      case "radio":
-        return <Radio {...props} />;
-      case "range":
-        return <RangeSlider {...props} />;
-      case "select":
-        return <Select {...props} />;
-      case "input-stepper":
-        return <InputStepper {...props} />;
-      case "textarea":
-        return <TextArea {...props} />;
-      default:
-        return <TextInput {...props} />;
-    }
-  };
+  const ControlElement = getControlElement(type ?? "text");
 
   const { isInvalid, isValid } = controlProps;
 
-  const isReallyInvalid =
+  const hasValidationError =
     isInvalid ??
     ((fieldsetMessages.some((msg: any) => msg.isMain) ||
       messages.some((msg: any) => msg.type === "error")) &&
       !isValid);
 
-  const props = (() => {
-    let calculatedControlProps: any = {
-      id: controlId,
-      ...(describedby.length && { "aria-describedby": describedby }),
-      ...(type === "file" && { "aria-labelledby": `${controlId}-label` }),
-      ...(type === "text" ? { isInvalid: isReallyInvalid } : {}),
-    };
-
-    if (type === "group") {
-      calculatedControlProps = {
-        control: { type, ...innerControl, ...calculatedControlProps },
-      };
-    }
-
-    return {
-      ...controlProps,
-      ...calculatedControlProps,
-    };
-  })();
+  const props = {
+    ...controlProps,
+    ...(type !== "group" && { id: controlId }),
+    ...(describedby.length && { "aria-describedby": describedby }),
+    ...(type === "file" && { "aria-labelledby": `${controlId}-label` }),
+    isInvalid: hasValidationError,
+    ...(type === "group" &&
+      innerControl && {
+        addonPrefix: prefix,
+        addonSuffix: suffix,
+        control: {
+          ...innerControl,
+          id: controlId,
+          isInvalid: hasValidationError,
+        },
+      }),
+  };
 
   if (renderControl) {
     return renderControl(props);

package/src/components/Forms/Field/styles/config.scss

@@ -21,5 +21,5 @@ $radiocheck-control: (
 
 $hint: (
   margin-top: space.get("xsmall"),
-  margin-bottom: space.get("xsmall"),
+  margin-bottom: 0,
 );

package/src/components/Forms/Field/tests/Group.Field.conformance.test.js

@@ -4,25 +4,49 @@ import { axe } from "jest-axe";
 import { Button } from "../../../Button";
 import { Field } from "..";
 
-const controlConfig = {
-  type: "group",
-  prefix: "€",
-  suffix: ["kg", <Button key="test">Send</Button>],
-  control: { type: "text" },
-};
-
 const example = (
   <>
-    <Field label="Field Label" control={controlConfig} />
-    <Field label="Field Label" control={controlConfig} tooltip="info tooltip" />
+    <Field
+      label="Field Label"
+      control={{
+        type: "group",
+        id: "group-field-1",
+        prefix: "€",
+        suffix: ["kg", <Button key="test">Send</Button>],
+        control: { type: "text", id: "text-field-1" },
+      }}
+    />
+    <Field
+      label="Field Label"
+      control={{
+        type: "group",
+        id: "group-field-2",
+        prefix: "€",
+        suffix: ["kg", <Button key="test">Send</Button>],
+        control: { type: "text", id: "text-field-2" },
+      }}
+      tooltip="info tooltip"
+    />
     <Field
       label="Field Label"
       hint="Field hint with long text"
-      control={controlConfig}
+      control={{
+        type: "group",
+        id: "group-field-3",
+        prefix: "€",
+        suffix: ["kg", <Button key="test">Send</Button>],
+        control: { type: "text", id: "text-field-3" },
+      }}
     />
     <Field
       label="Field Label"
-      control={controlConfig}
+      control={{
+        type: "group",
+        id: "group-field-4",
+        prefix: "€",
+        suffix: ["kg", <Button key="test">Send</Button>],
+        control: { type: "text", id: "text-field-4" },
+      }}
       messages={[
         { type: "info", text: "Info message with lorem ipsum long text ipsum" },
       ]}

package/src/components/Forms/File/File.tsx

@@ -11,12 +11,16 @@ const CLASS_ROOT = "file-input";
 export type FileSize = "default" | "large";
 
 // Omit native 'size' prop to avoid conflict
-export interface FileProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+export interface FileProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
   /** Html id attribute. Generated automatically if omitted. */
   id?: string;
   /** Disabled state. */
   isDisabled?: boolean;
+  /** Invalid state */
+  isInvalid?: boolean;
   /** Input name. */
   name?: string;
   /** Size of element. */
@@ -29,6 +33,7 @@ const defaultSize: FileSize = "default";
 const File: FC<FileProps> = ({
   id,
   isDisabled,
+  isInvalid,
   name,
   size = defaultSize,
   className,

package/src/components/Forms/Group/Group.tsx

@@ -19,6 +19,8 @@ interface GroupProps extends HTMLAttributes<HTMLDivElement> {
   size?: "large";
   addonSuffix?: ReactNode | ReactNode[];
   className?: string;
+  /** Invalid state */
+  isInvalid?: boolean;
 }
 
 const Group: React.FC<GroupProps> = ({
@@ -27,6 +29,7 @@ const Group: React.FC<GroupProps> = ({
   addonSuffix,
   size,
   className,
+  isInvalid,
   ...other
 }) => {
   const { type, ...controlProps } = control;
@@ -42,20 +45,26 @@ const Group: React.FC<GroupProps> = ({
 
   const renderItems = (items: ReactNode | ReactNode[] | undefined) =>
     React.Children.map(items, (item) => {
-      if (
-        typeof item === "string" ||
-        (item && typeof (item as any).type === "string")
-      ) {
+      if (typeof item === "string") {
         return <Item size={size}>{item}</Item>;
       } else if (React.isValidElement(item)) {
+        const itemType = (item as any).type;
+        const isNativeElement = typeof itemType === "string";
+        const isButtonElement =
+          isNativeElement && (itemType === "button" || itemType === "a");
+
+        // Wrap native HTML elements (span, p, div) but NOT buttons or links
+        // Don't wrap React components (Button, etc.)
+        if (isNativeElement && !isButtonElement) {
+          return <Item size={size}>{item}</Item>;
+        }
+
+        // For buttons, links, and React components, clone with size prop if needed
         const propsToAdd =
           item.props && typeof item.props === "object" && "size" in item.props
             ? {}
             : { size };
-        return React.cloneElement(item, {
-          ...(item.props || {}),
-          ...propsToAdd,
-        });
+        return React.cloneElement(item, propsToAdd);
       }
       return item;
     });

package/src/components/Forms/InputStepper/InputStepper.tsx

@@ -22,6 +22,8 @@ export interface InputStepperProps {
   id: string;
   inputClassName?: string;
   isDisabled?: boolean;
+  /** Invalid state */
+  isInvalid?: boolean;
   name?: string;
   nonEditableInput?: boolean;
   className?: string;
@@ -34,6 +36,7 @@ const InputStepper: React.FC<InputStepperProps> = ({
   id,
   config,
   isDisabled,
+  isInvalid,
   nonEditableInput = false,
   ...other
 }) => {

package/src/components/Forms/InputStepper/styles/style.scss

@@ -25,9 +25,9 @@
         appearance: none;
       }
       &:disabled {
-        color: var(--color-surface-moderate) !important;
-        -webkit-text-fill-color: var(--color-surface-moderate) !important;
-        background-color: color.$white;
+        color: var(--color-text-disabled) !important;
+        -webkit-text-fill-color: var(--color-text-disabled) !important;
+        background-color: var(--color-fill-primary);
       }
     }
     &__number {
@@ -40,11 +40,12 @@
       padding: space.get("xsmall") space.get("xsmall") convert.to-rem(8px)
         space.get("xsmall");
       text-align: center;
-      border: 2px solid var(--color-surface-moderate);
+      border: 2px solid var(--color-border-strong);
       border-left: 0;
       border-right: 0;
       margin-bottom: 0;
       line-height: 1.5;
+      background-color: var(--color-fill-primary);
     }
     &__button {
       position: relative;
@@ -53,14 +54,11 @@
       width: 40px;
       border-top: 2px solid;
       border-bottom: 2px solid;
-      border-color: var(--color-surface-moderate);
+      border-color: var(--color-border-strong);
 
       &::before {
         content: "";
         position: absolute;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center center;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -70,24 +68,40 @@
     }
 
     &__button--minus {
-      border-left: 2px solid var(--color-surface-moderate);
+      border-left: 2px solid var(--color-border-strong);
       border-top-left-radius: convert.to-rem(5px);
       border-bottom-left-radius: convert.to-rem(5px);
-      background-color: color.$white;
+      background-color: var(--color-fill-primary);
 
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        background-color: var(--color-text-default);
+        mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        mask-size: cover;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+        -webkit-mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        -webkit-mask-size: cover;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center center;
       }
     }
 
     &__button--plus {
-      border-right: 2px solid var(--color-surface-moderate);
+      border-right: 2px solid var(--color-border-strong);
       border-top-right-radius: convert.to-rem(5px);
       border-bottom-right-radius: convert.to-rem(5px);
-      background-color: color.$white;
+      background-color: var(--color-fill-primary);
 
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        background-color: var(--color-text-default);
+        mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        mask-size: cover;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+        -webkit-mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        -webkit-mask-size: cover;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center center;
       }
     }
 
@@ -95,50 +109,31 @@
       z-index: 1;
     }
 
-    &__button--minus:disabled {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23CCCCCC"/></svg>');
-      }
-    }
-
+    &__button--minus:disabled,
     &__button--plus:disabled {
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23CCCCCC"/></svg>');
-      }
-    }
-
-    &__button:hover:not(:disabled) {
-      background-color: color.$black;
-      border-color: color.$black;
-    }
-
-    &__button--minus:hover:not(:disabled) {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
+        background-color: var(--color-border-strong);
       }
     }
 
+    &__button--minus:hover:not(:disabled),
     &__button--plus:hover:not(:disabled) {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
-      }
-    }
+      background-color: var(--color-fill-contrast);
+      border-color: var(--color-fill-contrast);
 
-    &__button--minus:active:not(:disabled) {
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        background-color: var(--color-fill-primary);
       }
     }
 
+    &__button--minus:active:not(:disabled),
     &__button--plus:active:not(:disabled) {
+      background-color: var(--color-fill-tertiary);
+      border-color: var(--color-border-accent);
+
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        background-color: color.$white;
       }
     }
-
-    &__button:active:not(:disabled) {
-      background-color: color.$orange-dark;
-      border-color: color.$orange-dark;
-    }
   }
 }

package/src/components/Forms/Message/styles/config.scss

@@ -5,7 +5,8 @@
 $base: (
   font-size: 1rem,
   font-weight: bold,
-  margin-bottom: space.get("xsmall"),
+  margin-top: space.get("xsmall"),
+  margin-bottom: 0,
   max-width: convert.to-rem(350px),
 );
 

package/src/components/Forms/Radio/styles/config.scss

@@ -2,11 +2,14 @@
 @use "../../styles/config" as commonConfig;
 
 $checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E%3C/svg%3E");
-$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23cd3c14'/%3E%3C/svg%3E");
+$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23ffffff'/%3E%3C/svg%3E");
 
 $states: (
   default: commonConfig.$default,
-  focus: commonConfig.$focus,
+  focus: (
+    outline: 2px solid var(--color-border-contrast),
+    outline-offset: 2px,
+  ),
   checked: (
     border-color: var(--color-border-accent),
     background-color: var(--color-surface-tertiary),
@@ -17,7 +20,7 @@ $states: (
   disabled-checked: commonConfig.$disabled-checked,
   invalid: commonConfig.$invalid,
   invalid-checked: (
-    background-color: color.$white,
+    background-color: var(--color-icon-negative),
     background-image: $invalid-checked-bg,
   ),
 );

package/src/components/Forms/RangeSlider/RangeSlider.tsx

@@ -40,6 +40,8 @@ export interface RangeSliderProps extends React.HTMLAttributes<HTMLDivElement> {
   hasDataAttr?: boolean;
   /** element id. required by RangeSlider.static.js and generated automatically in React environment. */
   id?: string;
+  /** Invalid state */
+  isInvalid?: boolean;
   /** width of the element */
   width?: RangeSliderWidth;
   /** Additional CSS classes */
@@ -58,6 +60,7 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   config,
   elementBefore,
   elementAfter,
+  isInvalid,
   width = defaultProps.width,
   ...other
 }) => {