@veracity/vui 2.31.0 → 2.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.31.0",
+  "version": "2.33.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -54,4 +54,4 @@
     "dist",
     "src"
   ]
-}
+}

package/src/button/button.tsx

@@ -54,6 +54,21 @@ export const ButtonBase = styled.buttonBox<ButtonProps>`
     color: #91ffba;
     border-color-left: #91ffba;
   }
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark:focus,
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark:focus-visible,
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight:focus,
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight:focus-visible {
+    box-shadow: none;
+    outline: none;
+    border-bottom: 0 solid transparent;
+  }
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark.focusAsBorder:focus,
+  &.vui-button-variant-menuDark.vui-button-variant-menuDark.focusAsBorder:focus-visible,
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight.focusAsBorder:focus,
+  &.vui-button-variant-menuLight.vui-button-variant-menuLight.focusAsBorder:focus-visible {
+    transition: border-bottom 0s linear;
+    border-bottom: 3px solid #d3eef8;
+  }
 `
 
 const useButtonStyles = (mergedProps: any, variant: any) => {

package/src/calendar/calendar.styles.ts

@@ -53,11 +53,11 @@ export const CalendarItem = styled(Link)<ItemProps>`
   ${p => p.isHidden && isHidden}
   ${p => p.isToday && isToday}
   ${p => p.isDisabled && isDisabled}
-    ${p => p.isSelected && isSelected}
-    ${p => p.boundary && boundary}
-    ${p => p.current && current}
+  ${p => p.isSelected && isSelected}
+  ${p => p.boundary && boundary}
+  ${p => p.current && current}
 
-    &:hover {
+  &:hover {
     color: inherit;
     text-decoration: none;
 
@@ -70,7 +70,7 @@ export const CalendarItemsContainer = styled(Box)`
   column-gap: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(4, 62px);
+  grid-template-rows: repeat(4, 48px);
   justify-items: center;
   row-gap: 0;
 `

package/src/calendar/components/calendarHeader.tsx

@@ -32,7 +32,7 @@ export const CalendarHeader: FC<Props> = ({
     <Box className="vui-calendar-header-left">
       <TimeUnitHeader onSetTimeUnitMode={onSetTimeUnitMode} timeUnitMode={timeUnitMode} viewMonth={viewMonth} />
     </Box>
-    <Box className="vui-calendar-header-right" flex="1" justify="flex-end">
+    <Box className="vui-calendar-header-right" flex="1" justifyContent="right">
       <IconButton
         aria-label="previous"
         className="icon"

package/src/calendar/components/dayPicker.tsx

@@ -20,11 +20,15 @@ const DayItem = styled(CalendarItem)<ItemProps>`
   color: ${th.color('seaBlue.main')};
   display: inline-flex;
   align-items: center;
+
+  & > .vui-t {
+    margin-bottom: -3px;
+  }
 `
 
 const DaysContainer = styled(CalendarItemsContainer)`
-  grid-template-columns:     repeat(7, 1fr);
-  grid- template-rows: auto;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: auto;
 `
 
 export const DayPicker = ({ calendar, onSelectDay }: DayPickerProps) => (

package/src/calendar/components/monthPicker.tsx

@@ -16,6 +16,8 @@ export const MonthPicker = ({ calendar, onSelectMonth }: MonthPickerProps) => (
         key={item.date.getTime()}
         onClick={(!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined}
         {...item}
+        alignContent="center"
+        textAlign="center"
       >
         {monthsShort[item.date.getUTCMonth()]}
       </MonthItem>

package/src/calendar/components/timeUnitHeader.tsx

@@ -21,24 +21,52 @@ type TimeUnitHeaderProps = {
  */
 export const TimeUnitHeader: FC<TimeUnitHeaderProps> = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
   return (
-    <Box center className={cs('vui-time-unit-header')} cursor="pointer" flex="1" justify="start">
+    <Box center className={cs('vui-time-unit-header')} cursor="pointer" flex="1" justifyItems="flex-start" gap="2px">
       {isDay(timeUnitMode) && (
         <>
-          <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('month')} variant="tertiaryDark">
+          <Button
+            fontSize={fontSize}
+            h={h}
+            onClick={() => onSetTimeUnitMode('month')}
+            variant="tertiaryDark"
+            px="6px"
+            minW="auto"
+          >
             {months[viewMonth.getUTCMonth()]}
           </Button>
-          <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('year')} variant="tertiaryDark">
+          <Button
+            fontSize={fontSize}
+            h={h}
+            onClick={() => onSetTimeUnitMode('year')}
+            variant="tertiaryDark"
+            px="6px"
+            minW="auto"
+          >
             {viewMonth.getUTCFullYear()}
           </Button>
         </>
       )}
       {isMonth(timeUnitMode) && (
-        <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('year')} variant="tertiaryDark">
+        <Button
+          fontSize={fontSize}
+          h={h}
+          onClick={() => onSetTimeUnitMode('year')}
+          variant="tertiaryDark"
+          px="6px"
+          minW="auto"
+        >
           {viewMonth.getUTCFullYear()}
         </Button>
       )}
       {isYear(timeUnitMode) && (
-        <Button fontSize={fontSize} h={h} onClick={() => onSetTimeUnitMode('day')} variant="tertiaryDark">
+        <Button
+          fontSize={fontSize}
+          h={h}
+          onClick={() => onSetTimeUnitMode('day')}
+          variant="tertiaryDark"
+          px="6px"
+          minW="auto"
+        >
           Year
         </Button>
       )}

package/src/calendar/components/yearPicker.tsx

@@ -14,6 +14,8 @@ export const YearPicker = ({ calendar, onSelectYear }: YearPickerProps) => (
         key={item.date.getTime()}
         onClick={(!item.isDisabled && onSelectYear?.(item.date)) || undefined}
         {...item}
+        alignContent="center"
+        textAlign="center"
       >
         {item.date.getUTCFullYear()}
       </YearItem>

package/src/calendar/hooks/useCalendar.ts

@@ -18,7 +18,7 @@ export const useCalendar = ({
   mode = 'exact',
   timeUnitMode,
   viewDate,
-  fixedNumberOfWeeks,
+  // fixedNumberOfWeeks,
 }: MonthProps) => {
   const boundariesProcessed = useBoundaries({ boundaries })
   const selectedProcessed = useSelectedDate({ selectedDates, mode })
@@ -37,7 +37,7 @@ export const useCalendar = ({
 
     if (isDay(timeUnitMode)) {
       firstDay = generateDateByUTCValue(viewDateYear, viewDateMonth, 1)
-      lastDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 0) // lastDay
+      lastDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 0)
 
       nextFirstDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 1)
       prevLastDay = generateDateByUTCValue(viewDateYear, viewDateMonth, 0)
@@ -46,29 +46,27 @@ export const useCalendar = ({
       const weekdayLast = lastDay.getUTCDay()
 
       // Monday preceding the month (or first day of the month if it's on a Monday)
-      calendarFirstDay =
-        weekdayFirst === 0
-          ? new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - 7))
-          : new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - weekdayFirst))
+      calendarFirstDay = new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - weekdayFirst))
+      if (weekdayFirst === 0) calendarFirstDay = new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - 7))
 
       // Sunday after the month (or last day of the month if it's on a Sunday)
-      calendarLastDay =
-        weekdayLast === 0
-          ? new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 0))
-          : new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 8 - weekdayLast))
+      calendarLastDay = new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 8 - weekdayLast))
+      if (weekdayLast === 0) calendarLastDay = new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 1))
+      else if (weekdayLast === 1) calendarLastDay = new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 0))
 
       // If calendar must contain constant number of weeks (6 weeks)
       // Missing weeks will be added to the end of the month
-      const numberOfWeeks = Math.round((+calendarLastDay - +calendarFirstDay) / (7 * 24 * 60 * 60 * 1000))
-      if (fixedNumberOfWeeks) {
-        for (let week = numberOfWeeks; week < 6; week++) {
-          calendarLastDay = generateDateByUTCValue(
-            calendarLastDay.getUTCFullYear(),
-            calendarLastDay.getUTCMonth(),
-            calendarLastDay.getUTCDate() + 7,
-          )
-        }
-      }
+      // const numberOfWeeks = Math.round((+calendarLastDay - +calendarFirstDay) / (7 * 24 * 60 * 60 * 1000))
+
+      // if (fixedNumberOfWeeks) {
+      //   for (let week = numberOfWeeks; week < 6; week++) {
+      //     calendarLastDay = generateDateByUTCValue(
+      //       calendarLastDay.getUTCFullYear(),
+      //       calendarLastDay.getUTCMonth(),
+      //       calendarLastDay.getUTCDate() + 7,
+      //     )
+      //   }
+      // }
     } else if (isMonth(timeUnitMode)) {
       calendarFirstDay = firstDay = generateDateByUTCValue(viewDateYear, 0, 1)
       calendarLastDay = lastDay = generateDateByUTCValue(viewDateYear, 11, 31)
@@ -90,7 +88,6 @@ export const useCalendar = ({
     }
 
     const items: TimeItem[] = []
-
     // Loops between first and last date
     let dateItem = calendarFirstDay
     do {

package/src/datePicker/datePicker.tsx

@@ -135,14 +135,14 @@ export const DatePicker = vui<'span', DatePickerProps>((props, ref) => {
               boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}
               fixedNumberOfWeeks
               fontWeight={500}
-              minH={310}
+              minH={200}
               mode="exact"
               onSelectDates={range => selectDate(range)}
               selectedDates={{ startDate: selectedDate, endDate: undefined }}
               w="100%"
             />
           </Box>
-          <Box overflow="unset" pt={0.5}>
+          <Box overflow="unset">
             <Box alignItems="center" flex={1} ml="auto" pb={2} px={2}>
               {isClearButtonVisible && (
                 <LineButton flex={1} onClick={onClear} size="md">

package/src/footer/footer.tsx

@@ -94,7 +94,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                 {applicationLinks?.map((link, index) => (
                   <Box flex={{ xs: '0 0 100%', sm: '0 0 auto' }} key={index}>
                     {link.items && (
-                      <Menu isLazy={false} offset={[-16, 9]} placement="top-start" size="lg" {...rest}>
+                      <Menu isLazy={false} offset={[-16, 9]} placement="top-start" size="sm" {...rest}>
                         <Menu.Button
                           as={Link}
                           className="vui-footerLink-trigger"
@@ -157,7 +157,13 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
                       aria-label={link.text}
                       fontWeight="demi"
                       href={link.url}
-                      iconLeft={<Link.Icon name={`brandCircle${link.text}`} radius="50%" size="xs" />}
+                      iconLeft={
+                        <Link.Icon
+                          name={`${link.text === 'Twitter' ? 'brandX' + link.text + 'Solid' : 'brandCircle' + link.text}`}
+                          radius="50%"
+                          size="xs"
+                        />
+                      }
                       isExternal
                       key={index}
                       mr={1}

package/src/header/loggedInHeader.tsx

@@ -58,7 +58,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
             <RenderOnScreen minWidth="sm">
               <Header.Divider mr={2} />
             </RenderOnScreen>
-            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl || '/'} />
+            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl} />
           </>
         )}
         {!isApplication && <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>}

package/src/header/loggedOutHeader.tsx

@@ -44,7 +44,7 @@ export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) =>
             <RenderOnScreen minWidth="sm">
               <Header.Divider mr={2} />
             </RenderOnScreen>
-            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl || '/'} />
+            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl} />
           </>
         )}
 

package/src/icons/baseIcons/brand/brandXTwitter.ts

@@ -0,0 +1,6 @@
+import type { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M24.0495 4H28.3451L18.9631 14.5889L30 29H21.3603L14.5884 20.262L6.8492 29H2.54759L12.5806 17.6719L2 4H10.8588L16.9735 11.9868L24.0495 4ZM22.5406 26.4639H24.9196L9.5628 6.40385H7.00739L22.5406 26.4639Z'],
+  name: 'brandXTwitter'
+} as IconDefinition

package/src/icons/baseIcons/brand/brandXTwitterSolid.ts

@@ -0,0 +1,6 @@
+import type { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M4.57143 0C2.05 0 0 2.05 0 4.57143V27.4286C0 29.95 2.05 32 4.57143 32H27.4286C29.95 32 32 29.95 32 27.4286V4.57143C32 2.05 29.95 0 27.4286 0H4.57143ZM25.7929 6L18.3786 14.4714L27.1 26H20.2714L14.9286 19.0071L8.80714 26H5.41429L13.3429 16.9357L4.97857 6H11.9786L16.8143 12.3929L22.4 6H25.7929ZM23.0929 23.9714L10.9571 7.92143H8.93571L21.2071 23.9714H23.0929Z'],
+  name: 'brandXTwitterSolid'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -1,7 +1,7 @@
 // This file is auto-generated. Do not edit manually.
 // Run the icon transformation script to update.
 
-// BRAND icons (31)
+// BRAND icons (33)
 export { default as brandApplePay } from './brand/brandApplePay'
 export { default as brandBellship } from './brand/brandBellship'
 export { default as brandCcAmazonPay } from './brand/brandCcAmazonPay'
@@ -13,7 +13,6 @@ export { default as brandCcPaypal } from './brand/brandCcPaypal'
 export { default as brandCcVisa } from './brand/brandCcVisa'
 export { default as brandCircleFB } from './brand/brandCircleFB'
 export { default as brandCircleLinkedIn } from './brand/brandCircleLinkedIn'
-export { default as brandCircleTwitter } from './brand/brandCircleTwitter'
 export { default as brandCircleYoutube } from './brand/brandCircleYoutube'
 export { default as brandDNV } from './brand/brandDNV'
 export { default as brandDhl } from './brand/brandDhl'
@@ -29,9 +28,10 @@ export { default as brandMedium } from './brand/brandMedium'
 export { default as brandOsi } from './brand/brandOsi'
 export { default as brandPowerBi } from './brand/brandPowerBi'
 export { default as brandSlack } from './brand/brandSlack'
-export { default as brandTwitter } from './brand/brandTwitter'
 export { default as brandUps } from './brand/brandUps'
 export { default as brandVeracity } from './brand/brandVeracity'
+export { default as brandXTwitter } from './brand/brandXTwitter'
+export { default as brandXTwitterSolid } from './brand/brandXTwitterSolid'
 export { default as brandYoutube } from './brand/brandYoutube'
 // CONC icons (63)
 export { default as conAPI } from './conc/conAPI'
@@ -97,7 +97,7 @@ export { default as conUploadFile2 } from './conc/conUploadFile2'
 export { default as conVeracityAdapter } from './conc/conVeracityAdapter'
 export { default as conVesselConnect } from './conc/conVesselConnect'
 export { default as conWindmill } from './conc/conWindmill'
-// UI icons (373)
+// UI icons (374)
 export { default as uiAddressBook } from './ui/uiAddressBook'
 export { default as uiAddressCard } from './ui/uiAddressCard'
 export { default as uiAlignCenter } from './ui/uiAlignCenter'
@@ -390,6 +390,7 @@ export { default as uiShieldAlt } from './ui/uiShieldAlt'
 export { default as uiShieldCheck } from './ui/uiShieldCheck'
 export { default as uiShieldHalf } from './ui/uiShieldHalf'
 export { default as uiShieldKeyhole } from './ui/uiShieldKeyhole'
+export { default as uiShieldSolid } from './ui/uiShieldSolid'
 export { default as uiShip } from './ui/uiShip'
 export { default as uiShips } from './ui/uiShips'
 export { default as uiShoppingBasket } from './ui/uiShoppingBasket'

package/src/icons/baseIcons/types.ts

@@ -1,7 +1,7 @@
 // This file is auto-generated. Do not edit manually.
 // Run the icon transformation script to update.
 
-// BRAND icons (31)
+// BRAND icons (33)
 export type BrandIcons =
   | 'brandApplePay'
   | 'brandBellship'
@@ -14,7 +14,6 @@ export type BrandIcons =
   | 'brandCcVisa'
   | 'brandCircleFB'
   | 'brandCircleLinkedIn'
-  | 'brandCircleTwitter'
   | 'brandCircleYoutube'
   | 'brandDNV'
   | 'brandDhl'
@@ -30,9 +29,10 @@ export type BrandIcons =
   | 'brandOsi'
   | 'brandPowerBi'
   | 'brandSlack'
-  | 'brandTwitter'
   | 'brandUps'
   | 'brandVeracity'
+  | 'brandXTwitter'
+  | 'brandXTwitterSolid'
   | 'brandYoutube'
 // CONC icons (63)
 export type ConcIcons =
@@ -99,7 +99,7 @@ export type ConcIcons =
   | 'conVeracityAdapter'
   | 'conVesselConnect'
   | 'conWindmill'
-// UI icons (373)
+// UI icons (374)
 export type UiIcons =
   | 'uiAddressBook'
   | 'uiAddressCard'
@@ -282,9 +282,9 @@ export type UiIcons =
   | 'uiFilePlus'
   | 'uiFilePowerpoint'
   | 'uiFileSignature'
+  | 'uiFileSolid'
   | 'uiFileSpreadsheet'
   | 'uiFileStandard'
-  | 'uiFileSolid'
   | 'uiFileVideo'
   | 'uiFileWord'
   | 'uiFilter'
@@ -393,6 +393,7 @@ export type UiIcons =
   | 'uiShieldCheck'
   | 'uiShieldHalf'
   | 'uiShieldKeyhole'
+  | 'uiShieldSolid'
   | 'uiShip'
   | 'uiShips'
   | 'uiShoppingBasket'

package/src/icons/baseIcons/ui/uiShield.ts

@@ -1,7 +1,7 @@
 import type { IconDefinition } from '../../types'
 
 export default {
-  details: [32, 32, [], '', 'M29.125 5.25C29.7083 5.45833 30.1667 5.8125 30.5 6.3125C30.8333 6.8125 31 7.375 31 8C31 10.625 30.6875 13.1458 30.0625 15.5625C29.4375 17.9375 28.6458 20 27.6875 21.75C26.7292 23.4583 25.6042 25.0208 24.3125 26.4375C23.0625 27.8125 21.8333 28.9167 20.625 29.75C19.4583 30.625 18.2917 31.2917 17.125 31.75C16.375 32.0833 15.625 32.0833 14.875 31.75C13.125 31.0417 11.4375 29.9792 9.8125 28.5625C8.22917 27.1875 6.77083 25.5208 5.4375 23.5625C4.10417 21.5625 3.02083 19.2083 2.1875 16.5C1.39583 13.7917 1 10.9583 1 8C1 7.75 1.02083 7.52083 1.0625 7.3125C1.14583 7.0625 1.22917 6.83333 1.3125 6.625C1.4375 6.41667 1.5625 6.22917 1.6875 6.0625C1.85417 5.89583 2.02083 5.75 2.1875 5.625C2.39583 5.45833 2.625 5.33333 2.875 5.25L14.875 0.25C15.2083 0.0833333 15.5833 0 16 0C16.4167 0 16.7917 0.0833333 17.125 0.25L29.125 5.25Z'],
+  details: [512, 512, [], '', 'M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM262.2 478.8c-3.9 1.6-8.3 1.6-12.3 0C152 440 48 304 48 128c0-6.5 3.9-12.3 9.8-14.8l192-80c3.8-1.6 8.3-1.7 12.3 0l192 80c6 2.5 9.8 8.3 9.8 14.8.1 176-103.9 312-201.7 350.8z'],
   name: 'uiShield',
   oldName: 'fasShield'
 } as IconDefinition

package/src/icons/baseIcons/ui/uiShieldSolid.ts

@@ -0,0 +1,7 @@
+import type { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M29.125 5.25C29.7083 5.45833 30.1667 5.8125 30.5 6.3125C30.8333 6.8125 31 7.375 31 8C31 10.625 30.6875 13.1458 30.0625 15.5625C29.4375 17.9375 28.6458 20 27.6875 21.75C26.7292 23.4583 25.6042 25.0208 24.3125 26.4375C23.0625 27.8125 21.8333 28.9167 20.625 29.75C19.4583 30.625 18.2917 31.2917 17.125 31.75C16.375 32.0833 15.625 32.0833 14.875 31.75C13.125 31.0417 11.4375 29.9792 9.8125 28.5625C8.22917 27.1875 6.77083 25.5208 5.4375 23.5625C4.10417 21.5625 3.02083 19.2083 2.1875 16.5C1.39583 13.7917 1 10.9583 1 8C1 7.75 1.02083 7.52083 1.0625 7.3125C1.14583 7.0625 1.22917 6.83333 1.3125 6.625C1.4375 6.41667 1.5625 6.22917 1.6875 6.0625C1.85417 5.89583 2.02083 5.75 2.1875 5.625C2.39583 5.45833 2.625 5.33333 2.875 5.25L14.875 0.25C15.2083 0.0833333 15.5833 0 16 0C16.4167 0 16.7917 0.0833333 17.125 0.25L29.125 5.25Z'],
+  name: 'uiShieldSolid',
+  oldName: 'fasShield'
+} as IconDefinition

package/src/input/consts.ts

@@ -14,9 +14,9 @@ export const inputColors = {
 } as const
 
 export const stateIcons = {
-  error: 'falExclamationTriangle',
-  loading: 'fadSpinnerThird',
-  success: 'falCheck',
+  error: 'uiExclamationTriangle',
+  loading: 'uiSpinnerThird',
+  success: 'uiCheck',
 } as const
 
 export const inputStateMapping: InputStateMapping = {
@@ -24,7 +24,7 @@ export const inputStateMapping: InputStateMapping = {
     variant: 'red',
     iconProps: {
       color: inputColors.error,
-      icon: stateIcons.error,
+      name: stateIcons.error,
     },
   },
   loading: {
@@ -39,7 +39,7 @@ export const inputStateMapping: InputStateMapping = {
     variant: 'green',
     iconProps: {
       color: inputColors.success,
-      icon: stateIcons.success,
+      name: stateIcons.success,
     },
   },
 }

package/src/input/input.tsx

@@ -43,6 +43,12 @@ export const InputBase = styled.divBox`
     cursor: not-allowed;
     background-color: sandstone.79;
     border-color: sandstone.79;
+    & > .vui-icon {
+      color: sandstone.50;
+    }
+    & > .vui-icon > path {
+      fill: sandstone.50;
+    }
   }
 `
 

package/src/input/inputIcon.tsx

@@ -2,7 +2,6 @@ import { useStyleConfig, vui } from '../core'
 import type { IconProps } from '../icon'
 import Icon from '../icon'
 import { cs } from '../utils'
-import { inputColors } from './consts'
 import { useInputContext } from './context'
 
 /** Displays an icon within the Input. */
@@ -12,9 +11,7 @@ export const InputIcon = vui<'svg', IconProps>((props, ref) => {
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
-  const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder
-
-  return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />
+  return <Icon className={cs('vui-inputIcon', className)} ref={ref} {...styles.icon} {...rest} />
 })
 
 InputIcon.displayName = 'InputIcon'

package/src/range/range.tsx

@@ -67,7 +67,7 @@ export const Range = vui<'div', RangeProps>((props, ref) => {
     return showValue ? (
       content
     ) : (
-      <Tooltip disabled={disabled} text={formatter(state.valueNow)} visible={showTooltip}>
+      <Tooltip key={state.index} disabled={disabled} text={formatter(state.valueNow)} visible={showTooltip}>
         {content}
       </Tooltip>
     )

package/src/select/useSelect.tsx

@@ -36,7 +36,7 @@ export default function useSelect(props: UseSelectProps) {
     if (option.text && option.value) dynamicOptions.push(option)
   })
 
-  /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
+  /** Sends a change event to the external consumer, but internal keeps the actual value as primitive or array. */
   const onChange = useCallbackRef((e: ChangeEvent) => {
     onChangeProp?.(e)
 

package/src/sidemenuV2/SidemenuItemContent.tsx

@@ -0,0 +1,75 @@
+import { memo } from 'react'
+
+import Badge from '../badge'
+import type { BadgeProps } from '../badge/badge.types'
+import Box from '../box'
+import type { IconProp } from '../icon'
+import Icon from '../icon'
+import T from '../t'
+
+export interface SidemenuItemContentProps {
+  icon?: IconProp
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  title?: string
+  isMenuExpanded?: boolean
+  isInPopover?: boolean
+  badge?: Pick<BadgeProps, 'text' | 'variant'>
+  badgeLinkUrl?: string
+}
+
+const SidemenuItemContent = memo<SidemenuItemContentProps>(
+  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {
+    const iconBaseMarginLeft = 13 / 8
+    const iconMarginRight = isMenuExpanded ? 10 / 8 : 20 / 8
+
+    if (isInPopover)
+      return (
+        <>
+          <T isTruncated size="sm" display="inline-block" fontWeight="500" ml={iconBaseMarginLeft}>
+            {title}
+          </T>
+          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
+            <Badge
+              {...badge}
+              data-link={btoa(badgeLinkUrl ?? '#')}
+              variant={badge.variant ?? 'subtleGreen'}
+              size="sm"
+              minW="32px"
+              fontSize="12px"
+              lineHeight="16px"
+              ml="10px"
+              mr="10px"
+            />
+          )}
+        </>
+      )
+
+    return (
+      <>
+        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w="20px" transition="margin 0.2s ease-in-out">
+          {icon && <Icon name={icon} size={iconSize} />}
+        </Box>
+        <T isTruncated size="sm" display="inline-block">
+          {title}
+        </T>
+        {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
+          <Badge
+            {...badge}
+            data-link={btoa(badgeLinkUrl ?? '#')}
+            variant={badge.variant ?? 'subtleGreen'}
+            size="sm"
+            minW="32px"
+            fontSize="12px"
+            lineHeight="16px"
+            ml="10px"
+            mr="10px"
+          />
+        )}
+      </>
+    )
+  },
+)
+
+SidemenuItemContent.displayName = 'SidemenuItemContent'
+
+export default SidemenuItemContent