From 5f6e990ea8d6c0320a7e10c074080b49198fcbd3 Mon Sep 17 00:00:00 2001
From: Navin Moorthy <navin007.a@gmail.com>
Date: Tue, 1 Feb 2022 17:55:08 +0530
Subject: [PATCH] =?UTF-8?q?style(prettier):=20=F0=9F=92=84=20update=20tail?=
 =?UTF-8?q?wind=20arrangement=20using=20prettier=20plugin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                           |  1 +
 src/avatar-group/stories/AvatarGroupBasic.stories.tsx  |  2 +-
 src/avatar-group/stories/AvatarGroupIcon.stories.tsx   |  2 +-
 src/avatar-group/stories/AvatarGroupName.stories.tsx   |  2 +-
 src/avatar-group/stories/AvatarGroupStack.stories.tsx  |  2 +-
 src/avatar/stories/AvatarBasic.stories.tsx             |  2 +-
 src/avatar/stories/AvatarStack.stories.tsx             |  2 +-
 src/box/stories/BoxAs.component.tsx                    |  2 +-
 src/box/stories/BoxStyled.component.tsx                |  6 +++---
 src/button/stories/ButtonBasic.stories.tsx             |  2 +-
 .../stories/CheckboxGroupBasic.component.tsx           |  2 +-
 src/checkbox/stories/CheckboxControlled.component.tsx  |  4 ++--
 .../stories/CheckboxCustomAdvanced.component.tsx       |  6 +++---
 .../stories/CheckboxCustomMedium.component.tsx         |  2 +-
 .../stories/CheckboxCustomSimple.component.tsx         |  2 +-
 src/checkbox/stories/CheckboxStack.component.tsx       |  6 +++---
 .../stories/CircularProgressBasic.component.tsx        |  4 ++--
 .../stories/CircularProgressCustom.component.tsx       |  4 ++--
 .../stories/CircularProgressHint.component.tsx         |  4 ++--
 src/create-icon/stories/IconAll.component.tsx          |  4 ++--
 src/divider/Divider.tsx                                |  2 +-
 src/divider/stories/DividerVertical.component.tsx      |  2 +-
 src/icons/TypingLargeStatus.tsx                        |  4 ++--
 src/icons/TypingSmallStatus.tsx                        |  2 +-
 src/input/stories/InputStack.component.tsx             |  8 ++++----
 src/meter/stories/MeterBasic.component.tsx             |  2 +-
 src/meter/stories/MeterCustom.component.tsx            |  2 +-
 src/meter/stories/MeterHint.component.tsx              |  2 +-
 src/meter/stories/MeterInterval.component.tsx          |  8 ++++----
 src/meter/stories/MeterLabel.component.tsx             |  2 +-
 src/progress/stories/ProgressBasic.component.tsx       |  4 ++--
 src/progress/stories/ProgressCustom.component.tsx      |  4 ++--
 src/progress/stories/ProgressHint.component.tsx        |  4 ++--
 src/progress/stories/ProgressLabel.component.tsx       |  4 ++--
 .../stories/RadioGroupControlled.component.tsx         |  4 ++--
 src/radio/stories/RadioControlled.component.tsx        |  4 ++--
 src/radio/stories/RadioStack.component.tsx             |  6 +++---
 src/select/stories/SelectStack.component.tsx           |  8 ++++----
 src/show-more/stories/ShowMoreHorizontal.component.tsx |  4 ++--
 src/show-more/stories/ShowMoreVertical.component.tsx   |  6 +++---
 src/switch/stories/SwitchControlled.component.tsx      |  6 +++---
 src/switch/stories/SwitchStack.component.tsx           |  8 ++++----
 src/textarea/stories/TextareaBasic.stories.tsx         |  6 +++---
 src/textarea/stories/TextareaStack.component.tsx       |  6 +++---
 src/toast/stories/CustomToast.tsx                      |  4 ++--
 src/toast/stories/Toast.stories.tsx                    | 10 +++++-----
 yarn.lock                                              |  5 +++++
 47 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/package.json b/package.json
index 4376244a..db6ab977 100644
--- a/package.json
+++ b/package.json
@@ -175,6 +175,7 @@
     "postcss-focus-visible": "6.0.3",
     "postcss-selector-parser": "6.0.9",
     "prettier": "2.5.1",
+    "prettier-plugin-tailwindcss": "0.1.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "7.25.3",
diff --git a/src/avatar-group/stories/AvatarGroupBasic.stories.tsx b/src/avatar-group/stories/AvatarGroupBasic.stories.tsx
index 209ea5c9..2ebfcfe7 100644
--- a/src/avatar-group/stories/AvatarGroupBasic.stories.tsx
+++ b/src/avatar-group/stories/AvatarGroupBasic.stories.tsx
@@ -47,7 +47,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-orange-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-orange-200">
           <Story />
         </div>
       );
