@widergy/energy-ui 3.171.0 → 3.171.2

package/dist/esm/components/UTSelect/versions/V1/components/InputComponent/index.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import { arrayOf, bool, func, instanceOf, object, oneOfType, shape, string } from 'prop-types';
+import { arrayOf, bool, func, instanceOf, object, oneOf, oneOfType, shape, string } from 'prop-types';
 import UTBaseInputField from '../../../../../UTBaseInputField';
+import { VARIANTS } from '../../constants';
 const InputComponent = _ref => {
   let {
     alwaysShowPlaceholder,
@@ -37,12 +38,21 @@ const InputComponent = _ref => {
     },
     ...restParams
   } = params;
+  const isPicker = variant === VARIANTS.picker;
   const modifiedParams = {
     ...restParams,
     InputProps: restInputProps,
-    inputProps: restInputPropsFromField
+    inputProps: {
+      ...restInputPropsFromField,
+      ...(isPicker && {
+        readOnly: true,
+        style: {
+          cursor: 'default'
+        }
+      })
+    }
   };
-  const fieldVariant = variant === 'picker' ? 'transparent' : 'white';
+  const fieldVariant = isPicker ? 'transparent' : 'white';
   return /*#__PURE__*/React.createElement(UTBaseInputField, {
     alwaysShowPlaceholder: alwaysShowPlaceholder,
     dataTestId: dataTestId,
@@ -93,6 +103,6 @@ InputComponent.propTypes = {
     props: object
   })),
   value: string,
-  variant: string
+  variant: oneOf(Object.values(VARIANTS))
 };
 export default InputComponent;

package/dist/esm/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -5,6 +5,7 @@ import { arrayOf, bool, elementType, func, oneOfType, shape, string, number } fr
 import isFinite from 'lodash/isFinite';
 import UTLabel from '../../../../../UTLabel';
 import UTCheckList from '../../../../../UTCheckList';
