@coinbase/cds-web 8.56.1 → 8.57.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.57.0 (3/24/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support focusedBorderWidth on TextInput. [[#537](https://github.com/coinbase/cds/pull/537)]
+
 ## 8.56.1 (3/24/2026 PST)
 
 #### 🐞 Fixes

package/dts/controls/SearchInput.d.ts

@@ -12,9 +12,11 @@ export type SearchInputBaseProps = Pick<
   | 'accessibilityHint'
   | 'accessibilityLabel'
   | 'accessibilityLabelledBy'
+  | 'bordered'
   | 'compact'
   | 'disabled'
   | 'enableColorSurge'
+  | 'focusedBorderWidth'
   | 'helperTextErrorIconAccessibilityLabel'
   | 'placeholder'
   | 'testID'
@@ -67,11 +69,6 @@ export type SearchInputProps = SearchInputBaseProps &
      * Callback fired when pressed/clicked
      */
     onClick?: React.MouseEventHandler;
-    /**
-     * Adds border to input
-     * @default true
-     */
-    bordered?: boolean;
   };
 export declare const SearchInput: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
@@ -85,6 +82,8 @@ export declare const SearchInput: React.MemoExoticComponent<
       | 'accessibilityLabel'
       | 'accessibilityLabelledBy'
       | 'accessibilityHint'
+      | 'bordered'
+      | 'focusedBorderWidth'
       | 'enableColorSurge'
       | 'helperTextErrorIconAccessibilityLabel'
       | 'testIDMap'
@@ -134,11 +133,6 @@ export declare const SearchInput: React.MemoExoticComponent<
          * Callback fired when pressed/clicked
          */
         onClick?: React.MouseEventHandler;
-        /**
-         * Adds border to input
-         * @default true
-         */
-        bordered?: boolean;
       } & React.RefAttributes<HTMLInputElement>
   >
 >;

package/dts/controls/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,MAAM;;;CAGlB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACjE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,uCAAuC,GACvC,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,gBAAgB,GAAG;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,WAAW;IAtDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;cAKpC,KAAK,CAAC,iBAAiB;kBACnB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;OAGG;eACQ,OAAO;2CAkGrB,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,MAAM;;;CAGlB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACjE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,UAAU,GACV,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,oBAAoB,GACpB,uCAAuC,GACvC,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,gBAAgB,GAAG;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW;IAjDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;cAKpC,KAAK,CAAC,iBAAiB;kBACnB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC;;OAEG;cACO,KAAK,CAAC,iBAAiB;2CAgGpC,CAAC"}

package/dts/controls/TextInput.d.ts

@@ -19,10 +19,16 @@ export type TextInputBaseProps = {
    * */
   inputNode?: React.ReactElement;
   /**
-   * Adds border to input
+   * Adds border to input.
+   * When set to `false`, focus border styling is disabled by default.
    * @default true
    */
   bordered?: boolean;
+  /**
+   * Additional border width when focused.
+   * Set this when `bordered={false}` to opt into a focus border style.
+   */
+  focusedBorderWidth?: InputStackBaseProps['focusedBorderWidth'];
   /**
    * Aligns text inside input and helperText
    * @default start
@@ -91,10 +97,16 @@ export declare const TextInput: React.MemoExoticComponent<
        * */
       inputNode?: React.ReactElement;
       /**
-       * Adds border to input
+       * Adds border to input.
+       * When set to `false`, focus border styling is disabled by default.
        * @default true
        */
       bordered?: boolean;
+      /**
+       * Additional border width when focused.
+       * Set this when `bordered={false}` to opt into a focus border style.
+       */
+      focusedBorderWidth?: InputStackBaseProps['focusedBorderWidth'];
       /**
        * Aligns text inside input and helperText
        * @default start

package/dts/controls/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAW/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IAvFpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;oZAqS5B,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAW/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IA7FpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;;OAIG;eACQ,OAAO;IAClB;;;OAGG;yBACkB,mBAAmB,CAAC,oBAAoB,CAAC;IAC9D;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;oZAqS5B,CAAC"}

package/dts/dates/DateInput.d.ts

@@ -1,23 +1,26 @@
 import React from 'react';
 import { type DateInputOptions } from '@coinbase/cds-common/dates/useDateInput';
-import { type TextInputProps } from '../controls/TextInput';
-export type DateInputProps = {
-  /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
-  separator?: string;
-  className?: string;
-  style?: React.CSSProperties;
-} & Omit<DateInputOptions, 'intlDateFormat'> &
-  Omit<TextInputProps, 'inputNode' | 'value' | 'defaultValue'>;
+import { type TextInputBaseProps, type TextInputProps } from '../controls/TextInput';
+export type DateInputBaseProps = Omit<DateInputOptions, 'intlDateFormat'> &
+  Omit<TextInputBaseProps, 'inputNode' | 'value' | 'defaultValue' | 'style'> & {
+    /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
+    separator?: string;
+  };
+export type DateInputProps = DateInputBaseProps &
+  Omit<TextInputProps, 'inputNode' | 'value' | 'defaultValue' | 'style'> & {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 export declare const DateInput: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    {
-      /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
-      separator?: string;
-      className?: string;
-      style?: React.CSSProperties;
-    } & Omit<DateInputOptions, 'intlDateFormat'> &
-      Omit<import('../controls').TextInputBaseProps, 'defaultValue' | 'value' | 'inputNode'> &
-      React.RefAttributes<HTMLInputElement>
+    Omit<DateInputOptions, 'intlDateFormat'> &
+      Omit<TextInputBaseProps, 'style' | 'defaultValue' | 'value' | 'inputNode'> & {
+        /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
+        separator?: string;
+      } & {
+        className?: string;
+        style?: React.CSSProperties;
+      } & React.RefAttributes<HTMLInputElement>
   >
 >;
 //# sourceMappingURL=DateInput.d.ts.map

package/dts/dates/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/dates/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,yCAAyC,CAAC;AAG9F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvE,MAAM,MAAM,cAAc,GAAG;IAC3B,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC1C,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,CAAC,CAAC;AAE/D,eAAO,MAAM,SAAS;IAPpB,kGAAkG;gBACtF,MAAM;gBACN,MAAM;YACV,KAAK,CAAC,aAAa;+KA2G5B,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/dates/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,yCAAyC,CAAC;AAG9F,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGhG,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG;IAC3E,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ,eAAO,MAAM,SAAS;IAVlB,kGAAkG;gBACtF,MAAM;;gBAKN,MAAM;YACV,KAAK,CAAC,aAAa;2CA0G9B,CAAC"}

package/esm/controls/SearchInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["onChange", "onClear", "onChangeText", "onSearch", "testID", "value", "compact", "hideStartIcon", "bordered", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel"];
+const _excluded = ["onChange", "onClear", "onChangeText", "onSearch", "testID", "value", "compact", "hideStartIcon", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -30,7 +30,6 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Se
       value,
       compact,
       hideStartIcon = false,
-      bordered = true,
       hideEndIcon,
       startIcon,
       end,
@@ -61,7 +60,6 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Se
   return /*#__PURE__*/_jsx(TextInput, _objectSpread({
     ref: refs,
     borderRadius: 1000,
-    bordered: bordered,
     className: cx(baseCss, compact && compactCss),
     end: end !== null && end !== void 0 ? end : !!value && !hideEndIcon && /*#__PURE__*/_jsx(Box, {
       marginEnd: compact ? -0.5 : 0,

package/esm/controls/TextInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
+const _excluded = ["label", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "focusedBorderWidth", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -64,6 +64,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       height,
       inputNode,
       bordered = true,
+      focusedBorderWidth,
       enableColorSurge = false,
       helperTextErrorIconAccessibilityLabel = 'error',
       labelVariant = 'outside',
@@ -151,11 +152,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
     value: focused ? focusedVariant : undefined,
     children: /*#__PURE__*/_jsx(InputStack, {
       borderRadius: borderRadius,
-      borderWidth: bordered ? 100 : 0
-      // If bordered is true, we want disableFocusedStyle = false
-      // If bordered is false, we want disableFocusedStyle = true
-      ,
-      disableFocusedStyle: !bordered,
+      borderWidth: bordered ? 100 : 0,
+      disableFocusedStyle: !bordered && typeof focusedBorderWidth === 'undefined',
       disabled: disabled,
       enableColorSurge: enableColorSurge,
       endNode: (suffix !== '' || !!end) && /*#__PURE__*/_jsxs(HStack, {
@@ -177,6 +175,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
         })]
       }),
       focused: focused,
+      focusedBorderWidth: focusedBorderWidth,
       height: height,
       helperTextNode: !!helperText && (typeof helperText === 'string' ? /*#__PURE__*/_jsx(HelperText, {
         accessibilityLabel: helperText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.56.1",
+  "version": "8.57.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.56.1",
+    "@coinbase/cds-common": "^8.57.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.35.0",
     "@coinbase/cds-lottie-files": "^3.3.4",