From 6203e1d6992ee780158bf271509f343a1271fc82 Mon Sep 17 00:00:00 2001
From: Gregor Wassmann <gregor.wassmann@gmail.com>
Date: Mon, 27 Mar 2023 16:10:35 +0200
Subject: [PATCH] chore: v11 DatePicker

For better compatibility with existing codebases size xl is still supported.
---
 COMPONENT_INDEX.md                           | 2 +-
 docs/src/COMPONENT_API.json                  | 2 +-
 docs/src/pages/components/DatePicker.svx     | 4 ++--
 src/DatePicker/DatePickerInput.svelte        | 4 ++--
 tests/DatePicker.test.svelte                 | 2 +-
 types/DatePicker/DatePickerInput.svelte.d.ts | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index d7ec320e..5247ee6c 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1082,7 +1082,7 @@ None.
 | Prop name       | Required | Kind             | Reactive | Type                                      | Default value                                    | Description                                        |
 | :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
 | ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element       |
-| size            | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>             | <code>undefined</code>                           | Set the size of the input                          |
+| size            | No       | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>             | <code>undefined</code>                           | Set the size of the input                          |
 | type            | No       | <code>let</code> | No       | <code>string</code>                       | <code>"text"</code>                              | Specify the input type                             |
 | placeholder     | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input placeholder text                 |
 | pattern         | No       | <code>let</code> | No       | <code>string</code>                       | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code>      | Specify the Regular Expression for the input value |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 160934f0..73a49ebb 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -3005,7 +3005,7 @@
           "name": "size",
           "kind": "let",
           "description": "Set the size of the input",
-          "type": "\"sm\" | \"xl\"",
+          "type": "\"sm\" | \"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 3e4dbdcf..fa0e6496 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -63,10 +63,10 @@ By default, the "simple" date picker does not have a dropdown calendar.
   <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-## Extra-large size
+## Large size
 
 <DatePicker>
-  <DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
+  <DatePickerInput size="lg" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
 ## Small size
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index ad4a3bd6..a116b64a 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * Set the size of the input
-   * @type {"sm" | "xl"}
+   * @type {"sm" | "lg"}
    */
   export let size = undefined;
 
@@ -117,7 +117,7 @@
       class:bx--date-picker__input="{true}"
       class:bx--date-picker__input--invalid="{invalid}"
       class:bx--date-picker__input--sm="{size === 'sm'}"
-      class:bx--date-picker__input--xl="{size === 'xl'}"
+      class:bx--date-picker__input--lg="{size === 'lg' || size === 'xl'}"
       on:input
       on:input="{({ target }) => {
         updateValue({ type: 'input', value: target.value });
diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte
index f0e263ee..a593d740 100644
--- a/tests/DatePicker.test.svelte
+++ b/tests/DatePicker.test.svelte
@@ -39,7 +39,7 @@
 
 <DatePicker>
   <DatePickerInput
-    size="xl"
+    size="lg"
     labelText="Date of birth"
     placeholder="mm/dd/yyyy"
   />
diff --git a/types/DatePicker/DatePickerInput.svelte.d.ts b/types/DatePicker/DatePickerInput.svelte.d.ts
index 5f962cda..39957fe1 100644
--- a/types/DatePicker/DatePickerInput.svelte.d.ts
+++ b/types/DatePicker/DatePickerInput.svelte.d.ts
@@ -8,7 +8,7 @@ export interface DatePickerInputProps extends RestProps {
    * Set the size of the input
    * @default undefined
    */
-  size?: "sm" | "xl";
+  size?: "sm" | "lg";
 
   /**
    * Specify the input type