@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/utils/componentUtils.js

@@ -1 +1,22 @@
-import{COLOR_SHADES,COLOR_THEMES}from"../constants/Palette";const A_CHAR_CODE=65,Z_CHAR_CODE=90;export const capitalize=str=>str.charAt(0).toUpperCase()+str.slice(1).toLowerCase();const getAvatarColors=(userName,colors)=>colors[((null==userName?void 0:userName.split("").reduce((acum,_letter,index)=>{const letterCode=userName.toUpperCase().charCodeAt(index);return letterCode>=65&&letterCode<=90?acum+letterCode-65+1:acum},0))||0)%colors.length],getFirstLetter=userName=>(null==userName?void 0:userName.trim().slice(0,1).toUpperCase())||"A";export const isUTIcon=icon=>"string"==typeof icon;export const isUTLabel=label=>"string"==typeof label||"number"==typeof label;export const getDefaultColorShade=colorTheme=>colorTheme===COLOR_THEMES.gray?COLOR_SHADES.shade04:colorTheme===COLOR_THEMES.light?COLOR_SHADES.shade01:COLOR_SHADES.shade05;export const valueExists=value=>null!=value&&""!==value;export default{capitalize:capitalize,getAvatarColors:getAvatarColors,getFirstLetter:getFirstLetter,isUTIcon:isUTIcon};
+import { COLOR_SHADES, COLOR_THEMES } from '../constants/Palette';
+const A_CHAR_CODE = 65;
+const Z_CHAR_CODE = 90;
+export const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+const getAvatarColors = (userName, colors) => {
+  const hashIndex = (userName === null || userName === void 0 ? void 0 : userName.split('').reduce((acum, _letter, index) => {
+    const letterCode = userName.toUpperCase().charCodeAt(index);
+    return letterCode >= A_CHAR_CODE && letterCode <= Z_CHAR_CODE ? acum + letterCode - A_CHAR_CODE + 1 : acum;
+  }, 0)) || 0;
+  return colors[hashIndex % colors.length];
+};
+const getFirstLetter = userName => (userName === null || userName === void 0 ? void 0 : userName.trim().slice(0, 1).toUpperCase()) || 'A';
+export const isUTIcon = icon => typeof icon === 'string';
+export const isUTLabel = label => typeof label === 'string' || typeof label === 'number';
+export const getDefaultColorShade = colorTheme => colorTheme === COLOR_THEMES.gray ? COLOR_SHADES.shade04 : colorTheme === COLOR_THEMES.light ? COLOR_SHADES.shade01 : COLOR_SHADES.shade05;
+export const valueExists = value => value !== undefined && value !== null && value !== '';
+export default {
+  capitalize,
+  getAvatarColors,
+  getFirstLetter,
+  isUTIcon
+};

package/dist/esm/utils/helperFunctions.js