+import { SPACING } from '../../../../../UTCheckList/versions/V1/constants';
 import styles from './styles.module.scss';
 import { DEFAULT_MAX_HEIGHT } from './constants';
 const ListboxComponent = _ref => {
@@ -13,13 +14,13 @@ const ListboxComponent = _ref => {
     dataTestId,
     filteredOptions,
     handleSelectionChange,
-    horizontalSpacing,
+    horizontalSpacing = SPACING.SMALL,
     itemDataTestId,
     maxHeight = DEFAULT_MAX_HEIGHT,
     multiple,
     noMatchesText,
     value,
-    verticalSpacing
+    verticalSpacing = SPACING.SMALL
   } = _ref;
   const hasNoOptions = useMemo(() => isEmpty(filteredOptions), [filteredOptions]);
   const maxHeightValid = useMemo(() => isFinite(maxHeight) ? maxHeight : DEFAULT_MAX_HEIGHT, [maxHeight]);
@@ -38,7 +39,7 @@ const ListboxComponent = _ref => {
     itemDataTestId: itemDataTestId,
     onChange: handleSelectionChange,
     options: filteredOptions,
-    reversed: false,
+    reversed: true,
     showSelectAll: false,
     value: multiple ? value : [value],
     variant: "button",

package/dist/esm/components/UTSelect/versions/V1/constants.js

@@ -0,0 +1,4 @@
+export const VARIANTS = {
+  picker: 'picker',
+  select: 'select'
+};

package/dist/esm/components/UTSelect/versions/V1/index.js

@@ -1,18 +1,19 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import clone from 'lodash/clone';
 import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
-import { arrayOf, bool, elementType, func, number, object, oneOfType, shape, string } from 'prop-types';
 import { Autocomplete } from '@material-ui/lab';
+import Popper from '@material-ui/core/Popper';
 import UTFieldLabel from '../../../UTFieldLabel';
 import UTLabel from '../../../UTLabel';
 import UTPaper from '../../../UTPaper';
 import UTValidation from '../../../UTValidation';
 import { formatErrorToValidation } from '../../../UTValidation/utils';
 import { TITLE_VARIANTS } from '../../../../constants/inputs';
-import { buttonTypes } from '../../../../types/buttonTypes';
 import InputComponent from './components/InputComponent';
 import ListboxComponent from './components/ListboxComponent';
+import { utselectTypes } from './types';
 import styles from './styles.module.scss';
+import { VARIANTS } from './constants';
 import { getLeftAdornments, getRightAdornments, shouldReset, getDisplayValue, sortOptions } from './utils';
 const UTSelect = _ref => {
   let {
@@ -35,6 +36,7 @@ const UTSelect = _ref => {
     itemDataTestId,
     listDataTestId,
     listProps = {},
+    menuWidth,
     multiple = false,
     noMatchesText = 'No hay coincidencias con tu búsqueda',
     noOptionsText = 'No hay opciones disponibles',
@@ -49,7 +51,7 @@ const UTSelect = _ref => {
     title,
     titleVariant = TITLE_VARIANTS.large,
     value = multiple ? [] : null,
-    variant = 'select',
+    variant = VARIANTS.select,
     withAutoReset = true
   } = _ref;
   const optionsSortedByCategory = useMemo(() => {
@@ -94,7 +96,8 @@ const UTSelect = _ref => {
     if (isPopperOpen) setSortedOptions(sortOptions(optionsSortedByCategory, value, multiple));
   }, [isPopperOpen]);
   const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
-  const filteredOptions = useMemo(() => disableFilterOptions ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions]);
+  const isPicker = variant === VARIANTS.picker;
+  const filteredOptions = useMemo(() => disableFilterOptions || isPicker ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions, isPicker]);
   const handleSearchChange = useCallback(searchValue => {
     onChangeSearchTerm === null || onChangeSearchTerm === void 0 || onChangeSearchTerm(searchValue);
     setSearchTerm(searchValue);
@@ -146,24 +149,6 @@ const UTSelect = _ref => {
     suffix,
     variant
   }), [suffix, showClearButton, clearable, disabled, action, handleClearSelection, variant]);
-  const InputComponentToRender = useMemo(() => params => /*#__PURE__*/React.createElement(InputComponent, {
-    alwaysShowPlaceholder: alwaysShowPlaceholder,
-    dataTestId: dataTestId,
-    disabled: disabled,
-    error: error,
-    inputSize: inputSize,
-    inputRef: inputRef,
-    leftAdornments: leftAdornments,
-    onBlur: handleInputBlur,
-    onChange: handleSearchChange,
-    onFocus: handleInputFocus,
-    params: params,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    rightAdornments: rightAdornments,
-    value: searchTerm,
-    variant: variant
-  }), [alwaysShowPlaceholder, disabled, error, handleInputBlur, handleInputFocus, leftAdornments, placeholder, rightAdornments, searchTerm]);
   const listBoxProps = useMemo(() => ({
     CustomRow,
     dataTestId: listDataTestId,
@@ -175,6 +160,19 @@ const UTSelect = _ref => {
     value,
     ...listProps
   }), [CustomRow, filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
+  const menuWidthRef = useRef(menuWidth);
+  menuWidthRef.current = menuWidth;
+  const CustomPopper = useCallback(props => {
+    const width = menuWidthRef.current;
+    return /*#__PURE__*/React.createElement(Popper, _extends({}, props, width ? {
+      placement: 'bottom-start'
+    } : {}, {
+      style: width ? {
+        ...props.style,
+        width
+      } : props.style
+    }));
+  }, []);
   const noOptionsTextComponent = /*#__PURE__*/React.createElement(UTLabel, {
     className: styles.noOptionsLabel,
     colorTheme: "gray"
@@ -185,11 +183,12 @@ const UTSelect = _ref => {
     actions: titleActions,
     required: required,
     size: titleVariant
-  }, title), /*#__PURE__*/React.createElement(Autocomplete, _extends({}, freeWidth ? {
+  }, title), /*#__PURE__*/React.createElement(Autocomplete, _extends({}, freeWidth && !menuWidth ? {
     classes: {
       popper: styles.popper
     }
   } : {}, {
+    PopperComponent: CustomPopper,
     disabled: disabled || readOnly,
     getOptionLabel: option => "".concat(option.name),
     ListboxComponent: ListboxComponent,
@@ -201,7 +200,24 @@ const UTSelect = _ref => {
     open: isPopperOpen,
     options: optionsSortedByCategory,
     PaperComponent: UTPaper,
-    renderInput: InputComponentToRender
+    renderInput: params => /*#__PURE__*/React.createElement(InputComponent, {
+      alwaysShowPlaceholder: alwaysShowPlaceholder,
+      dataTestId: dataTestId,
+      disabled: disabled,
+      error: error,
+      inputRef: inputRef,
+      inputSize: inputSize,
+      leftAdornments: leftAdornments,
+      onBlur: handleInputBlur,
+      onChange: handleSearchChange,
+      onFocus: handleInputFocus,
+      params: params,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      rightAdornments: rightAdornments,
+      value: searchTerm,
+      variant: variant
+    })
   }, autocompleteProps)), helpText && /*#__PURE__*/React.createElement(UTLabel, {
     colorTheme: "gray",
     variant: "small"
@@ -210,48 +226,5 @@ const UTSelect = _ref => {
     validationData: validationData
   }));
 };
-UTSelect.propTypes = {
-  action: shape({
-    Icon: string,
-    onClick: func,
-    size: string
-  }),
-  actions: arrayOf(buttonTypes),
-  alwaysShowPlaceholder: bool,
-  autocompleteProps: object,
-  className: string,
-  clearable: bool,
-  CustomRow: elementType,
-  dataTestId: string,
-  disabled: bool,
-  disableFilterOptions: bool,
-  error: string,
-  errorDataTestId: string,
-  freeWidth: bool,
-  helpText: string,
-  icon: string,
-  inputSize: string,
-  itemDataTestId: string,
-  listDataTestId: string,
-  listProps: object,
-  multiple: bool,
-  noMatchesText: string,
-  noOptionsText: string,
-  onChange: func,
-  onChangeSearchTerm: func,
-  options: arrayOf(shape({
-    name: string,
-    value: oneOfType([string, number])
-  })),
-  placeholder: string,
-  prefix: string,
-  readOnly: bool,
-  required: bool,
-  suffix: string,
-  title: string,
-  titleVariant: string,
-  value: oneOfType([string, arrayOf(oneOfType([string, number]))]),
-  variant: string,
-  withAutoReset: bool
-};
+UTSelect.propTypes = utselectTypes;
 export default UTSelect;

package/dist/esm/components/UTSelect/versions/V1/types.js

@@ -0,0 +1,48 @@
+import { arrayOf, bool, elementType, func, number, object, oneOf, oneOfType, shape, string } from 'prop-types';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { VARIANTS } from './constants';
+export const utselectTypes = {
+  action: shape({
+    Icon: string,
+    onClick: func,
+    size: string
+  }),
+  actions: arrayOf(buttonTypes),
+  alwaysShowPlaceholder: bool,
+  autocompleteProps: object,
+  className: string,
+  clearable: bool,
+  CustomRow: elementType,
+  dataTestId: string,
+  disabled: bool,
+  disableFilterOptions: bool,
+  error: string,
+  errorDataTestId: string,
+  freeWidth: bool,
+  helpText: string,
+  icon: string,
+  inputSize: string,
+  itemDataTestId: string,
+  listDataTestId: string,
+  listProps: object,
+  menuWidth: string,
+  multiple: bool,
+  noMatchesText: string,
+  noOptionsText: string,
+  onChange: func,
+  onChangeSearchTerm: func,
+  options: arrayOf(shape({
+    name: string,
+    value: oneOfType([string, number])
+  })),
+  placeholder: string,
+  prefix: string,
+  readOnly: bool,
+  required: bool,
+  suffix: string,
+  title: string,
+  titleVariant: string,
+  value: oneOfType([string, arrayOf(oneOfType([string, number]))]),
+  variant: oneOf(Object.values(VARIANTS)),
+  withAutoReset: bool
+};

package/dist/esm/components/UTSelect/versions/V1/utils.js

@@ -1,7 +1,9 @@
-import { isEmpty } from '@widergy/web-utils/lib/array';
 import clone from 'lodash/clone';
+import isEmpty from 'lodash/isEmpty';
+import { COLOR_THEMES } from '../../../../constants/Palette';
 import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
 import { NO_CATEGORY } from '../../../UTCheckList/versions/V1/constants';
+import { VARIANTS } from './constants';
 const shouldResetMultipleSelect = (value, options) => !isEmpty(value) && (isEmpty(options) || value.some(el => !options.some(opt => opt.value === el) && !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub.value === el))));
 const shouldResetSimpleSelect = (value, options) => value && (isEmpty(options) || !options.some(el => el.value === value) && !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value)));
 export const shouldReset = (value, options, isMultiple) => {
@@ -36,7 +38,7 @@ export const getLeftAdornments = _ref => {
     name: COMPONENT_KEYS.BADGE,
     props: {
       text: value.length,
-      colorTheme: error ? 'error' : 'accent'
+      colorTheme: error ? COLOR_THEMES.error : COLOR_THEMES.accent
     }
   });
   if (prefix) adornments.push({
@@ -81,15 +83,14 @@ export const getRightAdornments = _ref2 => {
         size: 'small'
       }
     }
-  });
-  adornments.push({
+  });else adornments.push({
     name: COMPONENT_KEYS.ICON,
     props: {
       Icon: 'IconChevronDown',
       changeIconOnError: false,
       changeOnError: true,
-      ...(variant === 'picker' && !disabled && {
-        colorTheme: 'dark'
+      ...(variant === VARIANTS.picker && !disabled && {
+        colorTheme: COLOR_THEMES.dark
       })
     }
   });

package/dist/esm/components/UTShortcutPanel/styles.module.scss

@@ -17,7 +17,7 @@
 %animatedActionsContainer {
   animation: slideInFromRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   display: flex;
-  grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+  grid-gap: var(--UT-shortcutPanel-header-gap, 0.5rem);
 }
 
 %textWithEllipsis {
@@ -55,25 +55,25 @@
     padding: var(--padding-lg, 24px) 0;
     position: relative !important;
     transition: width 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
-    width: var(--UT-shortcutPanel-width-collapsed, 56px);
+    width: var(--UT-shortcutPanel-width-collapsed, 3.5rem);
 
     &Open {
       padding: 0;
-      width: var(--UT-shortcutPanel-width, 256px);
+      width: var(--UT-shortcutPanel-width, 16rem);
     }
 
     .expandedPanelContent {
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      padding: 0 var(--UT-shortcutPanel-padding, 16px);
+      padding: 0 var(--UT-shortcutPanel-padding, 1rem);
       position: relative;
       width: 100%;
 
       .expandedPanelContentHeader {
         align-items: center;
         display: flex;
-        grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+        grid-gap: var(--UT-shortcutPanel-header-gap, 0.5rem);
         justify-content: space-between;
         position: sticky;
         top: 0;
@@ -88,7 +88,7 @@
         .expandedPanelContentActions {
           display: flex;
           flex-wrap: nowrap;
-          grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+          grid-gap: var(--UT-shortcutPanel-header-gap, 0.5rem);
 
           .expandedPanelContentActionsContainer {
             @extend %actionsContainer;
@@ -105,14 +105,14 @@
       }
 
       .expandedPanelContentCategory {
-        padding: var(--UT-shortcutPanel-category-padding, 8px) 0;
+        padding: var(--UT-shortcutPanel-category-padding, 0.5rem) 0;
 
         .expandedPanelContentCategoryHeader {
           align-items: center;
           border-radius: var(--radius-sm, 4px);
           display: flex;
-          grid-gap: var(--UT-shortcutPanel-category-gap, 8px);
-          padding: var(--UT-shortcutPanel-category-padding, 8px);
+          grid-gap: var(--UT-shortcutPanel-category-gap, 0.5rem);
+          padding: var(--UT-shortcutPanel-category-padding, 0.5rem);
           height: var(--UT-shortcutPanel-category-height);
 
           svg {
@@ -185,7 +185,7 @@
             align-items: center;
             display: flex;
             flex-grow: 1;
-            grid-gap: var(--UT-shortcutPanel-item-gap, 8px);
+            grid-gap: var(--UT-shortcutPanel-item-gap, 0.5rem);
             overflow: hidden;
 
             .hoverableContainer {

package/dist/esm/components/UTStatus/theme.js

@@ -25,11 +25,11 @@ const getGridGap = _ref3 => {
     size
   } = _ref3;
   return {
-    [SIZES.large]: 'var(--UT-status-gap-large, 8px)',
-    [SIZES.medium]: 'var(--UT-status-gap-medium, 8px)',
-    [SIZES.small]: 'var(--UT-status-gap-small, 4px)',
-    [SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 8px)',
-    [SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 4px)'
+    [SIZES.large]: 'var(--UT-status-gap-large, 0.5rem)',
+    [SIZES.medium]: 'var(--UT-status-gap-medium, 0.5rem)',
+    [SIZES.small]: 'var(--UT-status-gap-small, 0.25rem)',
+    [SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 0.5rem)',
+    [SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 0.25rem)'
   }[size];
 };
 const getPadding = _ref4 => {
@@ -37,11 +37,11 @@ const getPadding = _ref4 => {
     size
   } = _ref4;
   return {
-    [SIZES.large]: 'var(--UT-status-padding-y-large, 4px) var(--UT-status-padding-x-large, 8px)',
-    [SIZES.medium]: 'var(--UT-status-padding-y-medium, 4px) var(--UT-status-padding-x-medium, 8px)',
-    [SIZES.small]: 'var(--UT-status-padding-y-small, 4px) var(--UT-status-padding-x-small, 8px)',
-    [SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 8px) var(--UT-status-padding-x-xlarge, 12px)',
-    [SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 2px) var(--UT-status-padding-x-xsmall, 4px)'
+    [SIZES.large]: 'var(--UT-status-padding-y-large, 0.25rem) var(--UT-status-padding-x-large, 0.5rem)',
+    [SIZES.medium]: 'var(--UT-status-padding-y-medium, 0.25rem) var(--UT-status-padding-x-medium, 0.5rem)',
+    [SIZES.small]: 'var(--UT-status-padding-y-small, 0.25rem) var(--UT-status-padding-x-small, 0.5rem)',
+    [SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 0.5rem) var(--UT-status-padding-x-xlarge, 0.75rem)',
+    [SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 0.125rem) var(--UT-status-padding-x-xsmall, 0.25rem)'
   }[size];
 };
 export const getLabelVariant = _ref5 => {
@@ -61,11 +61,11 @@ export const getIconSize = _ref6 => {
     size
   } = _ref6;
   return {
-    [SIZES.large]: 'var(--UT-status-icon-size-xs, 20px)',
-    [SIZES.medium]: 'var(--UT-status-icon-size-2xs, 16px)',
-    [SIZES.small]: 'var(--UT-status-icon-size-3xs, 12px)',
-    [SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 20px)',
-    [SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 12px)'
+    [SIZES.large]: 'var(--UT-status-icon-size-xs, 1.25rem)',
+    [SIZES.medium]: 'var(--UT-status-icon-size-2xs, 1rem)',
+    [SIZES.small]: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+    [SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 1.25rem)',
+    [SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 0.75rem)'
   }[size];
 };
 export const defaultIconMapper = variant => ({
@@ -106,7 +106,7 @@ export const retrieveStyle = _ref8 => {
           variant
         })
       }),
-      borderRadius: 'var(--UT-status-radius, 4px)',
+      borderRadius: 'var(--UT-status-radius, 0.25rem)',
       display: 'flex',
       gridGap: getGridGap({
         size
@@ -127,8 +127,8 @@ export const retrieveStyle = _ref8 => {
     },
     icon: {
       flexShrink: '0',
-      height: 'var(--UT-status-icon-size-xs, 20px)',
-      width: 'var(--UT-status-icon-size-xs, 20px)',
+      height: 'var(--UT-status-icon-size-xs, 1.25rem)',
+      width: 'var(--UT-status-icon-size-xs, 1.25rem)',
       '& path': {
         fill: getIconFill({
           theme,
@@ -155,20 +155,20 @@ export const retrieveStyle = _ref8 => {
       }
     },
     iconXsmall: {
-      height: 'var(--UT-status-icon-size-3xs, 12px)',
-      width: 'var(--UT-status-icon-size-3xs, 12px)'
+      height: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+      width: 'var(--UT-status-icon-size-3xs, 0.75rem)'
     },
     iconSmall: {
-      height: 'var(--UT-status-icon-size-3xs, 12px)',
-      width: 'var(--UT-status-icon-size-3xs, 12px)'
+      height: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+      width: 'var(--UT-status-icon-size-3xs, 0.75rem)'
     },
     iconMedium: {
-      height: 'var(--UT-status-icon-size-2xs, 16px)',
-      width: 'var(--UT-status-icon-size-2xs, 16px)'
+      height: 'var(--UT-status-icon-size-2xs, 1rem)',
+      width: 'var(--UT-status-icon-size-2xs, 1rem)'
     },
     iconLarge: {
-      height: 'var(--UT-status-icon-size-xs, 20px)',
-      width: 'var(--UT-status-icon-size-xs, 20px)'
+      height: 'var(--UT-status-icon-size-xs, 1.25rem)',
+      width: 'var(--UT-status-icon-size-xs, 1.25rem)'
     },
     badgeXsmall: {
       height: '8px',

package/dist/esm/utils/hooks/useCSSVariables/constants.js

@@ -61,11 +61,11 @@ export const baseTokens = {
     'font-weight-700': '700',
     'font-weight-800': '800',
     'font-weight-900': '900',
-    'font-lh-100': '1.0rem',
-    'font-lh-120': '1.2rem',
-    'font-lh-140': '1.4rem',
-    'font-lh-150': '1.5rem',
-    'font-lh-170': '1.7rem',
+    'font-lh-100': '1',
+    'font-lh-120': '1.2',
+    'font-lh-140': '1.4',
+    'font-lh-150': '1.5',
+    'font-lh-170': '1.7',
     'legacy-font-lh-full': '100%',
     'legacy-font-lh-100': '1.125rem',
     'legacy-font-lh-120': '1.25rem',
@@ -121,8 +121,9 @@ export const baseTokens = {
     'font-weight-extrabold': 'font-weight-800',
     'font-weight-black': 'font-weight-900',
     'font-lh-reset': 'font-lh-100',
-    'font-lh-heading': 'legacy-font-lh-full',
-    'font-lh-body': 'legacy-font-lh-140',
+    'font-lh-heading': 'font-lh-120',
+    'font-lh-subheading': 'font-lh-140',
+    'font-lh-body': 'font-lh-140',
     'font-lh-caption': 'font-lh-170',
     'legacy-font-lh-small': 'legacy-font-lh-120',
     'legacy-font-lh-xsmall': 'legacy-font-lh-100',
@@ -211,9 +212,10 @@ export const baseTokens = {
     'UT-label-size-small': 'font-body-size-md',
     'UT-label-size-xsmall': 'font-body-size-sm',
     'UT-label-lh-heading': 'font-lh-heading',
+    'UT-label-lh-subheading': 'font-lh-subheading',
     'UT-label-lh-body': 'font-lh-body',
-    'UT-label-lh-small': 'legacy-font-lh-small',
-    'UT-label-lh-xsmall': 'legacy-font-lh-xsmall',
+    'UT-label-lh-small': 'font-lh-140',
+    'UT-label-lh-xsmall': 'font-lh-150',
     'UT-label-weight-thin': 'font-weight-thin',
     'UT-label-weight-extralight': 'font-weight-extralight',
     'UT-label-weight-light': 'font-weight-light',

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -67,11 +67,11 @@ const baseTokens = exports.baseTokens = {
     'font-weight-700': '700',
     'font-weight-800': '800',
     'font-weight-900': '900',
-    'font-lh-100': '1.0rem',
-    'font-lh-120': '1.2rem',
-    'font-lh-140': '1.4rem',
-    'font-lh-150': '1.5rem',
-    'font-lh-170': '1.7rem',
+    'font-lh-100': '1',
+    'font-lh-120': '1.2',
+    'font-lh-140': '1.4',
+    'font-lh-150': '1.5',
+    'font-lh-170': '1.7',
     'legacy-font-lh-full': '100%',
     'legacy-font-lh-100': '1.125rem',
     'legacy-font-lh-120': '1.25rem',
@@ -127,8 +127,9 @@ const baseTokens = exports.baseTokens = {
     'font-weight-extrabold': 'font-weight-800',
     'font-weight-black': 'font-weight-900',
     'font-lh-reset': 'font-lh-100',
-    'font-lh-heading': 'legacy-font-lh-full',
-    'font-lh-body': 'legacy-font-lh-140',
+    'font-lh-heading': 'font-lh-120',
+    'font-lh-subheading': 'font-lh-140',
+    'font-lh-body': 'font-lh-140',
     'font-lh-caption': 'font-lh-170',
     'legacy-font-lh-small': 'legacy-font-lh-120',
     'legacy-font-lh-xsmall': 'legacy-font-lh-100',
@@ -217,9 +218,10 @@ const baseTokens = exports.baseTokens = {
     'UT-label-size-small': 'font-body-size-md',
     'UT-label-size-xsmall': 'font-body-size-sm',
     'UT-label-lh-heading': 'font-lh-heading',
+    'UT-label-lh-subheading': 'font-lh-subheading',
     'UT-label-lh-body': 'font-lh-body',
-    'UT-label-lh-small': 'legacy-font-lh-small',
-    'UT-label-lh-xsmall': 'legacy-font-lh-xsmall',
+    'UT-label-lh-small': 'font-lh-140',
+    'UT-label-lh-xsmall': 'font-lh-150',
     'UT-label-weight-thin': 'font-weight-thin',
     'UT-label-weight-extralight': 'font-weight-extralight',
     'UT-label-weight-light': 'font-weight-light',