@sikka/hawa 0.0.256 → 0.0.258

package/lib/stories/ManualStories/BlocksIntroduction.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/Customization.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/ElementsIntroduction.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/Installation.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/LayoutIntroduction.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/Overview.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/lib/stories/ManualStories/Usage.stories.d.ts

@@ -0,0 +1 @@
+import "../stories-styles.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.256",
+  "version": "0.0.258",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -35,7 +35,6 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-react": "^7.12.10",
-    "@mdx-js/react": "^2.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@storybook/addon-actions": "^6.5.8",
@@ -88,6 +87,7 @@
     "react-dom": "^18.2.0"
   },
   "resolutions": {
+    "@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2",
     "@storybook/react/webpack": "^5",
     "@storybook/core-common/webpack": "^5",
     "@storybook/core-server/webpack": "^5",
@@ -99,7 +99,7 @@
     "react": "^18.2.0",
     "react-dropzone": "^12.0.4",
     "react-hook-form": "^7.28.0",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.10.1",
     "react-select": "^5.3.2",
     "slate": "^0.94.1",
     "slate-react": "^0.97.1"

package/src/blocks/Account/UserProfileForm.tsx

@@ -32,7 +32,7 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
                 type="text"
                 label={props.texts.fullNameLabel}
                 placeholder={props.texts.fullNamePlaceholder}
-                helperText={errors.fullName?.message}
+                helpertext={errors.fullName?.message}
                 {...field}
                 value={field.value ?? ""}
               />
@@ -51,7 +51,7 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
                 width="full"
                 type="text"
                 label={props.texts.emailLabel}
-                helperText={errors.email?.message}
+                helpertext={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
                 {...field}
                 value={field.value ?? ""}
@@ -75,7 +75,7 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
                 type="password"
                 label={props.texts.passwordLabel}
                 placeholder={props.texts.passwordPlaceholder}
-                helperText={errors.password?.message}
+                helpertext={errors.password?.message}
                 {...field}
                 value={field.value ?? ""}
               />
@@ -93,7 +93,7 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
                 type="password"
                 label={props.texts.confirmPasswordLabel}
                 placeholder={props.texts.confirmPasswordPlaceholder}
-                helperText={errors.confirmPassword?.message}
+                helpertext={errors.confirmPassword?.message}
                 {...field}
                 value={field.value ?? ""}
               />

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -54,9 +54,10 @@ export const NewPasswordForm: FC<NewPasswordTypes> = (props) => {
                 <HawaTextField
                   width="full"
                   type="password"
+                  autoComplete="new-password"
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
-                  helperText={errors.password?.message}
+                  helpertext={errors.password?.message}
                   {...field}
                   value={field.value ?? ""}
                 />
@@ -72,9 +73,10 @@ export const NewPasswordForm: FC<NewPasswordTypes> = (props) => {
                 <HawaTextField
                   width="full"
                   type="password"
+                  autoComplete="new-password"
                   label={props.texts.confirmPasswordLabel}
                   placeholder={props.texts.confirmPasswordPlaceholder}
-                  helperText={errors.confirmPassword?.message}
+                  helpertext={errors.confirmPassword?.message}
                   {...field}
                   value={field.value ?? ""}
                 />

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -39,7 +39,7 @@ export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
                 width="full"
                 type="text"
                 label={props.texts.emailLabel}
-                helperText={errors.email?.message}
+                helpertext={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
                 {...field}
                 value={field.value ?? ""}

package/src/blocks/AuthForms/SignInForm.tsx

@@ -34,8 +34,9 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
               <HawaTextField
                 width="full"
                 type="text"
+                autoComplete="email"
                 label={props.texts.emailLabel}
-                helperText={errors.email?.message}
+                helpertext={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
                 value={field.value ?? ""}
                 onChange={field.onChange}
@@ -59,8 +60,9 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
                 <HawaTextField
                   width="full"
                   type="text"
+                  autoComplete="username"
                   label={props.texts.usernameLabel}
-                  helperText={errors.username?.message}
+                  helpertext={errors.username?.message}
                   placeholder={props.texts.usernamePlaceholder}
                   onChange={field.onChange}
                   value={field.value ?? ""}
@@ -87,10 +89,11 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
               render={({ field }) => (
                 <HawaTextField
                   width="full"
+                  autoComplete="current-password"
                   type="password"
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
-                  helperText={errors.password?.message}
+                  helpertext={errors.password?.message}
                   onChange={field.onChange}
                   value={field.value ?? ""}
                 />

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -84,10 +84,11 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
         <FormProvider {...methods}>
           <form onSubmit={handleSubmit((e) => props.handleSignUp(e))}>
             <div>
-              {props.signUpFields.map((fld) => {
+              {props.signUpFields.map((fld, i) => {
                 if (fld === "fullname") {
                   return (
                     <Controller
+                      key={i}
                       control={control}
                       name="fullName"
                       render={({ field }) => (
@@ -96,7 +97,7 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
                           type="text"
                           label={props.texts.fullNameLabel}
                           placeholder={props.texts.fullNamePlaceholder}
-                          helperText={errors.fullName?.message}
+                          helpertext={errors.fullName?.message}
                           onChange={field.onChange}
                           value={field.value ?? ""}
                         />
@@ -116,8 +117,9 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
                         <HawaTextField
                           width="full"
                           type="text"
+                          autoComplete="email"
                           label={props.texts.emailLabel}
-                          helperText={errors.email?.message}
+                          helpertext={errors.email?.message}
                           placeholder={props.texts.emailPlaceholder}
                           onChange={field.onChange}
                           value={field.value ?? ""}
@@ -143,8 +145,9 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
                         <HawaTextField
                           width="full"
                           type="text"
+                          autoComplete="username"
                           label={props.texts.usernameLabel}
-                          helperText={errors.username?.message}
+                          helpertext={errors.username?.message}
                           placeholder={props.texts.usernamePlaceholder}
                           onChange={field.onChange}
                           value={field.value ?? ""}
@@ -165,10 +168,11 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
                 <HawaTextField
                   width="full"
                   type="password"
+                  autoComplete="new-password"
                   // defaultValue={field.value ?? ""}
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
-                  helperText={errors.password?.message}
+                  helpertext={errors.password?.message}
                   onChange={field.onChange}
                   value={field.value ?? ""}
                 />
@@ -182,10 +186,11 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
                 <HawaTextField
                   width="full"
                   type="password"
+                  autoComplete="new-password"
                   // defaultValue={field.value ?? ""}
                   label={props.texts.confirmPasswordLabel}
                   placeholder={props.texts.confirmPasswordPlaceholder}
-                  helperText={errors.confirm_password?.message}
+                  helpertext={errors.confirm_password?.message}
                   onChange={field.onChange}
                   value={field.value ?? ""}
                 />
@@ -203,7 +208,7 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
                     defaultValue={field.value ?? ""}
                     label={props.texts.refCode}
                     placeholder={props.texts.passwordPlaceholder}
-                    helperText={errors.password?.message}
+                    helpertext={errors.password?.message}
                     value={field.value ?? ""}
                     onChange={field.onChange}
                   />

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -57,7 +57,7 @@ export const ChargeWalletForm: FC<ChargeWalletTypes> = (props) => {
                   field.onChange(parseFloat(e.target.value))
                   setWalletAmount(e.target.value)
                 }}
-                helperText={errors.amount?.message}
+                helpertext={errors.amount?.message}
               />
             )}
             rules={{

package/src/blocks/Payment/CheckoutForm.tsx

@@ -94,7 +94,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                   <HawaTextField
                     type="text"
                     label={props.texts?.firstNameLabel + " *"}
-                    helperText={errors.firstName?.message}
+                    helpertext={errors.firstName?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
@@ -111,7 +111,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                     width="full"
                     type="text"
                     label={props.texts?.lastNameLabel + " *"}
-                    helperText={errors.lastName?.message}
+                    helpertext={errors.lastName?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
@@ -126,7 +126,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                   width="full"
                   type="text"
                   label={props.texts?.emailLabel + " *"}
-                  helperText={errors.email?.message}
+                  helpertext={errors.email?.message}
                   {...field}
                   value={field.value ?? ""}
                 />
@@ -150,7 +150,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                     width="full"
                     type="text"
                     label={props.texts?.streetAddressLabel + " *"}
-                    helperText={errors.streetAddress?.message}
+                    helpertext={errors.streetAddress?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
@@ -168,7 +168,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                     width="full"
                     type="text"
                     label={props.texts?.stateLabel + " *"}
-                    helperText={errors.province?.message}
+                    helpertext={errors.province?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
@@ -185,7 +185,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                     width="full"
                     type="text"
                     label={props.texts?.cityLabel + " *"}
-                    helperText={errors.city?.message}
+                    helpertext={errors.city?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
@@ -202,7 +202,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                     width="full"
                     type="text"
                     label={props.texts?.buildingNumberLabel + " *"}
-                    helperText={errors.buildingNumber?.message}
+                    helpertext={errors.buildingNumber?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
@@ -218,7 +218,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                     width="full"
                     type="number"
                     label={props.texts?.zipCodeLabel + " *"}
-                    helperText={errors.zipCode?.message}
+                    helpertext={errors.zipCode?.message}
                     {...field}
                     value={field.value ?? ""}
                   />

package/src/blocks/Payment/CreditCardForm.tsx

@@ -20,23 +20,46 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
     <HawaContainer>
       {" "}
       <form onSubmit={handleSubmit(props.handle)}>
-        <Controller
-          control={control}
-          name="cardName"
-          render={({ field }) => (
-            <HawaTextField
-              width="full"
-              name="password"
-              placeholder="Enter password"
-              type="tel"
-              label="Card Number"
-              helperText={errors.password?.message}
+        <div className="flex flex-row gap-4">
+          <Controller
+            control={control}
+            name="cardName"
+            render={({ field }) => (
+              <HawaTextField
+                width="full"
+                name="password"
+                placeholder="Enter password"
+                type="tel"
+                label="Card Number"
+                helpertext={errors.password?.message}
+              />
+            )}
+            rules={{
+              required: "Password is rquired",
+            }}
+          />
+          <div className="w-1/4">
+            <Controller
+              control={control}
+              name="cardName"
+              render={({ field }) => (
+                <HawaTextField
+                  width="full"
+                  name="password"
+                  maxLength="3"
+                  autoComplete="cc-number"
+                  placeholder=""
+                  type="password"
+                  label="CCV"
+                  helpertext={errors.password?.message}
+                />
+              )}
+              rules={{
+                required: "Password is rquired",
+              }}
             />
-          )}
-          rules={{
-            required: "Password is rquired",
-          }}
-        />
+          </div>
+        </div>
         <Controller
           control={control}
           name="cardName"
@@ -45,9 +68,9 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
               width="full"
               name="password"
               placeholder="Enter password"
-              type="password"
+              type="text"
               label="Name On Card"
-              helperText={errors.password?.message}
+              helpertext={errors.password?.message}
             />
           )}
           rules={{
@@ -64,30 +87,14 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
               placeholder="Enter password"
               type="password"
               label="Expiry Date"
-              helperText={errors.password?.message}
-            />
-          )}
-          rules={{
-            required: "Password is rquired",
-          }}
-        />
-        <Controller
-          control={control}
-          name="cardName"
-          render={({ field }) => (
-            <HawaTextField
-              width="full"
-              name="password"
-              placeholder="Enter password"
-              type="password"
-              label="CCV"
-              helperText={errors.password?.message}
+              helpertext={errors.password?.message}
             />
           )}
           rules={{
             required: "Password is rquired",
           }}
         />
+
         <HawaButton
           // type="submit"
           width="full"

package/src/elements/HawaAlert.tsx

@@ -54,7 +54,12 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
       }
     }
   }, [duration])
-
+  let closeButtonStyle = {
+    info: "hover:bg-blue-300",
+    warning: "hover:bg-yellow-300",
+    error: "hover:bg-red-300",
+    success: "hover:bg-green-300",
+  }
   let styleVariant = {
     normal: {
       info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
@@ -131,7 +136,10 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         )}
         <button
           type="button"
-          className="absolute right-4 top-4  inline-flex  h-8 w-8 translate-y-1 rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          className={clsx(
+            "absolute right-2 top-2 inline-flex h-9  w-9 items-center justify-center rounded p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+            closeButtonStyle[props.severity]
+          )}
           data-dismiss-target="#alert-default"
           aria-label="Close"
           onClick={() => {

package/src/elements/HawaColorPicker.tsx

@@ -28,6 +28,10 @@ export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
 
       <input
         type="text"
+        onChange={(e) => {
+          setSelectedColor(e.target.value)
+          props.handleChange(e)
+        }}
         value={selectedColor}
         className="w-24  rounded-br-lg rounded-tr-lg pl-2 pr-2"
       />

package/src/elements/HawaStats.tsx

@@ -13,7 +13,8 @@ type StatTypes = {
   handleClick?: () => void
 }
 export const HawaStats: FC<StatTypes> = (props) => {
-  let defaultStyle = "flex flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
+  let defaultStyle =
+    "flex transition-all flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",
     contained: "bg-layoutPrimary-500",
@@ -26,13 +27,18 @@ export const HawaStats: FC<StatTypes> = (props) => {
     min: "w-fit",
     normal: "w-full max-w-[200px]",
   }
+
   return (
     <div
       onClick={props.handleClick}
       className={clsx(
         defaultStyle,
         widthStyles[props.width],
-        statStyles[props.variant]
+        statStyles[props.variant],
+        props.handleClick ? "cursor-pointer" : "cursor-default",
+        props.handleClick && props.variant === "dropshadow"
+          ? "hover:drop-shadow-lg"
+          : ""
       )}
       style={{
         backgroundColor: props.color
@@ -47,8 +53,10 @@ export const HawaStats: FC<StatTypes> = (props) => {
         <HawaSpinner />
       ) : (
         <div className="text-2xl font-bold">{props.number}</div>
-      )}{" "}
-      {props.helperText && <div className="text-xs">{props.helperText}</div>}{" "}
+      )}
+      {props.helperText ? (
+        <div className="text-xs">{props.helperText}</div>
+      ) : null}
     </div>
   )
 }

package/src/elements/HawaTextField.tsx

@@ -12,7 +12,7 @@ type TextFieldTypes = {
   /** Disable/Enable multiple line text input field   */
   multiline?: boolean
   /** The small red text under the input field to show validation or a hint.   */
-  helperText?: any
+  helpertext?: any
   /** The value of the input field */
   value?: any
   props?: PropsWithRef<"input">
@@ -29,6 +29,8 @@ type TextFieldTypes = {
   icon?: any
   /** Boolean to enable/disable editing the input field and using it as a text field   */
   preview?: boolean
+  autoComplete?: any
+  maxLength?: any
 }
 
 export const HawaTextField: FC<TextFieldTypes> = ({
@@ -132,11 +134,11 @@ export const HawaTextField: FC<TextFieldTypes> = ({
             </div>
           )}
 
-          {props.helperText && (
+          {props.helpertext ? (
             <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
-              {props.helperText}
+              {props.helpertext}
             </p>
-          )}
+          ) : null}
         </>
       )}
     </div>

package/src/styles.css

@@ -570,6 +570,9 @@ video {
 .collapse {
   visibility: collapse;
 }
+.static {
+  position: static;
+}
 .fixed {
   position: fixed;
 }
@@ -1033,6 +1036,9 @@ video {
 .w-8 {
   width: 2rem;
 }
+.w-9 {
+  width: 2.25rem;
+}
 .w-\[32px\] {
   width: 32px;
 }
@@ -1121,10 +1127,6 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.translate-y-1 {
-  --tw-translate-y: 0.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .translate-y-1\/2 {
   --tw-translate-y: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1268,6 +1270,11 @@ video {
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -1796,6 +1803,9 @@ video {
 .pl-3 {
   padding-left: 0.75rem;
 }
+.pl-6 {
+  padding-left: 1.5rem;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2237,6 +2247,11 @@ body {
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -2279,6 +2294,11 @@ body {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-layoutPrimary-300:hover {
   background-color: var(--layout-primary-300);
 }
@@ -2291,6 +2311,16 @@ body {
   background-color: var(--layout-primary-700);
 }
 
+.hover\:bg-red-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-yellow-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+}
+
 .hover\:font-bold:hover {
   font-weight: 700;
 }
@@ -2353,6 +2383,11 @@ body {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.hover\:drop-shadow-lg:hover {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -2683,6 +2718,11 @@ body {
 
 @media (min-width: 640px) {
 
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
   .sm\:after\:inline-block::after {
     content: var(--tw-content);
     display: inline-block;