How to use the @paprika/tokens.overlay function in @paprika/tokens

entering: openedCss,
  entered: openedCss,
  exiting: closedCss,
  exited: closedCss,
};

export const Wrapper = styled.div`
  background-color: ${tokens.backgroundColor.level0};
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: all ${tokens.overlay.animationDuration}ms ease;
  ${({ state }) => states[state]};
`;

export const Header = styled(OriginalHeader)`
  flex: none;
`;

export const ContentWrapper = styled.div`
  flex-grow: 1;
  overflow-y: auto;
`;

const mapShirtSizesToValues = {
  [ShirtSizes.SMALL]: tokens.modal.sizes.sm,
  [ShirtSizes.MEDIUM]: tokens.modal.sizes.md,
  [ShirtSizes.LARGE]: tokens.modal.sizes.lg,
};

export const Dialog = styled.div`
  background-color: ${tokens.modal.backgroundColor};
  border-radius: ${tokens.modal.borderRadius};
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  overflow: auto;
  transition: all ${tokens.overlay.animationDuration}ms ease;
  width: 100%;
  ${({ state }) => states[state]};
  ${stylers.boxSizingStyles};
`;

export const Wrapper = styled.div`
  flex: 0 1 auto;
  margin: ${tokens.modal.margin};
  max-height: calc(100% - ${tokens.modal.margin} - ${tokens.modal.margin});
  max-width: calc(100% - ${tokens.modal.margin} - ${tokens.modal.margin});
  width: ${({ size }) => mapShirtSizesToValues[size] || mapShirtSizesToValues[ShirtSizes.MEDIUM]};
  ${stylers.z(1)};
`;

export const Header = styled(OriginalHeader)`
  flex: none;

if (event.key === "Escape" && isOpen) {
      event.stopPropagation();

      onClose();
    }
  }

  return (
    <>
      {isOpen && }
      
        
          {state => (
            
              {hasBackdrop && }
              {children && children(state)}
            
          )}
        
      
    
  );
};

}

  const _focusLockOptions = {
    returnFocus: true,
    ...focusLockOptions,
  };

  return (
    <>
      {isOpen && }
      
        
          {state => (
            
              {hasBackdrop && (
                
              )}
              
                {children && children(state)}