@atlaskit/forge-react-types 0.2.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/forge-react-types
 
+## 0.4.0
+
+### Minor Changes
+
+- [#75522](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75522) [`202e7032a684`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/202e7032a684) - Reduce XCSS support scope on border-radius and border-width props
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.3.0
+
+### Minor Changes
+
+- [#74137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74137) [`7e2066b045f7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7e2066b045f7) - Update types for event handler
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/cjs/components/__generated__/BoxProps.codegen.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::8309292dff495dc1e8e24268d3958b56>>
+ * @codegen <<SignedSource::d3c324dbe7016205a18cc6190b57ad19>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/box/__generated__/index.partial.tsx <<SignedSource::391296376275f3173652baee432184f1>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/box/__generated__/index.partial.tsx <<SignedSource::851605328aa816df414378c18c7104fe>>
  */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 
@@ -84,26 +84,66 @@ var xcssValidator = makeXCSSValidator({
   paddingRight: true,
   paddingTop: true,
   // other box related props
-  borderRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderEndEndRadius: true,
-  borderEndStartRadius: true,
-  borderStartEndRadius: true,
-  borderStartStartRadius: true,
-  borderWidth: true,
-  borderBlockWidth: true,
-  borderBlockEndWidth: true,
-  borderBlockStartWidth: true,
-  borderBottomWidth: true,
-  borderInlineWidth: true,
-  borderInlineEndWidth: true,
-  borderInlineStartWidth: true,
-  borderLeftWidth: true,
-  borderRightWidth: true,
-  borderTopWidth: true,
+  borderRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderBottomLeftRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderBottomRightRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderTopLeftRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderTopRightRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderEndEndRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderEndStartRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderStartEndRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderStartStartRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockEndWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockStartWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBottomWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineEndWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineStartWidth: {
+    supportedValues: ['border.width']
+  },
+  borderLeftWidth: {
+    supportedValues: ['border.width']
+  },
+  borderRightWidth: {
+    supportedValues: ['border.width']
+  },
+  borderTopWidth: {
+    supportedValues: ['border.width']
+  },
   // other props not in tokens based props
   borderTopStyle: {
     supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']

package/dist/cjs/components/__generated__/types.codegen.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/components/__generated__/BoxProps.codegen.js

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::8309292dff495dc1e8e24268d3958b56>>
+ * @codegen <<SignedSource::d3c324dbe7016205a18cc6190b57ad19>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/box/__generated__/index.partial.tsx <<SignedSource::391296376275f3173652baee432184f1>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/box/__generated__/index.partial.tsx <<SignedSource::851605328aa816df414378c18c7104fe>>
  */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 
@@ -79,26 +79,66 @@ const xcssValidator = makeXCSSValidator({
   paddingRight: true,
   paddingTop: true,
   // other box related props
-  borderRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderEndEndRadius: true,
-  borderEndStartRadius: true,
-  borderStartEndRadius: true,
-  borderStartStartRadius: true,
-  borderWidth: true,
-  borderBlockWidth: true,
-  borderBlockEndWidth: true,
-  borderBlockStartWidth: true,
-  borderBottomWidth: true,
-  borderInlineWidth: true,
-  borderInlineEndWidth: true,
-  borderInlineStartWidth: true,
-  borderLeftWidth: true,
-  borderRightWidth: true,
-  borderTopWidth: true,
+  borderRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderBottomLeftRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderBottomRightRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderTopLeftRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderTopRightRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderEndEndRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderEndStartRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderStartEndRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderStartStartRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockEndWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockStartWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBottomWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineEndWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineStartWidth: {
+    supportedValues: ['border.width']
+  },
+  borderLeftWidth: {
+    supportedValues: ['border.width']
+  },
+  borderRightWidth: {
+    supportedValues: ['border.width']
+  },
+  borderTopWidth: {
+    supportedValues: ['border.width']
+  },
   // other props not in tokens based props
   borderTopStyle: {
     supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']

package/dist/es2019/components/__generated__/types.codegen.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/__generated__/BoxProps.codegen.js

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::8309292dff495dc1e8e24268d3958b56>>
+ * @codegen <<SignedSource::d3c324dbe7016205a18cc6190b57ad19>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/box/__generated__/index.partial.tsx <<SignedSource::391296376275f3173652baee432184f1>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/box/__generated__/index.partial.tsx <<SignedSource::851605328aa816df414378c18c7104fe>>
  */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 
@@ -79,26 +79,66 @@ var xcssValidator = makeXCSSValidator({
   paddingRight: true,
   paddingTop: true,
   // other box related props
-  borderRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderEndEndRadius: true,
-  borderEndStartRadius: true,
-  borderStartEndRadius: true,
-  borderStartStartRadius: true,
-  borderWidth: true,
-  borderBlockWidth: true,
-  borderBlockEndWidth: true,
-  borderBlockStartWidth: true,
-  borderBottomWidth: true,
-  borderInlineWidth: true,
-  borderInlineEndWidth: true,
-  borderInlineStartWidth: true,
-  borderLeftWidth: true,
-  borderRightWidth: true,
-  borderTopWidth: true,
+  borderRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderBottomLeftRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderBottomRightRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderTopLeftRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderTopRightRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderEndEndRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderEndStartRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderStartEndRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderStartStartRadius: {
+    supportedValues: ['border.radius']
+  },
+  borderWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockEndWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBlockStartWidth: {
+    supportedValues: ['border.width']
+  },
+  borderBottomWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineEndWidth: {
+    supportedValues: ['border.width']
+  },
+  borderInlineStartWidth: {
+    supportedValues: ['border.width']
+  },
+  borderLeftWidth: {
+    supportedValues: ['border.width']
+  },
+  borderRightWidth: {
+    supportedValues: ['border.width']
+  },
+  borderTopWidth: {
+    supportedValues: ['border.width']
+  },
   // other props not in tokens based props
   borderTopStyle: {
     supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']

package/dist/esm/components/__generated__/types.codegen.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/__generated__/BoxProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::8309292dff495dc1e8e24268d3958b56>>
+ * @codegen <<SignedSource::d3c324dbe7016205a18cc6190b57ad19>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/box/__generated__/index.partial.tsx <<SignedSource::391296376275f3173652baee432184f1>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/box/__generated__/index.partial.tsx <<SignedSource::851605328aa816df414378c18c7104fe>>
  */
 import React from 'react';
 import { Box as PlatformBox } from '@atlaskit/primitives';
@@ -14,22 +14,26 @@ import type * as CSS from 'csstype';
 import type { MediaQuery } from '@atlaskit/primitives';
 import { tokensMap } from '@atlaskit/primitives';
 type TokensMap = typeof tokensMap;
-type TokenisedProps = {
-    [K in keyof TokensMap]?: keyof TokensMap[K];
+type TokensMapPropKey = keyof TokensMap;
+type TokenizedProps = {
+    [K in TokensMapPropKey]?: keyof TokensMap[K];
 };
-type RelaxedTokenisedProps = {
-    [K in keyof TokensMap]?: keyof TokensMap[K] | CSSProperties[K];
+type RawCSSValue = string & {};
+type RelaxedTokenizedProps = {
+    [K in TokensMapPropKey]?: keyof TokensMap[K] | RawCSSValue;
 };
 type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)';
-type StandardCSSProps = Omit<CSSProperties, keyof TokenisedProps>;
-type SafeCSSObject<T extends keyof CSSProperties = keyof CSSProperties, R extends T = T, M extends StandardCSSProps = StandardCSSProps> = {
-    [MQ in AllMedia]?: Omit<SafeCSSObject<T, R>, AllMedia>;
+type StandardCSSProps = Omit<CSSProperties, TokensMapPropKey>;
+type RestrictedPropsSpec = RelaxedTokenizedProps & StandardCSSProps;
+type SafeCSSObject<SupportedPropKeys extends keyof CSSProperties = keyof CSSProperties, RawCSSPropKeys extends SupportedPropKeys = SupportedPropKeys, RestrictedProps extends RestrictedPropsSpec = RestrictedPropsSpec> = {
+    [MQ in AllMedia]?: Omit<SafeCSSObject<SupportedPropKeys, RawCSSPropKeys, RestrictedPropsSpec>, AllMedia>;
 } & {
-    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject<T, R>, CSS.Pseudos | AllMedia>;
-} & Pick<TokenisedProps, Exclude<Extract<T, keyof TokenisedProps>, R>> & Pick<RelaxedTokenisedProps, Extract<R, keyof TokenisedProps>> & Pick<StandardCSSProps, Exclude<Extract<T, keyof StandardCSSProps>, keyof M>> & M;
+    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject<SupportedPropKeys, RawCSSPropKeys, RestrictedPropsSpec>, CSS.Pseudos | AllMedia>;
+} & Pick<TokenizedProps, Exclude<Extract<SupportedPropKeys, TokensMapPropKey>, RawCSSPropKeys | keyof RestrictedProps>> & Pick<StandardCSSProps, Exclude<Extract<SupportedPropKeys, keyof StandardCSSProps>, RawCSSPropKeys | keyof RestrictedProps>> & // force standard css prop values for allowCSS: true
+Pick<CSSProperties, Extract<RawCSSPropKeys, keyof CSSProperties>> & RestrictedProps;
 type XCSSValidatorParam = {
     [key in keyof CSSProperties]: true | {
-        supportedValues: Array<CSSProperties[key]>;
+        supportedValues: Array<RestrictedPropsSpec[key]>;
     } | {
         allowCSS: true;
     };
@@ -44,14 +48,14 @@ type XCSSValidatorParam = {
  *    as specified in the supportedXCSSProps list. The props that are not supported will be removed from the
  *    returned style object and a warning will be logged in the console.
  */
-declare const makeXCSSValidator: <U extends XCSSValidatorParam>(supportedXCSSProps: U) => (styleObj: SafeCSSObject<keyof CSSProperties, keyof CSSProperties, StandardCSSProps> | SafeCSSObject<Extract<keyof U, keyof CSSProperties>, Extract<{
+declare const makeXCSSValidator: <U extends XCSSValidatorParam>(supportedXCSSProps: U) => (styleObj: SafeCSSObject<keyof CSSProperties, keyof CSSProperties, RestrictedPropsSpec> | SafeCSSObject<Extract<keyof U, keyof CSSProperties>, Extract<{
     [K in Extract<keyof U, keyof CSSProperties>]: U[K] extends {
         allowCSS: true;
     } ? K : never;
 }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>, {
     [K_2 in Extract<{
         [K_1 in Extract<keyof U, keyof CSSProperties>]: U[K_1] extends {
-            supportedValues: CSSProperties[K_1][];
+            supportedValues: RestrictedPropsSpec[K_1][];
         } ? K_1 : never;
     }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>]?: (U[K_2] extends {
         supportedValues: infer V;
@@ -63,7 +67,7 @@ declare const makeXCSSValidator: <U extends XCSSValidatorParam>(supportedXCSSPro
 }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>, {
     [K_2 in Extract<{
         [K_1 in Extract<keyof U, keyof CSSProperties>]: U[K_1] extends {
-            supportedValues: CSSProperties[K_1][];
+            supportedValues: RestrictedPropsSpec[K_1][];
         } ? K_1 : never;
     }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>]?: (U[K_2] extends {
         supportedValues: infer V;
@@ -71,7 +75,27 @@ declare const makeXCSSValidator: <U extends XCSSValidatorParam>(supportedXCSSPro
 }>;
 export { makeXCSSValidator };
 export type { SafeCSSObject };
-declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof CSSProperties, StandardCSSProps> | SafeCSSObject<"backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartWidth" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomWidth" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartWidth" | "borderInlineWidth" | "borderLeftColor" | "borderLeftWidth" | "borderRadius" | "borderRightColor" | "borderRightWidth" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopWidth" | "borderWidth" | "boxShadow" | "color" | "height" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "width" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderTopStyle" | "position" | "borderStyle", "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "width", {
+declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof CSSProperties, RestrictedPropsSpec> | SafeCSSObject<"backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartWidth" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomWidth" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartWidth" | "borderInlineWidth" | "borderLeftColor" | "borderLeftWidth" | "borderRadius" | "borderRightColor" | "borderRightWidth" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopWidth" | "borderWidth" | "boxShadow" | "color" | "height" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "width" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderTopStyle" | "position" | "borderStyle", "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "width", {
+    borderBlockEndWidth?: "border.width" | undefined;
+    borderBlockStartWidth?: "border.width" | undefined;
+    borderBlockWidth?: "border.width" | undefined;
+    borderBottomLeftRadius?: "border.radius" | undefined;
+    borderBottomRightRadius?: "border.radius" | undefined;
+    borderBottomWidth?: "border.width" | undefined;
+    borderEndEndRadius?: "border.radius" | undefined;
+    borderEndStartRadius?: "border.radius" | undefined;
+    borderInlineEndWidth?: "border.width" | undefined;
+    borderInlineStartWidth?: "border.width" | undefined;
+    borderInlineWidth?: "border.width" | undefined;
+    borderLeftWidth?: "border.width" | undefined;
+    borderRadius?: "border.radius" | undefined;
+    borderRightWidth?: "border.width" | undefined;
+    borderStartEndRadius?: "border.radius" | undefined;
+    borderStartStartRadius?: "border.radius" | undefined;
+    borderTopLeftRadius?: "border.radius" | undefined;
+    borderTopRightRadius?: "border.radius" | undefined;
+    borderTopWidth?: "border.width" | undefined;
+    borderWidth?: "border.width" | undefined;
     borderBottomStyle?: "dashed" | "dotted" | "hidden" | "none" | "solid" | undefined;
     borderLeftStyle?: "dashed" | "dotted" | "hidden" | "none" | "solid" | undefined;
     borderRightStyle?: "dashed" | "dotted" | "hidden" | "none" | "solid" | undefined;
@@ -79,6 +103,26 @@ declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof
     position?: "relative" | "static" | undefined;
     borderStyle?: "dashed" | "dotted" | "hidden" | "none" | "solid" | undefined;
 }>) => SafeCSSObject<"backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartWidth" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomWidth" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartWidth" | "borderInlineWidth" | "borderLeftColor" | "borderLeftWidth" | "borderRadius" | "borderRightColor" | "borderRightWidth" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopWidth" | "borderWidth" | "boxShadow" | "color" | "height" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "width" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderTopStyle" | "position" | "borderStyle", "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "width", {
+    borderBlockEndWidth?: "border.width" | undefined;
+    borderBlockStartWidth?: "border.width" | undefined;
+    borderBlockWidth?: "border.width" | undefined;
+    borderBottomLeftRadius?: "border.radius" | undefined;
+    borderBottomRightRadius?: "border.radius" | undefined;
+    borderBottomWidth?: "border.width" | undefined;
+    borderEndEndRadius?: "border.radius" | undefined;
+    borderEndStartRadius?: "border.radius" | undefined;
+    borderInlineEndWidth?: "border.width" | undefined;
+    borderInlineStartWidth?: "border.width" | undefined;
+    borderInlineWidth?: "border.width" | undefined;
+    borderLeftWidth?: "border.width" | undefined;
+    borderRadius?: "border.radius" | undefined;
+    borderRightWidth?: "border.width" | undefined;
+    borderStartEndRadius?: "border.radius" | undefined;
+    borderStartStartRadius?: "border.radius" | undefined;
+    borderTopLeftRadius?: "border.radius" | undefined;
+    borderTopRightRadius?: "border.radius" | undefined;
+    borderTopWidth?: "border.width" | undefined;
+    borderWidth?: "border.width" | undefined;
     borderBottomStyle?: "dashed" | "dotted" | "hidden" | "none" | "solid" | undefined;
     borderLeftStyle?: "dashed" | "dotted" | "hidden" | "none" | "solid" | undefined;
     borderRightStyle?: "dashed" | "dotted" | "hidden" | "none" | "solid" | undefined;

package/dist/types/components/__generated__/CheckboxProps.codegen.d.ts

@@ -3,12 +3,13 @@
  *
  * Extract component prop types from UIKit 2 components - CheckboxProps
  *
- * @codegen <<SignedSource::56c904bc1a3ad0ed3621db32045cff13>>
+ * @codegen <<SignedSource::c3f249f62fc1e2dab7bc6a21a0681633>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/checkbox/__generated__/index.partial.tsx <<SignedSource::57649f2b33c0aec30c2ad0e41479c28b>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/checkbox/__generated__/index.partial.tsx <<SignedSource::e85d1dd9754f25c100758622ff6d2d91>>
  */
 import React from 'react';
 import PlatformCheckbox from '@atlaskit/checkbox';
+import type { EventHandlerProps } from './types.codegen';
 type PlatformCheckboxProps = React.ComponentProps<typeof PlatformCheckbox>;
-export type CheckboxProps = Pick<PlatformCheckboxProps, 'testId' | 'defaultChecked' | 'isChecked' | 'isIndeterminate' | 'label' | 'id' | 'isRequired' | 'isDisabled' | 'isInvalid' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'>;
+export type CheckboxProps = Pick<PlatformCheckboxProps, 'testId' | 'defaultChecked' | 'isChecked' | 'isIndeterminate' | 'label' | 'id' | 'isRequired' | 'isDisabled' | 'isInvalid' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'> & Pick<EventHandlerProps, 'onChange' | 'onBlur' | 'onFocus'>;
 export {};

package/dist/types/components/__generated__/DynamicTableProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - DynamicTableProps
  *
- * @codegen <<SignedSource::8b04874579e3370bf65d66c376e70709>>
+ * @codegen <<SignedSource::3ec687a739b617f4cbe7a8969062cca9>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/dynamictable/__generated__/index.partial.tsx <<SignedSource::9c044f09ae44854b9f861a93462c004a>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/dynamictable/__generated__/index.partial.tsx <<SignedSource::027c1440c4dc132bea4898d69f352f23>>
  */
 import type { RowType, StatefulProps } from '@atlaskit/dynamic-table/types';
 type NewRowType = Pick<RowType, 'cells' | 'key' | 'isHighlighted'>;

package/dist/types/components/__generated__/FlexProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - FlexProps
  *
- * @codegen <<SignedSource::f8cf7fcd48be584224dc9b3dbbb9d394>>
+ * @codegen <<SignedSource::2660d61ae4436d4239c8c7ed6c343415>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/flex/__generated__/index.partial.tsx <<SignedSource::752cb9176f453cb3422d13a493b64a06>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/flex/__generated__/index.partial.tsx <<SignedSource::87ea6214c3b6ee4b2d36987f1682074e>>
  */
 import React from 'react';
 import { Flex as PlatformFlex } from '@atlaskit/primitives';

package/dist/types/components/__generated__/GridProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - GridProps
  *
- * @codegen <<SignedSource::60e56f4ba271fccb01ee83e02659eb52>>
+ * @codegen <<SignedSource::4f326921dc60e223cfd0ba05be93a9eb>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/grid/__generated__/index.partial.tsx <<SignedSource::7f93ba0404d4e15e02f70341e423b955>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/grid/__generated__/index.partial.tsx <<SignedSource::82ef52184f696a17dcca4c8a84e23441>>
  */
 import React from 'react';
 import { Grid as PlatformGrid } from '@atlaskit/primitives';

package/dist/types/components/__generated__/InlineProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - InlineProps
  *
- * @codegen <<SignedSource::1f9b9835477c3248e8ab5d01e9cdc22a>>
+ * @codegen <<SignedSource::807734fa360131f49ef4e7bb552bcb95>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/inline/__generated__/index.partial.tsx <<SignedSource::050cb8647981a5e0272677d7903f51eb>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/inline/__generated__/index.partial.tsx <<SignedSource::d8e43c17dbcecadc5f72802f65dc1eb4>>
  */
 import React from 'react';
 import { Inline as PlatformInline } from '@atlaskit/primitives';

package/dist/types/components/__generated__/RadioGroupProps.codegen.d.ts

@@ -3,12 +3,13 @@
  *
  * Extract component prop types from UIKit 2 components - RadioGroupProps
  *
- * @codegen <<SignedSource::cdab8c21bdbe308e0525c518987435f6>>
+ * @codegen <<SignedSource::f21dfcf68dcf1e2443af8b267b5a057f>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/radio/__generated__/radio-group.partial.tsx <<SignedSource::7d9b07f217be4924a1cf7755f682fb58>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/radio/__generated__/radio-group.partial.tsx <<SignedSource::2cbedc883c6d0fdf8e7f443d9ea14eb1>>
  */
 import React from 'react';
 import { RadioGroup as PlatformRadioGroup } from '@atlaskit/radio';
+import type { EventHandlerProps } from './types.codegen';
 type PlatformRadioGroupProps = React.ComponentProps<typeof PlatformRadioGroup>;
-export type RadioGroupProps = Pick<PlatformRadioGroupProps, 'defaultValue' | 'options' | 'onInvalid' | 'testId' | 'isRequired' | 'isDisabled' | 'isInvalid' | 'onChange' | 'value' | 'aria-labelledby' | 'name'>;
+export type RadioGroupProps = Pick<PlatformRadioGroupProps, 'defaultValue' | 'options' | 'onInvalid' | 'testId' | 'isRequired' | 'isDisabled' | 'isInvalid' | 'onChange' | 'value' | 'aria-labelledby' | 'name'> & Pick<EventHandlerProps, 'onChange'>;
 export {};

package/dist/types/components/__generated__/RadioProps.codegen.d.ts

@@ -3,12 +3,13 @@
  *
  * Extract component prop types from UIKit 2 components - RadioProps
  *
- * @codegen <<SignedSource::ca014c2fa3ed73cb002099a84ac8a08a>>
+ * @codegen <<SignedSource::18d92f885ea65e94fa46c10f531d5b42>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/radio/__generated__/index.partial.tsx <<SignedSource::ba49931714a2937a807db87c6ed3ed7b>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/radio/__generated__/index.partial.tsx <<SignedSource::f8c9f83aa0faf7291e9446bec9e441d6>>
  */
 import React from 'react';
 import { Radio as PlatformRadio } from '@atlaskit/radio';
+import type { EventHandlerProps } from './types.codegen';
 type PlatformRadioProps = React.ComponentProps<typeof PlatformRadio>;
-export type RadioProps = Pick<PlatformRadioProps, 'label' | 'testId' | 'isChecked' | 'ariaLabel' | 'onInvalid' | 'id' | 'isRequired' | 'isDisabled' | 'isInvalid' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'>;
+export type RadioProps = Pick<PlatformRadioProps, 'label' | 'testId' | 'isChecked' | 'ariaLabel' | 'onInvalid' | 'id' | 'isRequired' | 'isDisabled' | 'isInvalid' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'> & Pick<EventHandlerProps, 'onChange' | 'onBlur' | 'onFocus'>;
 export {};

package/dist/types/components/__generated__/RangeProps.codegen.d.ts

@@ -3,12 +3,13 @@
  *
  * Extract component prop types from UIKit 2 components - RangeProps
  *
- * @codegen <<SignedSource::e63be8ed022af8026cc320c9683dfebf>>
+ * @codegen <<SignedSource::67e22cda61419468c91e120179019751>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/range/__generated__/index.partial.tsx <<SignedSource::73b4d120484ba38e2bf1334749c9bc05>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/range/__generated__/index.partial.tsx <<SignedSource::da47c96a98423bdcf0e9c79c7e31854f>>
  */
 import React from 'react';
 import PlatformRange from '@atlaskit/range';
+import type { EventHandlerProps } from './types.codegen';
 type PlatformRangeProps = React.ComponentProps<typeof PlatformRange>;
-export type RangeProps = Pick<PlatformRangeProps, 'defaultValue' | 'max' | 'min' | 'step' | 'testId' | 'onChange' | 'id' | 'isDisabled' | 'onBlur' | 'onFocus' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'>;
+export type RangeProps = Pick<PlatformRangeProps, 'defaultValue' | 'max' | 'min' | 'step' | 'testId' | 'onChange' | 'id' | 'isDisabled' | 'onBlur' | 'onFocus' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'> & Pick<EventHandlerProps, 'onBlur' | 'onFocus'>;
 export {};

package/dist/types/components/__generated__/SelectProps.codegen.d.ts

@@ -3,11 +3,11 @@
  *
  * Extract component prop types from UIKit 2 components - SelectProps
  *
- * @codegen <<SignedSource::fc820c7821eab223fd3731133a386703>>
+ * @codegen <<SignedSource::15d2ba46804ab0a683383a0ba9cae564>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/select/__generated__/index.partial.tsx <<SignedSource::9650d96ed765605a9c8e52d59df07caa>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/select/__generated__/index.partial.tsx <<SignedSource::a826a4f7af8f06890432c9274aad7332>>
  */
 import { SelectProps as PlatformSelectProps } from '@atlaskit/select';
 export type SelectProps = Pick<PlatformSelectProps<any, true | false>, 'spacing' | 'appearance' | 'testId' | 'autoFocus' | 'defaultValue' | 'closeMenuOnSelect' | 'inputValue' | 'inputId' | 'isClearable' | 'isLoading' | 'isMulti' | 'isSearchable' | 'menuIsOpen' | 'onInputChange' | 'options' | 'placeholder' | 'onChange' | 'id' | 'isDisabled' | 'isInvalid' | 'onBlur' | 'onFocus' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'> & {
-    isRequired: boolean;
+    isRequired?: boolean;
 };

package/dist/types/components/__generated__/StackProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - StackProps
  *
- * @codegen <<SignedSource::f3afde823b52ff8f169a9c09c922d8c8>>
+ * @codegen <<SignedSource::078aee141bb0e11ae719fd7e91902969>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/stack/__generated__/index.partial.tsx <<SignedSource::70a76bc91e660eb24d95369466375eec>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit2-codegen/stack/__generated__/index.partial.tsx <<SignedSource::a7e2eb6e4d64591d6b9659e49b6ca7cc>>
  */
 import React from 'react';
 import { Stack as PlatformStack } from '@atlaskit/primitives';