@@ -1 +1,30 @@
-export const throttle=(func,limit)=>{let inThrottle;return function(){const context=this;if(!inThrottle){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];func.apply(context,args),inThrottle=!0,setTimeout(()=>{inThrottle=!1},limit)}}};export const base64ToFile=(base64,filename)=>{var _arr$0$match;const arr=base64.split(","),mime=(null===(_arr$0$match=arr[0].match(/:(.*?);/))||void 0===_arr$0$match?void 0:_arr$0$match[1])||"image/png",bstr=atob(arr[1]),n=bstr.length,u8arr=new Uint8Array(n);for(let i=0;i<n;i+=1)u8arr[i]=bstr.charCodeAt(i);return new File([u8arr],filename,{type:mime})};
+export const throttle = (func, limit) => {
+  let inThrottle;
+  return function throttled() {
+    const context = this;
+    if (!inThrottle) {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      func.apply(context, args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+};
+export const base64ToFile = (base64, filename) => {
+  var _arr$0$match;
+  const arr = base64.split(',');
+  const mime = ((_arr$0$match = arr[0].match(/:(.*?);/)) === null || _arr$0$match === void 0 ? void 0 : _arr$0$match[1]) || 'image/png';
+  const bstr = atob(arr[1]);
+  const n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  for (let i = 0; i < n; i += 1) {
+    u8arr[i] = bstr.charCodeAt(i);
+  }
+  return new File([u8arr], filename, {
+    type: mime
+  });
+};

package/dist/esm/utils/hooks/use-scroll-based-menu.js

@@ -1 +1,62 @@
-import{useState,useEffect}from"react";import{useInView}from"react-intersection-observer";const useScrollBasedMenu=function(){let options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const[anchor,setAnchor]=useState(null),[savedAnchorElement,setSavedAnchorElement]=useState(null),[wasMenuOpenBeforeHiding,setWasMenuOpenBeforeHiding]=useState(!1),{rootMargin:rootMargin="-10px",threshold:threshold=.1}=options,{ref:ref,inView:inView}=useInView({rootMargin:rootMargin,threshold:threshold}),closeMenu=()=>setAnchor(null);return useEffect(()=>{!inView&&anchor?(setWasMenuOpenBeforeHiding(!0),closeMenu()):inView&&wasMenuOpenBeforeHiding&&!anchor&&savedAnchorElement&&(setAnchor(savedAnchorElement),setWasMenuOpenBeforeHiding(!1))},[anchor,inView,savedAnchorElement,wasMenuOpenBeforeHiding]),{anchor:anchor,closeMenu:closeMenu,inView:inView,openMenu:event=>{const anchorElement=event.currentTarget;setAnchor(anchorElement),setSavedAnchorElement(anchorElement)},ref:ref}};export default useScrollBasedMenu;
+import { useState, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+/**
+ * Custom hook for managing menu visibility based on scroll position
+ * Automatically closes menu when anchor element scrolls out of view
+ * and reopens it when it comes back into view (if it was previously open)
+ *
+ * @param {Object} options - Configuration options
+ * @param {number} options.threshold - Intersection observer threshold (default: 0.1)
+ * @param {string} options.rootMargin - Intersection observer root margin (default: '-10px')
+ *
+ * @returns {Object} Hook return value
+ * @returns {Function} openMenu - Function to open the menu (call with event)
+ * @returns {Function} closeMenu - Function to close the menu
+ * @returns {HTMLElement|null} anchor - Current anchor element for the menu
+ * @returns {Function} ref - Ref to attach to the element you want to track
+ * @returns {boolean} inView - Whether the tracked element is in view
+ */
+const useScrollBasedMenu = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [anchor, setAnchor] = useState(null);
+  const [savedAnchorElement, setSavedAnchorElement] = useState(null);
+  const [wasMenuOpenBeforeHiding, setWasMenuOpenBeforeHiding] = useState(false);
+  const {
+    rootMargin = '-10px',
+    // Add some margin to prevent flickering
+    threshold = 0.1 // Require at least 10% of the element to be visible
+  } = options;
+  const {
+    ref,
+    inView
+  } = useInView({
+    rootMargin,
+    threshold
+  });
+  const openMenu = event => {
+    const anchorElement = event.currentTarget;
+    setAnchor(anchorElement);
+    setSavedAnchorElement(anchorElement);
+  };
+  const closeMenu = () => setAnchor(null);
+  useEffect(() => {
+    if (!inView && anchor) {
+      // Element went out of view and menu is open - remember this and close menu
+      setWasMenuOpenBeforeHiding(true);
+      closeMenu();
+    } else if (inView && wasMenuOpenBeforeHiding && !anchor && savedAnchorElement) {
+      // Element came back into view and menu was previously open - reopen it using saved anchor
+      setAnchor(savedAnchorElement);
+      setWasMenuOpenBeforeHiding(false);
+    }
+  }, [anchor, inView, savedAnchorElement, wasMenuOpenBeforeHiding]);
+  return {
+    anchor,
+    closeMenu,
+    inView,
+    openMenu,
+    ref
+  };
+};
+export default useScrollBasedMenu;

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

@@ -1 +1,315 @@
-export const baseTokens={base:{"size-12a":"4.5rem","size-13a":"7.5rem","size-16a":"12.5rem","size-full":"100%","size-0":"0rem","size-1":"0.125rem","size-2":"0.25rem","size-3":"0.5rem","size-4":"0.75rem","size-5":"1rem","size-6":"1.25rem","size-7":"1.5rem","size-8":"2rem","size-9":"2.5rem","size-10":"3rem","size-11":"3.5rem","size-12":"4rem","size-13":"6rem","size-14":"8rem","size-15":"10rem","size-16":"12rem","size-17":"14rem","size-18":"16rem","size-19":"20rem","spacing-0":"0rem","spacing-1":"0.125rem","spacing-2":"0.25rem","spacing-3":"0.5rem","spacing-4":"0.75rem","spacing-5":"1rem","spacing-6":"1.25rem","spacing-7":"1.5rem","spacing-8":"2rem","spacing-9":"2.5rem","spacing-10":"3rem","spacing-11":"3.5rem","spacing-12":"4rem","spacing-13":"6rem","spacing-14":"8rem","font-family":"Inter","font-size-100":"0.625rem","font-size-200":"0.75rem","font-size-300":"0.875rem","font-size-400":"1rem","font-size-500":"1.125rem","font-size-600":"1.25rem","font-size-650":"1.375rem","font-size-700":"1.5rem","font-size-800":"1.875rem","font-size-900":"2.5rem","font-size-1000":"3rem","font-size-1100":"4rem","font-weight-100":"100","font-weight-200":"200","font-weight-300":"300","font-weight-400":"400","font-weight-500":"500","font-weight-600":"600","font-weight-700":"700","font-weight-800":"800","font-weight-900":"900","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","legacy-font-lh-140":"1.375rem","radius-100":"4px","radius-200":"8px","radius-300":"12px","radius-400":"16px","radius-500":"24px","radius-full":"9999px"},semantic:{"padding-3xs":"spacing-1","padding-2xs":"spacing-2","padding-xs":"spacing-3","padding-sm":"spacing-4","padding-md":"spacing-5","padding-lg":"spacing-7","padding-xl":"spacing-8","padding-2xl":"spacing-9","gap-2xs":"spacing-1","gap-xs":"spacing-2","gap-sm":"spacing-3","gap-md":"spacing-4","gap-lg":"spacing-5","gap-xl":"spacing-7","gap-2xl":"spacing-8","gap-3xl":"spacing-9","font-heading-size-1":"font-size-700","font-heading-size-2":"font-size-650","font-heading-size-3":"font-size-600","font-heading-size-4":"font-size-500","font-heading-size-5":"font-size-400","font-heading-size-6":"font-size-500","font-body-size-xs":"font-size-100","font-body-size-sm":"font-size-200","font-body-size-md":"font-size-300","font-body-size-lg":"font-size-400","font-metric-size-sm":"font-size-300","font-metric-size-md":"font-size-400","font-metric-size-lg":"font-size-500","font-action-size-sm":"font-size-200","font-action-size-md":"font-size-300","font-label-size-sm":"font-size-200","font-label-size-md":"font-size-300","font-weight-thin":"font-weight-100","font-weight-extralight":"font-weight-200","font-weight-light":"font-weight-300","font-weight-regular":"font-weight-400","font-weight-medium":"font-weight-500","font-weight-semibold":"font-weight-600","font-weight-bold":"font-weight-700","font-weight-extrabold":"font-weight-800","font-weight-black":"font-weight-900","font-lh-reset":"font-lh-100","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","size-control-2xs":"size-5","size-control-xs":"size-7","size-control-sm":"size-8","size-control-md":"size-9","size-control-lg":"size-10","size-control-xl":"size-11","size-control-2xl":"size-12","size-control-3xl":"size-13","size-control-4xl":"size-13a","size-brand-logo-2xs":"size-11","size-brand-logo-xs":"size-12a","size-brand-logo-sm":"size-13a","size-brand-logo-md":"size-15","size-brand-logo-lg":"size-16a","size-icon-3xs":"size-4","size-icon-2xs":"size-5","size-icon-xs":"size-6","size-icon-md":"size-7","size-icon-lg":"size-8","size-icon-xl":"size-10","size-layout-3xs":"size-11","size-layout-2xs":"size-12","size-layout-sm":"size-15","size-layout-md":"size-18","size-layout-lg":"size-19","size-overlay-sm":"size-14","size-overlay-md":"size-16","size-overlay-lg":"size-18","size-overlay-xl":"size-19","size-overlay-2xl":"size-21","size-overlay-3xl":"size-23","size-overlay-full":"size-full","size-input-height-sm":"size-9","size-input-height-md":"size-10","size-input-padding-y":"spacing-3","size-input-padding-x":"spacing-5","size-input-gap":"spacing-5","size-input-radius":"radius-100","font-input-size":"font-size-400","size-input-icon":"size-6","radius-sm":"radius-100","radius-md":"radius-200","radius-lg":"radius-300","radius-xl":"radius-500"},component:{"UT-banner-buttons-gap":"gap-sm","UT-banner-gap-lg":"gap-xl","UT-banner-gap-md":"gap-lg","UT-banner-gap-sm":"gap-sm","UT-banner-icon-gap":"gap-md","UT-banner-icon-size-lg":"size-icon-md","UT-banner-icon-size-sm":"size-icon-xs","UT-banner-padding-lg":"padding-lg","UT-banner-padding-md":"padding-md","UT-banner-padding-x-sm":"padding-sm","UT-banner-padding-y-sm":"padding-xs","UT-banner-radius":"radius-md","UT-banner-text-gap":"gap-sm","UT-button-height-sm":"size-control-sm","UT-button-height-md":"size-control-md","UT-button-height-lg":"size-control-lg","UT-button-padding-xs":"padding-2xs","UT-button-padding-sm":"padding-xs","UT-button-padding-md":"padding-sm","UT-button-padding-lg":"padding-md","UT-button-gap-sm":"gap-xs","UT-button-gap-md":"gap-sm","UT-button-label-size":"font-label-size-md","UT-button-label-weight":"font-weight-600","UT-button-label-lh":"font-lh-reset","UT-button-radius":"radius-sm","UT-button-icon-size-sm":"size-icon-xs","UT-button-icon-size-md":"size-icon-md","UT-buttonGroup-padding":"padding-2xs","UT-buttonGroup-radius":"radius-md","UT-label-size-title-1":"font-heading-size-1","UT-label-size-title-2":"font-heading-size-2","UT-label-size-title-3":"font-heading-size-3","UT-label-size-subtitle-1":"font-heading-size-4","UT-label-size-subtitle-2":"font-heading-size-5","UT-label-size-body":"font-body-size-lg","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":"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","UT-label-weight-regular":"font-weight-regular","UT-label-weight-medium":"font-weight-medium","UT-label-weight-semibold":"font-weight-semibold","UT-label-weight-bold":"font-weight-bold","UT-label-weight-extrabold":"font-weight-extrabold","UT-label-weight-black":"font-weight-black","UT-label-markdown-margin-sm":"padding-xs","UT-label-markdown-margin-md":"padding-sm","UT-label-markdown-margin-lg":"padding-md","UT-label-markdown-margin-xl":"padding-lg","UT-label-markdown-padding-sm":"padding-xs","UT-label-markdown-padding-md":"padding-sm","UT-label-markdown-padding-lg":"padding-md","UT-label-markdown-padding-xl":"padding-lg","UT-shortcutPanel-width":"size-layout-md","UT-shortcutPanel-width-collapsed":"size-layout-3xs","UT-shortcutPanel-padding":"padding-md","UT-shortcutPanel-header-height":"size-layout-2xs","UT-shortcutPanel-header-gap":"gap-sm","UT-shortcutPanel-header-label-size":"font-heading-size-5","UT-shortcutPanel-category-height":"size-control-md","UT-shortcutPanel-category-padding":"padding-xs","UT-shortcutPanel-category-gap":"gap-lg","UT-shortcutPanel-category-label-size":"font-body-size-sm","UT-shortcutPanel-category-icon-size":"size-icon-md","UT-shortcutPanel-item-height":"size-control-md","UT-shortcutPanel-item-padding":"padding-xs","UT-shortcutPanel-item-gap":"gap-sm","UT-shortcutPanel-item-label-size":"font-body-size-md","UT-shortcutPanel-item-icon-size":"size-icon-xs","UT-snackbar-padding-x":"padding-sm","UT-snackbar-padding-y":"padding-sm","UT-snackbar-radius":"radius-sm","UT-snackbar-gap-icon":"gap-sm","UT-snackbar-gap-description":"gap-xs","UT-snackbar-gap-actions":"gap-xs","UT-snackbar-gap-action-area":"gap-md","UT-snackbar-icon-size":"size-icon-xs","UT-snackbar-icon-offset":"spacing-1","UT-dataElement-padding-md":"padding-md","UT-dataElement-padding-sm":"padding-xs","UT-dataElement-gap-md":"gap-lg","UT-dataElement-gap-sm":"gap-sm","UT-dataElement-content-gap-x":"gap-sm","UT-dataElement-content-gap-y":"gap-sm","UT-dataElement-icon-size":"size-icon-md","UT-dataElement-title-size":"font-body-size-md","UT-dataElement-title-weight":"font-weight-medium","UT-dataElement-prefix-size":"font-body-size-md","UT-dataElement-prefix-weight":"font-weight-medium","UT-dataCategory-padding":"padding-md","UT-dataCategory-gap":"gap-lg","UT-dataCategory-title-gap":"gap-sm","UT-dataCategory-title-size":"font-body-size-sm","UT-dataCategory-title-weight":"font-weight-medium","UT-dataCategory-icon-size":"size-icon-xs","UT-status-gap-large":"gap-sm","UT-status-gap-medium":"gap-sm","UT-status-gap-small":"gap-xs","UT-status-gap-xlarge":"gap-sm","UT-status-gap-xsmall":"gap-xs","UT-status-padding-y-large":"padding-2xs","UT-status-padding-x-large":"padding-xs","UT-status-padding-y-medium":"padding-2xs","UT-status-padding-x-medium":"padding-xs","UT-status-padding-y-small":"padding-2xs","UT-status-padding-x-small":"padding-xs","UT-status-padding-y-xlarge":"padding-xs","UT-status-padding-x-xlarge":"padding-sm","UT-status-padding-y-xsmall":"padding-3xs","UT-status-padding-x-xsmall":"padding-2xs","UT-status-radius":"radius-sm","UT-status-radius-rounded":"radius-full","UT-status-icon-size-3xs":"size-icon-3xs","UT-status-icon-size-2xs":"size-icon-2xs","UT-status-icon-size-xs":"size-icon-xs","UT-status-icon-size-md":"size-icon-md","UT-datepicker-root-gap":"gap-sm","UT-datepicker-adornments-gap":"gap-xs","UT-datepicker-day-padding-y":"padding-xs","UT-datepicker-day-padding-x":"padding-sm","UT-datepicker-calendar-gap":"gap-lg","UT-datepicker-calendar-padding":"padding-md","UT-datepicker-input-padding-x":"padding-sm","UT-datepicker-input-height":"size-control-sm","UT-loading-size":"size-control-4xl","UT-loading-logo-width":"size-brand-logo-2xs","UT-loading-color-start":"var(--identitySolidTone3)","UT-loading-color-end":"var(--identitySolidTone2)","UT-loading-text-size":"font-body-size-md","UT-loading-gap":"gap-lg"}};
+export const baseTokens = {
+  base: {
+    'size-12a': '4.5rem',
+    'size-13a': '7.5rem',
+    'size-16a': '12.5rem',
+    'size-full': '100%',
+    'size-0': '0rem',
+    'size-1': '0.125rem',
+    'size-2': '0.25rem',
+    'size-3': '0.5rem',
+    'size-4': '0.75rem',
+    'size-5': '1rem',
+    'size-6': '1.25rem',
+    'size-7': '1.5rem',
+    'size-8': '2rem',
+    'size-9': '2.5rem',
+    'size-10': '3rem',
+    'size-11': '3.5rem',
+    'size-12': '4rem',
+    'size-13': '6rem',
+    'size-14': '8rem',
+    'size-15': '10rem',
+    'size-16': '12rem',
+    'size-17': '14rem',
+    'size-18': '16rem',
+    'size-19': '20rem',
+    'spacing-0': '0rem',
+    'spacing-1': '0.125rem',
+    'spacing-2': '0.25rem',
+    'spacing-3': '0.5rem',
+    'spacing-4': '0.75rem',
+    'spacing-5': '1rem',
+    'spacing-6': '1.25rem',
+    'spacing-7': '1.5rem',
+    'spacing-8': '2rem',
+    'spacing-9': '2.5rem',
+    'spacing-10': '3rem',
+    'spacing-11': '3.5rem',
+    'spacing-12': '4rem',
+    'spacing-13': '6rem',
+    'spacing-14': '8rem',
+    'font-family': 'Inter',
+    'font-size-100': '0.625rem',
+    'font-size-200': '0.75rem',
+    'font-size-300': '0.875rem',
+    'font-size-400': '1rem',
+    'font-size-500': '1.125rem',
+    'font-size-600': '1.25rem',
+    'font-size-650': '1.375rem',
+    'font-size-700': '1.5rem',
+    'font-size-800': '1.875rem',
+    'font-size-900': '2.5rem',
+    'font-size-1000': '3rem',
+    'font-size-1100': '4rem',
+    'font-weight-100': '100',
+    'font-weight-200': '200',
+    'font-weight-300': '300',
+    'font-weight-400': '400',
+    'font-weight-500': '500',
+    'font-weight-600': '600',
+    'font-weight-700': '700',
+    'font-weight-800': '800',
+    'font-weight-900': '900',
+    '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',
+    'legacy-font-lh-140': '1.375rem',
+    'radius-100': '4px',
+    'radius-200': '8px',
+    'radius-300': '12px',
+    'radius-400': '16px',
+    'radius-500': '24px',
+    'radius-full': '9999px'
+  },
+  semantic: {
+    'padding-3xs': 'spacing-1',
+    'padding-2xs': 'spacing-2',
+    'padding-xs': 'spacing-3',
+    'padding-sm': 'spacing-4',
+    'padding-md': 'spacing-5',
+    'padding-lg': 'spacing-7',
+    'padding-xl': 'spacing-8',
+    'padding-2xl': 'spacing-9',
+    'gap-2xs': 'spacing-1',
+    'gap-xs': 'spacing-2',
+    'gap-sm': 'spacing-3',
+    'gap-md': 'spacing-4',
+    'gap-lg': 'spacing-5',
+    'gap-xl': 'spacing-7',
+    'gap-2xl': 'spacing-8',
+    'gap-3xl': 'spacing-9',
+    'font-heading-size-1': 'font-size-700',
+    'font-heading-size-2': 'font-size-650',
+    'font-heading-size-3': 'font-size-600',
+    'font-heading-size-4': 'font-size-500',
+    'font-heading-size-5': 'font-size-400',
+    'font-heading-size-6': 'font-size-500',
+    'font-body-size-xs': 'font-size-100',
+    'font-body-size-sm': 'font-size-200',
+    'font-body-size-md': 'font-size-300',
+    'font-body-size-lg': 'font-size-400',
+    'font-metric-size-sm': 'font-size-300',
+    'font-metric-size-md': 'font-size-400',
+    'font-metric-size-lg': 'font-size-500',
+    'font-action-size-sm': 'font-size-200',
+    'font-action-size-md': 'font-size-300',
+    'font-label-size-sm': 'font-size-200',
+    'font-label-size-md': 'font-size-300',
+    'font-weight-thin': 'font-weight-100',
+    'font-weight-extralight': 'font-weight-200',
+    'font-weight-light': 'font-weight-300',
+    'font-weight-regular': 'font-weight-400',
+    'font-weight-medium': 'font-weight-500',
+    'font-weight-semibold': 'font-weight-600',
+    'font-weight-bold': 'font-weight-700',
+    'font-weight-extrabold': 'font-weight-800',
+    'font-weight-black': 'font-weight-900',
+    'font-lh-reset': 'font-lh-100',
+    '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',
+    'size-control-2xs': 'size-5',
+    'size-control-xs': 'size-7',
+    'size-control-sm': 'size-8',
+    'size-control-md': 'size-9',
+    'size-control-lg': 'size-10',
+    'size-control-xl': 'size-11',
+    'size-control-2xl': 'size-12',
+    'size-control-3xl': 'size-13',
+    'size-control-4xl': 'size-13a',
+    'size-brand-logo-2xs': 'size-11',
+    'size-brand-logo-xs': 'size-12a',
+    'size-brand-logo-sm': 'size-13a',
+    'size-brand-logo-md': 'size-15',
+    'size-brand-logo-lg': 'size-16a',
+    'size-icon-3xs': 'size-4',
+    'size-icon-2xs': 'size-5',
+    'size-icon-xs': 'size-6',
+    'size-icon-md': 'size-7',
+    'size-icon-lg': 'size-8',
+    'size-icon-xl': 'size-10',
+    'size-layout-3xs': 'size-11',
+    'size-layout-2xs': 'size-12',
+    'size-layout-sm': 'size-15',
+    'size-layout-md': 'size-18',
+    'size-layout-lg': 'size-19',
+    'size-overlay-sm': 'size-14',
+    'size-overlay-md': 'size-16',
+    'size-overlay-lg': 'size-18',
+    'size-overlay-xl': 'size-19',
+    'size-overlay-2xl': 'size-21',
+    'size-overlay-3xl': 'size-23',
+    'size-overlay-full': 'size-full',
+    'size-input-height-sm': 'size-9',
+    'size-input-height-md': 'size-10',
+    'size-input-padding-y': 'spacing-3',
+    'size-input-padding-x': 'spacing-5',
+    'size-input-gap': 'spacing-5',
+    'size-input-radius': 'radius-100',
+    'font-input-size': 'font-size-400',
+    'size-input-icon': 'size-6',
+    'radius-sm': 'radius-100',
+    'radius-md': 'radius-200',
+    'radius-lg': 'radius-300',
+    'radius-xl': 'radius-500'
+  },
+  component: {
+    'UT-banner-buttons-gap': 'gap-sm',
+    'UT-banner-gap-lg': 'gap-xl',
+    'UT-banner-gap-md': 'gap-lg',
+    'UT-banner-gap-sm': 'gap-sm',
+    'UT-banner-icon-gap': 'gap-md',
+    'UT-banner-icon-size-lg': 'size-icon-md',
+    'UT-banner-icon-size-sm': 'size-icon-xs',
+    'UT-banner-padding-lg': 'padding-lg',
+    'UT-banner-padding-md': 'padding-md',
+    'UT-banner-padding-x-sm': 'padding-sm',
+    'UT-banner-padding-y-sm': 'padding-xs',
+    'UT-banner-radius': 'radius-md',
+    'UT-banner-text-gap': 'gap-sm',
+    'UT-button-height-sm': 'size-control-sm',
+    'UT-button-height-md': 'size-control-md',
+    'UT-button-height-lg': 'size-control-lg',
+    'UT-button-padding-xs': 'padding-2xs',
+    'UT-button-padding-sm': 'padding-xs',
+    'UT-button-padding-md': 'padding-sm',
+    'UT-button-padding-lg': 'padding-md',
+    'UT-button-gap-sm': 'gap-xs',
+    'UT-button-gap-md': 'gap-sm',
+    'UT-button-label-size': 'font-label-size-md',
+    'UT-button-label-weight': 'font-weight-600',
+    'UT-button-label-lh': 'font-lh-reset',
+    'UT-button-radius': 'radius-sm',
+    'UT-button-icon-size-sm': 'size-icon-xs',
+    'UT-button-icon-size-md': 'size-icon-md',
+    'UT-buttonGroup-padding': 'padding-2xs',
+    'UT-buttonGroup-radius': 'radius-md',
+    'UT-label-size-title-1': 'font-heading-size-1',
+    'UT-label-size-title-2': 'font-heading-size-2',
+    'UT-label-size-title-3': 'font-heading-size-3',
+    'UT-label-size-subtitle-1': 'font-heading-size-4',
+    'UT-label-size-subtitle-2': 'font-heading-size-5',
+    'UT-label-size-body': 'font-body-size-lg',
+    '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': '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',
+    'UT-label-weight-regular': 'font-weight-regular',
+    'UT-label-weight-medium': 'font-weight-medium',
+    'UT-label-weight-semibold': 'font-weight-semibold',
+    'UT-label-weight-bold': 'font-weight-bold',
+    'UT-label-weight-extrabold': 'font-weight-extrabold',
+    'UT-label-weight-black': 'font-weight-black',
+    'UT-label-markdown-margin-sm': 'padding-xs',
+    'UT-label-markdown-margin-md': 'padding-sm',
+    'UT-label-markdown-margin-lg': 'padding-md',
+    'UT-label-markdown-margin-xl': 'padding-lg',
+    'UT-label-markdown-padding-sm': 'padding-xs',
+    'UT-label-markdown-padding-md': 'padding-sm',
+    'UT-label-markdown-padding-lg': 'padding-md',
+    'UT-label-markdown-padding-xl': 'padding-lg',
+    'UT-shortcutPanel-width': 'size-layout-md',
+    'UT-shortcutPanel-width-collapsed': 'size-layout-3xs',
+    'UT-shortcutPanel-padding': 'padding-md',
+    'UT-shortcutPanel-header-height': 'size-layout-2xs',
+    'UT-shortcutPanel-header-gap': 'gap-sm',
+    'UT-shortcutPanel-header-label-size': 'font-heading-size-5',
+    'UT-shortcutPanel-category-height': 'size-control-md',
+    'UT-shortcutPanel-category-padding': 'padding-xs',
+    'UT-shortcutPanel-category-gap': 'gap-lg',
+    'UT-shortcutPanel-category-label-size': 'font-body-size-sm',
+    'UT-shortcutPanel-category-icon-size': 'size-icon-md',
+    'UT-shortcutPanel-item-height': 'size-control-md',
+    'UT-shortcutPanel-item-padding': 'padding-xs',
+    'UT-shortcutPanel-item-gap': 'gap-sm',
+    'UT-shortcutPanel-item-label-size': 'font-body-size-md',
+    'UT-shortcutPanel-item-icon-size': 'size-icon-xs',
+    'UT-snackbar-padding-x': 'padding-sm',
+    'UT-snackbar-padding-y': 'padding-sm',
+    'UT-snackbar-radius': 'radius-sm',
+    'UT-snackbar-gap-icon': 'gap-sm',
+    'UT-snackbar-gap-description': 'gap-xs',
+    'UT-snackbar-gap-actions': 'gap-xs',
+    'UT-snackbar-gap-action-area': 'gap-md',
+    'UT-snackbar-icon-size': 'size-icon-xs',
+    'UT-snackbar-icon-offset': 'spacing-1',
+    'UT-dataElement-padding-md': 'padding-md',
+    'UT-dataElement-padding-sm': 'padding-xs',
+    'UT-dataElement-gap-md': 'gap-lg',
+    'UT-dataElement-gap-sm': 'gap-sm',
+    'UT-dataElement-content-gap-x': 'gap-sm',
+    'UT-dataElement-content-gap-y': 'gap-sm',
+    'UT-dataElement-icon-size': 'size-icon-md',
+    'UT-dataElement-chevron-icon-size': 'size-icon-xs',
+    'UT-dataElement-title-size': 'font-body-size-md',
+    'UT-dataElement-title-weight': 'font-weight-medium',
+    'UT-dataElement-prefix-size': 'font-body-size-md',
+    'UT-dataElement-prefix-weight': 'font-weight-medium',
+    'UT-dataCategory-padding': 'padding-md',
+    'UT-dataCategory-gap': 'gap-lg',
+    'UT-dataCategory-title-gap': 'gap-sm',
+    'UT-dataCategory-title-size': 'font-body-size-sm',
+    'UT-dataCategory-title-weight': 'font-weight-medium',
+    'UT-dataCategory-icon-size': 'size-icon-xs',
+    'UT-status-gap-large': 'gap-sm',
+    'UT-status-gap-medium': 'gap-sm',
+    'UT-status-gap-small': 'gap-xs',
+    'UT-status-gap-xlarge': 'gap-sm',
+    'UT-status-gap-xsmall': 'gap-xs',
+    'UT-status-padding-y-large': 'padding-2xs',
+    'UT-status-padding-x-large': 'padding-xs',
+    'UT-status-padding-y-medium': 'padding-2xs',
+    'UT-status-padding-x-medium': 'padding-xs',
+    'UT-status-padding-y-small': 'padding-2xs',
+    'UT-status-padding-x-small': 'padding-xs',
+    'UT-status-padding-y-xlarge': 'padding-xs',
+    'UT-status-padding-x-xlarge': 'padding-sm',
+    'UT-status-padding-y-xsmall': 'padding-3xs',
+    'UT-status-padding-x-xsmall': 'padding-2xs',
+    'UT-status-radius': 'radius-sm',
+    'UT-status-radius-rounded': 'radius-full',
+    'UT-status-icon-size-3xs': 'size-icon-3xs',
+    'UT-status-icon-size-2xs': 'size-icon-2xs',
+    'UT-status-icon-size-xs': 'size-icon-xs',
+    'UT-status-icon-size-md': 'size-icon-md',
+    'UT-datepicker-root-gap': 'gap-sm',
+    'UT-datepicker-adornments-gap': 'gap-xs',
+    'UT-datepicker-day-padding-y': 'padding-xs',
+    'UT-datepicker-day-padding-x': 'padding-sm',
+    'UT-datepicker-calendar-gap': 'gap-lg',
+    'UT-datepicker-calendar-padding': 'padding-md',
+    'UT-datepicker-input-padding-x': 'padding-sm',
+    'UT-datepicker-input-height': 'size-control-sm',
+    'UT-loading-size': 'size-control-4xl',
+    'UT-loading-logo-width': 'size-brand-logo-2xs',
+    'UT-loading-color-start': 'var(--identitySolidTone3)',
+    'UT-loading-color-end': 'var(--identitySolidTone2)',
+    'UT-loading-text-size': 'font-body-size-md',
+    'UT-loading-gap': 'gap-lg'
+  }
+};

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

@@ -1 +1,60 @@
-import{useEffect}from"react";import merge from"lodash/mergeWith";import{baseTokens}from"./constants";import{mapTokens}from"./utils";const useCSSVariables=function(cssVariables){let tagId=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"wdrgy-css-variables",prefix=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";useEffect(()=>{const formattedVariables=Object.entries(mapTokens(merge(baseTokens,cssVariables))).filter(cssVar=>"string"==typeof cssVar[1]||"number"==typeof cssVar[1]).map(_ref=>{let[key,value]=_ref;const variableName=prefix?"--".concat(prefix,"-").concat(key):"--".concat(key);return"".concat(variableName,": ").concat(value,";")}).join("\n  "),existingStyle=document.getElementById(tagId);existingStyle&&existingStyle.remove();const styleContent="html {\n  ".concat(formattedVariables,"\n}"),styleTag=document.createElement("style");return styleTag.id=tagId,styleTag.textContent=styleContent,document.head.appendChild(styleTag),()=>{const style=document.getElementById(tagId);style&&style.remove()}},[cssVariables,prefix,tagId])};export default useCSSVariables;
+import { useEffect } from 'react';
+import merge from 'lodash/mergeWith';
+import { baseTokens } from './constants';
+import { mapTokens } from './utils';
+
+/**
+ * Hook that injects CSS variables into the html element
+ * The variables will be available for all elements in the document
+ *
+ * @param {Object} cssVariables - Object with key-value pairs of CSS variables
+ * @param {string} tagId - ID for the style tag (default: 'wdrgy-css-variables')
+ * @param {string} prefix - Prefix for the variables (default: '')
+ * @param {Object} designTokens - Object with {base, semantic, component} tokens
+ *
+ * @example
+ * useCSSVariables({
+ *   primaryColor: '#007bff',
+ *   fontSize: '14px',
+ *   spacing: '8px'
+ * });
+ * // Generates:
+ * // html {
+ * //   --primaryColor: #007bff;
+ * //   --fontSize: 14px;
+ * //   --spacing: 8px;
+ * // }
+ */
+
+const useCSSVariables = function (cssVariables) {
+  let tagId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'wdrgy-css-variables';
+  let prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  useEffect(() => {
+    // Validate and build CSS variables safely
+    const formattedVariables = Object.entries(mapTokens(merge(baseTokens, cssVariables))).filter(cssVar => typeof cssVar[1] === 'string' || typeof cssVar[1] === 'number').map(_ref => {
+      let [key, value] = _ref;
+      const variableName = prefix ? "--".concat(prefix, "-").concat(key) : "--".concat(key);
+      return "".concat(variableName, ": ").concat(value, ";");
+    }).join('\n  ');
+
+    // Remove previous style tag if it exists
+    const existingStyle = document.getElementById(tagId);
+    if (existingStyle) existingStyle.remove();
+
+    // Create the style tag content
+    const styleContent = "html {\n  ".concat(formattedVariables, "\n}");
+
+    // Create and insert the style tag
+    const styleTag = document.createElement('style');
+    styleTag.id = tagId;
+    styleTag.textContent = styleContent;
+    document.head.appendChild(styleTag);
+
+    // Cleanup: remove the style tag on unmount
+    return () => {
+      const style = document.getElementById(tagId);
+      if (style) style.remove();
+    };
+  }, [cssVariables, prefix, tagId]);
+};
+export default useCSSVariables;

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

@@ -1 +1,17 @@
-export const mapTokens=tokens=>{const{base:base={},semantic:semantic={},component:component={},...other}=tokens||{},allTokens={...base,...other};return Object.entries(semantic).concat(Object.entries(component)).forEach(_ref=>{let[key,value]=_ref;allTokens[key]=allTokens[value]}),allTokens};
+export const mapTokens = tokens => {
+  const {
+    base = {},
+    semantic = {},
+    component = {},
+    ...other
+  } = tokens || {};
+  const allTokens = {
+    ...base,
+    ...other
+  };
+  Object.entries(semantic).concat(Object.entries(component)).forEach(_ref => {
+    let [key, value] = _ref;
+    allTokens[key] = allTokens[value];
+  });
+  return allTokens;
+};

package/dist/esm/utils/keyboardUtils.js

@@ -1 +1,95 @@
-import isEmpty from"lodash/isEmpty";import{HANDLER_IDENTIFIER,KEYBOARD_ALLOWED_TYPES,NO_FORM}from"../constants/keyboardConstants";export const preventPointerDown=e=>e.preventDefault();export const identifyField=function(){let eventTarget=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},forms=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const{dataset:{keyboard:inputName}}=eventTarget,fieldName=inputName.includes("-")?inputName.split("-")[1]:inputName,fieldPrefix=inputName.includes("-")?inputName.split("-")[0]:null,formsArray=Object.entries(forms),[formName]=formsArray.find(_ref=>{let[_,{registeredFields:registeredFields}]=_ref;return!!registeredFields&&Object.keys(registeredFields).includes(fieldName)})||[NO_FORM],eventHandlersKey=Object.keys(eventTarget).find(key=>key.includes(HANDLER_IDENTIFIER)),{onChange:onChange}=eventTarget[eventHandlersKey]||{};return{fieldName:fieldName,fieldPrefix:fieldPrefix,formName:formName,onChange:onChange}};export const getFieldValue=(currentIdentifiers,fieldSelector,state)=>{var _fieldSelector,_fieldSelector2,_fieldSelector3;if(!isEmpty(currentIdentifiers)){const{fieldName:fieldName,fieldPrefix:fieldPrefix,formName:formName}=currentIdentifiers||{};switch(fieldPrefix){case"areaCode":case"prefix":return null===(_fieldSelector=fieldSelector(formName||"")(state,fieldName))||void 0===_fieldSelector?void 0:_fieldSelector.split("-")[0];case"phoneNumber":case"document":return null===(_fieldSelector2=fieldSelector(formName||"")(state,fieldName))||void 0===_fieldSelector2?void 0:_fieldSelector2.split("-")[1];case"verificationCode":return null===(_fieldSelector3=fieldSelector(formName||"")(state,fieldName))||void 0===_fieldSelector3?void 0:_fieldSelector3.split("-")[2];default:return fieldSelector(formName||"")(state,fieldName)}}};export const getIsKeyboard=eventTarget=>{const{dataset:{skbtn:skbtn,skinstance:skinstance},classList:classList}=eventTarget;return skbtn||skinstance||[...classList].some(cssClass=>cssClass.includes("hg-"))};export const getIsInputForKeyboard=(nodeName,type)=>"INPUT"===nodeName&&KEYBOARD_ALLOWED_TYPES.includes(type)||"TEXTAREA"===nodeName;export const clickForKeyboard=(formList,setFieldIdentifiers,setShowKeyboard,showKeyboard)=>_ref2=>{let{target:eventTarget}=_ref2;const{nodeName:nodeName,type:type}=eventTarget,isKeyboard=getIsKeyboard(eventTarget),isInputForKeyboard=getIsInputForKeyboard(nodeName,type);if(isInputForKeyboard){const identifiers=identifyField(eventTarget,formList);"autocomplete"===identifiers.fieldPrefix&&window.addEventListener("pointerdown",preventPointerDown),setFieldIdentifiers(identifiers),showKeyboard||setShowKeyboard(!0)}else isInputForKeyboard||isKeyboard||(setShowKeyboard(!1),window.removeEventListener("pointerdown",preventPointerDown))};export default{identifyField:identifyField,getFieldValue:getFieldValue,getIsKeyboard:getIsKeyboard,getIsInputForKeyboard:getIsInputForKeyboard,clickForKeyboard:clickForKeyboard};
+import isEmpty from 'lodash/isEmpty';
+import { HANDLER_IDENTIFIER, KEYBOARD_ALLOWED_TYPES, NO_FORM } from '../constants/keyboardConstants';
+export const preventPointerDown = e => e.preventDefault();
+export const identifyField = function () {
+  let eventTarget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let forms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    dataset: {
+      keyboard: inputName
+    }
+  } = eventTarget;
+  const fieldName = inputName.includes('-') ? inputName.split('-')[1] : inputName;
+  const fieldPrefix = inputName.includes('-') ? inputName.split('-')[0] : null;
+  const formsArray = Object.entries(forms);
+  const [formName] = formsArray.find(_ref => {
+    let [_, {
+      registeredFields
+    }] = _ref;
+    return registeredFields ? Object.keys(registeredFields).includes(fieldName) : false;
+  }) || [NO_FORM];
+  const eventHandlersKey = Object.keys(eventTarget).find(key => key.includes(HANDLER_IDENTIFIER));
+  const {
+    onChange
+  } = eventTarget[eventHandlersKey] || {};
+  return {
+    fieldName,
+    fieldPrefix,
+    formName,
+    onChange
+  };
+};
+export const getFieldValue = (currentIdentifiers, fieldSelector, state) => {
+  var _fieldSelector, _fieldSelector2, _fieldSelector3;
+  if (!isEmpty(currentIdentifiers)) {
+    const {
+      fieldName,
+      fieldPrefix,
+      formName
+    } = currentIdentifiers || {};
+    switch (fieldPrefix) {
+      case 'areaCode':
+      case 'prefix':
+        return (_fieldSelector = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector === void 0 ? void 0 : _fieldSelector.split('-')[0];
+      case 'phoneNumber':
+      case 'document':
+        return (_fieldSelector2 = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector2 === void 0 ? void 0 : _fieldSelector2.split('-')[1];
+      case 'verificationCode':
+        return (_fieldSelector3 = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector3 === void 0 ? void 0 : _fieldSelector3.split('-')[2];
+      default:
+        return fieldSelector(formName || '')(state, fieldName);
+    }
+  }
+};
+export const getIsKeyboard = eventTarget => {
+  const {
+    dataset: {
+      skbtn,
+      skinstance
+    },
+    classList
+  } = eventTarget;
+  return skbtn || skinstance || [...classList].some(cssClass => cssClass.includes('hg-'));
+};
+export const getIsInputForKeyboard = (nodeName, type) => nodeName === 'INPUT' && KEYBOARD_ALLOWED_TYPES.includes(type) || nodeName === 'TEXTAREA';
+export const clickForKeyboard = (formList, setFieldIdentifiers, setShowKeyboard, showKeyboard) => _ref2 => {
+  let {
+    target: eventTarget
+  } = _ref2;
+  const {
+    nodeName,
+    type
+  } = eventTarget;
+  const isKeyboard = getIsKeyboard(eventTarget);
+  const isInputForKeyboard = getIsInputForKeyboard(nodeName, type);
+  if (isInputForKeyboard) {
+    const identifiers = identifyField(eventTarget, formList);
+    if (identifiers.fieldPrefix === 'autocomplete') {
+      window.addEventListener('pointerdown', preventPointerDown);
+    }
+    setFieldIdentifiers(identifiers);
+    if (!showKeyboard) {
+      setShowKeyboard(true);
+    }
+  } else if (!isInputForKeyboard && !isKeyboard) {
+    setShowKeyboard(false);
+    window.removeEventListener('pointerdown', preventPointerDown);
+  }
+};
+export default {
+  identifyField,
+  getFieldValue,
+  getIsKeyboard,
+  getIsInputForKeyboard,
+  clickForKeyboard
+};