diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index 0ceebea6..92855bcd 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -116,7 +116,8 @@
         : $inputValue}"
       class:bx--date-picker__input="{true}"
       class:bx--date-picker__input--invalid="{invalid}"
-      class="{size && `bx--date-picker__input--${size}`}"
+      class:bx--date-picker__input--sm="{size === 'sm'}"
+      class:bx--date-picker__input--xl="{size === 'xl'}"
       on:input
       on:input="{({ target }) => {
         updateValue({ type: 'input', value: target.value });
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 2b149674..2616c2bc 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -146,7 +146,8 @@
       class:bx--visually-hidden="{hideLabel}"
       class:bx--label--disabled="{disabled}"
       class:bx--label--inline="{inline}"
-      class="{inline && !!size && `bx--label--inline--${size}`}"
+      class:bx--label--inline-sm="{inline && size === 'sm'}"
+      class:bx--label--inline-xl="{inline && size === 'xl'}"
     >
       <slot name="labelText">
         {labelText}