@loja-integrada/admin-components 0.19.10 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.19.10",
+  "version": "0.20.0",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "repository": {

package/src/Components/Button/Button.tsx

@@ -97,7 +97,7 @@ const ButtonComponent = (
     ;(!disabled || !loading) && onClick && onClick(event)
   }
 
-  let classes = `inline-flex leading-none font-semibold tracking-tight items-center justify-center px-5 text-center no-underline cursor-pointer transition rounded-md after:align-middle focus:outline-none `
+  let classes = `inline-flex font-medium items-center justify-center px-5 text-center no-underline cursor-pointer transition rounded-md after:align-middle focus:outline-none `
 
   if (loading) {
     classes +=

package/src/Components/HelpLink/index.tsx

@@ -17,7 +17,7 @@ export const HelpLink: React.FC<HelpLinkProps> = React.memo(
       <>
         <Icon icon="questionCircle" size={4} className="shrink-0" block />
         <span
-          className={`text-f6 font-semibold tracking-4 leading-6 ml-2
+          className={`text-f6 font-semibold ml-2
             ${!mobileText ? 'hidden md:inline' : ''}
           `}
         >

package/src/Components/Table/Table.tsx

@@ -211,7 +211,7 @@ const TableComponent = ({
             <tr>
               <td colSpan={columnsLength || 1} className={`${TdClasses}`}>
                 <TdWrapper>
-                  <div className="text-center py-16 text-xl font-semibold text-on-base-2">
+                  <div className="text-center py-16 text-xl font-medium text-on-base-2">
                     {emptyText}
                   </div>
                 </TdWrapper>

package/src/Components/TableList/TableList.tsx

@@ -45,7 +45,7 @@ const TableListComponent = ({
   }, [items])
 
   return (
-    <div className={`table-list tracking-tight ${className}`}>
+    <div className={`table-list ${className}`}>
       {isLoading ? (
         <div className="table-list-loading">
           <TableListItemLoading />
@@ -60,11 +60,11 @@ const TableListComponent = ({
               {empty.illustration}
             </div>
           )}
-          <div className="table-list-empty-title text-center text-f4 font-semibold text-primary-bold leading-7">
+          <div className="table-list-empty-title text-center text-f4 font-medium text-primary-bold">
             {empty.title}
           </div>
           {empty.subTitle && (
-            <div className="table-list-empty-subtitle text-center text-f6 text-on-base-2 leading-6 -mt-1">
+            <div className="table-list-empty-subtitle text-center text-f6 text-on-base-2 -mt-1">
               {empty.subTitle}
             </div>
           )}
@@ -89,7 +89,7 @@ const TableListComponent = ({
                   }`}
                 >
                   <span
-                    className={`text-f5 text-on-base-2 leading-4 break-words inline-block pt-6 pb-2`}
+                    className={`text-f5 text-on-base-2 break-words inline-block pt-6 pb-2`}
                   >
                     {group.title}
                   </span>

package/src/Components/TableList/TableListItemWrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { TableListItemWrapperProp } from './TableListItem.interface'
 
-const ItemWrapperClasses = `flex relative py-6 text-f7 leading-4 break-words no-underline`
+const ItemWrapperClasses = `flex relative py-6 text-f7 break-words no-underline`
 const ItemWrapperClassesContainerHover = `before:hover:block before:hover:absolute before:hover:h-full before:hover:w-5 lg:before:hover:w-8 before:hover:top-0 before:hover:-left-5 lg:before:hover:-left-8 before:hover:bg-base-2 after:hover:block after:hover:absolute after:hover:h-full after:hover:w-5 lg:after:hover:w-8 after:hover:top-0 after:hover:-right-5 lg:after:hover:-right-8 after:hover:bg-base-2`
 
 const DefaultWrapper = (props: any) => {

package/src/Components/Tabs/TabsItem.tsx

@@ -39,7 +39,7 @@ export const TabsItem = ({
       disabled={disabled}
     >
       <span
-        className={`block tracking-4 text-f6 text-sm py-4 border-b-4 break-words ${
+        className={`block text-f6 py-4 border-b-4 break-words ${
           disabled ? '' : 'group-hover:font-semibold'
         } ${activeStyles(active)} ${boldFixStyle}`}
         data-title={title}

package/src/Components/Timeline/TimelineItem.tsx

@@ -19,7 +19,7 @@ export const TimelineItem = ({ item }: TimelineItemProps) => {
       </div>
       <div className="ml-7 pt-px">
         <div
-          className={`timeline-title group py-1 text-f6 leading-6 tracking-4 text-inverted-1 font-semibold break-words ${
+          className={`timeline-title group py-1 text-f6 text-inverted-1 font-semibold break-words ${
             showToggle ? 'cursor-pointer' : ''
           }`}
           onClick={() => showToggle && setIsOpen((isOpen) => !isOpen)}
@@ -41,14 +41,14 @@ export const TimelineItem = ({ item }: TimelineItemProps) => {
           <span className="inline break-words">{item.title}</span>
         </div>
         {item.timestamp && (
-          <div className="timeline-timestamp mb-1 inline-flex items-center text-xs tracking-4 text-inverted-2 break-words">
+          <div className="timeline-timestamp mb-1 inline-flex items-center text-xs text-inverted-2 break-words">
             <Icon icon="clock" size={3} className="mr-1" />
             {item.timestamp}
           </div>
         )}
         {item.description && (
           <div
-            className={`timeline-description mt-1 overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height ${
+            className={`timeline-description mt-1 overflow-hidden text-sm text-inverted-1 break-words transition-max-height ${
               isOpen ? 'max-h-96' : 'max-h-0'
             }`}
           >

package/src/Forms/Checkbox/Checkbox.tsx

@@ -58,10 +58,10 @@ const CheckboxComponent = (
         : 'bg-base-1'
     }
     ${isCenterBoxAlign ? 'items-center' : ''}
-    rounded w-4 h-4 flex justify-center m-px
+    rounded-xs w-4 h-4 flex justify-center m-px
   `
 
-  const checkboxLabelClasses = `ml-1 input-label text-f6 tracking-4 leading-6 ${
+  const checkboxLabelClasses = `ml-1 input-label text-f6 ${
     hasErrorState ? 'text-danger' : disabled ? 'text-inverted-2' : ''
   }`
 
@@ -87,7 +87,7 @@ const CheckboxComponent = (
         htmlFor={inputId}
         className={`inline-flex ${alignOptions[boxAlign]} cursor-pointer`}
       >
-        <span className="relative rounded z-10 flex items-center justify-center focus-within:ring-2 ring-focus">
+        <span className="relative rounded-xs z-10 flex items-center justify-center focus-within:ring-2 ring-focus">
           <input
             ref={ref || inputRef}
             type="checkbox"

package/src/Forms/Dropdown/Dropdown.tsx

@@ -175,7 +175,7 @@ const formatGroupLabel = (
 const CustomGroupHeading = (props: any) => (
   <GroupHeading
     {...props}
-    className="p-2 pt-0 pb-3 text-inverted-1 uppercase font-bold text-xs"
+    className="p-2 pt-0 pb-3 text-inverted-1 uppercase font-semibold text-xs"
   />
 )
 
@@ -189,7 +189,7 @@ const CustomPlaceholder = (
 ) => (
   <Placeholder
     {...props}
-    className={`tracking-4 w-full pr-2 truncate ${valueFontSizesClasses[fontSize]}`}
+    className={`w-full pr-2 truncate ${valueFontSizesClasses[fontSize]}`}
   />
 )
 
@@ -200,7 +200,7 @@ const CustomSingleValue = (
 ) => (
   <SingleValue
     {...props}
-    className={`tracking-4 truncate ${variantValueClasses[variant]} ${valueFontSizesClasses[fontSize]}`}
+    className={`truncate ${variantValueClasses[variant]} ${valueFontSizesClasses[fontSize]}`}
   />
 )
 

package/src/Forms/Input/Input.tsx

@@ -59,7 +59,7 @@ const InputComponent = (
     inputContainerClass += ` ${defaultBorderClasses}`
   }
 
-  const inputClass = `w-full tracking-4 px-4 appearance-none shadow-none outline-none bg-transparent box-border ${focusClass} ${
+  const inputClass = `w-full px-4 appearance-none shadow-none outline-none bg-transparent box-border ${focusClass} ${
     hasErrorState ? errorBorderClasses : defaultBorderClasses
   } ${prefix && prefixBorder ? 'border-l' : ''}  ${
     sufix && sufixBorder ? 'border-r' : ''

package/src/Forms/InputHelpText/InputHelpText.tsx

@@ -5,7 +5,7 @@ export const InputHelpText = React.memo(
     if (!helpText) return null
     return (
       <div
-        className={`input-help-text text-xs tracking-4 leading-4 ${
+        className={`input-help-text text-xs ${
           hasError ? 'text-danger' : 'text-on-base-2'
         } ${className}`}
       >

package/src/Forms/InputLabel/InputLabel.tsx

@@ -12,7 +12,7 @@ export const InputLabel = React.memo(
     if (!label) return null
     return (
       <label
-        className={`input-label text-f6 tracking-4 leading-6 font-semibold inline-flex items-center mb-0.5 ${
+        className={`input-label text-f6 font-medium inline-flex items-center mb-0.5 ${
           hasError ? 'text-danger' : 'text-on-base'
         } ${className}`}
         htmlFor={htmlFor}

package/src/Forms/Toggle/Toggle.tsx

@@ -51,7 +51,7 @@ const ToggleComponent = (
 
   const toggleCircleClasses = `transform  ${toggleClasses.circle[toggleCheckText][toggleStatusText]} absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition`
 
-  const toggleLabelClasses = `ml-2 text-inverted-1 text-f6 tracking-4 label`
+  const toggleLabelClasses = `ml-2 text-inverted-1 text-f6 label`
 
   return (
     <label

package/src/Forms/ToggleButton/ToggleButton.tsx

@@ -58,7 +58,7 @@ const ToggleButtonComponent = (
 
   return (
     <div
-      className={`${className} inline-flex justify-center items-center h-12 ${toggleClasses}} rounded text-f6 tracking-4 font-semibold`}
+      className={`${className} inline-flex justify-center items-center h-12 ${toggleClasses}} rounded text-f6 font-semibold`}
     >
       <ul className="list-none inline-flex justify-center items-center h-12">
         {toggleItems}

package/src/Forms/commonStyles.ts

@@ -11,11 +11,11 @@ export const defaultBorderClasses = 'border-card-stroke'
 
 export const focusClass = 'focus:border-inverted-1'
 
-export const inputClasses = `appearance-none shadow-none outline-none bg-base-1 border px-4 rounded text-on-base text-sm tracking-4 min-w-0 w-full transition-border duration-75 ${focusClass} ${inputPlaceholderClasses}`
+export const inputClasses = `appearance-none shadow-none outline-none bg-base-1 border px-4 rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 ${focusClass} ${inputPlaceholderClasses}`
 
-export const inputContainerClasses = `flex focus-within:border-inverted-1 bg-base-1 border rounded text-on-base text-sm tracking-4 min-w-0 w-full transition-border duration-75 overflow-hidden ${inputPlaceholderClasses}`
+export const inputContainerClasses = `flex focus-within:border-inverted-1 bg-base-1 border rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 overflow-hidden ${inputPlaceholderClasses}`
 
-const adornmentClasses = `adornment flex justify-center items-center relative w-16 text-f6 text-inverted-2 tracking-4 -mt-px`
+const adornmentClasses = `adornment flex justify-center items-center relative w-16 text-f6 text-inverted-2 -mt-px`
 
 export const prefixClasses = `${adornmentClasses} rounded-l left-0`
 

package/src/Indicators/Alert/Alert.tsx

@@ -95,7 +95,7 @@ const AlertComponent = ({
         </div>
       )}
       <div className="flex-grow flex flex-col sm:flex-row items-start sm:items-center justify-between min-w-0">
-        <div className="flex flex-col justify-center min-w-0 break-words text-f6 tracking-4 leading-6 text-on-base">
+        <div className="flex flex-col justify-center min-w-0 break-words text-f6 text-on-base">
           <span className="alert-title font-semibold">{title}</span>
           {subtitle && <span className="alert-subtitle mt-1">{subtitle}</span>}
         </div>

package/src/Indicators/Badge/Badge.tsx

@@ -44,7 +44,7 @@ const BadgeComponent = ({
         expanded ? 'flex w-full' : 'inline-flex'
       }`}
     >
-      <span className="badgeText tracking-4 font-semibold">{text}</span>
+      <span className="badgeText font-semibold">{text}</span>
     </div>
   )
 }

package/src/Indicators/InformationBox/InformationBox.tsx

@@ -74,7 +74,7 @@ const InformationBoxComponent = ({
       </div>
 
       <div className="flex-grow flex flex-col sm:flex-row items-start justify-between min-w-0">
-        <div className="flex flex-col justify-center min-w-0 break-words tracking-4 leading-6 text-on-base">
+        <div className="flex flex-col justify-center min-w-0 break-words leading-6 text-on-base">
           <span
             className={`InformationBox-title text-f5 font-semibold ${InformationBoxTypes[type].titleClass}`}
           >

package/src/Indicators/Tag/Tag.tsx

@@ -19,7 +19,7 @@ const TagComponent = ({
     <div
       className={`tag ${
         fullWidth ? 'flex' : 'inline-flex'
-      } items-center justify-between border rounded px-4 py-2 tracking-4 leading-6 text-f6 text-primary-bold ${
+      } items-center justify-between border rounded px-4 py-2 text-f6 text-primary-bold ${
         TagTypes[type]
       } ${className}`}
     >

package/src/Indicators/Tooltip/style.scss

@@ -1,5 +1,5 @@
 .tippy-box {
-  @apply relative bg-inverted-1 text-base-1 rounded text-f7 tracking-4 leading-4 outline-0 transition-all;
+  @apply relative bg-inverted-1 text-base-1 rounded text-f7 outline-0 transition-all;
 
   &[data-animation='fade'][data-state='hidden'] {
     @apply opacity-0;

package/src/Layout/Box/Components/Header/BoxHeader.tsx

@@ -30,14 +30,12 @@ export const BoxHeader = React.memo(
             >
               <div className="flex-1 min-w-0 mr-2">
                 {title && (
-                  <h3
-                    className={`tracking-3 text-base font-semibold break-words`}
-                  >
+                  <h3 className="text-f5 font-medium break-words lg:text-f4">
                     {title}
                   </h3>
                 )}
                 {subtitle && (
-                  <h4 className="tracking-4 text-sm text-on-base-2 leading-6 break-words">
+                  <h4 className="text-f7 text-on-base-2 break-words lg:text-f6">
                     {subtitle}
                   </h4>
                 )}

package/src/Layout/ListActions/ListActions.tsx

@@ -21,7 +21,7 @@ const Tag = ({ type, text }: ListActionsTagProps) => {
 
   return (
     <span
-      className={`top-3 left-3 px-0.5 py-px rounded-sm text-f8 font-semibold leading-3 text-base-1 ${commonClasses}`}
+      className={`top-3 left-3 px-0.5 py-px rounded-sm text-f8 font-semibold text-base-1 ${commonClasses}`}
     >
       <Badge
         size="xsmall"
@@ -60,7 +60,7 @@ const ListActionButton = ({
         <Icon icon={icon} size={5} className="p-px" />
         {tagType || tagText ? <Tag type={tagType} text={tagText} /> : null}
       </span>
-      <p className="lg:w-24 text-f8 lg:text-f7 font-semibold tracking-4 text-center select-none leading-tight">
+      <p className="lg:w-24 text-f8 lg:text-f7 font-semibold text-center select-none">
         {text}
       </p>
     </button>

package/src/Layout/Sidebar/Item.tsx

@@ -3,7 +3,7 @@ import { Icon, IconProps } from '../../Icons/Icon'
 import { safeCSSId } from '../../utils'
 import { SidebarSubItemProps } from './ItemSub'
 
-const sidebarItemBtnClasses = `flex items-center relative px-6 py-3.5 lg:py-2.5 text-sm tracking-4 font-semibold duration-200 group-hover:text-on-base`
+const sidebarItemBtnClasses = `flex items-center relative px-6 py-3.5 lg:py-2.5 text-sm font-semibold duration-200 group-hover:text-on-base`
 const sidebarItemBtnActiveClasses = (active: boolean | undefined) =>
   active ? `text-on-base` : `text-on-base-2`
 const sidebarItemBtnIconClasses = `w-4 h-6 flex-shrink-0`

package/src/Layout/Sidebar/ItemSub.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { safeCSSId } from '../../utils'
 
-const sidebarItemDropdownItemClasses = `flex items-center pl-14 pr-0 py-1.5 lg:py-1 text-on-base-2 text-f6 tracking-4 leading-6 duration-200 hover:text-on-base`
+const sidebarItemDropdownItemClasses = `flex items-center pl-14 pr-0 py-1.5 lg:py-1 text-on-base-2 text-f6 duration-200 hover:text-on-base`
 const sidebarItemDropdownItemActiveClasses = (active: boolean | undefined) =>
   active ? `text-on-base font-semibold active` : `text-on-base-2`
 

package/src/Navigation/Breadcrumb/index.tsx

@@ -62,7 +62,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
         <div
           className={`header-navigation-breadcrumb max-w-full truncate w-full`}
         >
-          <div className="w-full inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3">
+          <div className="w-full inline-flex self-center items-center font-semibold text-f5 sm:text-f4 lg:text-f3">
             {(previousTitle || previousHref || Link) && (
               <span className="header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px truncate">
                 {renderPrevLink()}
@@ -72,7 +72,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
               </span>
             )}
             <span
-              className={`header-navigation-current text-on-base truncate leading-relaxed ${
+              className={`header-navigation-current text-on-base truncate ${
                 mobileAlign === 'center'
                   ? 'w-full lg:w-auto text-center lg:text-left'
                   : ''

package/src/Navigation/Pagination/PaginationInfo.tsx

@@ -19,7 +19,7 @@ const PaginationInfoComponent = ({
 
   return (
     <div className="pagination-info hidden sm:flex">
-      <div className="flex items-center mr-5 text-inverted-2 tracking-4 text-f6">
+      <div className="flex items-center mr-5 text-inverted-2 text-f6">
         {itemsLengthOptions ? (
           <Select
             id="selectItemsPerPage"

package/src/Navigation/Pagination/PaginationNav.tsx

@@ -46,7 +46,7 @@ const PaginationNavComponent = ({
 
   return (
     <div className="pagination-nav flex items-center justify-between w-full sm:w-auto">
-      <div className="text-inverted-2 text-f6 tracking-4">
+      <div className="text-inverted-2 text-f6">
         <span
           id="btnPaginationActualPage"
           className="pagination-nav-current inline-block w-9 bg-base-1 border border-card-stroke/50 rounded font-semibold leading-8 text-center text-primary"

package/src/Navigation/Stepper/index.tsx

@@ -35,7 +35,7 @@ export const Stepper: React.FC<StepperProps> = React.memo(
               >
                 <span
                   onClick={() => item.handleClick?.()}
-                  className={`font-bold ${
+                  className={`font-semibold ${
                     item.handleClick ? 'cursor-pointer' : ''
                   }`}
                 >
@@ -47,7 +47,7 @@ export const Stepper: React.FC<StepperProps> = React.memo(
                   onClick={() => item.handleClick?.()}
                   className={`text-center my-auto text-sm ${showText ? '' : ''}
                   ${item.step < 2 ? 'cursor-pointer' : ''}
-                  ${currentStep === item.step ? 'font-bold' : ''}`}
+                  ${currentStep === item.step ? 'font-semibold' : ''}`}
                 >
                   {item.text}
                 </span>