update Flex message types (#265)

* changed the maximum number of bubbles that can be included in a carousel

* add box justifyContent and alignItems property

* add box background

* change flex image size

* change flex icon, text and span size

* add flex text and button adjustMode

* add deprecated to flex spacer

Co-authored-by: xingo xu <xingoxu@users.noreply.github.com>

Author: YunChaoTsai

lib/types.ts

@@ -890,7 +890,7 @@ export type FlexBlockStyle = {
 export type FlexCarousel = {
   type: "carousel";
   /**
-   * (Max: 10 bubbles)
+   * (Max: 12 bubbles)
    */
   contents: FlexBubble[];
 };
@@ -1061,6 +1061,25 @@ export type FlexBox = {
    * Specify an [action object](https://developers.line.biz/en/reference/messaging-api/#action-objects).
    */
   action?: Action;
+  /**
+   * How child elements are aligned along the main axis of the parent element. If the
+   * parent element is a horizontal box, this only takes effect when its child elements have
+   * their `flex` property set equal to 0. For more information, see [Arranging a box's child elements and free space](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#justify-property)
+   * in the Messaging API documentation.
+   */
+  justifyContent?:
+    | "flex-start"
+    | "center"
+    | "flex-end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly";
+  /**
+   * How child elements are aligned along the cross axis of the parent element. For more
+   * information, see [Arranging a box's child elements and free space](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#justify-property) in the Messaging API documentation.
+   */
+  alignItems?: "flex-start" | "center" | "flex-end";
+  background?: Background;
 } & Offset;
 
 export type Offset = {
@@ -1095,6 +1114,49 @@ export type Offset = {
   offsetEnd?: string;
 };
 
+export type Background = {
+  /**
+   * The type of background used. Specify these values:
+   * - `linearGradient`: Linear gradient. For more information, see [Linear gradient backgrounds](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#linear-gradient-bg) in the Messaging API documentation.
+   */
+  type: "linearGradient";
+  /**
+   * The angle at which a linear gradient moves. Specify the angle using an integer value
+   * like `90deg` (90 degrees) or a decimal number like `23.5deg` (23.5 degrees) in the
+   * half-open interval [0, 360). The direction of the linear gradient rotates clockwise as the
+   * angle increases. Given a value of `0deg`, the gradient starts at the bottom and ends at
+   * the top; given a value of `45deg`, the gradient starts at the bottom-left corner and ends
+   * at the top-right corner; given a value of 90deg, the gradient starts at the left and ends
+   * at the right; and given a value of `180deg`, the gradient starts at the top and ends at
+   * the bottom. For more information, see [Direction (angle) of linear gradient backgrounds](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#linear-gradient-bg-angle) in the Messaging API documentation.
+   */
+  angle: string;
+  /**
+   * The color at the gradient's starting point. Use a hexadecimal color code in the
+   * `#RRGGBB` or `#RRGGBBAA` format.
+   */
+  startColor: string;
+  /**
+   * The color at the gradient's ending point. Use a hexadecimal color code in the
+   * `#RRGGBB` or `#RRGGBBAA` format.
+   */
+  endColor: string;
+  /**
+   * The color in the middle of the gradient. Use a hexadecimal color code in the `#RRGGBB`
+   * or `#RRGGBBAA` format. Specify a value for the `background.centerColor` property to
+   * create a gradient that has three colors. For more information, see [Intermediate color stops for linear gradients](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#linear-gradient-bg-center-color) in the
+   * Messaging API documentation.
+   */
+  centerColor?: string;
+  /**
+   * The position of the intermediate color stop. Specify an integer or decimal value
+   * between `0%` (the starting point) and `100%` (the ending point). This is `50%` by
+   * default. For more information, see [Intermediate color stops for linear gradients](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#linear-gradient-bg-center-color) in the
+   * Messaging API documentation.
+   */
+  centerPosition?: string;
+};
+
 /**
  * This component draws a button.
  *
@@ -1163,6 +1225,18 @@ export type FlexButton = {
    * property will be ignored.
    */
   gravity?: "top" | "bottom" | "center";
+  /**
+   * The method by which to adjust the text font size. Specify this value:
+   *
+   * - `shrink-to-fit`: Automatically shrink the font
+   *   size to fit the width of the component. This
+   *   property takes a "best-effort" approach that may
+   *   work differently—or not at all!—on some platforms.
+   *   For more information, see [Automatically shrink fonts to fit](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#adjusts-fontsize-to-fit)
+   *   in the Messaging API documentation.
+   * - LINE 10.13.0 or later for iOS and Android
+   */
+  adjustMode?: "shrink-to-fit";
 } & Offset;
 
 /**
@@ -1209,8 +1283,10 @@ export type FlexIcon = {
    * Maximum size of the icon width.
    * The size increases in the order of listing.
    * The default value is `md`.
+   * For more information, see [Icon, text, and span size](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#other-component-size) in the Messaging API documentation.
    */
   size?:
+    | string
     | "xxs"
     | "xs"
     | "sm"
@@ -1292,8 +1368,10 @@ export type FlexImage = {
    * Maximum size of the image width.
    * The size increases in the order of listing.
    * The default value is `md`.
+   * For more information, see [Image size](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#image-size) in the Messaging API documentation.
    */
   size?:
+    | string
     | "xxs"
     | "xs"
     | "sm"
@@ -1361,6 +1439,7 @@ export type FlexSeparator = {
 /**
  * This is an invisible component that places a fixed-size space at the
  * beginning or end of the box.
+ * @deprecated
  */
 export type FlexSpacer = {
   type: "spacer";
@@ -1379,6 +1458,18 @@ export type FlexText = {
    * Array of spans. Be sure to set either one of the `text` property or `contents` property. If you set the `contents` property, `text` is ignored.
    */
   contents?: FlexSpan[];
+  /**
+   * The method by which to adjust the text font size. Specify this value:
+   *
+   * - `shrink-to-fit`: Automatically shrink the font
+   *   size to fit the width of the component. This
+   *   property takes a "best-effort" approach that may
+   *   work differently—or not at all!—on some platforms.
+   *   For more information, see [Automatically shrink fonts to fit](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#adjusts-fontsize-to-fit)
+   *   in the Messaging API documentation.
+   * - LINE 10.13.0 or later for iOS and Android
+   */
+  adjustMode?: "shrink-to-fit";
   /**
    * The ratio of the width or height of this box within the parent box.
    *
@@ -1405,8 +1496,10 @@ export type FlexText = {
    * Font size.
    * The size increases in the order of listing.
    * The default value is `md`.
+   * For more information, see [Icon, text, and span size](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#other-component-size) in the Messaging API documentation.
    */
   size?:
+    | string
     | "xxs"
     | "xs"
     | "sm"
@@ -1504,8 +1597,20 @@ export type FlexSpan = {
   color?: string;
   /**
    * Font size. You can specify one of the following values: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `3xl`, `4xl`, or `5xl`. The size increases in the order of listing. The default value is `md`.
+   * For more information, see [Icon, text, and span size](https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#other-component-size) in the Messaging API documentation.
    */
-  size?: string;
+  size?:
+    | string
+    | "xxs"
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "xxl"
+    | "3xl"
+    | "4xl"
+    | "5xl";
   /**
    * Font weight. You can specify one of the following values: `regular` or `bold`. Specifying `bold` makes the font bold. The default value is `regular`.
    */