diff --git a/src/avatar-group/stories/AvatarGroupIcon.stories.tsx b/src/avatar-group/stories/AvatarGroupIcon.stories.tsx
index ff680289..6d1b9df5 100644
--- a/src/avatar-group/stories/AvatarGroupIcon.stories.tsx
+++ b/src/avatar-group/stories/AvatarGroupIcon.stories.tsx
@@ -47,7 +47,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-purple-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-purple-200">
           <Story />
         </div>
       );
diff --git a/src/avatar-group/stories/AvatarGroupName.stories.tsx b/src/avatar-group/stories/AvatarGroupName.stories.tsx
index 3b539e33..f6f291a7 100644
--- a/src/avatar-group/stories/AvatarGroupName.stories.tsx
+++ b/src/avatar-group/stories/AvatarGroupName.stories.tsx
@@ -47,7 +47,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-yellow-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-yellow-200">
           <Story />
         </div>
       );
diff --git a/src/avatar-group/stories/AvatarGroupStack.stories.tsx b/src/avatar-group/stories/AvatarGroupStack.stories.tsx
index b2cd698a..1fba66fc 100644
--- a/src/avatar-group/stories/AvatarGroupStack.stories.tsx
+++ b/src/avatar-group/stories/AvatarGroupStack.stories.tsx
@@ -44,7 +44,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-red-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-red-200">
           <Story />
         </div>
       );
diff --git a/src/avatar/stories/AvatarBasic.stories.tsx b/src/avatar/stories/AvatarBasic.stories.tsx
index 61ab7a25..10833302 100644
--- a/src/avatar/stories/AvatarBasic.stories.tsx
+++ b/src/avatar/stories/AvatarBasic.stories.tsx
@@ -151,7 +151,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-blue-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-blue-200">
           <Story />
         </div>
       );
diff --git a/src/avatar/stories/AvatarStack.stories.tsx b/src/avatar/stories/AvatarStack.stories.tsx
index ae6e2485..4563c2e2 100644
--- a/src/avatar/stories/AvatarStack.stories.tsx
+++ b/src/avatar/stories/AvatarStack.stories.tsx
@@ -136,7 +136,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-green-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-green-200">
           <Story />
         </div>
       );
diff --git a/src/box/stories/BoxAs.component.tsx b/src/box/stories/BoxAs.component.tsx
index 44fa71d7..05c4bec5 100644
--- a/src/box/stories/BoxAs.component.tsx
+++ b/src/box/stories/BoxAs.component.tsx
@@ -11,7 +11,7 @@ export const BoxAs: React.FC<BoxAsProps> = props => {
     <Box
       as={Button}
       suffix={<ClockIcon />}
-      className={tcm("bg-red-500 rounded-lg", className)}
+      className={tcm("rounded-lg bg-red-500", className)}
       {...rest}
     >
       Box
diff --git a/src/box/stories/BoxStyled.component.tsx b/src/box/stories/BoxStyled.component.tsx
index 7711677e..9629aab3 100644
--- a/src/box/stories/BoxStyled.component.tsx
+++ b/src/box/stories/BoxStyled.component.tsx
@@ -10,18 +10,18 @@ export const BoxStyled: React.FC<BoxStyledProps> = props => {
   return (
     <Box
       as="figure"
-      className={tcm("p-8 overflow-hidden bg-gray-100 rounded-xl", className)}
+      className={tcm("overflow-hidden rounded-xl bg-gray-100 p-8", className)}
       {...rest}
     >
       <Box
         as="img"
-        className="object-cover w-32 h-32 mx-auto rounded-full md:w-48 md:h-auto md:rounded-md"
+        className="mx-auto h-32 w-32 rounded-full object-cover md:h-auto md:w-48 md:rounded-md"
         src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
         alt="Image of a women"
         width="384"
         height="512"
       />
-      <Box className="pt-6 space-y-4 text-center md:p-8 md:text-left">
+      <Box className="space-y-4 pt-6 text-center md:p-8 md:text-left">
         <Box as="blockquote">
           <Box as="p" className="text-lg font-semibold">
             “Tailwind CSS is the only framework that I've seen scale on large
diff --git a/src/button/stories/ButtonBasic.stories.tsx b/src/button/stories/ButtonBasic.stories.tsx
index 74746c4f..7bb26303 100644
--- a/src/button/stories/ButtonBasic.stories.tsx
+++ b/src/button/stories/ButtonBasic.stories.tsx
@@ -143,7 +143,7 @@ export const ExtendedSpinner: Story = {
 
 const CustomSpinnerComponent = () => {
   return (
-    <div className="inline-block w-4 h-4 m-2 after:block after:w-4 after:h-4 rounded-[50%] border-2 border-t-green-500 border-r-transparent border-b-green-500 border-l-transparent animate-spin" />
+    <div className="m-2 inline-block h-4 w-4 animate-spin rounded-[50%] border-2 border-t-green-500 border-r-transparent border-b-green-500 border-l-transparent after:block after:h-4 after:w-4" />
   );
 };
 
diff --git a/src/checkbox-group/stories/CheckboxGroupBasic.component.tsx b/src/checkbox-group/stories/CheckboxGroupBasic.component.tsx
index 8f84eb4b..ca676983 100644
--- a/src/checkbox-group/stories/CheckboxGroupBasic.component.tsx
+++ b/src/checkbox-group/stories/CheckboxGroupBasic.component.tsx
@@ -17,7 +17,7 @@ export const CheckboxGroupBasic: React.FC<CheckboxGroupBasicProps> = props => {
   if (!Array.isArray(state)) return null;
 
   return (
-    <div className="flex flex-col space-y-4 min-h-96">
+    <div className="flex min-h-96 flex-col space-y-4">
       <div className="text-xl font-bold" id="label">
         Pick fruits to eat
       </div>
diff --git a/src/checkbox/stories/CheckboxControlled.component.tsx b/src/checkbox/stories/CheckboxControlled.component.tsx
index cb64de47..1d00b1c7 100644
--- a/src/checkbox/stories/CheckboxControlled.component.tsx
+++ b/src/checkbox/stories/CheckboxControlled.component.tsx
@@ -39,14 +39,14 @@ export const CheckboxControlled: React.FC<CheckboxControlledProps> = () => {
   const radioState = getRadioState();
 
   return (
-    <div className="flex flex-col items-center space-y-4 w-96">
+    <div className="flex w-96 flex-col items-center space-y-4">
       <Checkbox
         state={checkboxState}
         onStateChange={setCheckboxState}
         label={capitalizeFirstLetter(radioState as string)}
       />
 
-      <Separator className="w-full my-4" />
+      <Separator className="my-4 w-full" />
 
       <RadioComponent
         state={radioState}
diff --git a/src/checkbox/stories/CheckboxCustomAdvanced.component.tsx b/src/checkbox/stories/CheckboxCustomAdvanced.component.tsx
index ec1fc10d..03757540 100644
--- a/src/checkbox/stories/CheckboxCustomAdvanced.component.tsx
+++ b/src/checkbox/stories/CheckboxCustomAdvanced.component.tsx
@@ -54,13 +54,13 @@ const CustomCheckbox: React.FC<CustomCheckboxProps> = props => {
   return (
     <CheckboxLabel
       {...state}
-      className={tcm("px-8 py-2 border-2 border-blue-500 rounded", className)}
+      className={tcm("rounded border-2 border-blue-500 px-8 py-2", className)}
     >
       <CheckboxInput {...state} {...inputProps} />
       {state.isChecked ? (
-        <CheckboxIcon className="text-blue-500 absolute inset-y-0 left-0 flex items-center pl-1.5">
+        <CheckboxIcon className="absolute inset-y-0 left-0 flex items-center pl-1.5 text-blue-500">
           <svg
-            className="w-5 h-5"
+            className="h-5 w-5"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
             fill="currentColor"
diff --git a/src/checkbox/stories/CheckboxCustomMedium.component.tsx b/src/checkbox/stories/CheckboxCustomMedium.component.tsx
index 686ff0b7..3805b396 100644
--- a/src/checkbox/stories/CheckboxCustomMedium.component.tsx
+++ b/src/checkbox/stories/CheckboxCustomMedium.component.tsx
@@ -19,7 +19,7 @@ export const CheckboxCustomMedium: React.FC<CheckboxCustomMediumProps> = () => {
       {state => {
         return (
           <>
-            <CheckboxLabel className="p-2 border-2 border-blue-500 rounded" />
+            <CheckboxLabel className="rounded border-2 border-blue-500 p-2" />
             <CheckboxIcon
               className={
                 state.isChecked
diff --git a/src/checkbox/stories/CheckboxCustomSimple.component.tsx b/src/checkbox/stories/CheckboxCustomSimple.component.tsx
index ad926fa9..68561bee 100644
--- a/src/checkbox/stories/CheckboxCustomSimple.component.tsx
+++ b/src/checkbox/stories/CheckboxCustomSimple.component.tsx
@@ -22,7 +22,7 @@ export const CheckboxCustomSimple: React.FC<CheckboxCustomSimpleProps> = () => {
       label="Checkbox"
       description="Fruits in the basket"
     >
-      <CheckboxLabel className="p-2 border-2 border-blue-500 rounded" />
+      <CheckboxLabel className="rounded border-2 border-blue-500 p-2" />
       <CheckboxIcon className="bg-red-500">{CustomIconElement}</CheckboxIcon>
       <CheckboxText className="text-green-500">New Checkbox</CheckboxText>
       <CheckboxDescription className="text-orange-500">
diff --git a/src/checkbox/stories/CheckboxStack.component.tsx b/src/checkbox/stories/CheckboxStack.component.tsx
index 88eba667..57bd31cd 100644
--- a/src/checkbox/stories/CheckboxStack.component.tsx
+++ b/src/checkbox/stories/CheckboxStack.component.tsx
@@ -9,7 +9,7 @@ export const CheckboxStack: React.FC<CheckboxStackProps> = props => {
   return (
     <div className="flex flex-col space-y-4">
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Checkbox small example"
       >
         <Checkbox size="sm" {...props} />
@@ -17,7 +17,7 @@ export const CheckboxStack: React.FC<CheckboxStackProps> = props => {
         <Checkbox size="sm" defaultState={"indeterminate"} {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Checkbox medium example"
       >
         <Checkbox size="md" {...props} />
@@ -25,7 +25,7 @@ export const CheckboxStack: React.FC<CheckboxStackProps> = props => {
         <Checkbox size="md" defaultState={"indeterminate"} {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Checkbox large example"
       >
         <Checkbox size="lg" {...props} />
diff --git a/src/circular-progress/stories/CircularProgressBasic.component.tsx b/src/circular-progress/stories/CircularProgressBasic.component.tsx
index db138419..fff3c3d3 100644
--- a/src/circular-progress/stories/CircularProgressBasic.component.tsx
+++ b/src/circular-progress/stories/CircularProgressBasic.component.tsx
@@ -52,10 +52,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-4" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-4 block" onClick={() => setValue(0)}>
         Restart CircularProgress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>
diff --git a/src/circular-progress/stories/CircularProgressCustom.component.tsx b/src/circular-progress/stories/CircularProgressCustom.component.tsx
index 9c4eea42..055f5d18 100644
--- a/src/circular-progress/stories/CircularProgressCustom.component.tsx
+++ b/src/circular-progress/stories/CircularProgressCustom.component.tsx
@@ -59,10 +59,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-4" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-4 block" onClick={() => setValue(0)}>
         Restart CircularProgress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>
diff --git a/src/circular-progress/stories/CircularProgressHint.component.tsx b/src/circular-progress/stories/CircularProgressHint.component.tsx
index af001598..c6fff9a4 100644
--- a/src/circular-progress/stories/CircularProgressHint.component.tsx
+++ b/src/circular-progress/stories/CircularProgressHint.component.tsx
@@ -52,10 +52,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-4" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-4 block" onClick={() => setValue(0)}>
         Restart CircularProgress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>
diff --git a/src/create-icon/stories/IconAll.component.tsx b/src/create-icon/stories/IconAll.component.tsx
index 23c719f3..f94b178c 100644
--- a/src/create-icon/stories/IconAll.component.tsx
+++ b/src/create-icon/stories/IconAll.component.tsx
@@ -27,7 +27,7 @@ export type IconProps = {};
 
 export const Icon: React.FC<IconProps> = props => {
   return (
-    <div className="inline-grid grid-cols-6 gap-4 text-5xl place-items-center">
+    <div className="inline-grid grid-cols-6 place-items-center gap-4 text-5xl">
       <SlotIcon />
       <CaretDownIcon />
       <CaretLeftIcon />
@@ -43,7 +43,7 @@ export const Icon: React.FC<IconProps> = props => {
       <AwayStatusIcon />
       <TypingSmallStatusIcon className="inline-block w-12" />
       <TypingLargeStatusIcon className="inline-block w-12" />
-      <ArrowIcon className="inline-block w-12 h-12" />
+      <ArrowIcon className="inline-block h-12 w-12" />
       <EqualsIcon />
       <ErrorIcon />
       <SelectIcon />
diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx
index 7a242c3a..35bee6f7 100644
--- a/src/divider/Divider.tsx
+++ b/src/divider/Divider.tsx
@@ -43,7 +43,7 @@ export const useDivider = createHook<DividerOptions, DividerHTMLProps>({
       (element: React.ReactNode) => {
         if (label) {
           element = (
-            <div className="w-full h-full">
+            <div className="h-full w-full">
               {element}
               <span className={labelClassName}>
                 {runIfFn(label, { orientation })}
diff --git a/src/divider/stories/DividerVertical.component.tsx b/src/divider/stories/DividerVertical.component.tsx
index 73e0eb90..dbe3ad32 100644
--- a/src/divider/stories/DividerVertical.component.tsx
+++ b/src/divider/stories/DividerVertical.component.tsx
@@ -6,7 +6,7 @@ export type DividerVerticalProps = DividerProps & {};
 
 export const DividerVertical: React.FC<DividerVerticalProps> = props => {
   return (
-    <div className="flex items-center justify-center h-80">
+    <div className="flex h-80 items-center justify-center">
       <Divider orientation="vertical" {...props} />
     </div>
   );
diff --git a/src/icons/TypingLargeStatus.tsx b/src/icons/TypingLargeStatus.tsx
index deddb51e..314155a4 100644
--- a/src/icons/TypingLargeStatus.tsx
+++ b/src/icons/TypingLargeStatus.tsx
@@ -35,7 +35,7 @@ export const TypingLargeStatusIcon = React.forwardRef<
         y="2.5"
         fill="#fff"
         rx="1"
-        className="animate-pulse animation-duration-1000 animation-delay-333"
+        className="animate-pulse animation-delay-333 animation-duration-1000"
       />
       <rect
         width="2"
@@ -44,7 +44,7 @@ export const TypingLargeStatusIcon = React.forwardRef<
         y="2.5"
         fill="#fff"
         rx="1"
-        className="animate-pulse animation-duration-1000 animation-delay-667"
+        className="animate-pulse animation-delay-667 animation-duration-1000"
       />
     </Box>
   );
diff --git a/src/icons/TypingSmallStatus.tsx b/src/icons/TypingSmallStatus.tsx
index 100f16ce..30ed09c4 100644
--- a/src/icons/TypingSmallStatus.tsx
+++ b/src/icons/TypingSmallStatus.tsx
@@ -34,7 +34,7 @@ export const TypingSmallStatusIcon = React.forwardRef<
         y="1.5"
         fill="#fff"
         rx="1"
-        className="animate-pulse animation-duration-1000 animation-delay-500"
+        className="animate-pulse animation-delay-500 animation-duration-1000"
       ></rect>
     </Box>
   );
diff --git a/src/input/stories/InputStack.component.tsx b/src/input/stories/InputStack.component.tsx
index 2807c275..a0af0b0a 100644
--- a/src/input/stories/InputStack.component.tsx
+++ b/src/input/stories/InputStack.component.tsx
@@ -7,7 +7,7 @@ export type InputStackProps = InputProps & {};
 export const InputStack: React.FC<InputStackProps> = props => {
   return (
     <div className="flex flex-col space-y-4">
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Input {...props} size="sm" variant="outline">
           Continue
         </Input>
@@ -21,7 +21,7 @@ export const InputStack: React.FC<InputStackProps> = props => {
           Continue
         </Input>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Input {...props} size="sm" variant="subtle">
           Continue
         </Input>
@@ -35,7 +35,7 @@ export const InputStack: React.FC<InputStackProps> = props => {
           Continue
         </Input>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Input {...props} size="sm" variant="underline">
           Continue
         </Input>
@@ -49,7 +49,7 @@ export const InputStack: React.FC<InputStackProps> = props => {
           Continue
         </Input>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Input {...props} size="sm" variant="ghost">
           Continue
         </Input>
diff --git a/src/meter/stories/MeterBasic.component.tsx b/src/meter/stories/MeterBasic.component.tsx
index 864b3e6a..7ef2a496 100644
--- a/src/meter/stories/MeterBasic.component.tsx
+++ b/src/meter/stories/MeterBasic.component.tsx
@@ -44,7 +44,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>
diff --git a/src/meter/stories/MeterCustom.component.tsx b/src/meter/stories/MeterCustom.component.tsx
index e3ca85b9..227b8445 100644
--- a/src/meter/stories/MeterCustom.component.tsx
+++ b/src/meter/stories/MeterCustom.component.tsx
@@ -47,7 +47,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>
diff --git a/src/meter/stories/MeterHint.component.tsx b/src/meter/stories/MeterHint.component.tsx
index 8e62b938..30c5f7c3 100644
--- a/src/meter/stories/MeterHint.component.tsx
+++ b/src/meter/stories/MeterHint.component.tsx
@@ -52,7 +52,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>
diff --git a/src/meter/stories/MeterInterval.component.tsx b/src/meter/stories/MeterInterval.component.tsx
index 89377fbb..35aa72cb 100644
--- a/src/meter/stories/MeterInterval.component.tsx
+++ b/src/meter/stories/MeterInterval.component.tsx
@@ -16,7 +16,7 @@ export const MeterInterval: React.FC<MeterIntervalProps> = props => {
   const [value, setValue] = useMeterState(0, max, stepState.valueAsNumber);
 
   return (
-    <div className="space-y-4 w-80">
+    <div className="w-80 space-y-4">
       <div className="flex justify-between space-x-4">
         <Input state={intervalState} label="Interval" />
         <Input state={stepState} label="Step" />
@@ -67,7 +67,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>
@@ -81,12 +81,12 @@ const Input: React.FC<{
   const { state, label } = props;
   return (
     <label>
-      <span className="inline-block mb-1 text-sm font-medium text-gray-700">
+      <span className="mb-1 inline-block text-sm font-medium text-gray-700">
         {label}
       </span>
       <NumberInput
         id="interval"
-        className="block w-full border-gray-300 rounded-md shadow-sm form-input focus:ring-gray-300 focus:border-gray-500 sm:text-sm"
+        className="form-input block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-300 sm:text-sm"
         {...state}
       />
     </label>
diff --git a/src/meter/stories/MeterLabel.component.tsx b/src/meter/stories/MeterLabel.component.tsx
index 280a58c7..4a563fd6 100644
--- a/src/meter/stories/MeterLabel.component.tsx
+++ b/src/meter/stories/MeterLabel.component.tsx
@@ -44,7 +44,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>
diff --git a/src/progress/stories/ProgressBasic.component.tsx b/src/progress/stories/ProgressBasic.component.tsx
index b1eaf8a8..010f5406 100644
--- a/src/progress/stories/ProgressBasic.component.tsx
+++ b/src/progress/stories/ProgressBasic.component.tsx
@@ -45,10 +45,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Progress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>
diff --git a/src/progress/stories/ProgressCustom.component.tsx b/src/progress/stories/ProgressCustom.component.tsx
index a701554e..e8dc6dab 100644
--- a/src/progress/stories/ProgressCustom.component.tsx
+++ b/src/progress/stories/ProgressCustom.component.tsx
@@ -55,10 +55,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Progress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>
diff --git a/src/progress/stories/ProgressHint.component.tsx b/src/progress/stories/ProgressHint.component.tsx
index 4f3c88b1..d7cffcec 100644
--- a/src/progress/stories/ProgressHint.component.tsx
+++ b/src/progress/stories/ProgressHint.component.tsx
@@ -50,10 +50,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Progress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>
diff --git a/src/progress/stories/ProgressLabel.component.tsx b/src/progress/stories/ProgressLabel.component.tsx
index b92c6426..b216ad4d 100644
--- a/src/progress/stories/ProgressLabel.component.tsx
+++ b/src/progress/stories/ProgressLabel.component.tsx
@@ -45,10 +45,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Progress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>
diff --git a/src/radio-group/stories/RadioGroupControlled.component.tsx b/src/radio-group/stories/RadioGroupControlled.component.tsx
index 4940cea7..5a3521d9 100644
--- a/src/radio-group/stories/RadioGroupControlled.component.tsx
+++ b/src/radio-group/stories/RadioGroupControlled.component.tsx
@@ -39,14 +39,14 @@ export const RadioGroupControlled: React.FC<RadioGroupControlledProps> = () => {
   const radioState = getRadioState();
 
   return (
-    <div className="flex flex-col items-center space-y-4 w-96">
+    <div className="flex w-96 flex-col items-center space-y-4">
       <RadioComponent
         state={radioState}
         onStateChange={onRadioStateChange}
         stack="horizontal"
       />
 
-      <Separator className="w-full my-4" />
+      <Separator className="my-4 w-full" />
 
       <Checkbox
         state={checkboxState}
diff --git a/src/radio/stories/RadioControlled.component.tsx b/src/radio/stories/RadioControlled.component.tsx
index faec44aa..820a1a34 100644
--- a/src/radio/stories/RadioControlled.component.tsx
+++ b/src/radio/stories/RadioControlled.component.tsx
@@ -39,14 +39,14 @@ export const RadioControlled: React.FC<RadioControlledProps> = () => {
   const radioState = getRadioState();
 
   return (
-    <div className="flex flex-col items-center space-y-4 w-96">
+    <div className="flex w-96 flex-col items-center space-y-4">
       <RadioComponent
         state={radioState}
         onStateChange={onRadioStateChange}
         stack="horizontal"
       />
 
-      <Separator className="w-full my-4" />
+      <Separator className="my-4 w-full" />
 
       <Checkbox
         state={checkboxState}
diff --git a/src/radio/stories/RadioStack.component.tsx b/src/radio/stories/RadioStack.component.tsx
index 83852fa3..8bd26f93 100644
--- a/src/radio/stories/RadioStack.component.tsx
+++ b/src/radio/stories/RadioStack.component.tsx
@@ -9,21 +9,21 @@ export const RadioStack: React.FC<RadioStackProps> = props => {
   return (
     <div className="flex flex-col space-y-4">
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Radio small example"
       >
         <Radio size="sm" value="apple" {...props} />
         <Radio size="sm" state={"apple"} value="apple" {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Radio medium example"
       >
         <Radio size="md" value="apple" {...props} />
         <Radio size="md" state={"apple"} value="apple" {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Radio large example"
       >
         <Radio size="lg" value="apple" {...props} />
diff --git a/src/select/stories/SelectStack.component.tsx b/src/select/stories/SelectStack.component.tsx
index 745c9851..3bb7096f 100644
--- a/src/select/stories/SelectStack.component.tsx
+++ b/src/select/stories/SelectStack.component.tsx
@@ -7,7 +7,7 @@ export type SelectStackProps = SelectProps & {};
 export const SelectStack: React.FC<SelectStackProps> = props => {
   return (
     <div className="flex flex-col space-y-4">
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Select {...props} size="sm" variant="outline">
           <option value="">Select anyone</option>
           <option value="dog">Dog</option>
@@ -45,7 +45,7 @@ export const SelectStack: React.FC<SelectStackProps> = props => {
           <option value="goldfish">Goldfish</option>
         </Select>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Select {...props} size="sm" variant="subtle">
           <option value="">Select anyone</option>
           <option value="dog">Dog</option>
@@ -83,7 +83,7 @@ export const SelectStack: React.FC<SelectStackProps> = props => {
           <option value="goldfish">Goldfish</option>
         </Select>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Select {...props} size="sm" variant="underline">
           <option value="">Select anyone</option>
           <option value="dog">Dog</option>
@@ -121,7 +121,7 @@ export const SelectStack: React.FC<SelectStackProps> = props => {
           <option value="goldfish">Goldfish</option>
         </Select>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Select {...props} size="sm" variant="ghost">
           <option value="">Select anyone</option>
           <option value="dog">Dog</option>
diff --git a/src/show-more/stories/ShowMoreHorizontal.component.tsx b/src/show-more/stories/ShowMoreHorizontal.component.tsx
index 535270ad..eb1ee551 100644
--- a/src/show-more/stories/ShowMoreHorizontal.component.tsx
+++ b/src/show-more/stories/ShowMoreHorizontal.component.tsx
@@ -4,8 +4,8 @@ import { ShowMore, ShowMoreProps } from "../../index";
 
 export const ShowMoreHorizontal: React.FC<ShowMoreProps> = props => {
   return (
-    <div className="overflow-x-scroll w-96">
-      <div className="flex flex-row items-center h-10 space-x-2 w-fit">
+    <div className="w-96 overflow-x-scroll">
+      <div className="flex h-10 w-fit flex-row items-center space-x-2">
         <div>Apple</div>
         <div>Orange</div>
         <div>Watermelon</div>
diff --git a/src/show-more/stories/ShowMoreVertical.component.tsx b/src/show-more/stories/ShowMoreVertical.component.tsx
index 66f86a3c..d5a373ab 100644
--- a/src/show-more/stories/ShowMoreVertical.component.tsx
+++ b/src/show-more/stories/ShowMoreVertical.component.tsx
@@ -4,7 +4,7 @@ import { ShowMore, ShowMoreProps } from "../../index";
 
 export const ShowMoreVertical: React.FC<ShowMoreProps> = props => {
   return (
-    <div className="overflow-y-scroll h-80">
+    <div className="h-80 overflow-y-scroll">
       <div className="flex flex-col items-start space-y-2">
         <div>Apple</div>
         <div>Orange</div>
@@ -31,8 +31,8 @@ export default ShowMoreVertical;
 
 export const ShowMoreHorizontalComponent: React.FC<ShowMoreProps> = props => {
   return (
-    <div className="overflow-x-scroll w-96">
-      <div className="flex flex-row items-center h-10 space-x-2 w-fit">
+    <div className="w-96 overflow-x-scroll">
+      <div className="flex h-10 w-fit flex-row items-center space-x-2">
         <div>Apple</div>
         <div>Orange</div>
         <div>Watermelon</div>
diff --git a/src/switch/stories/SwitchControlled.component.tsx b/src/switch/stories/SwitchControlled.component.tsx
index ae737912..2e10d4c8 100644
--- a/src/switch/stories/SwitchControlled.component.tsx
+++ b/src/switch/stories/SwitchControlled.component.tsx
@@ -40,14 +40,14 @@ export const SwitchControlled: React.FC<SwitchControlledProps> = () => {
   const radioState = getRadioState();
 
   return (
-    <div className="flex flex-col items-center space-y-4 w-96">
+    <div className="flex w-96 flex-col items-center space-y-4">
       <Switch
         state={switchState}
         onStateChange={setSwitchState}
         label={capitalizeFirstLetter(radioState as string)}
       />
 
-      <Separator className="w-full my-4" />
+      <Separator className="my-4 w-full" />
 
       <RadioComponent
         state={radioState}
@@ -55,7 +55,7 @@ export const SwitchControlled: React.FC<SwitchControlledProps> = () => {
         stack="horizontal"
       />
 
-      <Separator className="w-full my-4" />
+      <Separator className="my-4 w-full" />
 
       <Checkbox
         state={switchState}
diff --git a/src/switch/stories/SwitchStack.component.tsx b/src/switch/stories/SwitchStack.component.tsx
index 097234ec..0a0787ea 100644
--- a/src/switch/stories/SwitchStack.component.tsx
+++ b/src/switch/stories/SwitchStack.component.tsx
@@ -9,28 +9,28 @@ export const SwitchStack: React.FC<SwitchStackProps> = props => {
   return (
     <div className="flex flex-col space-y-4">
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="switch small example"
       >
         <Switch size="sm" {...props} />
         <Switch size="sm" defaultState={true} {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="switch medium example"
       >
         <Switch size="md" {...props} />
         <Switch size="md" defaultState={true} {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="switch large example"
       >
         <Switch size="lg" {...props} />
         <Switch size="lg" defaultState={true} {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="switch extra large example"
       >
         <Switch size="xl" {...props} />
diff --git a/src/textarea/stories/TextareaBasic.stories.tsx b/src/textarea/stories/TextareaBasic.stories.tsx
index 4eb40874..504854ef 100644
--- a/src/textarea/stories/TextareaBasic.stories.tsx
+++ b/src/textarea/stories/TextareaBasic.stories.tsx
@@ -152,7 +152,7 @@ export const Controlled = () => {
   const [text, setText] = React.useState<string>("");
 
   return (
-    <Box className="flex flex-col space-y-2 break-words w-80">
+    <Box className="flex w-80 flex-col space-y-2 break-words">
       <Textarea
         aria-label="Textarea Story Controlled Example"
         placeholder="Controlled textarea"
@@ -175,7 +175,7 @@ export const Resizes = () => {
     <>
       <RadioGroup
         aria-label="fruits"
-        className="flex flex-col mb-2 space-y-2 w-36"
+        className="mb-2 flex w-36 flex-col space-y-2"
         state={resize}
         onStateChange={e => setResize(e as TextareaProps["resize"])}
       >
@@ -200,7 +200,7 @@ export const RowsCols = () => {
 
   return (
     <Box className="flex flex-col space-y-2">
-      <div className="flex mb-2 space-x-2">
+      <div className="mb-2 flex space-x-2">
         <label htmlFor="rows" className="flex flex-col space-y-2">
           <span>Enter Rows</span>
           <Input
diff --git a/src/textarea/stories/TextareaStack.component.tsx b/src/textarea/stories/TextareaStack.component.tsx
index d154fd24..c5ff649c 100644
--- a/src/textarea/stories/TextareaStack.component.tsx
+++ b/src/textarea/stories/TextareaStack.component.tsx
@@ -7,7 +7,7 @@ export type TextareaStackProps = TextareaProps & {};
 export const TextareaStack: React.FC<TextareaStackProps> = props => {
   return (
     <div className="flex flex-col space-y-4">
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Textarea {...props} size="sm" variant="outline">
           Continue
         </Textarea>
@@ -21,7 +21,7 @@ export const TextareaStack: React.FC<TextareaStackProps> = props => {
           Continue
         </Textarea>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Textarea {...props} size="sm" variant="subtle">
           Continue
         </Textarea>
@@ -35,7 +35,7 @@ export const TextareaStack: React.FC<TextareaStackProps> = props => {
           Continue
         </Textarea>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Textarea {...props} size="sm" variant="underline">
           Continue
         </Textarea>
diff --git a/src/toast/stories/CustomToast.tsx b/src/toast/stories/CustomToast.tsx
index d86bcde8..facd1c62 100644
--- a/src/toast/stories/CustomToast.tsx
+++ b/src/toast/stories/CustomToast.tsx
@@ -19,7 +19,7 @@ const CustomToast: React.FC<CustomToastProps> = ({
   showAlertContent,
 }) => {
   return (
-    <div className="flex w-full px-3 py-2 text-white bg-gray-800 rounded-md shadow-lg">
+    <div className="flex w-full rounded-md bg-gray-800 px-3 py-2 text-white shadow-lg">
       <div
         className={tcm(
           "flex w-full justify-between transition-opacity",
@@ -29,7 +29,7 @@ const CustomToast: React.FC<CustomToastProps> = ({
         <div className="flex flex-col flex-wrap text-sm">
           <div className="font-medium">{title}</div>
         </div>
-        <div className="inline-flex box-content shrink-0 mr-2 w-4 h-4 py-0.5">
+        <div className="mr-2 box-content inline-flex h-4 w-4 shrink-0 py-0.5">
           <InfoCircleIcon />
         </div>
       </div>
diff --git a/src/toast/stories/Toast.stories.tsx b/src/toast/stories/Toast.stories.tsx
index 029840b4..fc98e9eb 100644
--- a/src/toast/stories/Toast.stories.tsx
+++ b/src/toast/stories/Toast.stories.tsx
@@ -69,7 +69,7 @@ const TriggerDefaultToasts = () => {
   const { showToast, removeToast } = useToastHandlers();
 
   return (
-    <div className="flex flex-col space-y-2 justify-items-center">
+    <div className="flex flex-col justify-items-center space-y-2">
       <div className="space-x-2">
         <Button
           className="my-2"
@@ -126,7 +126,7 @@ const TriggerOptionsToasts = () => {
   const { removeToast } = useToastHandlers();
 
   return (
-    <div className="flex flex-col space-y-2 justify-items-center">
+    <div className="flex flex-col justify-items-center space-y-2">
       <div className="space-x-2">
         <Button
           className="my-2"
@@ -211,7 +211,7 @@ const TriggerTypesToasts = () => {
   const types = ["success", "info", "warning", "error"] as const;
 
   return (
-    <div className="flex flex-col space-y-2 justify-items-center">
+    <div className="flex flex-col justify-items-center space-y-2">
       <div className="space-x-2">
         {types.map(type => {
           return (
@@ -255,7 +255,7 @@ const TriggerAlertOptionsToasts = () => {
   const { removeToast } = useToastHandlers();
 
   return (
-    <div className="flex flex-col space-y-2 justify-items-center">
+    <div className="flex flex-col justify-items-center space-y-2">
       <div className="space-x-2">
         <Button
           className="my-2"
@@ -370,7 +370,7 @@ const TriggerPlacementToasts = () => {
   ] as const;
 
   return (
-    <div className="flex flex-col space-y-2 justify-items-center">
+    <div className="flex flex-col justify-items-center space-y-2">
       <div className="space-x-2">
         {placements.map(placement => {
           return (
diff --git a/yarn.lock b/yarn.lock
index af98eb42..ab8b8e19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16151,6 +16151,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.4.tgz#b09e826a57a0f69b0662eededd659b3d5a5551e7"
+  integrity sha512-kt3YFWqxcG9+bilBI0hPF7RjQZNtgBRvjJZGw6B2MNAjPqlfcYIiZnNaIEnq4XimKLTzZYxz6jQnUXmSQ/5njg==
+
 prettier@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"